HTML基础

1.文档基本格式

plain

<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
<meta charset="UTF-8"> 
<title>document</title> 
</head> 
<body> 
</body> 
</html>

2.基本概念

概念	描述	举例
单标签	只能有一个开始标记	`<hr />`
双标签	开始标记和结束标记	`<p></p>`
行内元素	独占一行
块元素	不独占一行
文档声明	告诉浏览器当前网页版本	`<!DOCTYPE html>`
字符编码	声明文档编码，一般为UTF-8	`<meta charset="UTF-8">`
设置语言	告诉浏览器当前网页语言	`<!DOCTYPE html><html lang="zh-CN">`
id	给标签指定唯一标识	id不能重复
class	给标签指定类名
style	给标签设置CSS样式
dir	内容的方向，值：ltr、rtl
title	给标签设置一个文字提示
lang	给标签指定语言

3.字符编码

charset	解释
ASCII	大写字母、小写字母、数字、一些符号，共计128个
ISO 8859-1	在 ASCII 基础上，扩充了一些希腊字符等，共计是256个
GB2312	继续扩充，收录了 6763 个常用汉字、682个字符
GBK	收录了的汉字和符号达到 20000+ ，支持繁体中文
UTF-8	包含世界上所有语言的：所有文字与符号。—— 很常用

plain

存储时采用哪种方式编码 ，读取时就采用哪种方式解码
编写 html 文件时，统一用 UFT-8 编码

4.设置语言

lang	解释
zh-CN	中文-中国大陆（简体中文）
zh-TW	中文-中国台湾（繁体中文）
zh	中文
en-US	英语-美国
en-GB	英语-英国

5.特殊字符

符号	含义	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
`	反引号	´	´
£	英镑(pound)	£	£
¥	元(yen)	¥	¥
€	欧元(euro)	€	€
©	版权(copyright)	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

6.实体字符

符号	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
lI	引号	"	"
´	反引号	´	´
4	分(cent)	¢	¢
f	镑(pound)	£	£
¥	元(yen)	¥	¥
E	欧元(euro)	€	€
O	版权(copyright)	©	©
@	注册商标	®	®
TM	商标	™	™
×	乘号	&times	×
÷	除号	÷	÷

一、HTML标签

1.文本标签

标签名	含义
h1~h6	标题
p	段落
div	无含义用于整体布局
em	着重内容
strong	更重要的内容
span	没有语义的通用容器
strong	加粗
del	删除线
ins	下划线
br	换行
hr	分隔
pre	按原文显示

h1 只能写一个,h1~h6 不能互相嵌套

2.图片标签

标签名	含义
src	图片路径
alt	图片描述
width	图片宽度
height	图片高度
border	图片边框

3.链接标签

标签名	含义	属性值
href	指定要跳转到的具体目标
target	控制跳转时如何打开页面	_self ：在本窗口打开。_blank ：在新窗口打开。
id	元素的唯一标识，可用于设置锚点。
name	元素的名字,也能设置锚点.

CSS基础

一、CSS基础

特性

层叠性：同一元素，不同选择器，不同属性，不同值，最终取最后一个。
继承性：子元素默认继承父元素的样式。

开发者文档

兼容性

分类	优点	缺点	使用频率	作用范围
行内样式	优先级最高	结构与样式未分离代码结构混乱样式不能复用	很低	当前标签
内部样式	样式可复用代码结构清晰	结构与样式未彻底分离样式不能多页面复用	一般	当前页面
外部样式	样式可多页面复用代码结构清晰可触发浏览器的缓存机制结构与样式彻底分离	需要引入才能使用	最高	多个页面

元素关系

关系	描述
父元素	直接包裹某个元素的元素，就是该元素的父元素。
子元素	被父元素直接包含的元素。
兄弟元素	具有相同父元素的元素，互为兄弟元素。
祖先元素	父亲的父亲的父亲……，都是祖先。
后代元素	儿子的儿子的儿子……，都是后代。

语法规范

plain

<!-- ![alt text](image.png) -->

选择器：找到要添加样式的元素。

声明块：设置具体的样式（声明块是由一个或多个声明组成的），

声明的格式为：属性名: 属性值;
声明后加分号
选择器与声明块之间，属性名与属性值之间，均有一个空格

注释规范

plain

    /* 给h1元素添加样式 */
    h1 {
        /* 设置文字颜色为红色 */
        color: red;
        /* 设置文字大小为40px */
        font-size: 40px
    }

代码风格

展开风格：开发时推荐，便于维护和调试。

写法：

plain

    h1 {
        color: red;
        font-size: 40px;
    }

紧凑风格：项目上线时推荐，可减小文件体积。

写法：h1{color:red;font-size:40px;}

属性	名称	属性值	举例	备注
color	字体颜色	rgb rgba hsl hsla	-	IE 浏览器不支持 HEXA ，但支持 HEX 色相、饱和度、亮度
font-size	字体大小	px	-	Chrome 浏览器支持的最小文字为 12px ，默认的文字大小为 16px ，并且 0px 会自动消失。
font-family	字体族	字体名称	`div { font-family: "STCaiyun","Microsoft YaHei",sans-serif }`	可以设置多个字体，按照从左到右的顺序逐个查找
font-style	字体风格	normal italic oblique	-	-
font-weight	字体粗细	lighter（100_300）_normal（400500） bold（600+） bolder	-	-
font	字体复合写法	`font: bold 100px '微软雅黑'`	-	1. 字体大小、字体族必须都写上。 2. 字体族必须是最后一位、字体大小必须是倒数第二位。 3. 各个属性间用空格隔开。
letter-spacing	文本间距	px	-	-
text-decoration	文本修饰	none underline overline line-through dotted wavy	-	-
text-indent	文本缩进	px	-	作用：控制文本首字母的缩进
text-align	文本对齐_水平	left right center	-	作用：控制文本的水平对齐方式
line-height	行高	像素、百分比、数字（1.5之类的）	-	作用：控制一行文字的高度，控制行与行之间的距离
vertical-align	文本对齐_垂直	baseline top middle bottom	-	作用：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式备注：vertical-align 不能控制块元素

列表

CSS属性名	功能	属性值
list-style-type	设置列表符号	none:无 square:实心方块 disc:圆形 decimal:数字 lower-roman:小写罗马字 upper-roman:大写罗马字 lower-alpha:小写字母 upper-alpha:大写字母
list-style-position	设置列表符号的位置	inside : 在li的里面 outside:在li的外边
list-style-image	自定义列表符号	url(图片地址)
list-style	复合属性	没有数量、顺序的要求

边框

CSS属性名	功能	属性值
border-width	边框宽度	CSS中可用的长度值
border-color	边框颜色	CSs中可用的颜色值
border-style	边框风格	none默认值 solid实线 dashed虚线 dotted点线 double双实线
border	边框复合属性	没有数量、顺序的要求

表格

CSS属性名	功能	属性值
table-layout	设置列宽度	auto:自动，列宽根据内容计算(默认值)。 fixed:固定列宽，平均分。
border-spacing	单元格间距	CSS中可用的长度值。生效的前提：单元格边框不能合并。
border-collapse	合并单元格边框	collapse:合并 separate:不合并
empty-cells	隐藏没有内容的单元格	show:显示，默认 hide:隐藏生效前提：单元格不能合并。
caption-side	设置表格标题位置	top:上面(默认值) bottom:在表格下面

背景

css属性名	功能	属性值
background-color	设置背景颜色	符合cSS中颜色规范的值。默认背景颜色是transparent。
background-image	设置背景图片	url(图片的地址)
background-repeat	设置背景重复方式	repeat:重复，铺满整个元素，默认值。 repeat-x:只在水平方向重复。 repeat-y:只在垂直方向重复。 no-repeat:不重复。
background-position	设置背景图位置	通过关键字设置位置：写两个值，用空格隔开水平：left、center、right 垂直：top、center、bottom 如果只写一个值，另一个方向的值取center 通过长度指定坐标位置：以元素左上角，为坐标原点，设置图片左上角的位置。两个值，分别是x坐标和y坐标。只写一个值，会被当做x坐标，y坐标取 center
background	复合属性	没有数量和顺序要求

鼠标

CSS属性名	功能	属性值
Cursor	设置鼠标光标的样式	pointer 小手 move:移动图标 text:文字选择器 crosshair:十字架 wait:等待 help:帮助

一、CSS基础

1. CSS

作用：添加网页样式，能修改网页上的字号、字体颜色、背景图像等格式。

2. 编写位置

编写位置	写法	注意	举例
行内样式	写在标签的 style 属性中	只能控制当前标签的样式对其他标签无效不推荐大量使用	`<h1 style="color:red;font-size:60px;">你好，世界</h1>`
内部样式	写在 html 页面内部		`<style>h1{color: red;font-size: 40px;}h1</style>`
外部样式	写在单独的 .css 文件中		`<link rel="stylesheet" href="./xxx.css">`

位置：
写法：

plain

    <style>一般都放在 <head> 标签中
    多个 HTML 页面无法复用样式

位置：
写法：

plain

    <link> 标签要写在 <head> 标签中
    可触发浏览器的缓存机制，提高访问速度
    最推荐的使用外部样式

样式优先级

优先级：行内样式 > 内部样式 = 外部样式

后面的会覆盖前面的

分类	优点	缺点	使用频率	作用范围
行内样式	优先级最高	结构与样式未分离代码结构混乱样式不能复用	很低	当前标签
内部样式	样式可复用代码结构清晰	结构与样式未彻底分离样式不能多页面复用	一般	当前页面
外部样式	样式可多页面复用代码结构清晰可触发浏览器的缓存机制结构与样式彻底分离	需要引入才能使用	最高	多个页面

元素关系

父元素：直接包裹某个元素的元素，就是该元素的父元素。
子元素：被父元素直接包含的元素。
兄弟元素：具有相同父元素的元素，互为兄弟元素。
祖先元素：父亲的父亲的父亲······，都是祖先。
后代元素：儿子的儿子的儿子······，都是后代。

语法规范

选择器：找到要添加样式的元素。
声明块：设置具体的样式（声明块是由一个或多个声明组成的），

plain

声明的格式为： 属性名: 属性值;
声明后加分号
选择器与声明块之间，属性名与属性值之间，均有一个空格

注释规范

plain

/* 给h1元素添加样式 */
h1 {
    /* 设置文字颜色为红色 */
    color: red;
    /* 设置文字大小为40px */
    font-size: 40px
}

代码风格

展开风格：开发时推荐，便于维护和调试。
写法：

plain

h1 {
    color: red;
    font-size: 40px;
}

紧凑风格：项目上线时推荐，可减小文件体积。
写法：h1{color:red;font-size:40px;}

三、CSS特性

层叠性

作用：解决样式冲突
原因：同名不同值
解决方式：后面覆盖前面

继承性

作用：元素自动拥有其父辈元素样式
可继承：text-?? ， font-?? ， line-?? 、 color

优先级

优先级：!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式

四、CSS常用属性

字体颜色（color）

颜色名

rgb和rgba

hex和hexa

#rrggbb

plain

IE 浏览器不支持 HEXA ，但支持 HEX

hsl和hsla

色相、饱和度、亮度

字体大小（font-size）

plain

Chrome 浏览器支持的最小文字为 12px ，默认的文字大小为 16px ，并且 0px 会自动消失。

字体族（font-family）

plain

div {
    font-family: "STCaiyun","Microsoft YaHei",sans-serif
}



可以设置多个字体，按照从左到右的顺序逐个查找

字体风格（font-style）

normal ：正常（默认值）
italic ：斜体（使用字体自带的斜体效果）
oblique ：斜体（强制倾斜产生的斜体效果）

字体粗细（font-weight）

lighter（100~300）：细
normal（400~500）：正常
bold （600+）：粗
bolder ：很粗

字体复合写法

font:blod 100px '微软雅黑'

字体大小、字体族必须都写上。
字体族必须是最后一位、字体大小必须是倒数第二位。
各个属性间用空格隔开。

文本间距（letter-spacing）

文本修饰（text-decoration）

属性名
none	无装饰线
underline	下划线
overline	上划线
line-through	删除线
dotted	虚线
wavy	波浪线

文本缩进（text-indent）

作用：控制文本首字母的缩进
px

文本对齐_水平（text-align）

作用：控制文本的水平对齐方式


left	左对齐
right	右对齐
center	居中对齐

行高（line-height）

作用：控制一行文字的高度，控制行与行之间的距离

属性值：像素、百分比、数字（1.5之类的）

文本对齐_垂直

顶部：默认
居中：height = line-height
底部：line-height = ( height × 2 ) - font-size - x（用定位）

（vertical-align）

作用：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式

属性值
baseline	使元素的基线与父元素的基线对齐
top	使元素的顶部与其所在行的顶部对齐
middle	使元素的中部与父元素的基线加上父元素字母 x 的一半对齐
bottom	使元素的底部与其所在行的底部对齐

plain

vertical-align 不能控制块元素

列表

CSS属性名	功能	属性值
list-style-type	设置列表符号	none:无 square:实心方块 disc:圆形 decimal:数字 lower-roman:小写罗马字 upper-roman:大写罗马字 lower-alpha:小写字母 upper-alpha:大写字母
list-style-position	设置列表符号的位置	inside : 在li的里面 outside:在li的外边
list-style-image	自定义列表符号	url(图片地址)
list-style	复合属性	没有数量、顺序的要求

边框

CSS属性名	功能	属性值
border-width	边框宽度	CSS中可用的长度值
border-color	边框颜色	CSs中可用的颜色值
border-style	边框风格	none默认值 solid实线 dashed虚线 dotted点线 double双实线
border	边框复合属性	没有数量、顺序的要求

表格

CSS属性名	功能	属性值
table-layout	设置列宽度	auto:自动，列宽根据内容计算(默认值)。 fixed:固定列宽，平均分。
border-spacing	单元格间距	CSS中可用的长度值。生效的前提：单元格边框不能合并。
border-collapse	合并单元格边框	collapse:合并 separate:不合并
empty-cells	隐藏没有内容的单元格	show:显示，默认 hide:隐藏生效前提：单元格不能合并。
caption-side	设置表格标题位置	top:上面(默认值) bottom:在表格下面

背景

css属性名	功能	属性值
background-color	设置背景颜色	符合cSS中颜色规范的值。默认背景颜色是transparent。
background-image	设置背景图片	url(图片的地址)
background-repeat	设置背景重复方式	repeat:重复，铺满整个元素，默认值。 repeat-x:只在水平方向重复。 repeat-y:只在垂直方向重复。 no-repeat:不重复。
background-position	设置背景图位置	通过关键字设置位置：写两个值，用空格隔开水平：left、center、right 垂直：top、center、bottom 如果只写一个值，另一个方向的值取center 通过长度指定坐标位置：以元素左上角，为坐标原点，设置图片左上角的位置。两个值，分别是x坐标和y坐标。只写一个值，会被当做x坐标，y坐标取 center
background	复合属性	没有数量和顺序要求

鼠标

CSS属性名	功能	属性值
Cursor	设置鼠标光标的样式	pointer 小手 move:移动图标 text:文字选择器 crosshair:十字架 wait:等待 help:帮助

HTML基础 ​

1.文档基本格式 ​

2.基本概念 ​

3.字符编码 ​

4.设置语言 ​

5.特殊字符 ​

6.实体字符 ​

一、HTML标签 ​

1.文本标签 ​

2.图片标签 ​

3.链接标签 ​

CSS基础 ​

一、CSS基础 ​

特性 ​

开发者文档 ​

元素关系 ​

语法规范 ​

注释规范 ​

代码风格 ​

列表 ​

边框 ​

表格 ​

背景 ​

鼠标 ​

一、CSS基础 ​

1. CSS ​

2. 编写位置 ​

样式优先级 ​

元素关系 ​

语法规范 ​

注释规范 ​

代码风格 ​

三、CSS特性 ​

层叠性 ​

继承性 ​

优先级 ​

四、CSS常用属性 ​

字体颜色（color） ​

颜色名 ​

rgb和rgba ​

hex和hexa ​

hsl和hsla ​

字体大小（font-size） ​

字体族（font-family） ​

字体风格（font-style） ​

字体粗细（font-weight） ​

字体复合写法 ​

文本间距（letter-spacing） ​

文本修饰（text-decoration） ​

文本缩进（text-indent） ​

文本对齐_水平（text-align） ​

行高（line-height） ​

文本对齐_垂直 ​

（vertical-align） ​

列表 ​

边框 ​

表格 ​

背景 ​

鼠标 ​

HTML基础

1.文档基本格式

2.基本概念

3.字符编码

4.设置语言

5.特殊字符

6.实体字符

一、HTML标签

1.文本标签

2.图片标签

3.链接标签

CSS基础

一、CSS基础

特性

开发者文档

元素关系

语法规范

注释规范

代码风格

列表

边框

表格

背景

鼠标

一、CSS基础

1. CSS

2. 编写位置

样式优先级

元素关系

语法规范

注释规范

代码风格

三、CSS特性

层叠性

继承性

优先级

四、CSS常用属性

字体颜色（color）

颜色名

rgb和rgba

hex和hexa

hsl和hsla

字体大小（font-size）

字体族（font-family）

字体风格（font-style）

字体粗细（font-weight）

字体复合写法

文本间距（letter-spacing）

文本修饰（text-decoration）

文本缩进（text-indent）

文本对齐_水平（text-align）

行高（line-height）

文本对齐_垂直

（vertical-align）

列表

边框

表格

背景

鼠标