HTML5 新增语义化标签（一）

1.语义化的好处

a.去掉或样式丢失的时候能让页面呈现清晰的结构。

b.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权值。

c.便于团队开发和维护。

2.HTML5 新增语义化标签

header

定义文档的头部区域。

一般作为介绍内容或者导航链接栏的容器。

块元素。
footer 定义文档或文档的一部分区域的页脚。
article

定义页面独立的内容区域。

标签定义的内容本身必须是有意义且必须是独立于文档的其他部分。

例如：论坛帖子、博客文章、新闻故事、评论。
aside 定义页面的侧边栏内容。
time

定义日期或时间。

datetime确切时间

例子：

我准备在<time datetime="2016-05-01">劳动节</time>
ruby

加注释。

ruby和rt一起用，rt的内容显示在文字上面，相当于拼音。

rp定义不能显示时候的内容。

<ruby>
    大<rt>da</rt>
    <rp>该标签不能正常显示</rp>
</ruby>
details

用于描述文档或文档某个部分的细节。

summary 显示details的标题。

有些浏览器不支持。

<details>
    <summary>点击查看更多</summary>
    <h2>点击可以看到这段文字</h2>
    <img src="test.jpg" alt="未能显示图片" title="隐藏图片"/>
</details>
 mark

 定义带着记号的文本，它会给你突出显示的文本加一个背景色。

例：

<p>你最喜欢的<mark>课程</mark>是什么？</p>
 nav  定义导航链接的部分。作为标注一个导航链接的区域。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DivLayout</title>
    <style type="text/css">
        header{
            height: 100px;
            background-color: red;
        }
        nav{
            height: 50px;
            background-color: green;
        }
        article{
            height: 400px;
            display: inline-block;
            width: 34%;
            background-color: blue;
        }
        aside{
            height: 400px;
            display: inline-block;
            width: 65%;
            background-color: crimson;
        }
        footer{
            height: 100px;
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <header>
        <h1>页面的头部</h1>
    </header>
    <nav>&lt;nav&gt;</nav>
    <div class="content">
        <time datetime="2016-05-01">劳动节</time>
        <article>&lt;article&gt;</article>
        <aside>&lt;aside&gt;</aside>
    </div>
    <footer>
        <address>&copy;博客园2016</address>
    </footer>
</body>
</html>
新增标签1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增标签2</title>
</head>
<body>
   我准备在<time datetime="2016-05-01">劳动节</time>出去玩。
   <hr/>
    <ruby>
        大<rt>da</rt>
        <rp>该标签不能正常显示</rp>
    </ruby>
     <details>
         <summary>点击查看更多</summary>
         <h2>点击可以看到这段文字</h2>
         <img src="test.jpg" alt="未能显示图片" title="隐藏图片"/>
     </details>
     <p>你最喜欢的<mark>课程</mark>是什么？</p>
    <nav>
        <a href="#">HTML</a>
        <a href="#">CSS</a>
        <a href="#">jQuery</a>
    </nav>
</body>
</html>
新增标签2

 

posted @ 2019-07-08 20:25  C_XingM  阅读(168)  评论(0)    收藏  举报