HTML5标签和CSS选择器汇总

HTML5标签和CSS选择器汇总

在设计html文档结构是我们不应该仅使用某一种标签，例如什么地方都用div，这样既使html结构混乱有十分让人难看懂理解。html5以来增加了很多有意义的标签，例如section，aside，article等等，在合适的地方使用相应语意的标签会使html结构更加易理解，更加易维护，更加健壮。

CSS选择器会用CSS的选择器还不够，灵活高效的使用才是关键，关键运用的基础是掌握足够多的选择器，对他们的特性足够了解。

HTML5常用的一些标签

标签名称	功能
div	用来完成网页的基本布局，对CSS属性支持较好, 是网页中最常用的布局标签
h1~h6	一级道六级标题，块级元素
p	用于显示一个段落，块级元素
a	显示超链接文本，文本级元素，有各种状态（hover、visited、active、link）
ol	有序列表，显示会显示阿拉伯数字序号，可用css属性取消
ul	无序列表，块级元素，常用在导航栏，批量数据显示的地方
li	列表中的项目，li即list的缩写
strong	强调标签，显示效果为加粗
em	使文字倾斜，em在CSS中为一种表示相对于父类的单位
article	定义文章的标签
section	定义区块，语意比div强
aside	定义侧边栏
video	功能标签，用来播放视频
audio	功能标签，用来播放音频
canvas	用来定义图形
command	用来定义命令按钮
datalist	定义下拉列表
tetails	定义元素细节
footer	页脚，定义section或者page
nav	定义导航链接
dialog	定义对话框
output	定义输出的一些类型
source	定义媒介源
summary	为<details>定义可见的标题
time	定义日期/时间
br	换行
img	显示图片，特点：显示的图片可以被搜索引擎收录
table	显示网格，需配合tr、td标签来使用
aside	定义侧边栏，即使文字增加侧边栏的语意，块级元素
acticle	定义文章，块级元素
span	定义局部，常配合其他标签使用，文本级元素
form	定义表单，块级元素
audio	功能标签，用来播放音频，
video	功能标签，用来播放视频
html	定义整个html文档
head	定义文档基本属性信息
meta	定义文档的元信息
title	定义文档的标题
link	用来关联外部文档
style	设置内联CSS属性标签
body	放置网页可见的部分

 

CSS选择器汇总

选择器	例子	描述
通配符选择器	*{    }	用来选择文档中所有元素
id选择器	#id{    }	选择此表示此id的元素
标签选择器	p{    }、a{    }、span{    }	对某类元素进行选择
类选择器	.className{    }	对标识每个类名的元素进行选择
后代选择器	div  p{   }	不分层级，满足匹配规则直接选择
子代选择器	div>p{   }	只在子元素中找
相邻选择器	div+p{    }	只找div与p相邻者的、紧挨着的，只找下面，不找上面
兄弟选择器	.className~p{    }	只选择同一级别的，离的很近的元素
并集选择器	div p，article p{    }	使用逗号分隔，每个选择器选中的
伪类选择器	a：hover{    }    div：after	伪类指的是标签的不同状态