1.全局属性
几乎所有元素都具有的属性
- 1.1 accesskey & tabindex
<p>
<input accesskey="i" placeholder="Press Ctrl+Alt+I">
</p>
<!--使用组合键访问-->
<p>
<a href="http://example.com" accesskey="e" tabindex="-1">
Press <kbd>Ctrl+Alt+E</kbd>
</a>
</p>
<!--tabindex设置为-1表示tab访问不到,主要用来设置顺序-->
复制代码
-
1.2 id,class & style
- id保证唯一性
- class多用在CSS
- style指定内联样式
-
1.3 contenteditable & spellcheck
<section contenteditable spellcheck="true">
<h1>可读性和易读性</h1>
<p>this is a paragrap</p>
</section>
<!--contenteditable可编辑 spellcheck拼写检查-->
复制代码
- 1.4 语言lang & dir
<div lang="zh-CN">
<p>你好啊小朋友 <span lang="en">Hello</span>这是希腊语
<span lang="el">Γεια σας, μικρά σκουπίδια</span>
</p>
<p dir="rtl" lang="ar">مرحبا ، القليل من القمامة</p>
</div>
<!--lang指定语言 dir指定书写方向,rtl是从右到左 阿拉伯语-->
复制代码
-
1.5 title属性
-
1.6 hidden属性
一般css中display:none ,再次显示时无法知道是block还是inline-block hidden属性控制避免上述情况
-
提升无障碍性
- 为img提供alt属性
- noscript
- input和label对应
- 图形验证码与语音验证码
- 文字和背景有足够的对比度
- 键盘可操作
-
语义化
- HTML中的元素,属性以及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
-
为什么语义化很重要
- 提升代码的可读性,可维护性
- 搜索引擎优化
- 提升无障碍性
2. 扩展HTML
-
2.1 meta标签
-
2.2 data-*
<ul>
<li data-id="1">apple</li>
<li data-id="2">banana</li>
<li data-id="3">mango</li>
</ul>
<!--通过data-id获取元素-->
复制代码
- 2.3 microdata
- HTML5中的一个规范
- 在HTML中通过属性嵌入格式化数据
- 提供给搜索引擎,浏览器(插件)使用
通过itemscope进行分组, 格式化数据, 对搜索引擎聚合起作用,从全网搜索
- 2.3 JSON-LD
为了不打乱HTML结构,用JSON-LD提取microdata的格式化信息