好程序员
HTML5
培训教程
-html
和
css
的使用方法以及样式，很好的基础知识系列，内容都是干货知识点，适合收藏下来！
布局步骤
第一步：
清除默认样式
第二步：
划分模块
第三步：
设置模块的大小以及位置
第四步：
划分下一级模块
html
和
css
引入网页头像
<link rel="shortcut icon" href="img/...ico">
css
样式表的引入方式
css
样式表的引入方式
1
、外链式
<link
href
=
""
rel
=
"stylesheet"
>
2
、嵌入式
<style></style>
3
、行内样式
<div
style
=
"width:200px;height:200pxs;"
></div>
-
@import url('')
文件命名以及变量命名
命名规范
1
、严格区分大小写
2
、可以采用字母数字下划线
$,
数字不开头
3
、命名语义化
4
、可以采用驼峰命名法
清除默认样式
清楚边距
*{
margin
:
;
padding
:
;
list-style
: none;
}
a
标签清楚下划线和颜色
a
{
color
: black;
text-decoration
: none;
}
css
中颜色的表示方式
css
中颜色的表示方式：
1.
预定义的颜色【关键字颜色】
red pink blue yellow
2.#6
位数的色值
#00-00-00
红绿蓝
3.rgb
（红，绿，蓝）
：
rgb([0-255],[0-255],[0-255])
4.rgba
（
red
，
green
，
blue
，透明度）
：
rgba([0-255],[0-255],[0-255]
，
[0-1])
0-1: 0
全透明，
1
不透明
html
中的标签和属性
html
：
标签：
按照语法分类：
1.
单标签：只有开始标签
meta img a
2.
双标签：有开始标签和结束标签
<html>
</html>
3.
属性的语法
语法：
属性名
=
"
属性值
"
属性名
=
"
属性值
1
属性值
2"
注意
:
1
、标签名和属性名之间要有空格
2
、多个属性之间要有空格
3
、多个属性值之间要有空格
4.
开始标签
标签名后有空格
按照标签在页面中的呈现效果分类：
1
、行内元素
行内元素定义
:
在一行内显示，只能设置左右间距，不可以设置上下间距。
举例：
span del i em b strong a(title=
"
鼠标移入时显示的文字
"
;target=
" "
(
新窗口打开的位置
_self:
在本窗口打开
;_blank:
在新窗口打开
) ...
2
、块元素
块元素定义：可以设置宽高，独占一行。
举例：
div
标题标签
列表标签
段落标签
...
3
、行内块元素
行内块元素定义：可以设置宽高，在一行显示。
举例：
img
【
title=
"
鼠标移入时显示的文字
"
】
表单控件
元素的转换
块元素：
display:
block;
行内块元素：
display:
inline-block;
行内元素：
display:
inline;
元素的级别
块元素
>
行内块元素
>
行内元素
元素嵌套规范
1
、同一级别可以相互嵌套
2
、级别高的元素可以嵌套级别低的元素
3
、段落标签只能嵌套行内元素
4
、
a
标签不可以嵌套
a
标签；
p
不能嵌套
p
盒子模型及其问题
四部构成：
1
、
margin
外间距
盒子与盒子之间的距离
2
、
border
边框
3
、
padding
内填充（内间距）
边框与内容之间的距离。
4
、
content
内容
margin-top margin-right margin-bottom margin-left
margin:
50px;
上
右
下
左
margin:
50px 100px;
上下
左右
margin:
0 auto; auto
自动
margin:
50px 100px 150px;
上
左右
下
margin:
50px 100px 150px 200px;
上
右
下
左
border:
1px solid red;
border-top
\ border-right \border-bottom \ border-left
border-top-width
：上边框的宽度
padding:
设置方法同
margin
content: ;
width :
数值
百分比
auto
height:
数值
百分比
auto
盒子模型的问题：
1.
大部分元素的
margin
和
padding
默认为
，但有一部分的
margin
和
padding
不为
，例如
body
标题标签（
h2-h7
）（
ul
ol
il
等列表标签）
段落标签
2.
想领的两个块元素的
margin
会重合，值会取最大值
3.margin
可以为
[
负数
]
，
padding
不可以设置
[
负数
]
。
4.
行内元素
margin
只有左右，没有上下
5.
如果（
1
）发生嵌套关系的元素，（
2
）父元素没有上边框，（
3
）上
padding
，（
4
）父元素与子元素之间没有别的内容，此时子元素
margin-top
就会作用到父元素身上
margin-top
的解决方式：
1.
用父元素的
padding-top
代替子元素的
margin-top
；
2.
给父元素添加
overflow
：
hidden
；
宽高的设置和计算
height
：
auto /
百分比
/ px
；
width
：
auto /
百分比
/ px
；
height
：
auto
；
参照与父元素
width
：
auto
；参照与内容
box-sizing
：
border-box
；
将边框算入盒子内；
一个元素实际的宽高
实际宽度
= border-left + padding-left + width +paddint-right + border-right;
实际高度
= border-top + padding-top + height + padding-bottom + border-bottom;
浮动
作用：让块元素横排排列
样式：
float
：
left
；从左往右排列
float
：
right
；从右往左排列
原理：让元素脱离文档流，让元素从文档层浮动到浮动层。
引发的问题：父元素不设置高度，子元素都浮动，浮动的子元素撑不开父元素。（浮动的元素脱离文档流）
*
解决方式一：给父元素添加
overflow
：
hidden
；（超出部分隐藏）
*
解决方式二：在父元素内容最后添加拥有清除浮动属性的元素。
clear
：
right/left/both
；
别的浮动对它的影响清除掉
例：
.box
：
after{
content:
"";
display:
block;
width:
0;
height:
0;
clear:
both;
}
*
解决方式三：父元素能设置高度的尽量设置高度
浮动之后的块元素参照内容：属性值
auto
定位
定位的元素脱离文档层，到达定位层
定位的元素会多出
5
个样式：
top
right
bottom
left
z-index
：
999
上
右
下
左
层级（层级越高，离用户越近）【只能在有定位属性的元素上才能用】
层级：
z-index
：整数；
定位的几种方式：
1.
相对定位：
相对于自身来定位，在文档层中保留原来的位置
用法：
position
：
relative
；
2.
绝对定位：
相对于最近的
定位的
祖先元素
来定位，完全脱离文档流（其他顶替其位置）
用法：
position
：
absolute
；
+
方向值
3.
固定定位：
相对于浏览器的四条边，完全脱离文档流
用法：
position
：
fixed
；
top
与
bottom
同时定义，那个样式会作用到元素身上的判断关系：
top
的权重比
bottom
的权重大
left
的权重比
right
的权重大
元素作用时：
1.
如果是
position
：
relative
；
left
：；
margin
：；
先作用
margin
，在作用
relative
；
2.
如果是
position
：
absolute
；
left
：；
margin
：；
先作用
absolute
，在作用
margin
；
定位元素的居中方式：
方法一：
1
.
水平居中：
position
：
absolute
；
left
：
50
%
；
margin-
left
：
-
自身长度的一半；
2
.
垂直居中：
position
：
absolute
；
top
：
50
%
；
margin-top
：
-
自身长度的一半；
3
.
绝对居中：
position
：
absolute
；
left
：
50
%
；
top
：
50
%
；
margin-
left
：
-
自身长度的一半；
margin-top
：
-
自身长度的一半；
方法二：
1
.
水平居中：
position
：
absolute
；
left
：
；
right
：
2D
和
3D
2D
和
3D
属性：
1.
平移样式
transform
:translate(x,
y
);
向上为负，
向下为正
transform
:translateX(100px);
transform
：
rotate
（
180
deg
）
；
（
1
turn
）转一圈
平移
transform
:translate
（）
例子：
translate
（
x
，
y
）
translateX
（）
旋转
transform
:rotate
（）
例子
rotate
（
180
deg
）顺时针
-180deg
逆时针
transform
：
rotate
（）空格
translate
（）；
transform-origin
:px
px
;
变换的中心点；
left
center
；
缩放
transform
:scale
（）
例子：
scale
（
2
）
放大为原来的
2
倍
scale
（
0.n
）缩小为原
来的
0.n
scale
（
m
，
n
）
x
轴
m
，
y
轴
n
斜切
transform
:skew
（）
例子：
skew
（
45
peg
）
左拉伸
45°
skew
（
45
peg
，
m
）
-
过渡
transition
transition
：
all 0.5s
；
全部
时间
3.
过渡的属性样式：
transition-property:
，
;
可以为：属性的全部样式
4.
过度的总时间：
transition-duration
：；
5.
过渡的时间函数：
transition-timing-function
：；
linear
（匀速）
ease
（开头结尾慢，中间快）
cubic-bezier
（
1
，
0.07
，
0.54
，
0.21
）
贝塞尔曲线
6.
延迟
transition-delay
：；
3d
效果：和
2d
的一样
transition
，
transform
；
prespective
：给父元素加
prespective
（灭点的值）
prespective-origin
：
x y
；灭点的位置
调整观察的角度（大多数情况不设置）
transform
：
ratate3d
（
0-1
的值
,
0-1
的值
,
0-1
的值
,
45
deg
）
transform
：
ratateY
（
45
deg
）
transform
：
translate3d
（
0-1
，
0-1
，
px
）
父元素：
transform-style
：
preserve-3d
；
动画
动画规则：
@
keyframes
动画名（随便给）
{
（动画规则）
from
{}
to
{}
}
@
keyframes
动画名（随便给）
{
（动画规则）
0%{}
50%{}
100%{}
}
@
keyframes
animation1{
from
{
background-color
:red;
}
to
{
background-color
:blue;
}
}
挂载动画
:
将动画加到元素身上
.
元素
{
animation
：
animation1
时间
步数
时间函数
延迟时间
次数
；
}
挂载多个动画：
.
元素
{
animation
：
animation1
时间
,animation2
时间
,animation1
时间；
其他动画的相同的可以附件通过
animation
属性；
}
animation
的样式
动画名：
animation-name
时间：
animation-duration
步数：
animation-steps
：
8
；
时间函数：
animation-timing-function
延迟：
animation-delay
动画次数：
animation-iteration-count
：
infinite
（无限次）
/2
；
指定下一次动画是否逆向：
animation-direction
：
alternate
（逆向）
/ normal
（常规）；
最后的状态：
animation-fill-mode
：
backwards
（默认（保持一开始的状态））
/forwards
（保持当前的状态）；
状态即指定动画是否运动：
animation-play-state: running
（运行）
/paused
（静止）
;
元素分类
按照在页面中的呈现效果：
1.
行内元素：在一行内显示
，不可以设置宽高
：（存放文字）
span a b i
strong
del
2.
行内块元素：在一行内显示，可以设置宽高：（有缝隙
不常用）
img
表单控件
3.
块元素
：可以设置宽高，独占一行
div
标题标签（
h2-h7
）
列表标签（
ul-li ol-li dl>dt+dd
段落标签
（
p pre
））
元素嵌套规范：
1.
同一级别可以相互嵌套
2.
级别高的可以嵌套级别低的元素
3.p
标签只能嵌套行内元素
4.a
链接不能相互嵌套
元素的转换：
1.
块元素：
display
：
block
；
2.
行内块元素：
display
：
inline
-block
；
3.
行内元素：
display
：
inline
；
背景图片以及浏览器内核
背景图
先设大小，在引
background
；
background:
url(
'
路径
'
) no-repeat left bottom/contain
；
//
图片位置
禁止重复
位置（
top bottom left right
）
-
路径：
background-image
：
url
（
“”
），
url
（
“”
）；加载多张背景图
-
背景图大小：
background-size
：
100px auto
，
100px auto
；
会重复
-
背景的图重复：
4.
background-
repeat
：
no-
repeat
，
repeat
；（无重复）
5.
background-
repeat
：
repeat
-x
（
x
方向重复）
background-
repeat
：
repeat
-y
（
y
方向重复）
-
背景图的位置：
background-position
：
x y
；（数值
方位值（
top/bottom
left
/
right
center
（可以省略））
）
-
背景开始渲染的位置：
background-origin: ;
8.
padding-
box
；（默认）从
padding
位置开始渲染
9.
border-
box
；从边框的位置开始渲染
content-
box
；从内容的位置开始渲染
-
图片结束渲染的位置：
background-clip: ;
11.
padding-
box
；（默认）从
padding
位置结束渲染
12.
border-
box
；从边框的位置结束渲染
content-
box
；从内容的位置结束渲染
-
使得背景图加载到浏览器中
background-attachment: fixed;
8.
可以简写：
background
：空格隔开；
-
背景图渐变
background: linear-gradiend(top
，颜色
1
，颜色
2
，颜色
n)
//
渐变开始的方向（默认
top
）
类似
25deg
（
25
度）
10.
浏览器内核
//
背景色渐变
1.
/*
标准语法
*/
例子：
background
:
linear-gradient
(
top
,
#3bbcff
,
#47eaff
);
2.
/*
谷歌内核
-webkit- */
例子：
background
:
-webkit-linear-gradient
(
top
,
#3bbcff
,
#47eaff
);
3.
/*
火狐内核
-moz- */
例子：
background
:
-moz-linear-gradient
(
top
,
#3bbcff
,
#47eaff
);
4.
/*
欧鹏内核
-o- */
例子：
background
:
-o-linear-gradient
(
top
,
#3bbcff
,
#47eaff
);
5.
/* IE
内核
-ms- */
例子：
background
:
-ms-linear-gradient
(
top
,
#3bbcff
,
#47eaff
);
文件的读取方法路径
绝对路径：从盘符开始的一条完整路径
相对路径：两个文件的位置关系
边框的相关属性【圆角，边框形状】
border-radius
：边框的半径
设置圆角
n%
或者
num
像素
border-style:dotted solid double dashed;
上边框是点状
右边框是实线
下边框是双线
左边框是虚线
透明度
透明性的选择：（整个容器都变）
opacity
：；
0-1
之间的值；
字体
font-family =“
字体
” //
字体样式可以被继承
鼠标移入样式
span
标签
cursor
：
pointer
；
鼠标样式：手型
阴影
box-shadow
：
x
轴偏移量
y
轴偏移量
阴影的模糊程度
阴影的大小（
和本身一样大小）
阴影的颜色；
引入字符图标
引入字符图标：
行内元素
随意
span class=“iconfont
图标类名
”
可调节样式：
同文字
文档流
文档流：
标准情况下
，页面元素从左往右
从上往下
依次排列
flex
布局
(
规范的设计稿
)-
弹性布局
容器（父元素）的属性：【
display:flex;
】
*flex-direction:
决定主轴方向。
row
主轴在水平方向，从左向右（默认）。
row-
reverse
主轴在水平方向，从右向左
column
主轴在垂直方向，从上到下
column-
reverse
主轴在垂直方向，从下到上
*flex-
wrap
:
决定项目换行
wrap
:
项目换行
nowrap:
项目不换行（默认值）
wrap
-
reverse
：
项目换行且反转
*justify-content:
决定项目在主轴的对齐方式
flex-start;
主轴的起点
flex-
end
;
主轴的终点
center;
主轴的中心
space-between;
两端对齐
space-around;
项目两侧距离相等
*align-items
：项目在交叉轴上的对齐方式（适用于一根轴线与多跟轴线）
flex-start:
交叉轴的起点
flex-
end
：交叉轴的终点
Center
：交叉轴的中心
baseline
：
基线对齐（文本底部）
*align-content:
定义项目在交叉轴上的对齐方式（仅适用于多根轴线）
flex-start;
交叉轴的起点
flex-
end
;
交叉轴的终点
center;
交叉轴的中心
space-between;
两端对齐
space-around;
两侧距离相等
子元素（项目）的属性：
*order
：定义项目的排列顺序，数值越小，越靠前，默认值为
（可以取负值）。
*flex-
grow:
定义项目的放大比例。默认值为
，即使存在剩余空间，也不放大。
*flex-shrik
：定义项目的缩小比例，默认值为
1
，空间不足，项目缩小
;
值为
时
,
空间不足
,
项目也不缩小
.
*flex-
basis:
定义项目占据的主轴空间
.
默认
auto
或者自己添加像素
;
*align-
self:
定义单个项目在交叉轴的对齐方式
.
flex-
start:
交叉轴的起点
flex-end
：交叉轴的终点
Center
：交叉轴的中心
滚动条
overflow-x
：
auto
；超出部分在
x
轴的表现形式。
auto
：自动；（如果超出，就自动以滚动条的形式显示）
去滚动条：
加在具有
overflow
属性的元素身上
::-webkit-scrollbar
{
height
：
；
}
overflow-x: visible|hidden|scroll|auto|no-display|no-content;
值
描述
测试
visible
不裁剪内容，可能会显示在内容框之外。
测试
hidden
裁剪内容
-
不提供滚动机制。
测试
scroll
裁剪内容
-
提供滚动机制。
测试
auto
如果溢出框，则应该提供滚动机制。
测试
no-display
如果内容不适合内容框，则删除整个框。
测试
no-content
如果内容不适合内容框，则隐藏整个内容。
测试
轮播图
swiper(.js).com
表格
[
行
] [
列
]
table
身上的属性
table
身上的属性：
border
：表格边框
cellspacing
：单元格间的间距
cellpadding
：单元格的内容与其边框的内边距
bgcolor
：表格的背景颜色
background
：表格的背景图片
width
：表格宽度
height
：表格高度
border-collaspe
：
collaspe
：边框合并，不叠加
cellspacing
：
：边框合并，但合并之后的边框宽度等于
前两个边框宽度之和
caption
：表格标题
background:
表格背景图
cellspacing:
单元格之间的间隙宽度
align:
表格的水平对齐方式，通常是
left
，
center
，
right
表格的标题
<caption align="
水平对齐方式
" valign="
标题与表格的相对位置
"></caption>
单元格【
tr
】【
td
】
width
：单元格宽度
height
：单元格高度
align
：单元格内文本的对齐方式
,
通常是左，中，右
left
，
center
，
right
valign
：单元格内文本的对齐方式
,
通常是上，中，下
top
，
middle
，
bottom
nowrap
：在为设置单元格宽度时，当文本长度宽于单元格宽度，将要换行时，该标签会使其不换行
<tr
align
=
"center"
valign
=
"bottom"
>
<td
align
=
"center"
nowrap
>
手机空中免费充值
</td>
<td
width
=
"100px"
>
IP
卡
</td>
<td
width
=
"100px"
bgcolor
=
"#006400"
valign
=
"top"
>
网游
</td>
</tr>
表格的跨行与跨列【
td
】
rowspan
：跨行标签，表示跨了多少行
colspan
：跨列标签，表示跨了多少列
表格标签拓展及其属性
thead
：定义表格的表头。
tbody
：定义表格主体（正文）。
tfoot
：定义表格的页脚（脚注或表注）。
colgroup
：标签用于对表格中的列进行组合，以便对其进行格式化。
注意：不管
thead
、
tbody
、
tfoot
的代码先后顺序如何，
html
显示时，始终是先显示
thead
，再显示
tbody
，最后显示
tfoot
。
1
、
<thead>
内部必须拥有
<tr>
标签！
2
、
<tfoot>
元素内部必须包含一个或者多个
<tr>
标签。
3
、
<tbody>
元素内部必须包含一个或者多个
<tr>
标签。
4
、必须在
table
元素内部使用这些标签。
5
、当不同行间的单元格合并时各单元格所在的行不要加
tbody
标签。
标题栏
《
tr
》
<th></th>
《
/tr
》
用法和
td
相似
知识自动将单元格内容以粗体显示
表单控件表单标签
<form action=" " method=" ">
action:
表单信息提交的位置；
method
：提交的方式
get
：地址栏，信息量少，安全性低
post
：信息量多，比较安全
1.
输入文本【输入框】：
用户名：
<input
type
=
"text"
placeholder=
"
请输入用户名
"
maxlength=
"10"
value=
" "
name=
"username"
class
=
""
>
placeholder
：默认提示文本
;
maxlength:
规定输入的最大字符数
name:
本文本框的名字，与后台进行数据交互用
class
:
定义本文本框的样式，相当于盒子
placeholder
下的缩进
text-indent
：
2
em
；缩进
2.
输入密码【密码框】：
密码：
<input
type
=
"password"
placeholder=
"
请输入密码
"
maxlength=
"10"
value=
" "
name=
"psw"
class
=
""
>
3.
单选按钮
[name
的值必须相同
]
：
请选择你的性别：
<label
for
=
"man"
> [label
实现点什么就选中
，
for
中的值和
id
中的值相同
]
男：
<input
type
=
"radio"
name=
"sex"
id=
"man"
checked>
//checked
默认选项
</label>
<label
for
=
"woman"
>
女：
<input
type
=
"radio"
name=
"sex"
id=
"woman"
>
</label>
4.
多选按钮
[name
的值必须相同
]
：
请选择你喜欢的音乐：
摇滚：
<input
type
=
"checkbox"
checked>
摇滚：
<input
type
=
"checkbox"
checked>
摇滚：
<input
type
=
"checkbox"
checked>
5.
下拉列表【下拉框】：
选择你的学历：
<select name=
""
id=
""
>
<option value=
""
>
学士
</option>
<option value=
""
>
博士
</option>
<option value=
""
>
硕士
</option>
</select>
6.
上传文件：
选择你的照片：
<input
type
=
"file"
>
7.
留言文本空间：
<textarea name=
""
id=
""
rows=
""
col=
""
>
</textarea>
8.
用户是否允许重新设置
textarea
大小
css
属性：
resize: none/both/vertical/horizontal;
不允许
/
上下允许拖动
/
只能在垂直方向拖动
/
只能在水平方向
拖动
9.
重置按钮：
<input
type
=
"reset"
>
10.
提交按钮：
<input
type
=
"submit"
>
11.
自定义按钮：
<input
type
=
"button"
value=
"
按钮
"
>
<button>
搜索
</button>
12.
颜色：
<input
type
=
"color"
>
13.
时间日期：
年月：
<input
type
=
"month"
>
年周：
<input
type
=
"week"
>
时分：
<input
type
=
"time"
>
年月日：
<input
type
=
"date"
>
年月时分：
<input
type
=
"datetime-local"
>
14.
验证
<input
type
=
"email"
>
邮箱验证
<input
type
=
"tel"
autofocus>
电话
15.
autofocus
自动获取焦点
</form>
文本模型
文本换行
使非中日韩文本换行
word-break: break-all ;
文本禁止换行
white-space:nowrap;
单行文本溢出部分以省略号显示
overflow: hidden;(
放文本的容器
)
text-overflow: ellipsis;
多行文本溢出
-
指定为弹性盒子
display: -webkit-box;
-
在弹性盒模型中指定元素的排列顺序
-webkit-box-orient: vertical;
-
指定文本显示（溢出）的行数
;
-webkit-line-clamp: 3;
-
height
要是
line-height
的倍数
line-height: 70px;
-
overflow
：
hidden
；
音频视频标签
音频标签
<audio src="" controls loop autoplay></audio>
controls
空间向用户显示：
loop
循环播放
autoplay
当前页面加载完自动播放
视频标签
<video src="" controls loop autoplay></video>
H5
语义化标签
<header>
头部
</header>
<nav>
导航
</nav>
<aside>
侧导航
<aside>
<section>
页面中的某一部分
</section>
<main>
主体
</main>
<footer>
底部
</footer>
meta
标记【签】
name="
关键字
" cantent="
内容
"
<mate http-equiv="Refresh" content="10";url="
跳转路径
"> //
每
10s
刷新一次并且跳转到跳转路径知识的文件
bgsound
标签
<bgsound src="
路径
" loop="
播放次数
">
body
属性
-
bgcolor:
背景颜色
-
background
：背景图片
-
text
：文档中文字的颜色
-
link
：超链接的颜色
-
alink
：正在访问的超链接的颜色
-
vlink
：已访问过的超链接的颜色
-
leftmargin/rightmargin/topmargin/bottommargin
：
左
/
右
/
上
/
下边距的像素值
对文字操作的标签
-
<p></p>
开始一个新段落，可单可双
-
换行标签，单独标记
-
<pre></pre>
预格式化【敲什么样式，显示什么样式】
-
<font></font>
用来设置文字的字体
大小
颜色
粗细等
-
文字样式标记
[
均成对出现
]
b
粗体
i
斜体
u
下划线
tt
等宽
sup
上标体
sub
下表体
strike
删除线
big
大号字样
small
小号字样
blink
闪烁字样
em
强调字样
strong
着重字样
cite
引用字样
列表标签
-
符号列表
<ul type="circlr(
空心圆点
)/disc
（实心圆点）【默认】
/square
（实心方块）
">
2.
<li>
<li>
</ul>
-
排序列表
<ol type="1(
数字
) /a
（
a
，
b
，
c..
）
/ A(A,B,C...)/ i(i,ii,iii,...)/ I(I,II,III,...)">
4.
<li>
<li>
</ol>
a
标签
<a href="
路径
" title="
鼠标移入时显示的文字
" target=" "(
新窗口打开的位置
_self:
在本窗口打开
;_blank:
在新窗口打开；
_parent:
在当前窗口的父窗口打开链接；
_top:
在整个浏览器窗口打开
) ...
[
字符实体
]
常用的转义字符
显示结果
描述
实体名称
空格
<
小于号
大于号
&
和号
"
引号
'
撇号
(IE
不支持
)
￠
分（
cent
）
£
镑（
pound
）
¥
元（
yen
）
€
欧元（
euro
）
§
小节
©
版权（
copyright
）
®
注册商标
™
商标
×
乘号
÷
除号
选择器
分类
css
选择器
1.
通用选择器：
*
｛｝
//
选择所有的标签
2.
群组选择器：
E1,E2,E3..
｛｝
//
选择
E1 E2 E3
3.
标签选择器
标签名｛｝
4.
类名选择器：
.
类名｛｝
5.
后代选择器
.E1 .E2
｛｝
//
选择
E1
的后代
E2
6.
交叉选择器
标签名
.
类名｛｝
7.id
选择器
例如
创建
id
<div
id
=
“box”
></div>
#id
名｛｝
//
选择页面中
id
为
**
的标签
8.
伪类选择器：
鼠标移入状态
E
：
hover
{ }
E
元素选择鼠标移入状态
E
：
hover
.
子类
{ }
选择
e
元素下鼠标移入时子类的变化
获取焦点，用于表单的输入
E
:
focus
{
outline
: none;
}
9.
伪结构选择器：
E
：
first-child
｛｝
作为子元素的第一个孩子的
E
标签
E
：
last-child
｛｝
作为子元素的最后第一个孩子的
E
标签
E
: nth-child(n){} //
作为子元素的第
n
个孩子的
E
标签
E
: nth-last-child(n)
作为子元素的倒数第
n
个孩子的
E
标签
E
：
first-
of
-
type
｛｝
作为子元素的同类型的第一元素
E
：
last-
of
-
type
｛｝
作为子元素的同类型中的最后一个元素
E
: nth-
of
-
type
（
n
）
作为子元素的同类型中的第
n
个元素
E
: nth-last-
of
-
type
(
n
)
作为子元素的同类型中的倒数第
n
个元素
（
n
）
n
可以以为
num/even
（偶数）
/odd(
奇数
)/
3
n
（
3
的倍数）
例子：
5.15
/
伪结构选择器
10.
伪元素选择器：
::after{}
在元素之后加入一个
::before{
content
：
“
内容之前
”
；
color
：；
}
在元素之前
属于行内元素
::after{} ::before{}
伪元素
content
：
""
；
样式必须写
11.
子类选择器
相邻兄弟选择器
E1+E2
｛｝
选择
E1
的下一个兄弟元素
E2
（不能选中上一个兄弟元素）
div
.box>a+img a
和
img
统计
子类选择器
E1>E2{}
选择
E1
的子类元素
E2
例子：
div
.box>
div
.item{$}*
20
div
.box>a>img
12.
属性选择器
[
属性名
]{}
选择所有拥有属性为
属性名
的元素
[
属性名
=“value”]
｛｝
选择拥有属性名的属性
且属性值为
value
E
[
属性名
=“value”]{}
选择拥有属性名的属性
且属性值为
value
的
E
元素
E
[
属性名
~=“value”]{}
选择拥有属性名的属性
并且属性值一个或者多个，其中一个属性值为
value
的
E
元素
E
[value^=“1”]{}
选择拥有
value
的属性
并且属性值一个或者多个，其中一个属性值以
1
开头的
E
元素
E
[value$=“1”]{}
选择拥有
value
的属性
并且属性值一个或者多个，其中一个属性值以
1
结尾的
E
元素
E
[value*=“1”]{}
选择拥有
value
的属性
并且属性值一个或者多个，其中一个属性值包含
1
的
E
元素
例子：属性选择器
选择器的优先级
宗旨：越具体的优先级越高
id (100 ) > class( 10 )>
标签名
( 1)
.
box
.son{ }
10
+
10
=
20
abcde
优先级（
e
为个位）：
a:
行内样式
b:
id
选择器
c:
类名选择器
伪类选择器（：
hover
）
属性选择器
d:
标签选择器
伪元素选择器
（：：
after
）
e:
通用选择器有一个
选择有中有一个
abcde
在其位置
+1
移动端布局步骤
-
修改视口
<meta name="viewport" content="width=device-width">
视口：视觉视口，布局视口，理想视口
em:
当前字体的倍率
100px=10em
rem
：
html
字体的倍率
移动端窗口
375
*
667
html{
font-size
：
0.5
rem
；
}
.
box
{
width
：
750
rem
；
//375px=750rem*0.5px
；
100px=1rem
height
：
1334
rem
；
}
-
引入
rem.js
<script src="
路径
"></script>
-
修改
rem.js
中设计稿的宽度
-
100px=1rem
未完待续，感谢关注
好程序员
前端教程分享！