双标签#

<(开始标签)>内容</(结束标签)>(双标签)

<>成对出现，中间为内容，<>里放英语，结束标签要多一个/

单标签#

无结束标签

<br>:换行<hr>:水平线

网页模板#

<html>//整个网页

<head>//网页头部，放给浏览器看的代码

<title>网页标题</title>

<head>

<body>

网页主体//放给用户看的代码

</body>

</html>

(vs code中!配合Enter/Tab键生成)

相对路径（重点）#

从当前文件位置出发查找目标文件

/表示进入某个文件夹里面 文件夹名字/

.表示当前文件所在文件夹 ./

..表示当前文件上一级文件夹 ..

绝对路径#

从盘符出发查找目标文件（Windows电脑从盘符出发 Mac电脑从根目录(/)出发）

例：<img src=“C:\iimages\mao.jpg”>

Windows 默认是\ ，其他系统是/，建议统一写为/ (Windows也可)

也可以用其他网页中的图片地址（右键选复制图片地址）

应用场景：友情链接

无序列表#

不需要规定顺序

标签：ul嵌套li，ul是无序列表，li是列表条目

<ul>

<li>...</li>

<li>...</li>

...

</ul>

ul标签里只能包裹li标签

li标签里可以包裹任何内容

有序列表#

需要规定顺序

标签：ol嵌套li，ol是有序列表

<ol>

<li>...</li>

<li>...</li>

...

</ol>

ol标签里只能包裹li标签

li标签里可以包裹任何内容

定义列表#

标签：cl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的内容

<dl>

<dt>列表标题</dt>

<dd>列表内容</dd>

...

</dl>

dl标签里只能包裹dt标签和dd标签

dt标签和dd标签里可以包裹任何内容

表格的结构标签#

双标签

作用：把表格划分区域（其实看不出效果）

合并单元格#

合并同类信息

跨行合并->保留最上单元格，添加属性rowspan

跨列合并->保留最左单元格，添加属性colspan

取值为数字，表示需要合并的单元格数量

注意要删除其他单元格

例：<td rowspan=“2”>…</td>

例：<td colspan=“2”>…</td>

input标签#

type属性值不同，功能不同

<input type=”…”>（单标签）

占位文本：提示信息(文本框和密码框可以用)

<input type=”…” placeholder=“提示信息”>

::placeholder 选中placeholder属性文字样式

下拉菜单#

标签：select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项

selected默认选中

<select >

<option>...</option>

<option>...</option>

<option selected>...</option>

</select>

文本域#

多行输入文本

标签：textarea，双标签

<textarea>默认提示文字</textarea>

右下角有拖拽功能，一般禁用，用CSS设置尺寸

label标签#

网页中某个标签的说明文本

可用来绑定文字和表单控件的关系，增大表单控件的点击范围

(如点击文字可以选中单选框)

按钮#

<button type=”…”>…</button>

块级元素#

如div标签

独占一行

宽度默认是父级的100%

添加宽高属性生效

行内元素#

如span标签,a标签

一行内存在多个

尺寸由内容撑开

加宽高不生效

行内块元素#

如img元素

一行共存多个

默认尺寸由内容撑开

加宽高生效

vertical-align#

行内块和行内垂直方向对齐方式

清除浮动#

若父级没有高度，子级无法撑开父级高度

1，额外标签法

在父元素内容的最后添加一个块级元素，设置CSS属性clear

2.单伪元素法

放父级元素的CSS中

.clearfix::after{

content:"";

display;

clear;

}

3.双伪元素法

.clearfix::before,

.clearfix::after{

content:"";

display

}

,clearfix::after{

clear::both;

}

before解决外边距塌陷问题

after清除浮动

4.overflow

父级元素添加CSS属性overflow

标签选择器#

使用标签名作为选择器，选中同名标签设置相同的样式

无法差异化同名标签的样式

类选择器#

差异化同名标签的样式

一个类选择器可以给多个标签使用

一个标签可以使用多个类名，class属性值写多个类名 ，类名用空格隔开

1.定义选择器->.类名（注意有点）（尽量用英语）

2.使用类选择器->标签添加class=“类名”（注意没点）

例：<style>

.red{

color:red;

}

</style>

...

<div class="red">...</div>

id选择器#

差异化设置标签的显示效果

一般配合JS使用

同一个id选择器在一个页面只能使用一次

1.定义id选择器 -> #id名

2.使用id选择器 -> 标签添加id=“id名”

例：<style>

#red{

color:red;

}

</style>

<div id="red">...</div>

通配符选择器#

查找页面所有标签，设置相同样式

*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

优先级较低

在开发初期用于清除默认样式（清除间隔）

画盒子#

使用合适的选择器画盒子

后代选择器#

父选择器 子选择器，两个选择器之间用空格隔开

例：<style>

div span{

color:red;

}

</style>

<div>

<span>...</span>

</div>

选中所有后代，即div标签内的所有内容

子代选择器#

选中某元素的子代元素（最近的子集）

父选择器 > 子选择器，父子选择器之间用 > 隔开

例：<style>

div > span {

color:red;

}

</style>

<div>

<span>...</span>

<p>

<span>...</span>

</p>

</div>

只选中了第一个span

并集选择器#

选中多组标签设置相同的样式

选择器1，选择器2，选择器3，…，选择器N{CSS属性}，选择器之间用，隔开

例：<style>

div,

p,

span{

color:red;

}

</style>

交集选择器#

选中同时满足多个条件的元素

选择器1选择器2{CSS属性}，选择器之间连写，没有任何符号

例：p.box{

color:red;

}

标签选择器必须写在最前面

字体大小#

font-size

常用单位为px（像素）必须要有单位

例：P{

font-size:30px;

}

字体粗细#

font-weight

属性值为数字

属性值为关键字

倾斜#

font-style

清除文字默认的倾斜效果（em标签默认倾斜）

行高#

设置多行文本的间距

line-height

属性值：数字 + px 或 数字(当前标签font-size属性值的倍数)

例：line-height:30px;

line-height:2;//当前标签字体大小为16px (运行后变32px)

测量行高：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）

垂直居中：行高属性值等于盒子高度属性值（只能单行文字）

字体族#

font-family

属性值：字体名

例：font-family:楷体；

可以写多个字体名，各个字体名用逗号隔开，执行顺序为从左到右依次查找

font-family:Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;

属性最后设置一个字体族名，网页开发建议使用无衬线字体

font复合属性#

设置网页文字公共样式

例：div{

font:italic 700 30px/2 楷体;

}倾斜，加粗，字号，行高，字体

必须按顺序书写

字号和字体值必须书写，否则font属性值不生效

缩进#

text-indent

属性值：数字 + px 或 数字 + em(1 em为当前标签的字号大小)

对齐#

text-align

调整文字内容，不改变标签位置

也可以用于图片居中

修饰线#

text-decoration

颜色#

color

背景色#

透明：background-color: transparent;

背景图#

background-image（bgi）

属性值：url(背景图URL)

例：div{

width:400px;

height:400px;

background-image:url(./images/1.png);

}

背景图默认是平铺（复制）的效果

背景图平铺方式#

background-repeat（bgr）

属性值

背景图位置#

background-position（bgp）

属性值 -> 水平方向，垂直方向

关键字

坐标（数字 + px，正负都可以）

0 0表示左上角（left top）

水平：正数向右，负数向左

垂直：正数向下，负数向上

例：div{

width:400px;

height:400px;

background-image:url(./images/1.png);

background-repeat:no-repeat;

background-position:center botton;

background-position:50px -100px;

background-position:50px center;

}

关键字取值方式写法，可以颠倒顺序

可以只写一个关键字，另一个方向默认为居中

数字只写一个表示水平方向，垂直方向为居中

背景图缩放#

background-size（bgz）

属性值

关键字：

cover:等比例缩放背景图片以完全覆盖背景区，(图片完全覆盖盒子)可能背景图片部分看不见

contain:等比例缩放背景图片以完全装入背景区，(图的宽高跟盒子尺寸相等停止缩放)可能背景区部分空白

百分比：根据盒子尺寸计算图片大小（图片的宽度跟盒子宽度一样，图片的高度按照图片比例等比缩放）

数字 + 单位（例如：px）

背景图固定#

背景不会随元素的内容滚动

background-attachment（bga）

属性值：fixed

例：body{

background-image:url(./images/bg.jpg);

background-repeat:no-repeat;

background-attachment:fixed;

}

背景复合属性#

background（bg）

属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定(空格隔开各个属性值，不区分顺序）

例：div{

width:400px;

height:400px;

background:pink url(./images/1.png) no-repeat right center/cover;

}

边框线#

border（bd）

属性值：边框线粗细 线条样式 颜色 （不分顺序）

border-方位名词（bd+方位名词首字母，例如bdl）

属性值：边框线粗细 线条样式 颜色 （不分顺序）

例：div{

border-top: 2px solid red;

border-right: 3px dashed green;

border-bottom: 4px dotted blue;

border-left: 5px solid orange;

width: 200px;

height: 200px;

background-color: pink;

}

内边距#

设置内容与盒子边缘之间的距离

padding/padding-方位名词

多值写法

从上开始顺时针转一圈，如果当前方向没有数值，则与对面一样

尺寸计算#

盒子尺寸 = 内容尺寸 + border尺寸 + 内边距尺寸

内减模式：box-sizing-box;（不会撑大盒子）

外边距#

margin

与padding属性值写法，含义相同

不会撑大盒子

版心居中：margin: 0 auto;

元素溢出#

overflow

圆角#

设置外边框为圆角

border-radius

属性值：数字 + px / 百分比（圆角半径）

最大值为50%，超过没有效果

从左上角顺时针赋值，没有取值的角与对角取值相同

四值：左上 右上 右下 左下

三值：左上 右上+左下 右下

两值：左上+右下 右上+左下

正圆形状：正方形盒子设置圆角属性值为宽高的一半/50%

例：img{

width:200px;

height:200px;

border-radius:100px;

border-radius:50%;

}

胶囊形状：长方形盒子设置圆角属性值为盒子高度的一半

例：div{

width:200px;

height:80px;

background-color:orange;

border-redius:40px;

}

阴影#

box-shadow

属性值：x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影

内阴影 inset

主轴对齐方式#

属性名：justify-content

侧轴对齐方式#

align-items-> 弹性容器

align-self -> 弹性盒子

修改主轴方向#

主轴默认水平，侧轴默认垂直

flex-direction

弹性伸缩比#

控制主轴的尺寸

属性值：整数 表示占用父级剩余尺寸的份数

弹性盒子换行#

默认：所有弹性盒子都在一行显示

属性值：wrap 换行

nowrap 不换行(默认)

行对齐方式#

对单行盒子不生效

logo#

单击跳转首页，搜索引擎优化

标签结构：h1 > a > 网站名称（关键字）

CSS样式：例：

.logo a{

display: block;

width: 195px;

height: 41px;

back-ground-image: url(../images/logo.png);

font-size: 0;//不可以直接删除文字要用来超链接

}

导航#

单击跳转页面

标签结构：ul > li*n > a li设置 右侧margin

a设置 左右padding

鼠标悬停状态 -> 伪类选择器

搜索区域#

标签结构：.search （display: flex;）> input + a / button

用户区域#

标签结构：.user > a > img + span

左侧侧导航#

标签结构：.left > ul > li*9 > a

右侧课程表#

标签结构：.right > h3 + .content

相对定位#

position：relative

改变位置的参照物是自己原来的位置

不脱标，占位

标签显示特点不变

绝对定位#

position: absolute

使用场景：子级绝对定位，父级相对定位

脱标，不占位

参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位，参照浏览器开始区改位置

标签显示特点改变：宽高生效（具备了行内块的特点）

定位居中#

绝对定位

水平，垂直边偏移为50%

子级向左，上移动自身尺寸的一半

左，上的外边距为尺寸的一半

transform: translate(-50%,-50%)

固定定位#

position: fixed

元素位置在网页滚动时不会改变

脱标，不占位

参照物：浏览器窗口

显示模式特点，具备行内块的特点

下载字体#

iconfont图标库: https://www\.iconfont\.cn/

使用字体#

引入字体样式表（iconfont.css）

标签使用状态图标类名

iconfont:字体图标基本样式（字体名，大小等）(注意选择器优先级要高于iconfont类)

icon-xxx:图标对应的类名

<link rel=“stylesheet” href=”./iconfont/iconfont.css”>

上传矢量图#

网站里上传svg文件

网站根目录#

存放位置的第一层文件夹

大文件夹包括：

images文件夹：放固定用的图片素材

uploads文件夹：放非固定用的图片素材

iconfont文件夹：字体图标素材

css文件夹：放css文件（link标签引入）（先清除再设置）

base.css:基础公共样式

common.css:各个网页相同模块的重复样式

index.css:首页CSS样式

index.html:首页HTML文件

SEO搜索引擎优化#

网页标题title，网页描述description，网页关键词keywords

<meta name="" content="">

<meta/kw