《一》HTML5 新元素

花铛

已于 2025-01-21 15:04:30 修改

阅读量221

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： HTML5

于 2019-03-13 11:22:47 首次发布

本文链接：https://blog.youkuaiyun.com/wsln_123456/article/details/84937846

HTML5 专栏收录该内容

14 篇文章

订阅专栏

文档结构:

<!DOCTYPE html>//文档类型声明（这样设计是为了向前向后兼容）
<html>
    <head>
          <title>页面标题</html>
          <meta charset=”UTF-8”>
    <head>
    <body>
          页面主体内容
     <body>
</html>

HTML4.0 文档类型声明中还需要 html 的版本号和版本号所对应的 DTD 文件。

版本号是告知浏览器文档使用的是 html 的哪个版本。
DTD 代表的是文档类型定义，告知浏览器中的验证器来验证标签是否合法。

语法规范：

HTML5 制定的是一种妥协式的规范，语法变化是为了兼容互联网上成千上万不遵守 HTML 语法规范的网站。

标签不区分大小写。
元素可以省略结束标签。
当属性值等于属性名时，允许省略属性值。
允许属性值不使用引号。

新增的常用标签：

新增的结构性标签：

在之前的 HTML 页面中，基本上都是用 DIV+CSS 的布局方式。DIV 本身是一个没有任何语义的分块容器。

在 HTML5 中专门添加了：页眉、页脚、导航、文章内容等跟结构相关的结构元素标签。

header：定义文档的页眉。例如整个页面或者页面内一个内容区块的标题、公司 logo、导航等。
main：网页核心部分。
footer：定义文档的页脚。例如作者，相关的阅读链接，版权信息等。
article：代表一个独立的，完整的内容块。可独立于页面其他内容使用，可独立被外部引用。例如文章、博客、评论等。
section：定义文档中的节。一般用于成节的内容，会在文档中开始一个新的节，与其他部分有关联。例如章节、页眉、页脚等。

article 是独立的、完整的内容块，section 是把这个内容块分成几个有关联节。
div 关注的是结构的独立性，article 和 section 关注的是内容的独立性。
aside：用来装载非正文的、辅助的内容。例如侧边栏。
nav：表示页面中导航的部分。

新增的语义性标签：

mark：定义带有记号的文本。需要突出显示文本时，使用<mark></mark>标签。底色变为黄色。
abbr：标记一个缩写。可以在 <abbr> 标签中使用全局的 title 属性，这样当鼠标指针移动到<abbr>元素上时就能显示出缩写的完整版本。
```
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
```

progress：定义运行中的任务进度。

<progress value=”22” max=”100”> // 显示为长方形的进度栏，最大值为 100，当前值为 22

details：规定了用户可见或隐藏需求的补充细节。默认是隐藏细节，添加 open=”open” 即改变为一开始就可见细节。显示的是摘要，一点击小三角形，摘要所对应的详细内容就会显示。

<!-- <summary></summary> 标签为 <details></details> 标签定义了一个可见的标题，当用户点击标题前面的小三角形时，会显示出详细的信息 -->
<details>
      <summary>什么是翼龙</summary>
      <p>翼龙是生活在……</p>
</details>

废除的标签：

能用 css 代替的标签，例如 big 文字呈现大号字体、s 给文字增加中划线、u 给文字增加下划线等。
只有部分浏览器支持的标签，例如 bgsound 背景音乐、blink 文字闪烁、marquee 文字滚动等。
其他不常用的标签，例如使用 abbr 代替 acronym、使用 ul 替代 dir、使用 pre 替代 listing 等。
不再支持 frame 框架，例如 frame、frameset、noframes 标签；只支持 iframe 框架。

自定义属性 `data-`：

在 HTML5 中可为所有元素添加一种自定义的属性，这种属性的前缀以 data- 开头，添加完自定义属性后可以通过元素的 dataset 属性来访问其值。

<div id="test" data-age="24">24</div>

var test = document.getElementById('test')
test.dataset.age= '24'