语义化元素：有意义的元素。

对语义化的理解：

  1. 正确的标签做正确的事情；
  2. HTML5语义化元素让页面内容结构化清晰；
  3. 便于开发人员阅读，理解，维护；
  4. 搜索引擎爬虫可以依赖语义化元素来确定上下文和每个关键字权重，利于SEO。

支持情况：IE9以上，现代浏览器！

原先我们都是用这样的代码进行布局：

     <div class="nav"></div>

     <div class="header"></div>

     <div class="footer"></div>

而现在，我们可以使用语义化元素：

  1. <header>文档头部区域</header>
  2. <nav>导航链接区域</nav>
  3. <section>文档节区域(可以包含内容，标题，页眉，页脚等)</section>
  4. <article>定义文章区域</article>
  5. <aside>定义页面主区域内容之外的内容(比如侧边栏)</aside>
  6. <footer>定义底部区域</footer>
  7. <figure>定义独立的流内容(比如图像，代码等);与主内容相关，但删除后不会对主内容造成影响</figure>
  8. <figcaption>定义figure标题</figcaption>：放置在<figure></figure>之间！

示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>html5</title>

     <link rel="shortcut icon" href="test.jpg" type="image/x-icon">

     <style>

         header,nav,section,article,aside,footer{

             border: 3px solid gray;

         }

         .bgSection{

             width: 300px;

             border: 0px;

             position: relative;

             text-align: center;

             margin: 0 auto;

         }

         header,nav,footer{

             width: 300px;

             height: 50px;

         }

         section,article{

             width: 200px;

             height: 100px;

         }

         aside{

             width: 93px;

             height: 206px;

             position:absolute;

             left: 206px;

             top:112px;

         }

         nav p, ul{

             display: inline;

         }

         ul li{

             display: inline;

         }

         p{

             font-weight: bold;

             color: goldenrod;

         }

     </style>

 </head>

 <body>

     <section class="bgSection">

         <header> <p>&lt;header&gt;</p></header>

         <nav>

             <p>&lt;nav&gt;</p>

             <ul>

                 <li><a href="">first</a></li>|

                 <li><a href="">second</a></li>|

                 <li><a href="">last</a></li>

             </ul>

         </nav>

         <section class="section1">

             <p>&lt;section&gt;</p>

         </section>

         <article>

             <p>&lt;article&gt;</p>

         </article>

         <aside>

             <p>&lt;aside&gt;</p>

         </aside>

         <footer>

             <p>&lt;footer&gt;</p>

         </footer>

     </section>

 </body>

 </html>

运行结果：

HTML5语义化元素的更多相关文章

  1. html5语义化标签使用规范

    Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...

  2. Html5语义化标签详解及其兼容性处理

    <header></header> 页眉 主要用于页面的头部的信息介绍,也可用于板块头部 <hgroup></hgroup> 页面上的一个标题组合 一个 ...

  3. html5语义化标签——回顾

    html5 头部结构   <!doctype html>    <meta charset=“utf-8”/> <header></header> 页眉 ...

  4. 第二季第十一天 html5语义化标签 css透明度

    span不能设置宽高背景 HTML5语义化标签 <section>标签所包裹的是有一组相似的主题的内容,可以用这个标签来实现文章的章节.标签式对话框中的各种标签页等类似的功能. <s ...

  5. HTML5语义化标签

    在HTML5中最基础也是比较好理解的也就是语义化标签了,,顾名思义语义化也就是可以直接读懂的标签~,这样我们在项目开发过程中不但自己不会因为5花8门的标签命名而伤脑筋,跟同事对接项目也会节约很多时间~ ...

  6. html5语义化标签总结二

    HTML 5的革新之一:语义化标签二文本元素标签.分组元素标签. HTML 5的革新——语义化标签(一)中介绍了一些HTML5新加的一些节元素,一张页面中结构元素构成网页大体,但是也需要其他内容来填充 ...

  7. 转html5语义化标签总结一

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

  8. HTML5语义化标签重构页面

    在HTML5未出现之前我们都用div+css来构建页面,比如<div id=”header”>,div的滥用,使得代码的可读性和可维护性很差,现在用本文来介绍一下用HTML5′干净的’语义 ...

  9. HTML5语义化

    转载自:https://www.cnblogs.com/fliu/articles/5244866.html 1.什么是HTML语义化? 用合理.正确的标签来展示内容,比如h1~h6定义标题,便于开发 ...

随机推荐

  1. 最大似然估计(Maximum likelihood estimation)(通过例子理解)

    似然与概率 https://blog.csdn.net/u014182497/article/details/82252456 在统计学中,似然函数(likelihood function,通常简写为 ...

  2. java 集合（三）List接口

    package cn.sasa.demo1; import java.util.ArrayList; import java.util.LinkedList; import java.util.Lis ...

  3. 【python-opencv】30-角点检测

    [微语]世上有很多不可能,不过不要在你未尽全力之前下结论 特征检测:找到图像特征的技术 特征描述:描述图像特征 Harris角点检测(Corner Detection) 参考: https://doc ...

  4. nodejs 学习六 express 三种查询url参数方法

    req.param() 是被废弃的api req.params 俗点:取带冒号的参数 req.body 可以肯定的一点是req.body一定是post请求,express里依赖的中间件必须有bodyP ...

  5. TensorFlow安装之后导入报错：libcudnn.so.6:cannot open sharedobject file: No such file or directory

    转载自:http://blog.csdn.net/silent56_th/article/details/77587792 系统环境:Ubuntu16.04 + GTX1060 目的:配置一下pyth ...

  6. Java与openssl的RSA算法

    1.java生成的公私钥格式为 pkcs8(PKCS8EncodedKeySpec), 而openssl默认生成的公私钥格式为 pkcs1 2.java采用的rsa默认补齐方式是pkcs1 (RSA/ ...

  7. （4.28）for xml path 在合并拆分上的作用演示

    for xml path 用于合并与拆分 1.合并 很多时候需要在SQL Server中创建逗号分隔列表.这可以使用SQL Server的DOR XML PATH功能完成.与select语句一起使用时 ...

  8. MongoDB的客户端管理工具--nosqlbooster 连接MongoDB服务器

    nosqlbooster的官网地址为https://nosqlbooster.com.大家如果想直接下载,可以登入下载网址https://nosqlbooster.com/downloads. 下载w ...

  9. 报错解决——DateTimeField *** received a naive datetime (***) while time zone support is active

    这是一个跟时区有关的问题,报错中说到datetime字段得到一个naive datetime,而不是支持time zone的active datetime由于Django的设置中米哦人USE_TZ设置 ...

  10. vue中自定义软键盘

    https://segmentfault.com/a/1190000012568480