《一》HTML5新元素

花铛

已于 2022-07-04 17:31:13 修改

阅读量160

点赞数

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

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

本文链接：https://blog.csdn.net/wsln_123456/article/details/84937846

版权

HTML5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文档结构:

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

HTML4.0文档类型声明中还需要html的版本号和版本号所对应的DTD文件。
版本号是告知浏览器文档使用的是html哪个版本的文档。
DTD代表的是文档类型定义，告知浏览器中的验证器来验证标签是否合法。

语法规范：

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

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

新增的常用标签：

新增的结构性标签：

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

section：定义文档中的节或段。比如章节，页眉，页脚或文档中的其他部分。一般用于成节的内容，会在文档流开始一个新的节，与其他部分有关联，由标题和内容组成。
article：是一个特殊的section标签，比section有更明确的语义。代表一个独立的，完整的相关内容块。比如文章，博客，评论等。可独立于页面其他内容使用，可独立被外部引用。由标题，内容和脚注组成。article可嵌套article，内层的内容要与外层的有关联。

article是独立的、完整的内容块，section是把这个内容块分成几个有关联的段或节。
div关注的是结构的独立性，article和section关注的是内容的独立性。
header：标题块元素，定义文档的页眉，通常是一些引导和导航信息。比如整个页面或者页面内一个内容区块的标题、公司logo、导航等。不局限于写在网页头部，也可以写在网页内容里面。
main：网页核心部分。
footer：定义section或文档的页脚，包含与页面、文章或部分内容有关的信息。比如作者，相关的阅读链接，版权信息等。
nav：表示页面中导航的部分。
aside：用来装载非正文的、辅助的内容。比如侧边栏。被视为页面里面一个单独的部分，它包含的内容与页面的主要内容是分开的，可以被删除而不会影响到网页的内容、章节或是页面所要传达的信息。
hgroup：对网页或区段的标题元素进行组合。

figure：用于对元素进行组合。多用于图片与图片描述组合。

<figure>
    <img src=””>
    <figcaption>这是一张图片</figcaption>
</figure>

在之前的HTML页面中，基本上都是用DIV+CSS的布局方式。DIV本身是一个没有任何语义的分块或者分区段的容器。当要对容器中的内容进行统一装饰时，可以把它放在DIV里。

新增的语义性标签：

mark：定义带有记号的文本。需要突出显示文本时，使用<mark></mark>标签。底色变为黄色。IE8及更早的版本不支持mark标签。

progress：定义运行中的任务进度。IE9及更早的版本不支持progress标签。

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

在这里插入图片描述

ruby：定义ruby注释（中文注音或字符），往往与<rt><rp>标签一起使用。
ruby标签包含着一段需要被说明的文字，rt元素中的内容就是用于说明这一段文字的注释。支持 ruby 元素的浏览器不会显示 rp元素的内容，rp 元素只定义当浏览器不支持 “ruby” 元素时所要显示的内容。
IE8及更早的版本不支持ruby标签。
```
<ruby>
  汉 <rt>Han</rt>
  字 <rt>zi</rt>
</ruby>
```
details：规定了用户可见或隐藏需求的补充细节。默认是隐藏细节，添加open=”open”即改变为一开始就可见细节。显示的是摘要，一点击小三角形，摘要所对应的详细内容就会显示。
<summary></summary>标签为<details></details>标签定义了一个可见的标题，当用户点击标题前面的小三角形时，会显示出详细的信息。
目前，只有chrome和safari6支持details标签和summary标签。
```
<details>
      <summary>什么是翼龙</summary>
      <p>翼龙是生活在……</p>
</details>
```

datalist：定义选项列表。与input配合使用，来定义input可能的值。IE9及更早的版本和safari不支持datalist标签。

<input list=”browsers”>//list定义使用哪个选项列表；鼠标放到input上会在右边出现一个小倒三角形，点击会弹出datalist的选项列表，也可以手写输入，会显示满足的列表。
<datalist id=”browsers”>
      <option value=”1”></option>
      <option value=”2”></option>
      <option value=”3”></option>
</datalist>

abbr：标记一个缩写。可以在 <abbr> 标签中使用全局的 title 属性，这样在鼠标指针移动到<abbr>元素上时就能显示出缩写的完整版本。
```
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
```
output：可以定义不同类型的输出。

for:一个或多个元素的 id 列表，以空格分隔，规定计算中使用的元素与计算结果之间的关系。
name：定义对象的唯一名称（表单提交时使用）。
```
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
     <input type="number" id="a" value="50">+<input type="number" id="b" value="50">=<output name="x" for="a b"></output>
</form>
```

废除的标签：

能用 css 代替的标签，比如：basefont、big、center、font、s、strike、tt、u；
不再支持 frame 框架，frame、frameset、noframes，只支持 iframe 框架。
只有部分浏览器支持的标签，applet、bgsound、blink、marquee 等。
其他被废除的标签，比如：使用 ruby 代替 rb、使用 abbr 代替 acronym、使用 ul 替代 dir、使用 pre 替代 listing。

自定义属性 `data-`：

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

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

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

花铛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《一》HTML5新元素

语法规范：标签不区分大小写；元素可以省略结束标签；当属性值等于属性时，允许省略属性值；允许属性值不使用引号；在HTML5中专门添加了：页眉，页脚，导航，文章内容等跟结构相关的结构元素标签。section：定义文档中的节或段。比如章节，页眉，页脚或文档中的其他部分。一般用于成节的内容，会在文档流开始一个新的节，与其他部分有关联，由标题和内容组成。article：是一个特殊的section标签，比section有更明确的语义。代表一个独立的，完整的相关内容块。比如文章，博客，评论等。可独立于页面
复制链接

扫一扫