这些标签能够让搜索引擎更直接的解析页面内容。

<header></header>语义：文档或者页面的头部

<nav></nav>语义：导航
这两者不是组合标签，但经常这样使用
<header>
　　<nav>
　　　　<ul>
　　　　　　<li>导航1</li>
　　　　　　<li>导航2</li>
　　　　</ul>
　　</nav>
</header>
注意header并不一定是页面的头部。

<footer></footer>
语义：文档或者页面的脚部。通常用来包含文档的版权信息 或者授权 或者友情链接

<aside></aside>
语义：侧边栏 或者副属信息

<hgroup></hgroup>
语义：标题的集合，可以用来包含多个h1到h6的标签

<figure></figure>
语义：图片区域，可以包含多个图片或者一个figcaption，figcaption用来表示图片标题

<figcaption></figcaption>
语义：图片区域的标题，一般写在figure里面

<section></section>
语义：分区，页面或者文档的一部分区域，有独立的内容。但结构相近，就可以用section。
可以包含header h1~h6等等

<article></article>
语义:独立的内容，可以是文章 blog 帖子 短文或者回复评论

CSS选择器：

子选择器: >
　　例如
　　<style>
　　　　div>span{
　　　　border:1px solid red;
　　　　background:yellow;
　　　　}
　　</style>
　　<body>
　　　　<div>
　　　　　　<p>
　　　　　　<span>我是p里的span</span>
　　　　　　</p>
　　　　<span>我是div里的span</span>
　　　　<span>我是div里的span</span>
　　　　<span>我是div里的span</span>
　　　</div>
　　</body>
　　作用范围：div下的span会享受样式 p里的不享受
　　原因 p里的是孙子

相邻兄弟选择器+
例如
　　<style>
　　　　p+span{
　　　　　　border:1px solid red;
　　　　　　background:yelllow;
　　　　}
　　</style>

　　<div>
　　　　<p>
　　　　　　我是p
　　　　</p>
　　　　<span>我是相邻p标签的span</span>
　　　　<span>我不是相邻的span</span>
　　</div>
　　<div>
　　　　<p>
　　　　　　我是p
　　　　</p>
　　　　<strong>我是相邻p标签的span</strong>
　　　　<span>我不是相邻的span</span>
　　</div>
　　作用范围：选择相邻的两个元素 元素一定要有同一个父级，+后面的元素享受样式。
　　比如上面只有 ：我是相邻p标签的span享受样式

同级元素通用选择器:~
作用范围：所有相同父级中，位于p标签之后的同级span标签享受样式。
下面这个例子里 就是：我是同级p之后的span 享受样式

　　<style>
　　　　p~span{
　　　　　　border:1px solid red;
　　　　　　background:yellow;
　　　　}
　　</style>

　　<div>
　　　　<span>我是p之前的span</span>
　　　　<span>我是p之前的span</span>
　　　　<span>我是p之前的span</span>
　　　　<p>我是p</p>

　　　　<ul>
　　　　　　<li>
　　　　　　　　<span>我是之后的li里的span</span>
　　　　　　</li>
　　　　</ul>
　　　　<h2>
　　　　　　<span>我是之后的h2里的span</span>
　　　　</h2>
　　　　<span>我是同级p之后的span</span>
　　　　<span>我是同级p之后的span</span>
　　　　<span>我是同级p之后的span</span>
　　</div>

属性选择器：
第一种：选择带有某种属性的所有元素
a[属性名]{。。。。}

　　例如
　　只有有属性的四个a标签享受样式
　　<style>
　　　　a[href]{
　　　　　　border:1px solid red;
　　　　　　background:yellow;
　　　　}
　　</style>
　　<body>
　　　　<a href="#">我是有属性的A</a>
　　　　<a href="#">我是有属性的A</a>
　　　　<a href="#">我是有属性的A</a>
　　　　<a href="#">我是有属性的A</a>
　　　　<a>我是没有属性的A</a>
　　　　<a>我是没有属性的A</a>
　　　　<a>我是没有属性的A</a>
　　　　<a>我是没有属性的A</a>
　　</body>

　　第二种：选择带有某种属性，并且规定属性值的元素
　　只有text属性为password的享受样式
　　例如
　　<style>
　　　　input[type="password"]{
　　　　　　border:10px solid red;
　　　　　　background:yellow;
　　　　　　}
　　</style>
　　<body>
　　　　<input type=“text”>
　　　　<input type="text">
　　　　<inpur type="password">
　　　　<input type="password">
　　</body>

子选择器 > 父级与子级之间

相邻兄弟选择器 + 相邻的第一个元素

同级通用选择器 ~ 所有相同父级中同级的元素

伪类：是一种特殊的属性，可以理解为表示一种状态

　　a标签的4个伪类：
　　a:link{} 规定链接没有被访问时的样式
　　a:visited{} 规定链接被访问之后的样式
　　a:hover{} 规定鼠标移上去时的样式
　　a:active{}规定点击时的样式
　　注意这四个伪类写的顺序是不能更改的
　　对于这个四个伪类顺序，可用love hate爱恨简记

　　还有一种用法
　　p:first-child{..}
　　用来选择属于其父级下的第一个元素，并且必须是p，否则不生效
　　p:lastt-child{..}
　　用来选择属于其父级下的最后一个元素，并且必须是p，否则不生效

　 类似的还有
　　p:first-of-type{}
　　p:last-of-type{}
　　用来选择属于其父级下的第一个/最后一个元素，并且一定会生效

　　选择属于其父级下的第n个元素,并且一定会到匹配p标签，不会不生效。
　　如:
　　p:nth-of-type(n){
　　background:red;
　　}
　　温馨提示：n可以用来计算并多选。比如写上2n-1,那么所有的排行为奇数的对应标签都会被选中

　　伪类选择器
　　选择属于其父级下的第n个元素,并且必须是p标签，如果第一个标签不是p，则不生效。
　　如：p:nth-child(n){
　　background:red;
　　}

　　温馨提示：n可以用来计算并多选。比如写上2n,那么所有的排行为偶数的对应标签都会被选中

　　结构伪类选择器使用语法

　　选择器 功能描述
　　E:fisrt-child 作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
　　E:last-child 作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同
　　E:root 选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同
　　E F:nth-child(n) 选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.
　　E F:nth-last-child(n) 选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个        元素，与last-child等同
　　E:nth-of-type(n) 选择父元素内具有指定类型的第n个E元素
　　E:nth-last-of-type(n) 选择父元素内具有指定类型的倒数第n个E元素
　　E:first-of-type 选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同
　　E:last-of-tye 选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同
　　E:only-child 选择父元素只包含一个子元素，且该子元素匹配E元素
　　E:only-of-type 选择父元素只包含一个同类型子元素，且该子元素匹配E元素
　　E:empty 选择没有子元素的元素，而且该元素也不包含任何文本节点

注：（1），“ul>li:nth-child(3)”表达的并不是一定选择列表ul元素中的第3个子元素li，仅有列表ul中第3个li元素前不存在其他的元素，命题才有意义，否则不会改变列表第3个li元素的样式。

（2），:nth-child(n) 中参数只能是n，不可以用其他字母代替。

（3），:nth-child(odd) 选择的是奇数项，而使用:nth-last-child(odd) 选择的却是偶数项

HTML5新标签使用及CSS选择器(伪类)的更多相关文章

  1. HTML5新标签和CSS伪类

    HTML5提供了很多新的标签,由于HTML5的兼容性比较差,HTML5的标签常用于手机端 <nav> <footer> <section> <header&g ...

  2. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  3. html5\CSS3有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

    (1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...

  4. CSS 基础知识点 样式 选择器 伪类

    CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

  5. 让ie浏览器支持html5新标签的解决方法(使用html5shiv)

    没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...

  6. CSS动态伪类选择器温故-3

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  7. Html5新标签解释及用法

    Html5新标签解释及用法 HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要 ...

  8. Html5新标签及用法

    HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2  HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务( ...

  9. 让IE6,7,8支持HTML5新标签的方法

    很多网站对网页进行重构的时候,提高标签的语义性,在网页中大量使用了section,article,header等HTML5新标签.考虑到目前win7自带的IE浏览器版本是IE8,而IE8不支持HTML ...

随机推荐

  1. hashCode() 和 equals()的问题解答及重写示范

    本章的内容主要解决下面几个问题: 1 equals() 的作用是什么? 2 equals() 与 == 的区别是什么? 3 hashCode() 的作用是什么? 4 hashCode() 和 equa ...

  2. 99乘法表（for循环嵌套）

    计算乘法表 两个数相乘,外层循环代表被乘数,控制行数:内层代表乘数,控制列数. 循环嵌套,变量名不可以重复. 使用 break 语句让输出的乘法表更简洁. 使用 String 变量,做 String ...

  3. 003.CI4框架CodeIgniter, 控制器Controllers的访问地址

    01.我们新建一个System文件夹,然后创建一个Login.php类,代码如下: <?php namespace App\Controllers\System; use App\Control ...

  4. 二次urldecode注入

    原理大多数web程序都会对输入字符进行转换,例如addslashes(),mysql_real_escape_string(),mysql_escape_string(),也就是对单引号',双引号&q ...

  5. springcloud--ruul（路由网关）

    Zuul的主要功能就是路由转发和过滤器 实例: 1:添加依赖pom.xml: <dependencies> <dependency> <groupId>org.sp ...

  6. SQL语句--分组统计

    一.教师号 星期号 是否有课1 2 有1 3 有2 1 有3 2 有`1 2 有写一条sql语句让你变为这样的表教师号 星期一 星期二 星期三1 2 12 13 1各星期下的数字表示:对应的教师在星期 ...

  7. CentOS 6.8 32位 安装mysql8

    1.清理掉之前安装过的mysql rpm -qa | grep mysql mysql-libs-5.1.52-1.el6_0.1.x86_64 yum remove mysql-libs-5.1.5 ...

  8. centos6.5搭建hadoop单节点

    1.添加用户 groupadd  hadoop useradd -d /home/hadoop -m hadoop -g hadoop passwd hadoop    修改密码 付给用户sudo权限 ...

  9. 常用Java工具类

    一. org.apache.commons.io.IOUtils closeQuietly:关闭一个IO流.socket.或者selector且不抛出异常,通常放在finally块 toString: ...

  10. 070-PHP数组相加

    <?php $arr1=array('a','b','c'); //定义一个数组 echo '数组$arr1的信息:<br />'; print_r($arr1); //输出数组信息 ...