HTML核心属性与实践-优快云博客

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" }
}

转载于:https://www.cnblogs.com/huangl/articles/6261978.html