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

对语义化的理解：

  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. Flink - watermark生成

    参考,Flink - Generating Timestamps / Watermarks watermark,只有在有window的情况下才用到,所以在window operator前加上assig ...

  2. mysql windows开启客户端连接权限

    use mysql;  select 'host' from user where user='root';  update user set host = '%' where user ='root ...

  3. 动态补丁构建工具nuwa中的“坑”

    1. 继承android中的Application的类A1Application:并且A2Application继承自A1Application,并且配置在清单文件中name=".A2App ...

  4. 深入理解为什么应该使用transform来替代top

    话说,这个问题我们得从浏览器得渲染机制说起: 我们先来理解一下 重绘(Repainit)和 回流(Reflow): 重绘:当节点需要更改外观而不会影响布局得,比如改变 color 就称为重绘: 回流: ...

  5. The Swift Programming Language 中文版

    http://numbbbbb.github.io/the-swift-programming-language-in-chinese/

  6. OC转场动画UIViewControllerTransitioningDelegate

    该项目一共两个界面,第一个的只有一个SystemAnimationViewController只有UICollecitonView,第二个界面ImgDetailViewController只有一个UI ...

  7. RN导航栏使用

    import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { NavigatorIOS, ...

  8. MathWorks.MATLAB.NET.Arrays.MWArray”的类型初始值设定项引发异常 解决方法

    原因 用的是matlab7运行时,后面又安装了matlab11,后面又重新安装了matlab7运行时,c盘下就有二个运行时的版本了,程序引用了后面的那个,编译后就出上面的问题 解决方法 1重新引用上面 ...

  9. 自动化工具之一：wxPython

    一.下载与安装 (1)下载地址:https://pypi.python.org/pypi/wxPython (2)我安装的python版本是3.6.X的,所以我这里下载的是: wxPython-4.0 ...

  10. open '/dev/hwlog_switch' fail -1, 13. Permission denied

    https://blog.csdn.net/qq_36317441/article/details/79376522 将HBuilder开发的APP运行在华为手机上时,控制台显示 open '/dev ...