html5 新增的语义化标签

最新推荐文章于 2024-07-18 15:09:36 发布

只看五分钟佩奇的小姑姑

最新推荐文章于 2024-07-18 15:09:36 发布

阅读量574

点赞数

文章标签： html5 标签

本文链接：https://blog.csdn.net/Aloe_904/article/details/78397818

版权

前端的尘封往事专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5</title>

</head>
<body>
    <header>用在页面或板块的头部</header>
    <nav>导航标签</nav>

    <hgroup>
        <h1>侬好</h1>
        <h2>你好</h2>
    </hgroup>

    <section>清白之年</section>

    <figure>
        <img src="">
        <figcaption>视频</figcaption>
    </figure>

    <time datetime="0909">情人节</time><br>

    <input type="text" list="123">
    <datalist id="123">
        <option value="js">js</option>
        <option value="html">html</option>
        <option value="css">css</option>
    </datalist>

    <details>
        <summary>课程</summary><!-- 点击三角，展开<p>的内容 -->
        <p>js html css</p>
    </details>

    <address>作者信息</address>

    <mark>标记的一句话</mark><br>

    <progress value="78" max="200">
<!-- <span>89</span>% 向下兼容-->   
    </progress>

    <footer>用在页面或板块的底部</footer>

</body>
</html>

对页面结构的划分：

<header>用在页面或板块的头部</header>
<footer>用在页面或板块的底部</footer>
<nav>导航标签</nav>
<hgroup>：用于标题组合
<section></section>:页面上的板块，用于划分页面上的不同区域，或者划分文章里不同的节
<article></article>:用来在页面中表示一套结构完整且独立的内容部分
<aside></aside>:用来表示主体的附属信息，相关内容的引用，侧边栏，广告~

相对独立的语义化标签：

<figure></figure>:对媒体元素的组合。<img>表示图片。<figcaption></figcaption>表示视频
<time></time>:时间标签,有个参数是datetime
<datalist></datalist>:选项列表，(会有提示)与input配合使用，来定义input的值。input新增list属性，其值是datalist的ID.
<details></details>:用于描述文档或文档的某个细节，open是默认展开
<summary></summary>:details元素的标题 <dialog></dialog>:定义一段对话
<address></address>:定义文章或页面作者的详细信息，显示是倾斜
<mark></mark>:需要标记的词或句子，默认标记的背景是黄色
<progress></progress>:进度条，属性max表示最大限度，value表示此时的进度

只看五分钟佩奇的小姑姑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 新增的语义化标签

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>html5</title></head><body> <header>用在页面或板块的头部</header> <nav>导航标签</nav> <hgroup> <h1>侬好</h1> <h2
复制链接

扫一扫

专栏目录