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 | 伪类指的是标签的不同状态 |