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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_29924041/article/details/78117137

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标签

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标签是块级元素标签,因为其独占了一行,并且可以设置宽高。

在原来的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>

显示效果如下所示:

这里写图片描述


footer底部标签

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

<footer>footer标签</footer>

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

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

展开阅读全文

没有更多推荐了,返回首页