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

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

时间：2023-09-22 10:57:21

html5的一些常用标签

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

提示:
博主:章飞_906285288
/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，可以设置块级属性

header标签

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

<head>头部标签</head>

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><meta charset="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"><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"><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><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"><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"><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>

显示效果如下所示: