常见的html5新增的语义化标签

最新推荐文章于 2024-06-02 09:58:03 发布

jerny2017

最新推荐文章于 2024-06-02 09:58:03 发布

阅读量495

点赞数

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

本文链接：https://blog.csdn.net/jerny2017/article/details/79908371

版权

HTML 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

header 页面头部
nav  导航
footer 页脚
article 定义页面独立的内容区域，一般为文章，论坛帖子，博客文章，新闻故事，评论
aside  定义页面的侧边栏内容
details 文档某个部分的细节
summary 是details中的标题
time  一定日期或者时间
ruby 注释：比如汉字上部加拼音
mark  标记

【语义化的好处】
    页面更加清晰
    搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重
    便于团队的开发和维护

<address>&copy尚学堂</address>

    <ruby>
        字<rt>zi</rt>
        <rp>该标签不能正常显示</rp>
    </ruby>

    <details>
        <summary>点击查看更多</summary>
        <img src="../img/bag.png" title="bag" alt="图片未显示">
    </details>

    你好，我是<mark>Jerny</mark>
    今天是<time datetime="2018-4-11">4月11号</time>工作日

    <article>
        <h2>jQuery API</h2>
        <div>
            <p>
                jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new to jQuery, we recommend that you check out the jQuery Learning Center.
            </p>
        </div>
    </article>

progress进度标签，显示进度，跟range有别
value当前值  max最大值 最小值默认为0，不需设置

section用处
定义文档中的区块，和div类似
定义文章，一帮要带标题，较少使用

video 定义视频
属性： src controls

10:00开始<progress value="1" max="2"></progress>12:00结束
    <hr>
    <video src="" controls>您的浏览器不支持video标签</video>
    <video controls>
        <!--
        可以放不同格式的视频文件，总有一个可以播放
        目前支持的视频类型，其他格式需要转换
        video/ogg
        video/mp4
        video/webm
        -->
        <source src="" type="video/ogg">
        <source src="" type="video/mp4">
        <source src="" type="video/webm">
        您的浏览器不支持video标签
    </video>
<hr>
    <audio controls>
        <source src="" type="audio/ogg">
        <source src="../res/信仰.mp3" type="audio/mpeg">
        您的浏览器不支持audio标签
    </audio>
    <hr>
    <input list="cars">
    <datalist id="cars">
        <option value="宝马"></option>
        <option value="奥迪"></option>
        <option value="奔驰"></option>
    </datalist>
<hr>
<embed src="" type="application/x-shockwave-flash">中间不需要写文字，跟video audio不一样</embed>
    <br>
    <br>
    <br>
    <br>
    <br>