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

对语义化的理解：

  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. Ollydbg

    1.用来查看dll文件的信息,取代现在使用的exescope;

  2. 关于学习oi的一些事项

    我只是突然有感而发!(脑抽罢了 我其实是那种一直都没有计划说去学什么的人. 当然也不是那种点开洛谷一道题去写这道题不会就去学习相应的知识点的人. 随着洛谷 poj bzoj HDU CH Vojs 等 ...

  3. python发送邮件 大全汇总

    https://blog.csdn.net/bmxwm/article/details/79007871 参考菜鸟教程发送只有文字的邮件 1 2 3 4 5 6 7 8 9 10 11 12 13 1 ...

  4. telnet测试端口的使用

    端口开启后会跳转到 :

  5. oracle中字符串与表数据拼接的用法--“||”

    测试过程中,经常需要批量删除或者插入.修改一些表数据或结构,使用手工复制.粘贴其实很麻烦,所以这是我们就可以使用拼接成sql语句的方法来实现操作数据.下面先讲讲oracle中拼接符 || 的用法,如下 ...

  6. uarts裸机程序

    硬件平台:JZ2440 实现功能:向串口软件实现输出putchar函数 start.s   --> 设置堆栈,关闭看门狗,初始化时钟,初始化sdram init.c      -->初始化 ...

  7. shell编程awk进阶

    awk操作符 算术操作符:  x+y, x-y, x*y, x/y, x^y, x%y      -x: 转换为负数      +x: 转换为数值 字符串操作符:没有符号的操作符,字符串连接 赋值操作 ...

  8. drf解析器

    1.简介 作用:将传过来的数据,解析成字典 2.使用 分为局部使用和全局使用 局部使用,什么都不写,默认就是 parser_classes = [JSONParser,FormParser] from ...

  9. save

    docker-compose-orderer.yaml # Copyright IBM Corp. All Rights Reserved. # # SPDX-License-Identifier: ...

  10. CentOS6.5 安装Kafka集群

    1.安装zookeeper 参考文档:http://www.cnblogs.com/hunttown/p/5452138.html 2.下载:https://www.apache.org/dyn/cl ...