在html中，标签非常多，比如说列表，按钮，图片，文字等等，每一种标签都有自己的使用方法以及相关的约束条件。具体的标签可以直接到w3c的网站上查看，这里就简单了解一下html5的标签。

一、HTML5的新结构标签

       在之前的HTML页面中，在布局方式中，大家基本上都是用Div+CSS。而搜索引擎去抓取页面的内容的时候，它只能猜测你的某个div内的内容是文章内容容器，或者是导航模块的容器，或者是作者介绍的容器等等。也就是说整个HTML文档结构定义不清晰，HTML5中为了解决这个问题添加了：页眉、页脚、导航、文章内容等跟结构相关的结构元素标签。如下图所示：
  
      首先我们来从视图上认识一下新结构标签的显示。在HTML5中，一个普通的页面，会有头部，导航，文章内容，还有附着的右边栏，还有底部等模块。如下图所示：

相关的代码有： 
<body>
    <header>header</header>
    <nav>nav</nav>
    <article>
        <section>section</section>
    </article>
    <aside>aside</aside>
    <footer>footer</footer>
</body>
接下来详细说明这几个标签的含义：
     1、<header>主要用于页面的头部的信息介绍，也可用于板块头部，通常是一些引导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面。通常<header>标签至少包含（但不局限于）一个标题标记（<h1>-<h6>），还可以包括<hgroup>标签，还可以包括表格内容、标识、搜索表单、<nav>导航等。

    2、nav标签代表页面的一个部分，是一个可以作为页面导航的链接组，其中的导航元素链接到其它页面或者当前页面的其它部分，使html代码在语义化方面更加精确，同时对于屏幕阅读器等设备的支持也更好。


如图所示，是一个简单的导航，点击链接可以实现跳转，实现代码如下： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nav</title>
    <style>
        li{
            list-style: none;
            display: inline-block;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            padding-left: 10px;
            float: left;
        }
        ul{
            padding-left: 0px;
            width:200px;
            height: 40px;
            background-color: #00A2E9;
        }
        a{
            text-decoration: none;
            color:#fff;
        }
    </style>
</head>
<body>
<nav>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">信息页</a></li>
        <li><a href="#">主页</a></li>
    </ul>
</nav>
</body>
</html>
  3、article是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。一般来说，article会有标题部分（通常包含在header内），有时也会包含footer。article可以嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论可以以article的形式嵌入其中。

     4、section定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。一般用于成节的内容，会在文档流中开始一个新的节。它用来表现普通的文档内容或应用区块，通常由内容及其标题组成。但section元素标签并非一个普通的容器元素，它表示一段专题性的内容，一般会带有标题。
  当我们描述一件具体的事物的时候，通常鼓励使用article来代替section；当我们使用section时，仍然可以使用h1来作为标题，而不用担心它所处的位置，以及其它地方是否用到；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div元素而非section。

     5、aside标签用来装载非正文的内容，被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的，可以被删除，而不会影响到网页的内容、章节或是页面所要传达的信息。例如引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分等等。

     6、footer标签定义section或document的页脚，包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或者日期。作为页面的页脚时，一般包含了版权、相关文件和链接。它和<header>标签使用基本一样，可以在一个页面中多次使用，如果在一个区段的后面加入footer，那么它就相当于该区段的页脚了。
     如下图中CSDN的页脚：

二、标签选择器

1、初始化标签
     标签在初始化的时候，都会自带一些样式，比如说标签h1，当我们使用这个标签的时候，就已经有margin的样式，如果想要自己定义样式的话，就需要在初始化标签的时候，清除所有的默认样式。
     哪些样式是需要重置的？？？
          1）与盒模型相关的样式：border     margin     padding
          2）标签特有的样式：  ul>li          ol>li
     书写原则：
         1）用到什么标签就清除所用标签的默认样式。
         2）建议不要直接将所有标签全部加上。
         3）不要将所有标签全部统一设置一致的reset，需根据标签默认样式特征来分类设置。
如： 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body, h1, h2, h3, h4, h5, h6, p, dl, dd{
				margin: 0;
			}
			ul, ol{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			img{
				border: none;
				vertical-align: top;
			}
			a{
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<a href="">超链接</a>
		<a href="">
			<img src="img/1.png" alt="" />
		</a>
		<h1>标题 - logo</h1>
		<h2>标题</h2>
		<h3>标题</h3>
		<h4>标题</h4>
		<h5>标题</h5>
		<h6>标题</h6>
		
		<p>段落</p>
		
		<strong>强调</strong>
		<em>强调</em>
		
		<ul>
			<li>ul - 无序列表</li>
			<li>列表项</li>
			<li>ul的子集（下一级元素）只能是li</li>
		</ul>
		
		<ol>
			<li>ol - 有序列表</li>
			<li>列表项</li>
			<li>ol的子集（下一级元素）只能是li</li>
		</ol>
		
		<dl>
			<dt>dl-自定义列表；dt-自定义列表title</dt>
			<dd>dd-自定义列表的列表项（信息）</dd>
		</dl>
		
		<mark>标记</mark>
	</body>
</html>
2、标签选择器
     1）id选择器：当前页面唯一，“#”
     2）类(class）选择器：当前页面可以多个，“.”
     3）标签选择器：当前页面上所有标签名为xxx的元素，比如div{},h1{},span{}等
     4）群组选择器：用逗号分隔，被逗号分隔的元素（选择器）全部执行统一的代码片段，比如div,p,h1{}
     5）包含选择器：
               举例说明：我想找到div中的span标签
               代码段： 
		<div class="box">
			span1
			<span>span2</span>
		</div>
                    所以包含选择器的写法就是：   .box  span{}                             
      6）通配符*：找到页面上符合规则的所有元素，但是不建议使用通配符。
3、选择器的优先级
      选择器的优先级即代码执行生效的顺序，不同的选择器的优先级不一样，也就决定着你所写的样式是否生效的顺序。
以下是选择器的优先级：
     行间样式>id选择器>类选择器>标签选择器
接下来举例说明：
      我们把选择器的优先级比作是价值，用人民币的大小来表示，即：
      1)行间样式     $1000
      2)id选择器     $100
      3)类选择器     $10
      4)标签选择器  $1
      目标：看看我们所定义的样式时哪个执行生效？ 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器的优先级</title>
		<style>
			/* 1 + 1 = 2*/
			div div{
				height: 100px;
				background-color: yellow;
			}
			/* 100 + 1 = 101*/
			#box div{
				background-color: pink;
			}
			/* 10 + 1 = 11*/
			.div1 div{
				background-color: green;
			}
		</style>
	</head>
	<body>
		<!--<div id="box" class="div1" style="background-color: red;"></div>-->
		<div id="box" class="div1">
			<div>div>div</div>
		</div>
	</body>
</html>
通过代码中计算过程，我们可以得到最后的结果是第二条样式生效，即背景颜色是粉色。


Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生