HTML5元素表

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,active

B:  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:规则中元素选择器，伪元素选择器的个数

转载于:https://www.cnblogs.com/web--yang/p/8848649.html