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

对语义化的理解：

  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. Eclipse + ndk+ cocos2dx 调试Cocos2dx 程序

    本文是我自己尝试通过eclipse来在windows平台下搭建cocos2dx的过程,期间遇到了一些问题,都是通过网上借鉴别人的博文来解决的,下面也列出来这些参考文献.写下来的目的主要是自己以后要用的 ...

  2. SortedMap与TreeMap的一个典型应用

    一下是在项目中的应用. msg.getContent()共有四种类型. public SortedMap<String, List<ActivityMsg>> queryTri ...

  3. day1_接口测试基础

    一.什么是接口: 接口:一般分为两种,程序内部接口和程序对外接口 系统对外接口:系统与外部沟通,比如我们平时用的app,网站进行数据处理的时候都是通过接口调用后端服务器的数据. 程序内部接口:程序内部 ...

  4. UOJ244 短路 贪心

    正解:贪心 解题报告: 传送门! 贪心真的都是些神仙题,,,以我的脑子可能是不存在自己想出解这种事情了QAQ 然后直接港这道题解法趴,,, 首先因为这个是对称的,所以显然的是可以画一条斜右上的对角线, ...

  5. 【PyQt5-Qt Designer】对话框系列

    标准输入对话框(QInputDialog)系列: 主要模块 from PyQt5.QtWidgets import QInputDialog 效果如下: 完整代码: from PyQt5.QtWidg ...

  6. SQL专家云监控

    SQL专家云监控:http://www.zhuancloud.com/Index.html

  7. SQL Server2008及以上 表分区操作详解

    SQL Server 表分区之水平表分区  转自:https://www.cnblogs.com/Brambling/p/6766482.html 什么是表分区? 表分区分为水平表分区和垂直表分区,水 ...

  8. metasploit的安装

    //直接安装 apt-get update apt-get install metasploit-framework //连接和安装postgresql apt-get install postgre ...

  9. what's the 回抽

    出自 MBA智库百科(https://wiki.mbalib.com/) 什么是回抽 由于近年来证券投资领域中技术分析的不断普及,许多投资者都认识到了股价(汇价)一旦突破颈线压力,后市看好.但是还有一 ...

  10. 002-linux命令-文件和目录、查看文件内容-文件和目录、查看文件内容

    一.文件和目录 cd /home :进入‘/home’目录 cd .. 返回上一级目录 cd ../..返回上两级目录 cd 进入个人的主目录 cd ~user1进入个人的主目录 cd - 返回上次所 ...