HTML5标签和CSS选择器汇总

女爷i 2021-09-20 15:28 268阅读 0赞

# HTML5标签和CSS选择器汇总 #

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

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

### HTML5常用的一些标签 ###

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

### **CSS选择器汇总** ###

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