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

对语义化的理解：

  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. python摸爬滚打之day05----字典

    1.字典介绍 1.1  结构:  {key1: value1, key2: value2, ....} ,由很多键值对构成. 在字典的key-value(键值对)中, key(键)必须是可哈希(不可变 ...

  2. P3292 [SCOI2016]幸运数字 线性基

    正解:线性基+倍增 解题报告: 先放下传送门QAQ 然后这题,其实没什么太大的技术含量,,,?就几个知识点套在一起,除了代码长以外没任何意义,主要因为想复习下线性基的题目所以还是写下,,, 随便写下思 ...

  3. vim 私人快捷键备忘录

    i 上 k 下 j 左 l 右 ( 上移一段 ) 下移一段 * 搜索关键字 d 删除 y 复制 p 粘贴 h 插入 H 头插 o 下开一行 O 上开一行 f 后跳指定关键字 F 前跳指定关键字 e 字 ...

  4. ext.js的mvc

    1.Ext.js的mvc开发模式 在ext.js4.0以后引入mvc开发模式,将js分成model-view-controller三层,使得大量js代码变得更加易于维护和重用,这就是ext.jsmvc ...

  5. sed命令 windows与linux换行

    Linux的Bash命令中有一个sed操作,SSD的create_list.sh中有用到这个操作: 结合着下面这个解释: 也就是删除所有行里面的以VOC2007/Annotations/(这里的\代表 ...

  6. 【Linux】测试环境如何搭建？

    [Linux]测试环境如何搭建? (该文档所在我的百度网盘位置: ) 通常面试会问到会不会搭建测试环境?到底啥是测试环境搭建呢,其实测试环境没有想像的那么高大上,弄个 tomcat,把测试的 war ...

  7. MySQL 5.6 Index Condition Pushdown

    ICP(index condition pushdown)是mysql利用索引(二级索引)元组和筛字段在索引中的where条件从表中提取数据记录的一种优化操作.ICP的思想是:存储引擎在访问索引的时候 ...

  8. abp中linq的应用

    private IQueryable<MembershipEntity> SelectOrScrrenMember(GetMemberInput input) { string[] use ...

  9. Spark之数据倾斜 --采样分而治之解决方案

    1 采样算法解决数据倾斜的思想 2 采样算法在spark数据倾斜中的具体操作

  10. [django]drf知识点梳理-分页

    msyql分页 limit offset https://www.cnblogs.com/iiiiiher/articles/8846194.html django自己实现分页 https://www ...