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

news/2024/7/5 19:27:22 标签: html5, 语义化标签, nav, article, header
<article class="baidu_pl">
article_content" class="article_content clearfix">

html5的一些常用标签">html5的一些常用标签

提示:
博主:章飞_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中出现的，代表的意思就是面向移动端的开发与适配

语义化标签headersectionnavarticlefigurefigcaptionaside">语义化标签(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标签">header标签

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导航栏标签">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标签

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>

显示效果如下所示:

这里写图片描述

footer底部标签

顾名思义，因为前面有一个header标签，所以在后面会有一个footer标签，表示已经到了底部了。使用方式很简单，也就类似我们的header标签。

<footer>footer标签</footer>

在这里不在赘述，使用的形式和前面的都是一致的。

在这里需要注意的是，要习惯性的使用section来替代我们div标签
footer标签和header标签是可以出现在需要的地方的

article>

http://www.niftyadmin.cn/n/783513.html

相关文章

从零开始前端学习[27]:html5中的特殊结构标签，ruby，mark，meter，progress，details

从零开始前端学习[27]:html5中的特殊结构标签，ruby，mark，meter，progress，details

html5中的特殊结构标签 ruby标签mark标签meter标签progress标签details标签 提示 博主:章飞_906285288 博客地址:http://blog.csdn.net/qq_29924041 ruby标签 ruby标签一般相对来说使用还是比较少的吧&#xff0c;它是一种注释解释性标签&#xff0c;一般是与rt标签进行联用…
阅读更多...
从零开始前端学习[28]:一代版本一代神，你应该知道的浏览器兼容问题

从零开始前端学习[28]:一代版本一代神，你应该知道的浏览器兼容问题

一代版本一代神&#xff0c;你应该知道的浏览器兼容问题 为什么要有浏览器兼容怎么去解决这样的一种兼容问题 提示: 博主&#xff1a;章飞_906285288 博客地址:http://blog.csdn.net/qq_29924041 为什么要有浏览器兼容: HTML5有部分内容兼容到IE9&#xff0c;IE8及以下对H5…
阅读更多...
从零开始前端学习[29]:Css3中新增加的选择器一

从零开始前端学习[29]:Css3中新增加的选择器一

Css3中新增加的选择器 以前的选择器新增加的选择器 提示 博主:章飞_906285288 博客地址:http://blog.csdn.net/qq_29924041 以前的选择器 通配符选择器 *{margin:10px auto;padding:10px}ID选择器: #main{width:100px;height:100px;background:blue;}class类选择器 .mai…
阅读更多...
从零开始前端学习[30]:Css3中新增加的选择器二

从零开始前端学习[30]:Css3中新增加的选择器二

Css3中新增加的选择器二 :not(.c1)伪类选择器:empty 伪类选择器:target伪类选择器::selection伪类选择器:disabled伪类选择器:enabled伪类选择器:checked伪类选择器 提示 博主:章飞_906285288 博客地址:http://blog.csdn.net/qq_29924041 :not(.c1)伪类选择器 not的意思顾名…
阅读更多...
从零开始前端学习[31]:css3中新增加的一些背景属性

从零开始前端学习[31]:css3中新增加的一些背景属性

css3中新增加的一些背景属性 1:背景属性回顾 2:css3中新增加的一些背景属性 2_1:background-size设置背景尺寸 2_2background-image设置多背景 2_3background-origin背景图片的其实域 2_4background-clip背景颜色显示区域 2_5background-color:中的相关属性值设置提示 博主&am…
阅读更多...
android逆向研究[0]:一个app是如何构造出来的----Android编译过程

android逆向研究[0]:一个app是如何构造出来的----Android编译过程

一个app是如何构造出来的—-Android编译过程 移动端的apk是什么&#xff1f;&#xff1f;android的apk的整个编译过程 提示 博主:章飞_906285288 博客地址:http://blog.csdn.net/qq_29924041 软件环境:使用androidstudio进行的 移动端的apk是什么&#xff1f;&#xff1f; …
阅读更多...
从零开始前端学习[32]:css3中新增加的一些文本属性

从零开始前端学习[32]:css3中新增加的一些文本属性

css3中新增加的一些文本属性 css中相关的文本属性 css3中增加的一些文本属性 direction文本显示方向 多行超出文本显示省略号 text-shadow字体的阴影设置 text-stroke文字描边 text-fill-color文字的颜色填充 提示 博主&#xff1a;章飞_906285288 博客地址:http://blog.csdn…
阅读更多...
从零开始前端学习[33]:Cs3中的transition过渡-animation动画

从零开始前端学习[33]:Cs3中的transition过渡-animation动画

Cs3中的transition过渡-animation动画 transition过渡animation动画 提示 博主:章飞_906285288 博客地址:http://blog.csdn.net/qq_29924041 transition过渡 记得在html学习中&#xff0c;提到过transition和transform这两个属性值&#xff0c;transfrom对应的是动画&#…
阅读更多...
最新文章

Copyright @ 2022~2023