HTML5新特性

语义化标签

什么是语义元素？

语义元素清楚地向浏览器和开发者描述其意义

非语义元素的例子：<div>和<span>—-无法提供关于其内容的信息

语义元素的例子：<form>、<table>以及<img>—-清晰地定义其内容

浏览器支持

对于布局元素,aside,nav等现代浏览器都支持(IE9及以上),其他的见下方

语义元素

  • article

    1
    2
    3
    <article>元素规定独立地自包含内容
        文档有其自身的意义，并且可以独立于网站其他内容进行阅读
    应用场景：博客、论坛、新闻

  • aside

    1
    2
    3
    4
    <aside>元素页面主内容之外的某些内容
        应与周围内容相关
        可以被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、名次解释，等等。
        在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以使友情链接，博客中的其它文章列表、广告单元等。

  • details

    1
    2
    3
    定义用户能够查看或隐藏的额外细节，一般与summary一起使用，用于名词解释或用于封装一个区块等
    内容对用户不可见，除非设置了open属性
    IE不支持

  • figcaption

    1
    定义<figure>元素的标题

  • figure

    1
    规定自包含内容，比如图示、图表、照片、代码清单等

  • footer

    1
    定义文档或节的页脚

  • header

    1
    规定文档或节的页眉,可用于页面的标题或文章的标题

  • main

    1
    规定文档的主内容，IE不支持，对于IE11版本,<main role="main">...</main>

  • mark

    1
    定义重要或强调的文本,高亮显示，行级标签

  • nav

    1
    定义导航链接

  • section

    1
    定义文档中的节

  • summary

    1
    2
    3
    4
    5
    6
    定义<details>元素的可见标题(IE和Safari不支持)
    <details>
        <summary>中奖名单</summary>
        <p>张三</p>
        <p>李四</p>
    </details>

  • time

    1
    2
    3
    4
    5
    定义时间/日期,让网页代码有条理，便于机器理解
    注：如果给定的日期不是正常日期或在公历中的日期之前，请不要使用此元素
    属性:
    	datetime:该属性表示此元素的时间和日期，并且属性值必须是一个有效的日期格式，并可包含时间。 如果此值不能被解析为日期，元素不会有一个关联的时间戳.
    	pubtime:该属性仍在被WHATWG 和 W3C组织设计和讨论中

  • meter

    1
    2
    3
    4
    5
    6
    7
    8
    定义度量衡 (IE不支持)
    属性:
    	value:当前值,如果设置了最小值和最大值，它必须介于最小值和最大值之间，如果没有指定或者格式有误，值即为0，如果给定的值不在最小值和最大值之间，它的值就等于它最接近的一段的值
    	min:最小值，如果设置了，它必须比最大值要小。如果没设置，默认为0
    	max：最大值，如果设置了，它必须比最小值要大，如果没设置，默认为1
    	low:指定范围的最小值，。如果设置了，它必须比最小值属性大，并且不能超过high值和最大值。未设置或者比最小值还要小时，其值即为最小值。
    	high:指定范围的最大值，如果设置了，它必须小于最大值，同时必须大于low值和最小值。如果没有设置，或者比最大值还大，其值即为最大值。
    eg:<meter value="100" min="80" max="120"></meter>公里/小时

  • progress

    1
    2
    3
    进度条(IE10及以上)
    属性：value/min/max
    eg:<p>任务已完成<p><progress value="70" min="0" max="100"></progress>70%</p></p>

  • dialog

    1
    2
    3
    对话框或窗口(IE不支持，Safari不支持,火狐53版本后需要修改dom.dialog_element.enabled)
    属性：open 规定dialog元素是有效的，用户可以与它进行交互
    <dialog open=""><p>Greetings, one and all!</p></dialog>

上述示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="referrer" content="no-referrer" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例</title>
    <style>
    aside {
    width: 40%;
    padding-left: .5rem;
    margin-left: .5rem;
    float: right;
    box-shadow: inset 5px 0 5px -5px #29627e;
    font-style: italic;
    color: #29627e;
}

    aside > p {
        margin: .5rem;
    }

    </style>
</head>
<body>
    <header>我是header</header>
    <nav>
        <a href="">HTML</a>
        <a href="">CSS</a>
        <a href="">JavaScript</a>
        <a href="">Vue</a>
        <a href="">React</a>
    </nav>
    <main>
        <section>
            <h1>我是section中的h1</h1>
            <p>我是section中的p标签</p>
        </section>
        <article>
            <p>Salamanders are a group of amphibians with a lizard-like appearance, including short legs and a tail in both larval and adult forms.</p>
            <aside>
                <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
            </aside>
            <p>Several species of salamander inhabit the temperate rainforest of the Pacific Northwest, including the Ensatina, the Northwestern Salamander and the Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects, worms and other small creatures.</p>
        </article>
        <figure>
            <p>figure可以规定自包含内容</p>
            <img src="./JDL[79$NWM(]U(@$TW96JM1.png" alt="图片">
            <figcaption>figcaption用于定义figure的标题</figcaption>
        </figure>
    </main>
    <footer>
        <mark>这里是footer</mark>
        <details>
            <summary>可以用summary来显示可见标题</summary>
            <p>我是detail的内容</p>
        </details>
    </footer>
    <p>这个日期是<time datetime="2001-05-15 19:00">May 15</time>.</p>
    <meter value="100" min="80" max="120"></meter>公里/小时
    <p>任务已完成<p><progress value="70" min="0" max="100"></progress>70%</p></p>
    <dialog open=""><p>Greetings, one and all!</p></dialog>

</body>
</html>

HTML
#HTML5
HTML5新特性
https://blog-theta-ten.vercel.app/2021/06/12/HTML5新特性/
作者
Chen
发布于
2021年6月12日
许可协议