从零开始前端学习[26]:html5的一些常用标签，header,footer,section,aside,figure,figcaption,nav,artical,

来源：互联网发布：linux查询端口命令编辑：程序博客网时间：2024/05/23 00:18

html5的一些常用标签

HTML5简介
语义化标签(header,section,nav,article,figure,figcaption,aside，footer)

提示:
博主:章飞_906285288
http://blog.csdn.net/qq_29924041

一:HTML5简介

万维网的核心语言，标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改，所以简称为HTML5。

HTML的创建其实主要是为了移动端所修订的，说白了，html是为了移动端的开发而生的，所以，这又抢了很多android和ios程序员的饭碗。

HTML5的优点：拥有了语义化的标签，让HTML的代码更加符合内容的结构化，标签语义化了，这样其实主要时候为了方便开发者阅读，写出更加优雅的代码，并且也是让浏览器更好的解析，语义化标签很多都是会有自己的默认样式，这个在后面会简单提到

HTML5在移动端中的注意事项:

  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">

以上代码是必须要在head中出现的，代表的意思就是面向移动端的开发与适配

语义化标签(header,section,nav,article,figure,figcaption,aside)

section标签

section的英文意思是部分的意思，也就是一块区域，在html5中，其具体含义是定义文档中的一块区域，主要是用来替代div布局

<section>一块区域</section>

section也就类似div，可以设置块级属性

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }        section.main{width: 1200px;height: 80px;box-shadow: 0 0 10px 0 deeppink;margin: 30px auto;line-height: 80px;text-align: center}  </style></head><body>  <section class="main">      这是一个类似div标签的section标签  </section></body></html>

这里写图片描述

header标签是头部标签，是双标签，主要是定位文档的头部区域，一般是用在头部

<head>头部标签</head>

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }      body{font: bold 30px/70px "";color: #fff;text-align: center;background: blue}      body header{background: deeppink;}      section.main{width: 1200px;box-shadow: 0 0 10px 0 deeppink;margin: 0px auto}      section.main header{height: 60px;background: greenyellow}  </style></head><body><header>header</header>  <section class="main">    <header>Header</header>  </section></body></html>

显示效果如下所示:
这里写图片描述

可以注意到，header标签是块级元素标签，因为其独占了一行，并且可以设置宽高。

nav导航栏标签

在原来的html标签中，是没有导航栏标签的，这就比较尴尬，很多时候，我们使用的是div来嵌套ul li等列表形式，然后使用浮动来进行导航栏的

那么在html5中已经添加了这样的一种语义化标签nav

<nav>    <ul>        <li>导航栏1</li>        <li>导航栏2</li>        <li>导航栏3</li>    <ul></nav>

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }        .f_l{float: left}        .clearfix:after{clear: both;content: "";display: block}        body{background: blue;font:bold 22px/30px "";text-align: center}        section.main{margin: 10px auto;background: greenyellow;width: 1200px}        section.main nav ul li{width: 287px;height: 30px;line-height: 30px;float: left;background: deeppink;margin-left: 10px}  </style></head><body>  <section class="main">    <nav>      <ul class="clearfix">        <li>导航栏1</li>        <li>导航栏2</li>        <li>导航栏3</li>        <li>导航栏4</li>      </ul>    </nav>  </section></body></html>

显示效果如下所示:

这里写图片描述
所以可以看出其实nav也是一个块级标签，独占一行，支持宽高

article标签

article在英文中的意思是文章的意思，其实原来我们已经有一个标签叫做p标签，是段落的意思，那么文章和段落有什么区别呢？这个就百度去吧；
article标签定义外部的内容，外部内容可以是来一一个外部的新闻提供者的一片新的文章，或者来自论坛的文本，更或者是一个故事会等。

 <article>        <h2>兰亭集序</h2>        <p>            永和九年， 岁在癸丑， 暮春之初， 会于会稽山阴之兰亭， 修禊事也。 群贤毕至， 少长咸集。 此地有崇山峻岭， 茂林修竹， 又有清流激湍， 映带左右， 引以为流觞曲水， 列坐其次。 虽无丝竹管弦之盛， 一觞一咏， 亦足以畅叙幽情。        </p>    </article>

简单的使用如上述所示:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }      body{font: bold 20px/70px "";color: #fff;text-align: center;background: blue}      body header{background: deeppink;}      section.main{width: 1200px;box-shadow: 0 0 10px 0 deeppink;margin: 0px auto}  </style></head><body><header>header</header>  <section class="main">    <article>      <h2>兰亭集序</h2>      永和九年， 岁在癸丑， 暮春之初， 会于会稽山阴之兰亭， 修禊事也。 群贤毕至， 少长咸集。 此地有崇山峻岭， 茂林修竹， 又有清流激湍， 映带左右， 引以为流觞曲水， 列坐其次。 虽无丝竹管弦之盛， 一觞一咏， 亦足以畅叙幽情。    </article>  </section></body></html>

这里写图片描述

所以从上图中可以看出来，article其实也是类似于div一样的标签，主要用于语义化声明，当然在article中的标签的显示，其文字间距等，都是有些默认值的。让其看起来更像文章一样

figure用作文档中插图的图像的标签

figure标签很多时候是定义一块独立的内容，(图像，图标，代码等等)。更多的时候是用于展示图片和它的描述，很多时候与figcaption进行连用，或者与p进行连用

<figure>        <figcaption></figcaption><!--用来定义figure的标题,放在figure的子元素第一个或者最后一个-->        <img src=””/>     </figure>

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }        img{border: 0;display: block}        .f_l{float: left}        .f_r{float: right}        .clearfix:after{content:"";clear: both;display: block}        section.main{width: 1200px;box-shadow: 0 0 10px 0 deeppink;margin: 30px auto;line-height: 80px;text-align: center}        section.main figure{float: left;width: 200px;font: bold 22px/30px ""}        section.main figure img{width: 200px}  </style></head><body>  <section class="main clearfix">    <figure>      <p>第一张图片</p>      <img src="../课件源码/课件源码/imgs/0.jpg" alt="">    </figure>    <figure>      <p>第二张图片</p>      <img src="../课件源码/课件源码/imgs/1.png" alt="">    </figure>    <figure>      <img src="../课件源码/课件源码/imgs/2.jpg" alt="">      <figcaption>第三张图片</figcaption>    </figure>    <figure>      <figcaption>第四张图片</figcaption>      <img src="../课件源码/课件源码/imgs/3.jpg" alt="">    </figure>    <figure>      <img src="../课件源码/课件源码/imgs/4.jpg" alt="">      <figcaption>第五张图片</figcaption>    </figure>  </section></body></html>

这里写图片描述

figure标签也是块级标签，支持宽高，是一种语义解释形式标签

aside侧边栏的标签

aside标签是侧边栏标签，定义侧边栏、广告、nav元素组，以及其他类似的内容部分.aside 的内容应该与 article 的内容相关.一般与正文无关的。一般使用定位的形式，让其固定在某个地方

<aside class="left">    <nav>        <ul class="clearfix">            <li>nav</li>            <li>nav</li>            <li>nav</li>            <li>nav</li>            <li>nav</li>        </ul>    </nav></aside>

代码如下:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }        section aside.left{width: 80px;height: 350px;position: absolute;top: calc(50% - 175px);left: 10px}        section aside.right{width: 80px;height: 350px;position: absolute;top: calc(50% - 175px);right: 10px}        section aside ul li{height: 80px;margin-top: 5px;box-shadow: 0 0 10px 0 deeppink;font: normal 16px/80px ""}  </style></head><body>  <section>    <aside class="left">      <ul>        <li>left-nav1</li>        <li>left-nav2</li>        <li>left-nav3</li>        <li>left-nav4</li>      </ul>    </aside>    <aside class="right">      <ul>        <li>right-nav1</li>        <li>right-nav2</li>        <li>right-nav3</li>        <li>right-nav4</li>      </ul>    </aside>  </section></body></html>