HTML知识体系(待续)

目录

1、标签
2、属性
3、事件
4、视频/音频
5、画布
6、浏览器本地存储

1、标签

<area> 定义图像映射中的区域。
<article> 独立于文章内容
<aside> 的内容可用作文章的侧栏
<audio> 标签定义声音,比如音乐或其他音频流。
<b> 粗体文本,标签定义文本中需要强调的部分。
<strong> 定义重要的文本。
<button> 标签定义按钮

  • button标签一定要写type属性,因为不同的浏览器会提交不同type 默认值;
  • 元素内可以放置内容,比如文本或图像。这是该元素与通过 input 元素创建的按钮的不同之处;
  • 如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的按钮值。请使用 input 元素在 HTML 表单中创建按钮。

<canvas>

  • 标签定义图形,比如图表和其他图像。
  • 标签只是图形容器,您必须使用Javascript脚本来绘制图形

<caption> 定义表格标题。

  • 必须放置在table标签内的第一个元素。
  • 每个表格只能规定一个标题

<footer>

  • 标签定义 section 或 document 的页脚。
  • 在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。
  • 假如您使用 footer 来插入联系信息,应该在 footer 元素内使用 <address> 元素

<form> 标签标签用于创建供用户输入的 HTML 表单。

  • form 元素包含一个或多个表单元素,比如:
    • button
    • input
    • select
    • textarea
    • keygen
    • object
    • output

<head> 元素是所有头部元素的容器。

  • 位于 <head> 内部的元素可以包含脚本、指引浏览器找到样式表、提供元信息,等等。
  • 请记得始终为文档规定标题!
  • 下面是可用在 head 部分的标签:
    • <base>
    • <link>
    • <meta>
    • <script>
    • <style>
    • <title>

<header> 标签定义文档的页眉,一般放在<article>表示的文档标签内。

<html> 标签告知浏览器这是一个 HTML 文档。

  • html 元素是 HTML 文档中最外层的元素。
  • html 元素也可称为根元素。

<iframe> 标签创建包含另一个文档的行内框架。

  • 在 HTML 5 中,仅仅支持 src 属性

<img> 标签定义 HTML 页面中的图像。

  • 请注意,从技术上讲,图像并不会插入 HTML 页面中,而是链接到 HTML 页面上。
  • <img> 标签的作用是为被引用的图像创建占位符。
  • <img> 标签有两个必需的属性:src 和 alt。

<input> 标签规定用户可输入数据的输入字段。

  • 根据不同的 type 属性,输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等。

  • input 元素是空的,它只包含属性

  • 请使用 label 元素为表单控件定义标签(label)。

  • type属性的值:

    • text
    • button
    • checkbox(type="checkbox"时,必须有 value 属性)
    • radio(type="radio"时,必须有 value 属性)
    • password
    • number
    • file (type="file"时,不能使用 value属性)
    • date
    • datetime
    • email
    • range
    • hidden
    • month
    • reset
    • submit
    • time
    • url
    • week
    • datetime-local

<label> 标签为 input 元素定义标签(label)。

  • label 元素不会向用户呈现任何特殊的样式。不过,它为鼠标用户改善了可用性,因为如果用户点击 label 元素内的文本,则会切换到控件本身。
  • <label> 标签的 for 属性应该等于相关元素的 id 元素,以便将它们捆绑起来。

<link> 标签定义文档与外部资源之间的关系。

  • 标签大多数时候都用来连接样式表。
  • link 元素是空元素,它仅包含属性。
  • 该元素只能位于head 部分,但可以出现任何次数。

<map> 标签用于定义客户端图像映射。

  • 图像映射指的是带有可点击区域的图像。
  • name 属性在 map 元素中是必需的。该属性与 <img> 标签的 usemap 属性相关联,以创建图像与映射之间的关系。
  • map 元素包含若干 area 元素,定义图像映射中的可点击区域。
  • 在 HTML5 中,如果同时规定了 <map> 标签的 id 属性,则必须为 name 属性规定相同的值。
  • area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

  • 标签位于文档的头部,不包含任何内容。
  • 标签的属性定义了与文档相关联的名称/值对。
  • name属性的值:
    • author
    • description
    • keywords
    • generator
    • revised
    • others

<nav> 标签定义导航链接的部分。

  • 如果文档中有“前后”按钮,则应该把它放到 <nav> 元素中。

<noscript> 元素用来定义在脚本未被执行时的替代内容(文本)。

  • 此标签用于可识别 <script> 标签但无法支持其中脚本的浏览器。
  • 如果浏览器支持脚本,那么它不会显示出 noscript 元素中的文本。
  • 无法识别 <script> 标签的浏览器会把标签的内容显示到页面上。为了避免浏览器这样做,您应当在注释标签中隐藏脚本。老式的(无法识别 <script> 标签的)浏览器会忽略注释,这样就不会把标签的内容写到页面上,而新式的浏览器则懂得执行这些脚本,即使它们被包围在注释标签中!

<script> 标签用于定义客户端脚本,比如 JavaScript。

  • script 元素既可包含脚本语句,也可以通过 "src" 属性指向外部脚本文件。
  • JavaScript 通常用于图像操作、表单验证以及动态内容更改。
  • 如果使用 "src" 属性,则 <script> 元素必须是空的。
  • 如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行,即html和javascript 代码同时进行)
  • 如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行(先解析html代码,在执行Javascript 代码)
  • 如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本(阻塞html 代码的解析,页面加载缓慢,甚至导致页面空白)

<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

<source> 标签为媒介元素(比如 <video><audio>)定义媒介资源。

<style> 标签定义 HTML 文档的样式信息。

  • scoped 属性是 HTML 5 中的新属性,它允许我们为文档的指定部分定义样式,而不是整个文档。
  • 如果使用 "scoped" 属性,那么所规定的样式只能应用到 style 元素的父元素及其子元素。
  • 如需链接外部样式表,请使用 <link> 标签。
  • 如果未定义 scoped 属性,那么 <style> 元素必须位于 <head> 部分中

<datalist> 定义下拉列表。
<summary> 标签包含 details 元素的标题,"details" 元素用于描述有关文档或文档片段的详细信息。

  • "summary" 元素应该是 "details" 元素的第一个子元素。

<table> 标签定义 HTML 表格。

  • 一个简单的 HTML 表格包括 table 元素,一个或多个 tr、th 以及 td 元素。
  • tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。
  • 更复杂的 HTML 表格也可能包含 caption, col, colgroup, thead, tfoot, tbody 等元素。
  • 在 HTML5 中,仅支持 "border" 属性,并且只允许使用值 "" 或 "1"

<text-area>定义一个文本区域 (text-area) (一个多行的文本输入区域)。

  • 用户可在此文本区域中写文本。
  • 在一个文本区中,您可输入无限数量的文本。
  • 文本区中的默认字体是等宽字体 (fixed pitch)。

<video> 标签定义视频,比如电影片段或其他视频流。

  • 可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。

2、属性

属性 描述
contenteditable true / false 规定是否允许用户编辑内容。
contextmenu menu_id 规定元素的上下文菜单。
data-yourvalue value 创作者定义的属性。HTML 文档的创作者可以定义他们自己的属性。必须以 "data-" 开头。
draggable true / false / auto 规定是否允许用户拖动元素。
hidden hidden 规定该元素是无关的。被隐藏的元素不会显示。

3、事件

4、视频/音频

5、画布

6、本地存储

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1 92
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,229评论 1 41
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,450评论 1 45
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,875评论 0 0
  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 3,623评论 0 7