HTML5元素表
文本元素
超链接
- 页面目标
<a href ="目标">内容 </a>
链接的目标（路径）可以是相对地址也可以是绝对地址。
emment插件
CTRL+D 复制光标所在行的内容
- 锚点
当前页面的跳转
格式：
1.ID属性的元素
2.a中href的值是 （# + 1的属性值）
- 功能
a元素书写格式：
<a target="页面打开位置" ?href="目标">内容 </a>页面打开位置指点击后哪里打开新文档。
_blank指在新窗口打开。
<a href="#">内容</a>|
表示返回页面顶部
<a href="Tel:13434354544">联系我们</a>表示拨打电话
blockquote 整段引用
q 小段引用
abbr 缩写引用 ：显示缩写内容（关键字），title属性是鼠标悬浮点显示全部内容。
cite 参考文献引用
<a><cite></cite><a>
cite作为属性时，表示引用内容的来源，浏览器会忽略，但屏幕阅读器可以识别，搜索引擎会识别。
Strong 着重书写，若有语言浏览器，会着重阅读strong内容
B 粗体
i 斜体
em 斜体，若有语言浏览器，会着重阅读i内容
DIV元素
它是一个非常常见的元素
它没有任何的语义
它仅仅表示一个容器，用于包含其他元素，嵌套结构
在网站布局时，它通常用于表示页面区块
仅表示区域，不产生任何效果
语义化标签
它们和DIV没有本质区别，具有语义
- header用于表示页面或某个区域的头部，在页面可以出现多次，通常情况下有两种样式：
1.网页的头部（页眉）
2.内容的标题
nav 用于导航栏，一般是唯一的
aside 用于表示分周围主题相关的附加信息，与周围文本没有密切关系的内容（AD，相关链接）
article 用于表示文章或其他可能独立页面存在的内容，表示一个完整的或自成一体的内容块，比如内容（博客）或新闻报道。
section 用于表示一个整体的一部分主题，适合以任何标题开头的内容块。
section和div的区别：如果是标题开头的内容块，其他的语义化标签都不适用，那section比div更适用。
- footer 用于表示页面或某个区域的脚注。
无语义标签
div 表示页面中的一块区域
spam 仅用于给一段文本添加样式
br 空元素，用于在页面中换行（行间距没法控制，不建议使用）。
hr 空元素，用于在页面中制造一个分割线（没法控制样式，不建议使用）。
pre 预格式化元素，保留文字在源代码中的格式
实体字符
书写格式：&实体名称；或&#实体编号；
常见实体字符：
- 显示结果 ??实体名称 ???实体编号 ??描述- ???????????空格 ?????& nbsp； ???&# 160;- ??< ?????小于符号 ?????& lt； ???&# 60;- ??> ?????大于符号 ?????& gt; ????&# 62;- ??& ?????并且符号 ????& amp; ????&# 38;- ??? ?????版权符号 ????& copy ; ??&# 168; ???????????????????????????
CSS选择器
基本选择器
元素选择器类选择器ID[不推荐使用,预留给JS]通配符选择器格式: *+{声明块}例子: *{ color:red;}适用性范围等同于html并集选择器/组合选择器格式: 元素或类或id+","+元素或类或id+","+元素或类或id","+{声明块}例子: h1,.cc,h3{ color:red;}层次选择器
[子级选择器]格式:父级元素名称+">"+子级元素名称+{声明块}例子: div>p{color:red;}[后代选择器]格式:祖先元素名称+空格+后代元素名称+{声明块}例子: div p{color:red;}[兄弟选择器]格式: A元素名称+"+"+B元素名称+{声明块}例子: div+P{color:red;}注:选择A元素后的B元素,AB之间不许有其他元素.[通用选择器]格式:同级元素A+"~"+同级元素B+{声明块}例子: div~p{color:red;}注:表示选择与A元素同级别的所有B元素(B的位置是在A后面)伪类选择器
[动态伪类选择器]未访问a:link{color:black;}鼠标悬停a:hover{color:pink;}鼠标点击时a:active{color:green;}点击后a:visited{color:五颜六色;}注:hover是可以用于多个元素身上的,但其他三个只能用于具有点击功能的元素上.a:focus{color:pink;}多用于输入框或链接,tab键换选注:IE7以前不支持:focus注:IE6以前不支持:hover active以上5个的顺序要求:A: ?link,visited,focus,hover,activeB: ?visited,link,focus,hover,active[结构伪类选择器]格式:元素名称+":nth-child(n)"+{声明块}例子: section:nth-child(2){color:deeppink;}表示选中html里的第二个section元素,文字设置为deeppink选中第一个格式:元素名称+":first-child"+{声明块}例子: p:first-child{color:red;}选中最后一个格式:元素名称+":last-child"+{声明块}例子: p:last-child{color:red;}选中奇数项格式:元素名称+":nth-child(odd)"+{声明块}例子:section:nth-child(odd){color:deeppink;}选中偶数项格式:元素名称+":nth-child(even)"+{声明块}例子:section:nth-child(even){color:deeppink;}伪元素选择器
元素后面加内容格式:元素名称+":after"+{content:"要添加的内容";}例子: ?i:after ???????{content:"姓名";}元素前面加内容格式:元素名称+":before"+{content:"要添加的内容";}例子: ?i:before ???????{content:"姓名";}元素第一行添加样式格式:元素名称+":first-line"+{声明块}例子: p:first-line{color:red;}元素第一个字母或第一个汉字格式:元素名称+":first-letter"+{声明块}例子: p:first-letter{color:red;}注:为了解决兼容性,伪元素选择器,建议打两个冒号
叠层概述
比较优先级
每一个声明都有一个优先级，当发生冲突时，优先级高的保留。一个声明的优先级，与它的来源和重要性有关。
若属性值后跟上！importment,则表示一条重要声明，否则为普通声明。
{color:red ???!importment ；}- 优先级
1.用户样式表重要声明
2.作者样式表重要声明
3.作者样式表普通声明
4.用户样式表普通声明
5.浏览器默认样式表
比较特殊性
每一个声明都有一个特殊性（特指度，特指值 Specificity），当发生冲突时，特殊性高的会保留，特殊性低会被淘汰。
一个声明的特殊性，取决于规则适用范围的大小。规则适用范围越大，特殊性越低，适用范围小，特殊性越高。
- 行内样式>ID选择器>类选择器>元素选择器>通配选择器
在比较特殊性时，每一个冲突的声明，会生成4个数字（a.b.c.d）
依次比较特殊性a越大。特殊性越高，若a相同，比较b，依次类推。
当计算选择器分组的时候，要分开计算。
a:若声明中是行内样式，则为1，否则为0.
b:规则中ID选择器的个数
c:规则中类选择器，伪类选择器和属性选择器的个数
d:规则中元素选择器，伪元素选择器的个数
HTML5元素表
原文地址：https://www.cnblogs.com/web--yang/p/8848649.html