摘要：读一遍文档后的个人总结，重点在于整理语义化标签的定义规范，记录各种部件容易被忽略的特性。结构化，通过标签先后顺序和嵌套语法给树提供基础。标签列表基于个人理解即非官方描述，给标签划分为结构化标签语义化标签功能化标签，文档标签。
读一遍MDN文档后的个人总结，重点在于整理语义化标签的定义规范，记录各种部件容易被忽略的特性。关于HTML
HTML的作用可以简单总结为结构化、语义化和提供基础API支持（HTML5）。
结构化，通过标签先后顺序和嵌套语法给DOM树提供基础。
语义化，语义化标签给内容正确的意思、作用和外形。合理使用语义化标签的意义在于贴合规则，这样信息更加容易被检索和利用，比如说可以辅助浏览器自动生成大纲、更容易让屏幕阅读器读出网页内容。
功能支持，基础的比如超链接、图片显示功能，HTML5中的音视频功能、矢量图、3D图像等等。
标签列表基于个人理解（即非官方描述），给标签划分为结构化标签、语义化标签、功能化标签，文档标签。
结构化标签不包含特定语义及功能
div - 块级内容容器
span - 内联内容容器
br - 换行
hr - 分隔线
语义化标签包含特定语义，用户代理一般会给特殊样式表示，但无既定功能
header - 页面的页眉或者一个节段的头部
nav - 主要链接集合，footer里的附加链接集可以不用nav
main - 文档的主体部分，一般是包含中心主题或主要功能的内容放置区
article - 独立结构，可独立分配或可复用的内容结构，比如论坛帖子、评论
section - 一个节段，一个专题组
aside - 独立于主体内容的部分，比如说广告区，侧边栏
footer - 页面的页脚，或一个阶段的尾部
figure - 独立引用单元，比如引用图片，常和figcaption配合使用
h1-h6 - 标题
p - 文本段落
ul+li - 无序列表
ol+li - 有序列表
dl+dt+dd - 描述列表，一个术语可有多条描述，多个术语也可共享同条描述。dl - description list, dt - description terms, dd - description description
em - 强调语气，默认样式为斜体
strong - 着重强调，默认样式为粗体
i - 应用在传统上用斜体表达的内容，比如说技术术语、外国文字之类的
b - 应用在传统上用粗体表达的内容，比如说关键字、产品名称等
u - 应用在传统上用下划线表达的内容，比如说拼写错误
blockquote - 块引用，cite属性可表示引用源
q - 行内引用，同有cite属性
cite - 引文，如果引用源需要具体的文字显示，则需要这么使用
HTML5 是定义 HTML 标准的最新的版本
abbr - 缩略语
PRC
address - 联系信息
You can contact author at www.somedomain.com.
If you see any bugs, please contact webmaster.
You may also want to visit us:
Mozilla Foundation
1981 Landings Drive
Building K
Mountain View, CA 94043-0801
USA
功能化标签
a - 超链接
HTML5
相对URL和绝对URL的优劣：绝对URL需要查询DNS找到服务器再请求，相对URL则会根据当前服务器地址直接请求
URL可使用mailto链接直接出发邮件应用，mailto链接可加入一些邮件信息
使用download属性可指定保存文件名
img - 图片
添加字幕文件
audio - 音频
没有poster, width, height属性，其他与video类似
picture - 兼容多格式图片（比如webP的应用）的容器，支持自适应加载，edge13以上支持
// 标签内容跨越小部件时，可以用label包裹
input - 单行输入框
readonly属性规定无法输入，disabled属性禁止一切行为form表单数据中会剔除该部件数据。
type属性，email/password/search/tel/url/number/range/color/date/hidden/radio/checkbox/file
select + option - 下拉选择器
// optgroup增加选框标题
datalist - 自动补全选择器
兼容性：IE10以下不受支持，Safari不支持
文档标签
- 声明文档类型，规定页面需要遵循的规则
- 描述文档的数据
- 文档字符编码，描述在这个文档中允许被使用的字符集
- name部分规定描述的信息类型，content部分规定描述的信息内容
一些站点设定有专用的元数据协议会在其站点内显示特定信息，比如说Facebook的Open Graph Data
- 指定外部资源，并规定外部资源与当前文档的关系
附录
HTML5 标签列表 - From MDN
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/54682.html
摘要：提供了糟糕的支持，而虽然接近标准，但依旧未能完全正确的支持标准。尽管修复了许多的问题，但是依然延续实现中的其它故障主要是盒模型问题。因此大部分的声明将触发严格模式即依据标准的规则渲染网页。 深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文将从盒模型开始，一步步涉及一些常见的前端笔试和面试点 主要参考自第一篇文章，然而笔者在读的时...
摘要：提供了糟糕的支持，而虽然接近标准，但依旧未能完全正确的支持标准。尽管修复了许多的问题，但是依然延续实现中的其它故障主要是盒模型问题。因此大部分的声明将触发严格模式即依据标准的规则渲染网页。 深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文将从盒模型开始，一步步涉及一些常见的前端笔试和面试点 主要参考自第一篇文章，然而笔者在读的时...
摘要：为了实现文字环绕效果，规范规定的措施是使父容器塌陷，元素脱离文档流浮动产生，元素周围的内容转换为围绕元素排列。 选择器注意点 属性选择器 [attr^=value] - 开头或全等 [attr$=value] - 结尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含 选择器组 A > B - 直接子节点 A + B - 下一个兄弟节点 A...
摘要：在创建对象不论是普通对象还是函数对象的时候，都有一个叫做的内置属性，用于指向创建它的构造函数的原型对象，也就是。因为一个普通对象的构造函数所以原型链原型链的形成是真正是靠而非。参考文章最详尽的原型与原型链终极详解，没有可能是。 【前端芝士树】Javascript的原型、原型链以及继承机制 前端的面试中经常会遇到这个问题，自己也是一直似懂非懂，趁这个机会整理一下 0. 为什么会出现原型和...
摘要：维护浏览器和服务器端会话状态的一种方式，一般用于保存用户身份信息。服务器端生成推送到浏览器端，浏览器负责保存和维护数据。 Cookie 维护浏览器和服务器端会话状态的一种方式，一般用于保存用户身份信息。 服务器端生成Cookie推送到浏览器端，浏览器负责保存和维护数据。 特点 域名下的所用请求都会带上Cookie 每条Cookie限制在4KB左右 Cookie在过期时间之前一直有效，若...
阅读 1078·2021-11-23 09:51
阅读 2416·2021-09-03 10:47
阅读 2080·2019-08-30 15:53
阅读 2275·2019-08-30 15:44
阅读 1253·2019-08-30 15:44
阅读 1090·2019-08-30 10:57
阅读 1794·2019-08-29 12:25
阅读 1935·2019-08-27 14:19
