HTML5 扩展内容学习
1、HTML accesskey 属性：带有指定快捷键的超链接：
示例代码：
<a href="http://www.w3school.com.cn/html/" accesskey="h">HTML 教程</a><br />
注释：请使用Shift + Alt + accessKey来访问带有指定快捷键的元素。
2、id、class与style：
1）、id保持唯一性；
2）、class多用在css样式中，定义样式类名；
3）、指定标签的内联样式；
3、contenteditable 可编辑属性 & spellcheck 拼写检查属性
<!DOCTYPE html>
<html>
<body>
<div contenteditable="true" spellcheck="true">
This text can be edited by the user.
</div>
</body>
</html>
4、语言lang 与 dir （文字书写方向）
<div lang="zh-CN“>浏览器可识别的中文内容</div> <div lang="en“>The browser can recognize the English content</div>
dir 属性标识一段文字的书写方向，ltr默认属性，从左到右显示，rtl从右向左显示文本内容。
<p dir="ltr">Write this text left-to-right!</p> <p dir="rtl">Write this text right-to-left!</p>
5、title属性：用title属性代替img元素的alt属性或作为图片的标题是被禁止的。
6、隐藏元素：
<p hidden>我是隐藏元素</p>
7、html的无障碍性
1）、确保每个元素可访问性（accessiablity）；
2）、确保任何人都有办法获取到网上的媒体内容；
3）、不要让身体上，心理上或者技术上的问题成为获取信息的障碍；
提升无障碍性的方法：
1）、为img标签添加alt属性；
2）、noscript 进行相关的提示；
3）、图形验证码与语音验证码相结合；
4）、对于视力不好的人群，文字和背景有足够的对比度；
5）、对于不方便使用鼠标的用户保证键盘的可操作性；
8、HTML语义化：
1）、html中的元素，元素的属性以及元素的属性值都拥有某些含义，开发者应该遵循语义化来编写html页面；
2）、html语义化的重要性：
a、提升代码的可读性，可维护性；
b、有利于搜索引擎优化；
c、提升无障碍性阅读体验；
9、扩展html属性标记：
1）、meta标签
<!-- 编码格式 --> <meta charset="utf-8"> <!-- 指定http header --> <meta http-equiv="Content-Security-Policy" content="script-src 'self'"> <!-- SEO 搜索引擎优化 --> <meta name="keywords' content="关键字" /> <meta name="description' content="页面介绍" /> <!-- 移动设备viewport --> <meta name="viewport' content="initial-scale=1" /> <!-- 关闭ios电话号码自动识别 --> <meta name="format-detection' content="telphone=no" /> <!-- 360浏览器指定内核 --> <meta name="renderer' content="webkit" /> <!-- 指定ie渲染模式 --> <meta http-equiv="X-UA-Compatible' content="IE=edge" />
2）、data-* 属性，存储一些没有可视化展现意义的额外信息。在外部使用JavaScript去访问这些属性的值同样非常简单。你可以使用getAttribute()配合它们完整的HTML名称去读取它们，但标准定义了一个更简单的方法：DOMStringMap你可以使用dataset读取到数据。为了使用dataset对象去获取到数据属性，需要获取属性名中data-之后的部分(要注意的是破折号连接的名称需要转换为驼峰样式的名称)。
<article id="ele" data-columns="3" data-number="123" data-parent="cars"> …… </article>
var article = document.querySelector('#ele');
article.dataset.columns // "3"
article.dataset.number // "123"
article.dataset.parent // "cars"
data attributes设定为HTML属性，他们同样能被CSS访问.比如你可以通过generated content使用函数attr()来显示data-parent的内容：
article::before {
content: attr(data-parent); //cars
}
同样可以在CSS中使用属性选择器根据data来改变样式：
article[data-columns='3'] {
width: 400px;
}
3）、HTML Microdata ，详情将W3C官网：https://www.w3.org/TR/microdata
<div itemscope> <p>My name is <span itemprop="name">Neil</span>.</p> <p>My band is called <span itemprop="band">Four Parts Water</span>.</p> <p>I am <span itemprop="nationality">British</span>.</p> </div>
4）、JSON-LD：用于关联数据的基于JSON的序列化 ，W3C官网参考链接：https://www.w3.org/TR/json-ld
{
"http://schema.org/name": "Manu Sporny",
"http://schema.org/url": { "@id": "http://manu.sporny.org/" }, ← The '@id' keyword means 'This value is an identifier that is an IRI'
"http://schema.org/image": { "@id": "http://manu.sporny.org/images/manu.png" }
}
