HTML规范
- HTML规范文档
-
H4时代被规定为错误的行为，在H5时代全都被合理化了，比如标签不区分大小写、只有开始标签没有结束标签、属性值不带引号等等错误，H5全部允许它们存在
遗漏的标签知识
-
<title>标签 定义文档的标题，它是head部分中唯一必需的元素 <address>标签- 该标签定义文档或文章的作者/拥有者的联系信息
- 不应该用于描述通讯地址，除非它是联系信息的一部分
- 这个元素不能包含除了联系信息之外的任何信息，比如出版日期（这应该包含在
<time>元素中）。
- 应该使用
<h1> - <h6>来表示标题，使用<em>标签来表示强调的文本，应该使用<strong>标签来表示重要文本，应该使用<mark>标签来表示标注的/突出显示的文本。 <base>标签- 该标签用于指定一个文档中包含的所有相对
URL的基本URL - 通常情况下，浏览器会从当前文档的
URL中提取相应的元素来填写相对URL中缺少的部分，使用<base>标签后，浏览器将不再使用当前文档的URL，而使用<base>标签中指定的基本URL来解析所有的相对URL，包括<a>、<img>、<link>、<form>标签中的URL - 在一个文档中，最多能使用一个
<base>元素 - 一般把
<base>标签排在head元素中第一个元素的位置，这样head中其他元素就可以利用<base>元素中的信息了
- 该标签用于指定一个文档中包含的所有相对
<bod>标签- 该标签用于覆盖当前文本的朝向，它使得字符按给定的方向排列
<button>标签与<input type="button">- 如果在
HTML表单中使用button元素，不同的浏览器会提交不同的值。Internet Explorer将提交<button>与<button/>之间的文本，而其他浏览器将提交value属性的内容；所以为了避免提交不同的值，在HTML表单中最好使用input元素来创建按钮 - 使用
button元素与使用 input 元素创建的按钮之间的不同之处在于：在<button>与<button/>之间 ，可以放置内容，比如文本或图像 - 使用
input元素来创建按钮请始终为按钮规定type属性。Internet Explorer的默认类型是"button"，而其他浏览器中（包括W3C规范）的默认值是"submit"。
- 如果在
<caption >标签- 该标签定义表格标题，必须紧随 table 标签之后。
- 只能对每个表格定义一个标题，通常这个标题会被居中于表格之上
<cite>标签- 通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题
- 它可以使你或者其他人从文档中自动摘录参考书目，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示（当然需要通过写相应的程序来处理）
- 该标签体现了语义化的便利
<details>标签和<summary>标签-
<summary>标签为details定义标题 - 标题是可见的，用户点击标题时，会显示出
details
-
<meter>标签- 该标签定义已知范围或分数值内的标量测量，比如说表示3/10
- 注意表示进度不应该用该标签而是
<process>标签
<figure>标签与<figcaption>标签-
<figure>标签规定独立的流内容（图像、图表、照片、代码等等），figure元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。 -
<figcaption>标签定义figure元素的标题，<figcaption>标签应该被置于figure元素的第一个或最后一个子元素的位置
-
<template>标签- 该标签可以定义
html片段，但是不会被渲染 - 可以通过
js来将片段显示到页面上
- 该标签可以定义
<table>标签- 单元格默认平分
table的宽度,table决定了整个表格的宽度 - 不设置单元格宽高时，宽高由内容撑开;
- 只设置高度时，内容撑开宽度，当宽度不可再变时，将会撑开高度;
- 只设置宽度时，内容只撑开高度;
- 当宽高均设置时，内容可以只撑开表格高度，而不能撑开宽度
-
table里面的单元格的宽度会转换成百分比，当单元格宽度和超过table的宽度是不会溢出的，而是会撑开高度
- 单元格默认平分
<link>标签- 定义文档与外部资源的关系
-
rel = stylesheet，链接外部样式表 -
rel = dns-prefetch，dns预解析（异步） -
rel = prefetch，预加载图片等（异步） -
rel = prerender，预渲染（异步） -
rel = icon，定义title图标 -
rel = alternate，定义文档的替代版本（比如打印页、翻译或镜像），可做RSS。 - ……..见
W3C
课后小验证
HTML是什么，HTML5是什么-
HTML是超文本标记语言（Hyper Text Markup Language） - 是用来描述网页的一种标记语言，而不是编程语言；标记语言是一套标记标签
- 与
XML的区别：HTML的设计宗旨是显示数据，而XML的设计宗旨是传输数据；HTML的标签是预定义的，而XML的标签是使用者自己定义的 -
HTML5是最新的HTML标准，拥有新的元素，更丰富的内容，更强大的适配性
-
HTML元素标签、属性都是什么概念？-
HTML元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码，开始标签与结束标签之间的内容是HTML元素的元素内容 -
HTML元素标签就是指一个HTML元素的开始标签和结束标签，浏览器不会直接显示标签，但是会使用这些标签来解释页面的内容 -
HTML元素属性提供了有关HTML元素的更多的信息，比如图片的URL，元素的类名等
-
文档类型是什么概念，起什么作用？
-
Web世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。 -
HTML文档中使用<!DOCTYPE>声明帮助浏览器正确地显示网页，<!DOCTYPE>声明告诉了浏览器当前的HTML文档是用什么HTML版本编写的，这样浏览器才能完全正确地显示出HTML页面 -
<!DOCTYPE>声明必须是HTML文档的第一行，位于<html>标签之前，且要注意它不属于HTML标签 - 在
HTML 4.01中，<!DOCTYPE>声明引用DTD，因为HTML 4.01基于标准通用标记语言（SGML）。DTD规定了标记语言的规则，这样浏览器才能正确地呈现内容 -
HTML5不基于SGML，所以不需要引用DTD
-
meta标签都用来做什么的？- 提供有关页面的元信息，常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。
-
charset属性规定文档的编码方式，建议为UTF-8 -
content属性定义与http-equiv或name属性相关的元信息 http-equiv属性把对应的content属性关联到HTTP头部。* `content-type`：用于指定内容类型，默认为`text/html` * `refresh`: 设置文档多久刷新一次 * `default-style`：指定首选的样式表name属性把对应的content属性关联到一个名词。* `author` * `description` * `generator` * `keywords` * `viewport`：控制页面的尺寸和比例，以便响应式meta标签是可扩展的，各浏览器产商可以自己定义一些特定的内容* `http-equiv = "X-UA-Compatible" content = "IE = edge"`：为 `IE8` 指定不同的页面渲染模式 * `name = "format-detection" content="telphone = no"`：关闭`iOS`电话号码自动识别 * `name = "renderer" content = "webkit"`：`360`浏览器指定内核
Web语义化是什么，是为了解决什么问题-
Web语义化简单的说就是在编写HTML文档时，选择合适的标签将内容本身进行合理的描述，而不去管它的样式，使页面有良好的结构，页面元素有含义；同时对于类名、id名称也要命名的能够描述内容；从而能够让人和机器都容易理解（提升可读性、可维护性） -
Web语义化在方便开发人员阅读代码同时也有利于让机器（搜索引擎，爬虫）读懂文档内容，从而利用机器来对索引好的内容作各种处理和挖掘，比如SEO（搜索引擎优化） -
Web语义化在抛开CSS的情况下，页面也能呈现出清晰的结构 -
Web语义化可以方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以更合适的方式来渲染网页（提高无障碍性） -
Web语义化有利于SEO
-
链接是什么概念，对应什么标签？
- 指从一个网页指向一个目标的连接关系
- 对应
<a>标签，<link>标签，<script>标签，<area>标签
表单标签都有哪些，对应着什么功能，都有哪些属性
标签 功能 form 表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息 fieldset 将表单内的相关元素分组 fieldset 为 fieldset 元素定义标题 button 表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方 input 用于为基于Web的表单创建交互式控件，以便接受来自用户的数据 textarea 表示一个多行纯文本编辑控件 option 用于定义在<select>, <optgroup> 或<datalist> 元素中包含的项。<option> 可以在弹出窗口和 html 文档中的其他项目列表中表示菜单项 optgroup 会创建包含在一个 <select> 元素中的一组选项 select 是一种表单控件，可创建选项菜单。菜单内的选项为<option> , 可以由 <optgroup> 元素分组。选项可以被用户预先选择。 datalist 与input元素结合来定义选项列表，包含了一组<option>元素,这些元素表示input的合法值 meter 用来显示已知范围的标量值或者分数值 process 用来显示一项任务的完成进度 output 表示计算或用户操作的结果 label 表示用户界面中项目的标题 ol,ul,dl,dd,dt等这些标签都适合用在什么地方，举个例子-
ol为有序列表，适用于有顺序的列表，比如说排行榜 -
ul为无序列表，适用于不在意顺序的列表，比如说菜单 -
dl为定义列表，dt是定义列表的标题，dd是定义列表的具体描述，比如说术语解释表
-
如何提升无障碍性
- 为 img 提供 alt 属性
- noscript
- input 和 label 对应
- 图形验证码与语音验证码
- 文字和背景有足够对比度
- 键盘可操作
- 语义化
JSON-LDJavaScript Object Notation for Linked Data- 是一种基于
JSON表示和传输互联数据（Linked Data）的方法 - 结构化数据就是按一定的结构产生的一系列描述你网站内容的信息，它能帮助搜索引擎的爬虫更好地了解你网页中所要展现的内容，并在搜索结果中有更丰富得展现，而非千篇一律的链接，即提高搜索排名，美化搜索结果。它还能够被其他一些应用所读取使用，比如：
Gmail,Facebook,Twitter等，甚至还可以是Siri，可穿戴设备，或是车载导航系统。 - JSON-LD与互联数据(Linked Data)
示例
<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Person", "name": "John Doe", "jobTitle": "Graduate research assistant", "affiliation": "University of Dreams", "additionalName": "Johnny", "url": "http://www.example.com", "address": { "@type": "PostalAddress", "streetAddress": "1234 Peach Drive", "addressLocality": "Wonderland", "addressRegion": "Georgia" } } </script>
