# 前端学习 ——HTML+CSS

# 001. 什么是网页

网页由三种元素组成：HTML、CSS、JavaScript
HTML 决定，网页上显示什么内容
CSS 决定显示内容的外观（位置，大小，形状等）
JavaScript 主要负责网页中的动态内容

标签向：

1	<h1>里面的字符都是粗体的</h1>

# 002. 标签的基本书写格式

标签分为两种：1、单标签 (</>)。2、双标签 (<></>)(前一个标签为开标签，后面的标签为闭合标签)。
vscode 中的自动补全操作：打上 h1 后按下 tab 键会自动补全标签
例：：换行操作的单标签：
标签属性：1、书写在标签自己本身；2、可以为标签提供一些额外信息或者对标签进行修饰。

书写标签属性注意点：

1 2	双标签：<h1 属性名="属性值" 属性名2="属性值2"></h1> 多个属性名之间用空格空开单标签：<img 属性名="属性值">

# 003.HTML 的基本格式

如下代码所示

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>标准网页格式</title>
    </head>
    <body>
        <h1>内容填充</h1>
    </body>
</html>


其中，vscode有快捷键，通过按下!+Tab键就能直接生成该格式

# 004. 标题与段落标签

html中共设立了6级标签
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

没有h7标签可以使用

段落标签
用字母p表示
<p>文章巴拉巴拉</p>

其中如果想要加入空格，如果单纯用空格是显示不出东西的，要表现空格，需要写&nbsp;来充当一个空格键；如果要表示一个中文汉字大小的空格，需要用&emsp;

水平居中属性名与属性值：align="center"

# 005. 页面中插入图片

此处要用到<img>标签，对，是个单标签。基本语法是<img src="图片路径">
如果是同一级的，直接用文件名即可，如果是上一级文件夹下的文件，要用"../img/图片.png"

总结：
	相对路径：1、页面和图片在同一文件夹，不需要定义路径。2、页面引用子文件里的图片，路径查找使用img1/img2/img3。3、页面引用外层文件夹里的图片，路径查找使用../../../（有几个写几个）
	绝对路径：①引用互联网资源，直接使用互联网图片地址。②引用本地磁盘中的某个文件夹图片，拷贝全部物理路径。

1
2

图片标签进阶处：
	<img src="图片路径" alt="">	增加alt这个标签，来添加对图片的说明（显示alt内容，要求图片加载失败时才会出现，同时此时alt的定义内容是占用页面空间的），如果要让鼠标悬于图片之上也会有内容相关的说明，只需再加一个标签title即可（title属性定义的内容是不占据页面空间的；同时默认是隐藏的，只有鼠标划入的时候才会显示）。

图片标签拓展：
	网页中使用的图片格式是有限的，支持的格式有：gif、jpg、jpeg、png、bmp、webp
	其中：GIF图片支持透明、压缩、交错和多图像图片（无损压缩格式），但是最多只有256色
	JPG和JPEG是高度有损压缩方式，同时可以支持的颜色数量非常多（上百万种）
	PNG是一种新的无显示质量损耗的文件格式，汲取GIF和JPEG两者的有点，存储形式丰富，有利于网络的传输却不失真
	BMP常用于网站注册或登录页面中的验证码，通常是不压缩的，所以要大很多
	WEBP同时提供了有损压缩和无损压缩的图片文件格式（谷歌公司针对谷歌浏览器研发出来的图片格式）

# 006. 超链接相关操作

1
2

HyperText(超文本)
实现是通过双标签<a></a>(a是anchor的意思，要实现跳转还必须携带一个属性href，即<a href="目标页面的地址">显示在页面中的文本</a>  可以使用相对和绝对路径，标签对的内容就是显示在页面中的内容，要定义打开方式（在原界面上打开还是新开一个标签页，要加入一个新的属性target,属性值定义为_self表示链接的目标页面在当前窗口中打开；定义为_blank表示链接的咪表页面在新的浏览器窗口中打开）)

超链接的锚点功能
	锚点是网页超级链接中的一种，又叫做命名标记，可以当作定位器，是页面内的超级链接。实现页面中的不同部分的快速跳转。
实现超链接的锚点方法：1、跳转目标的定义。2、锚点的定义。	在跳转目标的位置处，给对应的标签添加一个id属性，其中添加的属性值就是这个锚点的名字（要遵循文件和文件夹的命名规则），一个锚点的跳转只能跳转到一个位置，使用id的属性值不能重复出现。之后，给跳转目标定义一个相应的超链接，添加a标签，并且给他添加href属性，此时属性值不在是页面地址或者是互联网地址，而是通过#来携带目标名字。
示例：  段落处：<p id="box1">段落</p>	超链接：<a href="#box1">目标一</a>
详细实现可以参考profile.html文件

# 007. 修饰文本常用标签

前面说到文本加粗，用到的是h1、h2等标题标签，这里会给到专用来加粗字体的标签。
第一个b(bold加粗的缩写)标签:<b>加粗的文本</b>
第二个strong标签:<strong>加粗的文本</strong>
两者区别：b标签仅仅是为了加粗显示文本；strong标签语义化更强，表示该文本比较重要，同时如果用到阅读设备阅读网页时，strong的文本会被重（zhòng）读。

文本倾斜效果也是比较常用的强调方式，和加粗一样，有两种标签来实现。
第一个i(italic倾斜的缩写)标签:<i>倾斜的文本</i>
第二个em(emphasize强调的缩写)标签:<em>倾斜的文本</em>
两者区别：i标签仅仅为了让字体显示斜体，没有强调的语义；em标签不仅能让字体显示斜体，还可以加强语气，在爬虫爬取网页时会特别收录em中的文本，以便别人通过百度搜索em里面包含的关键字时会优先显示。

文本的删除显示效果（类似word中的删除线）也是挺重要的一种比较重要的功能，一样也有两种标签。
第一个s(strike删除的缩写)标签:<s>删除线文本</s>
第二个del(delete删除的缩写)标签:<del>删除线文本</del>
区别：HTML5已经不支持s标签了，所以尽量使用del标签为好

其他的一些润色标签owo/：
①
为文本添加下划线：
使用u(underline的缩写)标签:<u>下划线文本</u>
②
角标的实现（上/下）
使用sup(superscript上角标的缩写)或sub(下角标suberscript下角标的缩写)标签:
上角标：<sup>上角标文本</sup>
下角标：<sub>下角标文本</sub>

那么如果我要多种效果叠加在一起该怎么实现捏~(￣▽￣)~*?
答：使用标签的嵌套来实现（类似洋葱一样，层层包裹）。
注意点：要整个标签包裹，万万不可交叉嵌套。
具体实现可以参考italic.delete.bold.html文件

# 008. 注释的使用

1 2	注释的格式：<!-- 注释的内容 --> 其中快速生成注释的快捷键是：ctrl+/

# 009. 列表的使用

html中有三种列表，分别为：有序列表、无序列表、自定义列表
①有序列表
由两个元素组成，ol(order list)和li(list item)，两者为父子关系，li需要被ol包裹着
语法：<ol>
    	<li>列表项内容</li>
	 </ol>
注意：ol当中只能嵌套li标签，如果要放其他的标签项需要放在li标签里面
其中ol可以添加一个type属性，用来设置列表项目的符号，常见的取值有5个：A、a（字母顺序）、I、i（罗马数字顺序）、1（阿拉伯数字顺序）		默认是数字从1开始排序，用其他字母的话一律还是依照数字序开始排序
其中ol还有另一个start属性，用来控制列表项目开始的取值（比如从0开始），注意，start的取值是数字序号，不是其他字母之类的（我自己捯饬时发现：除了数字序列，好像其他两种，在start小于等于0时都是按照数字序列来显示的）。

②无序列表
指的是，列表项中的内容，是没有时间、空间或者逻辑等顺序要求的。
语法：<ul>
    <li></li>
	 </ul>(此处的ul是unorder list的缩写)
注意：和ol一样，ul里面一样只能防止li标签。
无序列表的项目符号默认三个项目同为黑色的实心原点（disc）。
想要交换事项之间的位置顺序，可以使用vscode自带的快捷键alt+↑/↓来实现行的位置调动。

无序列表也是有type属性，同样的type属性就是用来设置无序列表的项目符号的，取值一共有4种：disc（实心圆点）、circle（空心圆）、square（实心方块）、none（隐藏项目符号）

③自定义列表
由三种标签组成，分别为：dl(definition list定义列表)、dt(definition term定义术语--列表标题)、dd(definition description定义描述--列表内容)
语法：<dl>
    	<dt></dt>
    	<dd></dd>
    	<dd></dd>
	 </dl>
注意：dt和dd是dl的子标签，dt和dd是兄弟标签，所以dt不能放到dd当中，dd也不能放到dt当中；dd标签可以定义多个，同时dt或dd标签是不能脱离dl单独使用的
dd标签的内容会相较dt标签有一段缩进，这是默认存在的。（如果要进一步美化还得学习css相关的知识）

# 010. 快速创建标签的技巧

这部分将会提供一些比较实用的快捷键来提高效率，减少反复劳作
这些主要得益于Emmet。其提高了代码编写的效率；提供了一种非常简练的语法规则；可以立刻生成对应的HTML结构。
单标签的代码补全：
①使用格式：标签名{标签文本内容}+tab或者回车键
②使用格式：标签名{标签文本内容}*标签重复次数
③使用格式：标签${标签文$本内容}*标签重复次数		ps：这里的$符号实现依次递增的序号
嵌套标签的代码补全：
①父标签名>子标签名{子标签文本}*子标签重复次数		一个父标签里放了5个子标签
②父标签名*5>子标签名{子标签文本}					创建5个父标签，每个父标签里面有个子标签

综合：ol>li*4>a[href]			中括号中放的是属性

详见shortcut_key.html文件

# 011. 表格的使用

表格基本语法：
<table>
    <tr>(table row表格行)
    	<td></td>(table data cell 表格数据单元)
    </tr>
</table>
注意：表格的标签嵌套也和ol和ul一样，其他的标签要放就得放到td的里面。
一个tr代表的是一行，一个td代表的是一个单元格，要实现多行多列，要在tr中添加多个td，table中添加多个tr。同时要注意，一个普通的表格中每个tr中的td个数是相等的。
快捷键输入法：table>tr*行数>td*列数

接下来，讲一下表格有什么属性
第一种：表头标签（说是说表头，实际上放哪里都没事），用来加粗并居中内容，同时语义更强，使用方法就是将td换为th(table header cell的缩写  表头单元格)即可
第二种：绘制表格线，给table加个border属性，属性值是数值，用来定义线条的粗细
第三种：给表格添加宽度和高度，给table添加width属性，值是一个数字，用来定义表格的总宽度，再添加一个height属性，值也是一个数字，用来定义表格的总高度
第四种：控制表格边框的空隙或文字与边框的距离，table有cellspacing（定义是单元格之间的距离）和cellpadding（定义单元格边框和文本之间的距离）两个表示间距的属性
第五种：使表格位于浏览器的水平居中位置，为table添加align属性（定义表格在页面中水平方向上的对齐方式，有三个取值：left、center、right）
第六种：给表格添加颜色，为table添加bgcolor属性（修饰表格的背景颜色）、为table添加bordercolor属性（修饰表格的边框颜色）。两者的属性值直接用英语颜色如red填入即可，当然也能通过6位16进制来表现。

表格行属性相关细节：
①设置行高度，给tr标签增加height属性，属性值为所需数值。（注意表格的总高度是由table属性的height决定的，所以，特定某行的height高的同时，会挤压其他行的高度,但是当height值设置过高，会打破table的height限制）
②给tr添加bgcolor属性时，设置属性值后，最终该行的颜色会根据tr标签的属性变化，其他的背景色依然听从table标签的属性值。--->即浏览器通过就近原则来渲染，或者后代标签属性渲染的优先级是高于父级标签。
③tr的align和valign属性，其中align用来设置行内所有单元格的水平对齐方式，取值有：left、center、right；valign用来设置行内所有单元格的垂直对齐属性，取值有：top、middle、bottom。其中，文本默认的对齐方式为：left、middle

1
2
3

单元格属性相关细节：
①可以给td添加width和height以及bgcolor属性，其中调节任意单元格的高度，那么该单元格所在行的每个单元格的高度都会随之改变；调节任意单元格的宽度，那么该单元格所在列的每个单元格的宽度都会随之改变；但是设置背景色时，只会影响当前单元格。
②td也有align和valign属性，取值同tr，同样采用就近原则。

合并单元格：
类别：横向合并（水平合并，要求只在本行进行）、纵向合并（垂直合并，要求只在本列进行）
单元格的合并必定产生跨行或者跨列
基本的实现原理为：
①横向合并，保留合并单元格块的最左边的单元格，删除其余单元格，浏览器解析时将第一个单元格拉伸满
②纵向合并，保留合并单元格块的最上方的单元格，删除其余单元格，。。。
具体需要设置的标签属性，
①为保留的tr对应的td标签添加一个colspan(跨列)属性，其属性值为合并列的总数（包含。。。），删除同一tr下一定数量的td标签。
②为保留的tr对应的td标签添加一个rowspan(跨行)属性，其属性值为合并行的总数（包含保留的对应单元格的那一行），其他行对应相同位置的td标签通通删除掉。

详见文件 table_course.html

# 012. 表格的进阶使用

表格标题和结构分组：
①表格标题，就是表格的一个大标题，位于表格上方，默认水平居中显示。标签名：caption（说明文字）	语法：<caption>标题</caption>
caption是table标签的一个子标签，一般放在第一个tr标签之前。

②表格分组，此时需要三个行分组标签thead（表格头）、tbody（表格体）、tfoot（表格尾）
语法：<thead></thead>;<tbody></tbody>;<tfoot></tfoot>
都是table标签的子标签，在这些标签里面放入tr标签来分组。
注意点：表格如果没有使用任何分组标签，浏览器会在渲染时把table中所有未分组的tr放在一个tbody标签里面；同时一个表格只允许使用一个thead和一个tfoot，但是允许使用多个tbody。

以上是行分组，以下是列分组的相关操作：
列分组标签是colgroup，可以把一列或者连续的几列分成一组，进行不同属性的修饰。列分组经常用来定义表格一整列单元格的颜色。基本语法：<colgroup></colgroup>,可以定义一个属性span，属性值代表多少列分为一组。要划分多组，需要使用多个colgroup标签。

tips：如果文档缩进和对齐有点错乱，可以右键选择格式化文档；vscode 自带快捷键，通过选定指定内容，然后按 ctrl+d 可以实现多光标选中内容相同的内容。

# 013. 网页中的颜色值和长度单位

颜色值：
①网页中支持140个标准的颜色英文名称，中文汉字时不能作为颜色值的
②颜色值还能使用十六进制值来表示：#RRGGBB 来定义颜色值。注意：井号不要丢掉，井号后的字母全部要求小写，同时这种表达方式时所有浏览器都支持的。
③最后一种颜色表示是采用RGB的方式，即RGB(red,green,blue)来定义颜色值。注意，这里RGB是不区分大小写的，括号里的数字和逗号前后可以有空格，同时这种方式也是所有浏览器都支持。

长度单位：
①绝对长度单位：固定的，用这些单位表示的长度会显示为设置的尺寸，例如：cm、mm、in(英寸)、px(像素 最常用，浏览器默认)
②相对长度单位：指相对一个长度计算出来的长度，一般用来适配不同的设备，例如：百分比(%)。

# 014. 块级元素和内联元素

首先我们要知道，每个HTML元素都有默认的显示值，这两个值为：block(块 块元素)和inline(内联 行内元素)	
①块级元素总是从新行开始，浏览器会自动在元素的前后添加一些间距，会占据可用的全部宽度，尽可能向左向右伸展，常用标签有：<p>（段落元素）、<div>（分块元素）、<h1>-<h6>（标题元素）、<ol><ul><li><dl><dt><dd>（列表元素）、<table><tr><td><th><thead><tfoot><tbody><caption>（表格元素）。
注意：p标签是用来专门定义段落的。
<div>(division分块的缩写，引申为盒子或是容器，用来定义html里面一个分块或是一个部分)，语法是<div>分块内容</div>。
    
②内联元素不会独占一行，只占用必要的宽度，例如文本修饰元素标签：<b>、<em>、<strong>、<i>、<sub>、<sup>（文本修饰元素）、<a>（链接元素）、<br>（折行元素）、<img>（图片元素）。此时有个特别的标签<span>（范围元素）用来标记文本的一部分或文档的一部分。定义语法：<span>内容</span>。
注意点：内联元素里面不能嵌套块级元素！！

# 015. 表单的认识

表单是用来采集用户信息的。
而表单为了采集用户的信息，需要用到表单控件（文本框、单选框、多选框、下拉菜单、按钮等）。

在html中表单通过form(表)来定义，语法：<form></form>			如果没加子标签，可能会类似table标签

1
2

文本框和密码框：
即单行文本框的实现：在form内部嵌入input标签（单标签）实现，除此之外还要定义一个type属性（来表征输入控件的类型），其中单行文本框的type值为text（默认就是这个）、密码框的type值为password

1
2

多行文本框（文本域控件）：
实现方式：在form标签中嵌套textarea（文本域，双标签）标签实现，基本语法：<textarea>文本</textarea>，初次之外还可以控制显示的可见宽度之类的属性，例如cols用来指定一个文本区的可见宽度，值是一个数字；rows来指定一个文本区域中的可见行数，值是数字

单选与多选：
实现方式：在form标签中嵌套input标签，并设置type属性值来实现单选或是多选；单选的type属性值为radio，多选的type取值为checkbox（复选框）。input仍然是单标签，选项直接写在标签的后面即可。
注意点：1、单选框控件必须成组使用才有意义，每组至少需要两个单选框。2、“组”是通过name属性来建立的，凡是name值相同的就是一组。3、同组的单选框，只有一个会处在选中状态，其他的会自动呈现为未选中状态。--->所以默认下没有设置name情况下，会将每个单选框视作一个组，要实现选一需要设置name属性，属性值为自取的组名。

设置默认选中效果：两者方式一样，都是通过定义一个checked属性来实现，其属性值只要不为空，任何字符都可以，通常采用checked这个字符串作为它的值。当然也可以不定义属性值，只定义一个属性名

下拉菜单：
实现方式：在form标签里面嵌套select标签来定义，基本语法为：<select></select>,其中select标签包含一个或多个option子标签，这个的语法为：<option></option>。
tips1：要添加默认选择哪个option的值，要在该option标签中添加默认选择的selected属性，只要定义就行，不用给属性值。
tips2：要设置多选下拉菜单，需要给select标签定义一个multiple（允许用户选择一个以上的值）属性。
tips3：给select标签定义size属性，就可以定义控件默认可见行数，值是一个数字。
注意：select标签里面只能防止option标签。

1 2	input中的选择文件（上传文件）功能：实现方式：在input输入控件上定义type属性赋值为file。（不同浏览器，这个控件的显示效果可能不太相同）

表单label标签和只读禁用属性：
实现方式：在form标签中嵌入label标签，基本语法为：<label></label>,这在屏幕阅读器读到时会大声读出里面的内容；同时还能帮助我们点选难以点击的非常小的区域，只要点击那部分区域就能选中那区域的控件。当然为了实现第二种功能，我们还用为label添加一个for属性，用来定义与label相关联的表单控件，它的值为表单控件的id值（具有唯一性，一个页面不能出现两个相同的id属性值）。

设置只读（内容无法更改，但是可以复制里面的内容）：给表单控件定义一个readonly只读属性即可实现，同时为了默认显示一个值，需要添加一个属性value，值为默认显示的值。
设置无法选中（使用鼠标无法选中，默认是灰色显示的）：为表单控件添加一个disabled（禁用）属性

1
2

表单分组（带有边框和标题的表单控件）：
实现方式：使用fieldset（字段集）标签，语法为：<fieldset></fieldset>，里面包含了legend（说明）标签，为fieldset元素定义了一个标题。其他表单控件放到legend标签的后面。

表单按钮：
表单按钮的分类共有5种：提交按钮、重置按钮、普通按钮、图像按钮、双标签button按钮
①提交按钮：通过input标签实现，为input的type属性的值设置为submit。通过点击设置的提交按钮后，会发生：1、页面刷新了。2、输入框的内容消失了。3、浏览器地址栏中多了一个问号。
其实点击提交后，数据会提交给网站后台的服务器，后台服务器将数据保存到数据库当中，然后服务器会给网页的表单提供一个访问地址。		那么要如何提供访问地址呢？这时候要给form标签添加一个action属性，用来反馈用户点击提交后做什么动作，事实上值就是服务器的地址；而不定义action属性值，那么默认就会把当前网页的网址当作action值。		如果要保留这些填写的值该如何设置？给form标签定义一个target属性，属性值和链接的target属性值一样，可以设置为：_blank也可以是_self。前者开一个新的网页（action后的网址），后者和之前一样。

②重置按钮：将input的type属性值设置为reset。

③普通按钮：没有任何功能的按钮，定义语法为将input的type属性值定义为button。要为这种按钮起名字需要添加value属性，其属性值就是按钮上显示的文字。同样，这种value设置名字的方式也使用于重置按钮和提交按钮。

④图像按钮：定义方式为input中的type值设置为image，还需要添加src属性，放入图片路径。点击后，表单提交。如果图片过大，可以添加width和height属性设置成合适的大小。

⑤双标签button按钮：定义语法：<button></button>,按钮的名字在标签里面定义，点击后也是实现表单提交，如果为其添加type属性，设置为button那么就会变成一个一无是处的普通按钮了。

快捷键提示：如果忘记使用标签名 {内容}* 数量的方式，可以先选中想要多行复制的标签行，然后通过按住 alt+shift 键再配合↓键实现多行复制重复内容。

# 016. 表单数据采集和提交

1
2
3

在实现form表单数据采集和提交之前，我们要首先了解前后端协作的流程。前端工程师做好表单后，交给用户在浏览器上填报。用户填好信息后，点击提交按钮。数据通过互联网发给服务器，后端工程师在服务器上开发程序，接受用户提交过来的数据，最后再把数据存入数据库。
如果按之前的表单操作那么我们是没有手机到表单的数据的，为了手机表单的数据，我们要给表单控件添加name属性，有了name之后浏览器会自动为我们手机表单的控件数据。当用户输入数据后，name定义的属性值会为我们存储输入的数据，这时候提交表单，地址栏后面除了问号后还有一串字符这里记录了用户的输入值。
但是如果表单包含敏感信息，那么这样直接显示是相当不安全的，这里就要为form添加method属性，这个属性的属性值常用的有：get（默认值，浏览器会把手机好的表单数据，加到服务器地址的后面，提交给服务器）和post（不但能够手机表单的数据，而且不会再地址栏里面暴露隐私数据）

# 017. 其他实用标签

水平线标签：<hr>（单标签），作用为在网页上画出一条水平分隔线。这个标签有5个重要的属性：width/size属性是用来控制水平线的宽度和高度，如果没有添加这个属性，默认水平线的宽度是横跨整个屏幕，高度为2px；noshade属性是用来规定水平线的颜色呈现为纯色，而不是由阴影的颜色；color用来定义水平线的颜色（不知道为什么，这里不能使用rgb的颜色定义，其余两种都能正常使用）；align用来调整水平线水平对齐方式（使用前提是水平线要有一定的宽度），默认对齐方式是水平居中对齐。

预格式化的文本标签：<pre>（preformatted）（双标签），语法：<pre></pre>，该元素里的文本以固定宽度的字体显示，同时保留标签内文本的空格和换行。

定义一个图像映射：<map>（双标签）,就是一个图像的热点链接，点击图片的不同区域会实现链接页面的跳转，基本语法：<map></map>,他有一个必要的属性，为name，这个属性的属性值要和img标签的usemap属性相关联，在图像和地图之间创建关系。之后在map标签内部定义一个area（单标签）标签，用来定义图片的热点区域，实现相应区域的目标跳转。通过area标签可以设置区域的位置、大小、形状，该标签由三个重要的属性：①herf：用来定义热点区域链接的目标地址（互联网和本地的网页及图片地址都可以）、②shape：用来定义区域的形状，取值可以为：default（所有区域）、rect（矩形）、circle、poly（多边形）、③coords：用来定义可点击区域的坐标，要与shape属性配合使用。注意图像原点位于图像党的左上角。

1
2
3

iframe标签（双标签）：
用来在一个网页中显示另一个网页，基本语法：<iframe></iframe>,这个标签有5个基本属性：①src，值是一个网页页面的路径、②width，用来控制引入页面的宽度，值是数字、③height，用来控制引入页面的高度，值是数字、④frameborder，默认引入的框架带有边框，通常将值设置为0即可、⑤scrolling滚动属性，用来控制是否显示框架的滚动条，只有三个（auto（）默认、yes、no）。
iframe还可以作为一个链接的目标框架，iframe的target属性必须设置为iframe的name属性

# 018.SVG 的认识

首先我们要知道，SVG（Scalable Vector Graphics 可缩放矢量图）是基于xml语法的图像格式，所以要遵循xml语法iui。基本语法：<svg>...(绘制各种图形)</svg>，svg可以当作绘制图形的画布，有两个重要的属性：width定义画布的宽度，height定义画布的高度。

绘制矩形、圆形和椭圆形
SVG预定义了一些形状元素可供使用：1、rect（矩形）；2、circle（圆形）；3、ellipse（椭圆）；4、line（线条）；5、poly（多线条）；6、polygon（多边形）；7、path（路径）

矩形基本语法：<rect />,xml语法一定要求闭合，语法要求忒严格了哩。重要的属性有：width和height用来定义矩形的宽度和高度，fill定义矩形的填充颜色，stroke-width定义了矩形的边框宽度，stroke定义矩形边框的颜色,x属性是用来定义与左边界的距离，y属性是用来定义与上边界的距离，fill-opacity定义填充透明度，stroke-opacity用来定义边框的透明度（透明度的值越小，透明度越高）|如果直接用opacity则是用来设置整个元素的不透明度值，合法范围值为0~1。		圆角矩形的实现：需要多加rx和ry两个属性，值是数字，如果两者数字相等，那么就是一个圆形的角，两个值不相等就是一个椭圆形的角。

圆形基本语法：<circle/>,有三个重要的属性，其中cx和cy用来定义圆形中心的坐标，r属性定义圆的半径（如果省略前两个，圆的中心会被设置为(0,0)），之后定义stroke、stroke-width、fill（基本上svg的都有，以下就省略不写了）属性，来设置边框颜色、边框宽度和背景色填充等。

椭圆形基本语法：<ellipse/>,有四个重要的属性，cx定义椭圆中心的x坐标，cy定义椭圆中心的y坐标，rx属性定义水平半径，ry属性定义垂直半径。如果出现椭圆的堆叠，实际上堆叠的顺序并不是html书写的顺序，而是由他们的位置大小cx、cy、rx、ry来决定的。

绘制线条、多边形和多线条：
绘制线条使用line标签，基本语法为：<line/>,重要属性，x1,y1，定义x，y轴上直线的起点坐标；x2,y2，定义x，y轴上直线的末端坐标。坐标的起点在画布的左上角，向右看作x轴，向下看作y轴。
绘制多边形：
使用polygon标签，基本语法：<polygon/>,用来创建一个至少包含三个边的图形，有个属性points，其定义了多边形每个点的对应坐标（至少要三对坐标，坐标之间空格隔开，可以画出五角星捏）。
绘制多线条：
使用polyline标签，基本语法：<polyline/>,可以创建任何只由直线组成的形状，和上面一样，有一个points属性，用来定义线条经过的各个点（要有两个及以上的坐标对，一个点显示不出来），填充fill要设置为none，不然会有一块从头点连到尾点的一块填充。

绘制文本：
通过text文本来进行绘制，是一个双标签，基本语法为：<text>文本内容</text>，其中属性x，y用来定义文本的位置坐标，值为数字；属性font-size用来定义文本的大小，值为数字，属性text-anchor用来定义文本的对齐方式，值有：start、middle、end，各代表x，y值在文本的什么位置上。
为什么svg不用p标签显示文本？text是绘制的对象，使用text那么就可以使用svg特有的控制文本方式了。例如旋转文本。有transform属性，属性值为：rotate(旋转角度 旋转的中心点（默认为原点）)
此外，text标签内还能嵌入多个tspan标签，各个tspan（语法：<tspan></tspan>）标签可以包含不同的格式和位置。给text文本添加链接的方式，则是让text文本嵌入到a标签内，但是这时候属性设置比较复杂，a标签要添加xlink:href属性，属性值是链接的地址（也可以定义target属性）。为什么不直接定义href属性捏？svg应用xml语法定义元素，所以还要再svg标签上定义一个命名空间的属性xmlns:xlink，属性值写为:http://www.w3.org/1999/xlink

1
2

绘制路径：
通过path标签来定义一个路径，基本语法：<path/>  应用路径我们可以绘制任意形状的图形，path中的重要属性d（draw绘制）是用来定义绘制路径的命令，这个命令属性值有很多，常用的两个命令是：M（moveto定义绘制图形的起点坐标）、L（lineto用来绘制一条直线，表示从上一个结束点到后面接的的点之间绘制一条直线）、Q（quadratic Bezier curve绘制二次贝塞尔曲线，需要在后面定义控制点和终点的坐标），后面需要跟着控制点坐标和终点坐标。其中命令的大小写代表的意义也是不同的，大写代表的是绝对定位，小写代表的是相对定位。

1 2	成组定义属性（类似div）：用g标签将多个绘图元素给包裹起来，在g标签上定义公共的属性，基本语法：<g></g>。

1
2

描边属性：
stroke（笔画属性）、stroke-width（笔画宽度属性）、stroke-linecap（笔画笔帽属性，值有：butt、round、square）、stroke-dasharray（虚线笔画属性，值是数字序列，用来定义虚线的线条与空隙的大小，至少要定义两个值），以上属性可以用在任何的线条、文本和元素的轮廓。一般定义定义在path标签中，可以放到g中。

1
2

模糊和阴影效果：
添加特殊效果需要定义filter标签，基本语法：<filter></filter>。内部定义x和y的属性值确定滤镜的起点坐标值。其里面包含一个或多个效果滤镜，但是里面有一个必要的id（确保唯一性）属性，用来识别过滤器，图形通过这个id指向要使用的过滤器。其中filter都是定义在defs（definitions）标签内部的，基本语法为：<defs></defs>。模糊效果是通过feGaussianBlur（高斯模糊）滤镜标签来创建的，需要定义在filter标签内部，基本语法为：<feGaussianBlur/>,再通过stdDeviation属性定义模糊的数量，值越大模糊程度就越高。阴影效果可以通过feOffset滤镜和feBlend滤镜来实现。原理是将一个SVG图形、图像或元素在xy平面上做一定的偏移，定义在filter内部，基本语法为<feOffset/>（有属性dx和dy（在x和y方向上阴影的偏移量），in属性表示阴影图像的来源，值有：SourceAlpha和SourceGraphic）和<feBlend/>定义in属性，值为SourceGraphic

1
2

线性渐变和径向渐变：
SVG中主要有两种渐变类型：线性渐变（→，用linearGradient元素来定义，必须嵌套在defs标签内部，双标签，语法为：<linearGradient></linearGradient>,有两组坐标属性，x1、y1、x2、y2，用来定义线性渐变的开始位置和结束位置，通过左边不同会产生垂直、水平、角度渐变,可以有多种颜色，每种颜色用stop标签来指定，基本语法：<stop/> 一般有两个属性，offset属性用来定义渐变颜色的开始和结束位置，属性值是一个描述相对位置的百分比，stop-color的属性用来定义渐变的颜色，取值为任何的合法颜色值）和径向渐变（↓，应用radialGradient元素来定义，也必须嵌套在defs标签当中，基本语法：<radialGradient></radialGradient>,有唯一id属性，cx、cy、r定义了最外面的圆，fx、fy定义了最里面的那个圆，同样颜色可以由两种或多种组成，每种颜色由stop指定，也要定义offset和stop-color属性）。

# CSS 的三种样式

1	行内样式、内部样式、外部样式。具体的解说待我补充！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

简单选择器的分类：

选择器分类	选择器定义语法	例子	例子说明
ID 选择器	#id	#firstname	选择 id="firstname" 的元素
类选择器	.class	.intro	选择所有带有 class="introduction" 的元素
类选择器（带有元素）	element class	p intro	只选择带有 class="introduction" 的 <p> 元素
通用选择器	*	*	选择所有元素
元素选择器	element	p	选择所有 <p>
分组选择器	element,element,…	div,p	选择所有 <div> 元素和所有 < p > 元素

组合选择器的分类：

后代选择器：匹配作为指定元素后代的所有元素、子选择器：只能选择作为某元素的子元素，不能选择道孙辈的元素、相邻的兄弟选择器、一般兄弟选择器。

选择器分类	选择器定义语法	例子	例子说明
后代选择器	element element	div p	选择 <div> 元素内的所有 < p > 元素
子选择器	element>element	div>p	选择所有父元素是 <div> 元素的 < p > 元素

CSS 伪类选择器（属于类选择器中的一种，根据特定状态选取元素，基本语法为 selector:鼠标行为{} ）

特别说明：

冒号和后面的鼠标行为，没有任何空格，必须连接在一起。
四个伪类选择器必须按照以上介绍的顺序书写（:link,:visited,:hover,:active），否则在浏览器中部分样式不能实现。
伪类选择器全部一起使用的情况，主要是应用在超链接上，偶尔也会独立使用在其他标签上面。
伪类选择器应用在其他元素上时，只能实现 active 激活瞬间和 hover 鼠标悬停效果。

CSS 伪元素选择器（通过该选择器，可以设置元素指定部分的样式。主要用来设置元素内文本的首字母，首行的样式、或是在元素内容之前或之后插入其他内容，基本语法为 selector::pseudo-element{} ）

伪元素选择器总共有五种：① ::first-letter （用来实现向文本的首个字符添加特殊样式）、② ::first-line （用来实现向文本的首行添加特殊样式）、③ ::before （用来实现在元素内容之前插入内容）、④ ::after （用来实现在元素内容之后插入内容）、⑤ ::selection （用来更改选中文本的样式）

注意点：1. 使用伪元素选择器向前向后插入内容时，必须配合 content 才能实现效果，向前向后插入的内容都需要符合 CSS 样式声明的基本语法。2.selection 伪元素选择器只支持以下几种样式声明：color（文本颜色），background（背景），cursor（鼠标样式），outline（描边效果）。

选择器	例子	例子描述
::first-letter	p::first-letter	选择每个 <p> 元素的首字母
::first-line	p::first-line	选择每个 <p> 元素的首行
::after	p::after	在每个 <p> 元素之后插入内容
::before	p::before	在每个 <p> 元素之前插入内容
::selection	p::selection	选择用户选择的元素部分

CSS 属性选择器（是根据属性或属性值来查找元素，基本语法 Element[attribute] 或 Element[attribute="value"] , 即查找带有该属性的元素，然后添加样式声明）

该种选择器总共有四种属性：

[attribute] ：来查找 HTML 结构中，带有 attribute 属性的所有元素。
[attribute="value"] ：来查找 HTML 结构中，带有 attribute 属性，并且属性值为 value 的元素。
[attribute~="value"] : 来查找 HTML 结构中，带有 attribute 属性，并且在多个属性值中包含 value 的元素。

[attribute|="value"] : 来查找 HTML 结构中带有 attribute 属性，并且属性值以 value 或者是 value - 开头的元素，该属性的值只能有一个，不能有多个。

选择器	例子	例子描述
[attribute]	[target]	选择带有 target 属性的所有元素。
[attribute=value]	[target=_blank]	选择带有 target="_blank" 属性的所有元素。
[attribute~=value]	[title~=flower]	选择带有包含 "flower" 一词的 title 属性的所有元素。
[attribute\|=value]	[lang\|=en]	选择带有以 "en" 开头的 lang 属性的所以有元素。
[attribute^=value]	a[href^=“https”]	选择其 href 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value]	a[href$=".pdf"]	选择其 href 属性值以 ".pdf" 结尾的每个 <a> 元素。
[attribute*=value]	a[href*=“w3school”]	选择其 href 属性值包含子串 "w3school" 的每个 <a> 元素。

总结

简单选择器和组合选择器，可以完成元素的查找。
其他选择器可以更加精准高效的查找元素，从而能提高我们编码速度。
属性选择器，在实际开发的过程中，大部分会应用在表单控件中，因为表单控件可添加的属性比较多。

# CSS 的文本操作

文本颜色和大小写转化

颜色调整：

通过声明 color 属性来设置文本的颜色。具体的使用方法见下：

body {
	color:xxxx;(这里可以是颜色名称，例如:purple、也可以是十六进制颜色值，例如：#A020F0、也可是RGB颜色值，例如：rgb(160,32,240))
}
↑，连接到html文件后，主体（body）内的内容会变为xxxx颜色
注意css中的注释是/* */，不支持//作为注释

强制转换文本中的单词和字母的大小写：

通过使用 text-transform 属性来实现。具体的使用方法见下：

1
2
3

p.transform {
    text-transform:xxxx;(这里只有三个值可以填写：1、uppercase（文本被转换为大写）；2、lowercase（文本被转换为小写）；3、capitalize（每个单词的首字母被转换为大写）。这个属性主要用来设置英文的文本，对中文无效)
}

文本对齐和文本间距

文本对齐的方式：

①水平对齐方式。②垂直对齐方式。

① 水平对齐用 text-align （之前学过）样式属性来实现效果，基础操作共有三种属性值： left 、 right 、 center 。其他属性值有： justify （使用后每一行都有相等的宽度，而且左右的边界是对齐的，想杂志和报纸排版一样）

② 垂直对齐用 vertical-align 样式属性实现效果，值有 5 个： baseline （基线对齐）、 text-top （文本顶部对齐）、 textbottom （文本底部对齐）、 sub （下角标对齐）、 super （上角标对齐）

文本的间距设置方式：

通过声明 CSS 的 text-indent 属性可以实现，使用长度值或百分比来设置文本缩进，具体实现见下：

1
2
3

p {
    text-indent:xxxx;(长度值可以是绝对单位（几px），也可以是相对单位（几em，缩进的宽度为字符宽度的倍数，一般设置为2em，即空两格），还可以是百分比缩进，根据父元素的宽度计算得到（较少使用）)
}

letter-spacing 属性用来指定中文文字或英文字幕之间的空隙。

line-height 属性用来指定行与行之间的高度，也就是行高，属性值常用的有三个：① normal （默认值，浏览器会根据字符大小自动设置一个行高）②一个数字（比如 1.5，此数字与当前的字符大小相乘计算得到，推荐使用）③绝对值（比如 20px,-5px, 设置固定的行间距）。

word-spacing 属性用来指定文本中单词的间距，只对英文有效。

white-space 属性指定了如何处理元素内部的空白，有个常用的属性： nowrap （不管包含文本的元素宽度是多少，文本都不会换行，知道遇见 <br> 标签为止）。

归纳表格：

属性	说明
`text-align`	指定文本的水平方式
`vertical-align`	设置一个元素的垂直对齐方式
`letter-spacing`	指定文本钟字符之间的间隙
`line-height`	指定行高
`text-indent`	指定文本块钟第一行的缩进
`white-space`	指定如何处理一个元素内部的空白
`word-spacing`	指定文本中单词之间的空隙

# CSS 文本装饰

为文本添加装饰线通过 text-decoration-line 属性实现，可以结合一个以上的值。具体的值有三个：① overline ：在文本上方添加线条修饰。② line-through ：在文本中间添加线条修饰。③ underline ：在文本下方添加线条修饰。***ps:*** 要设置多种装饰线则要将多个属性值之间用空格隔开。

为文本设置装饰线的颜色通过 text-decoration-color 属性实现，属性值为任意合法的颜色值。

为装饰线指定风格通过 text-decoration-style 属性实现，属性值有 5 个： solid ：实线、 double ：双实线、 dotted ：圆点线、 dashed ：虚线、 wavy ：波浪线。之后通过 text-decoration-thickness 属性为线条设置厚度。属性值有三种设置方法：①auto 默认值（不确定，和所修饰的文字大小有关系）、②px（像素大小，是一个绝对值）③%（是一个相对值，根据修饰文字的高度计算出来的）

以上这些属性有点过于长了，可以采用简化的写法，举例：

1
2
3

h4 {
	text-decoration: underline red double 5px;(line、color、style、thickness对应的一个或多个属性值（可以没有顺序），其中text-decoration-line是必须设置的，其他三个可选)
}

***ps：***HTML 中的所有链接默认都有下划线，如果想要使链接的样式没有下划线，需要给 a 元素声明 text-decoration: none; 可以去除链接的超链接。

归纳表格：

属性	说明
`text-decoration`	在一个声明中设置所有的文字装饰属性
`text-decoration-color`	指定文本装饰的颜色
`text-decoration-line`	指定要使用的文本装饰的种类（下划线、上划线等）
`text-decoration-style`	指定文本装饰的样式（实心、点状等）
`text-decoration-thickness`	指定文本装饰线的厚度

# 设置字体

在 CSS 中，使用 font-family 属性指定一个文本的字体，属性值是一个字体的名称。

font-family:字体名称

CSS中英文字体有五类：1、Serif（有衬线字体）。2、Sans-serif（无衬线字体）。3、Monospace（单空格字体，所有的字母都有相同的固定宽度）。4、Cursive（草书字体）。5、Fantasy（幻想字体）。
CSS中中文字体比较通用的中文字体有两个：微软雅黑（Microsoft）、苹方简（Mac）

在 css 中设置的字体，用户的电脑里面没有要怎么办？可以定义几个样式备选，例如：

h3 {
    font-family:"Courier New" ,"BrushScript MT" ,Copperplate;
}

会从前到后选择，遇到系统中存在的字体，则会选择排在最前的字体作为当前显示的字体。如果系统中一个都没有，则会使用系统默认的字体作为显示字体。

***ps:*** 一般来说多个单词的字体，一般要用 '' 或 "" 来引起来。

设置字号：CSS 中通过 font-size 属性设定文本的大小，属性值可以是绝对大小（当页面输出的物理尺寸已知时很常用）也可以是相对大小（相对周围元素的大小，使用 em 来进行设置，一般来说会根据继承下来的父元素尺寸计算得到；除此之外还可以使用 % 这个单位，相对于父元素的大小来计算文本尺寸的；如果嵌套了多层，有了好多继承关系，为了厘清相对大小关系，可以使用 rem (relative to the root element) 来计算大小 **[html 文档中的根元素是 html]**）。

** 注意点：** 如果不指定字体的大小，正常的文本，比如段落会继承祖先的元素，如果祖先也没有设置字体的大小就会使用浏览器的默认字号（16px）。

# 设置字体风格和样式简写

文本倾斜主要使用 font-style 属性。属性值有三个：1、normal（文本正常显示）。2、italic（文本倾斜显示）。3、oblique（支持度较低，实现效果类似 italic）。

文本粗细设置主要使用 font-weight 属性。属性值设置有两种方式：名称和数值。名称有四个：lighter（细体，对应数值 100）、normal（正常字体，对应数值 400）、bold（加粗字体，对应数值 700）、bolder（更粗字体，对应数值 900）。数值有九个：从 100 到 900，每个增加 100。

font-variant 属性（只对英文有效）指定了文本是否应以小型大写字符显示，共有两个属性值：1、normal（正常显示）。2、small-caps（表示设置为小型大写字母）。

同样的为了缩短代码，以上属性可以简写，例子如下：

1
2
3

P {
    font: oblique 100 small-caps 30px/30px 华为仿宋;(font-style、font-variant、font-weight、font-size/line-height、font-family组合在一起，中间用空格隔开。其中font-size和font-family这两个值是必须的，其他值缺少就采用他们的默认值)
}

# CSS 谷歌字体和 Icon 图标

我们在css中的body中的font-family中不仅可以使用HTML中的标准字体，还可以使用谷歌字体(免费使用、1000多种选择)
语法形式：
body {
	font-family: "和下面引用链接的字体一样", serif;
}

使用谷歌字体，要在html引用中使用如下链接："https://fonts.googleapis.com/css?family=字体"（要使用多个字体可以使用|管道隔开，即=字体1|字体2|字体3,同时还能加上各种特效，在网址字体后面加上'&effect=特效名'即可，同样多个特效也可以使用|管道隔开）
再在html文件中引入有上面body的css文件（多字体时，给每个p标签设置class类，在css中进一步单独设置字体采用，见下例）（引入特效时，要在class上加上font-effect-特效名）
p.a {
    font-family: "Audiowide", sans-serif;
}

还可以通过图标库，将图标添加到 HTML 的页面当中。

（这里考虑了这个网站）

然后可以在后面的 p 标签内加 i 标签，定义上 class 属性为： fas fa-名称

Icon 字体图标的强大之处在于：可以将这个图标当成是文本，可以任意地添加样式

# CSS 选择器地权重

多个选择器都来修饰同一个元素，优先级该要如何判断。

行内样式 > ID 选择器 > 类选择器 > 元素选择器 > 通用选择器

更复杂的话，可以根据权重值来判断采用哪个选择器。

	选择器	例子	权重
1	通用选择器	`*`	0
2	元素选择器	`h1,div,p`	1
3	类选择器	`.active,.light`	10
4	ID 选择器	`#box,#btn`	100
5	行内选择器	`<h1 style="...">`	1000

例子：
#box p .light { // 优先级：100 + 1 + 10 = 111
    color: red
}

选择器选择的范围越小，越精确，优先级就越高！

# CSS 添加边框

border-style:
指定了要显示什么样的边框
允许使用以下值：
dotted:定义一个点状的边框
dashed:定义一个虚线边框
solid:定义一个实线边框
double:定义一个双倍的边框
none:定义无边框
hidden:定义一个隐藏的边框

当表格单元格相邻边框产生冲突时，优先级：hidden>solid>none
各个方向上的边框设置，上边框线：border-top-style，下边框线：border-bottom-style，左：border-left-style，右：border-right-style

逆天设置示例:1、border-style:dotted solid double dashed;
这种设置，按照上右下左的顺序，依次为点，实，双，虚
2、border-style:dotted solid double;
这种设置按照上，左右，下，。。。
3、border-style:dotted solid;
这种设置按照上下，左右，。。。

border-width:
可以用来设置边框的宽度，单位可以为px、em，也可以使用预定义的三个值，thin、medium、thick
同时边框宽度也可以使用混合简写的方法，上下左右都不一样捏

border-color:
可以用来设置四个边框的颜色
属性值可以为：颜色名称、十六进制颜色值、RGB颜色值，也可以设置为transparent（透明）
同样可以使用混合简写

当然边框也可以使用速记属性（和font类似）
例子：border: 5px solid red;
中间的border-style一定要声明
要单独设置一条边可以采用border-bottom这类的标签

tips:样式中给元素设置的宽高，是不包含该元素边框宽高的，它只包含元素1内容的宽高。

# CSS 列表

列表分为两种：

1、无序列表（OL）

2、有序列表（UL）

list-style-type:
可以设置不同的列表项标记，属性值可以为：circle（空心圆点）、disc（实心圆点）、square（实心方点）、decimal（数字）、upper-roman（大写罗马字母）、lower-alpha（小写字母）等。
list-style-image:
指定一个图像作为列表项的标记，属性值为url(背景图片路径)
通过list-style-position:
来设置位置，属性值有两个：outside表示标记在列表项之外,inside表示标记在列表项内部

如果不想要显示列表项标记，可以使用list-style-type:none;来去掉

同样列表属性也是可以使用简写，list-style即可用来在一个声明中设置所有的列表属性，属性值按照，list-style-type、list-style-position、list-style-image的顺序来写，某值缺少则使用默认的。

除此之外，还能用颜色来装饰列表，有background（值为RGB）和padding（值为像素）的属性

属性	描述
list-style	在一个声明中设置一个列表的所有属性
list-style-image	指定一个图像作为列表项的标记
list-style-position	指定列表项标记的位置
list-style-type	指定 list-item 标记的类型

# CSS 背景属性

css 中设置 body 占满整个界面：

html,body {
    height: 100%;
}
如果直接用body，没有加上html那会宽度为全部，高度为0，因为body的height参考的是其上方的html标签的高度，html标签高度为0，所以0*100%=0。

添加背景图片的语法：
background-image:url(图片路径); // 默认会采用平铺方式填满整个屏幕
如果不要平铺，可以采用以下语法：
backgroung-repeat:no-repeat; //这样只能看到一张图片，其余为空白。

要求图片在背景中间显示，要设置以下属性
background-position:
第一个属性值是水平方向上的对齐，第二个属性值是垂直方向上的对齐方式。
第一个值：
属性值为left表示左对齐，
属性值为center表示居中对齐，
属性值为right表示右对齐。

第二个值：
属性值为top,表示垂直向上对齐
属性值为center，表示垂直居中对齐
属性bottom，表示垂直向下对齐

--------------------------------------
实现页面滚动滑动，但是背景不动，需要设置以下属性：
background-attachment:
属性值为：fixed:图片固定；scroll:同时滚动

设置背景颜色
background-color:
属性值为：1、颜色名称。2、十六进制颜色值。3、RGB颜色值。

当然也能精简写，一个background容纳一切。

**tips:** 新的颜色值表示方法： rgba() ，即 rgb 颜色值加上透明度 alpha 值（是一个介于 0 <完全透明>～1 < 完全不透明 > 的值）。例子： background-color:rgba(0,0,0,0.5)黑色半透明

总结汇总：

属性	解释
`background-color`	设置背景颜色
`background-image`	设置的背景图片，设置背景图片默认会产生平铺
`background-position`	用来调整背景图片位置的，默认取消平铺，背景图片在容器左上角；取值为一组值： `x y` ；x 水平位置，y 垂直位置
`background-repeat`	用来解决平铺的：有四个取值： `repeat` ， `no-repeat` ， `repeat-x` ， `repeat-y`
`background-attachment`	被称之为背景附着，也可以称之为，背景固定和滚动，两个取值 `fixed` ， `scroll` ，以上五种属性为单一属性
`background`	为复合属性，一个属性后面可以跟多个取值: `background:color image repeat position attachment;`

# 精灵图

又称雪碧图、妖怪图

基本原理为将页面中使用到的各种图片进行分类，整齐划一地摆放在一张背景透明的图片上，通过调整位置显示出精灵图中的一个元素。

移动的语法为： background-position:

一般默认左上角为原点，对应图片里面的元素横纵坐标均为负的。

# CSS 轮廓

轮廓是元素周围画的一圈线，在边框之外。能让元素在视觉上能有突出的显示。属性有： outline-style ：轮廓样式； outline-color ：轮廓颜色； outline-width ：轮廓宽度； outline-offset ：轮廓偏移； outline ：轮廓简写

outline-style:
属性值有dotted，定义一个点状轮廓
dashed定义一个虚线轮廓
solid定义一个实现轮廓
double定义一个双线轮廓
none定义一个无轮廓
hidden定义一个隐藏的轮廓

outline-width:
属性值有thin：一般为1px
medium：一般为3px
thick：一般为5px
一个特定的尺寸：以px、em为单位

outline-color：
属性值有颜色名称
十六进制颜色值
RGB颜色值

outline: outline-width outline-style(必须) outline-color

outline-offset:
用来设置轮廓和元素之间的空隙（透明的）

汇总：

属性	解释
`outline`	一个速记属性，用于在一个声明中设置轮廓宽度、轮廓样式和轮廓颜色
`outline-color`	设置轮廓的颜色
`outline-offset`	指定轮廓与元素的边缘或边界之间的空 i 教案
`outline-style`	设置轮廓的样式
`outline-width`	设置轮廓的宽度

# CSS 边距

用来在元素周围创造空间，控制元素边框外的距离，可以通过 margin-left、margin-top、margin-bottom、margin-right 等属性设置元素的左边、上边、下边、右边的外边距。所有的边距属性都有以下值：1、auto（浏览器自动计算的边距）；2、length（以 px、pt（point，是一个绝对单位，中文为磅，常用于印刷中，1 磅 = 0.376mm）、cm 等为单位指定边距）；3、%（以父元素宽度的百分比来指定边距）。后两者都可以取负值，表示减少外边距的空间大小。

同时为了简化代码，可以在一个 margin 属性中指定所有的边距属性（直接干上 4 个 px）。

汇总：

属性	解释
`margin`	一个速记属性，用于在一个声明中设置所有的 margin 属性
`margin-bottom`	设置元素的底边距
`margin-left`	设置元素的左边距
`margin-right`	设置元素的右边距
`margin-top`	设置元素的顶部边距

tips: 在两个容器的邻接处，有时会出现边距塌陷的问题，称为 margin塌陷 ，一般发生在相邻块元素垂直边距和嵌套块元素垂直边距邻接的时候（不发生在左右边距上，只发生在顶部和底部之间，以大边距的为最终显示效果）

# CSS 填充和宽高

填充在边框内到内容外之间的距离，可以通过 padding-top、padding-right、padding-bottom、padding-left 等属性来设置元素不同位置上的边框内填充。padding 的属性值可以为：1、length（以 px、pt、cm 等为单位指定填充）；2、%（以父元素宽度的百分比来指定填充）。同样可以取负值，表示减少内部填充的空间大小。

同样也可以在一个 padding 属性中指定所有的填充属性。

tips：如果一个元素有指定的宽度，那加在该元素上的填充会加在这个元素的总宽度上。

CSS 的 width 和 height 属性不包括 margin、border 和 padding 的区域，只是用来定义元素的内容尺寸，可以设置的值有：1、auto（浏览器会计算出高度和宽度）；2、length（以 px、pt、cm 等为单位定义高度和宽度）；3、%（以父元素宽度的百分比来定义高度和宽度）；4、initial（将高度和宽度设置为默认值，实际上就是 auto 了）

总结汇总：

属性	解释
`padding`	一个速记属性，用于在一个声明中设置所有的 padding 属性
`padding-bottom`	设置一个元素的底部填充
`padding-left`	设置元素的左侧填充
`padding-right`	设置元素的右侧填充
`padding-top`	设置元素的顶部填充
`height`	设置元素的高度
`width`	设置元素的宽度

# CSS 盒模型

本质为包裹每个 HTML 元素的盒子，包含：margin、border、padding、content 四个部分。

盒子的宽度 = 内容宽度 + 左右填充 + 左右边框 + 左右边距

盒子的高度 = 内容高度 + 上下填充 + 上下边框 + 上下边距

👆标准盒模型

另一个种盒模型：怪异盒模型

给元素声明 box-sizing 属性，取值为 border-box。即 box-sizing:border-box; （如果属性值设置为 content-box 那就是标准盒（默认））

这样设置后，增加样式，会挤压内容的空间，不会往外扩展。宽高就是 width 和 height 属性的值。

这种盒子的宽度 = CSS 样式设置的 width 值 + 左右边距

高度 = CSS 样式设置的 height 值 + 上下边距

# CSS 布局之显示属性

要知道最重要的 CSS 属性：display，它指定一个元素是否显示以及如何显示。

1、TML元素都有一个默认的显示值
2、类型不同，默认的显示值也不同
常见的属性值有：block：元素显示为块级元素。inline：元素显示为行内元素。none：元素显示隐藏元素。
tips：visibility:hidden;这样也会隐藏元素，但是该元素仍将占用它隐藏前相同的空间，即仍然影响着页面的布局。但是设置的display属性的none会不占用这块区域。

常见的块级元素和行内元素的汇总表，见下：

块级元素总是从一个新行开始，会占据可用的全部宽度，尽可能地想做向右伸展。这些元素地 display 默认值是 block。

内联元素不从新的一行开始只占用必要的宽度。这些元素的 display 值默认为 inline。

# CSS 布局之元素类型

注意点：

行内元素不能设置宽高样式
行内元素可以设置边框线样式
行内元素可以设置内填充样式
行内元素可以设置左右方向的外边距样式

给块元素设置宽高、边框线、内填充、外边距样式，都是有效的。但是每个块元素独占一行

👆如果要在一行上，可以采用 display:inline-block;

这种方式具有 inline 和 block 两种显示效果。（同时会使 margin 塌陷的问题也消失了）

== 设置一个元素的 display 属性只能改变该元素的显示方式，而不能真正地改变 html 元素地类型。== 例如：一个具有 display:inline; 的块元素还是不允许在它的内部有其他块元素。

由此引申出以下的嵌套规则：

规则一：块元素可以包含行内元素或某些块元素，但行内元素却不能包含块元素，它只能包含其他的行内元素。

规则二：块元素不能放在 p 元素里面。

规则三：有几个特殊的块级元素只能包含行内元素，不能再包含块元素，这几个特殊的元素是：h1、2、h3、h4、h5、h6、p、dt。

规则四：块级元素一般与块级元素并列、行内元素一般与行内元素并列。

# CSS 布局之溢出处理

除了一般的 iframe 属性，也会院使用 CSS 的 overflow 属性，用来设定当内容太大，无法再指定区域显示时是否要裁剪内容或添加滚动条。

overflow:
属性值有以下几种：
1、visible：默认，溢出的内容没有被剪掉（内容会在元素的框外显示）。
2、hidden：溢出的内容被剪切掉，且溢出部分不可见。
3、scroll：溢出的内容被剪掉，并且增加一个滚动条来查看其余的内容。
4、auto：类似于scroll，但只有在必要时才添加滚动条。
要单独设置水平反向和垂直方向，可以设置一组属性：overflow-y和overflow-x。

有时候，文字标题或文字内容所在的容器空间有限，不能显示全部的内容，会出现一个省略号（示意内容显示补全，可以点击查看详情内容）

可以给 text-overflow 设置属性值 ellipsis

汇总：

属性	解释
`overflow`	指定如果内容哦给你溢出元素的盒子会发生什么。
`overflow-x`	指定如果内容溢出元素的内容区域，该如何处理内容的左 / 右边缘。
`overflow-y`	指定当内容溢出元素的内容区域时，对内容的上 / 下边缘的处理。
`text-overflow`	控制文本溢出的样式。

# CSS 布局之浮动基础、清理

给容器添加浮动后会脱离标准文档流，相当于飘起来。

1
2
3

float:;
属性值有：left（左侧浮动）、right（右侧浮动）、none（不浮动）。
浮动只能让容器在当前所在行左侧或右侧排列。

实现多个容器横向排列，只需要给所有的容器添加浮动样式即可。

问题：如果实现有了好几个容器都是采用了浮动的方式，但是后面要加入非浮动的容器，那么势必会被上面设置了浮动对的容器给遮挡住，那要如何解决。

①给浮动的容器套一个父元素。让父元素来撑起对应容器映射在文档流上的那块区域。

为了让父元素的大小不受子元素的浮动效果影响，一种方式是直接设置宽高，要么就是设置溢出属性 overflow:auto; （对于超出边界的元素，父元素可以做自动的调整。）。

②要么就是给其他添加进入的元素设置 clear 属性（清除样式，是不希望受到影响谁就添加 clear 属性）。

clear:;
属性值有如下：
left（表示当前元素不受到左浮动的影响）
right（表示当前元素不受到右浮动的影响）
both（表示上面两个的合体版）

***tips：*** 一般情况下，在布局页面结构时，元素选择尽量使用不同的标签，这样就可以通过元素选择器就可以分别给他们添加样式了。在设计网站时，在不知道具体要放入上面具体链接之前，我们可以先使用锚点链接，打个标记。

通用清理浮动的方式，加入以下内容：

选择器::after {
    content:"";
    clear:both;
    display:block;
}

# CSS 布局之定位

需要设定一个 position 属性

position:
有五种不同的属性值，具体如下：
static:静态定位。
relative:相对定位。（1、需要配合left、top、right、bottom这些定位属性才能生效；2、相对的是容器自身的屏幕坐标0，0点；3、容器位置发生位移后，原来占据的空间依然保留；默认会覆盖没有定位的容器。）
fixed:固定定位。（1、是相对于浏览器视口定位的，这意味着集市页面发生滚动，它也始终保持在同一个位置；2、top、right、bottom和left属性被用来定位元素，但不是必须的。）
absolute:绝对定位。（1、设置了会脱离文档流；2、参照点为，有定位设置的离他最近的祖先元素的0，0点坐标；3、默认会覆盖没有定位的容器。）
sticky:粘性定位。【会产生动态效果，很像static和fixed的结合】（如果设置之后没有效果，会有如下原因：1、父元素不能添加overflow:hidden或者overflow:auto属性；2、元素自身必须声明top、bottom、left、right一个或多个属性，否则就相当于静态定位了；3、父元素的高度不能低于sticky定位元素的高度；4、sticky定位元素仅在其父元素内生效。）（1、初始状态相当于static定位；2、相对于父容器的定位条件符合时，容器变为固定定位；3、top、right、bottom或left至少声明一个，粘性定位才能生效。）

# CSS 定位的堆叠

CSS 为盒模型的布局提供了三种不同的定位方案：正常文档流、浮动、定位。最后一种的绝对定位会把元素从正常文档流中完全移走（最终落脚点取决于开发者）。

出了上下左右外，css 也允许我们使用 z-index 属性将元素放置在三维空间中，设置值要为一个整数值（正整数，负整数，0）。

容器的堆叠顺序的计算，是先比较同级容器的。子容器是不会超出父容器的堆叠顺序的。

# CSS 布局值宽高自适应

元素的宽或高能够随着屏幕的宽高变化而变化就是宽高自适应。

将 width 和 height 的值设置为 %，可以实现元素的宽高自适应。

通过设置 max-width、max-height、min-width、min-height 可以设置元素宽高自适应的临界值。

# CSS 的数学函数

css 的数学函数允许将数学表达式作为属性使用。

常见格式有：
.box {
    width:calc(100%+100px)
    width:calc(100%-100px)
    width:calc(100%*2px)
    width:calc(100%/2px)
}
小括号里面编写数学公式

# BFC

块格式上下文

一般在相邻块元素垂直边距和嵌套块元素垂直边距上会发生 margin 塌陷。

如果一个元素触发了 BFC 规则，我们可以称它为 BFC 区域。

特点 1、两个 BFC 区域之间是相互独立互不影响的。（如果容器内部的子元素出现了上下边距，边距不会跑到外面去影响其他元素，而是在内部拉开距离，这使得父元素变成了一个独立的区域）

特点 2、元素被触发了 BFC 规则，那么浏览器在计算这个元素的高度的时候，会把浮动元素也考虑进去，这样不管有多少个浮动元素，都不用担心父元素没有高度了。

设置触发 BFC 的条件：

1、设置 float:left/right;

2、设置 position:absolute/fixed;

3、设置 display:inline-block/tabl-cell等;

4、设置 overflow:auto/hidden等;

无论是浮动、定位或者更改元素类型，都有可能大幅度影响页面布局，而 overflow 这个属性则没有这方面的问题。所以一般最后一个设置的比较多。

# CSS 表格

定义表格的边框：

使用 border 属性，因为 th、td 等元素都占有一定的位置，所以就这样加上边框会有空隙的存在，这时要采用 border-collapse 来把表格的边框折叠成一个单一的边框。

1	border-collapse:collapse;

width 和 height 属性可以用来定义表格的高度和宽度。

text-align 属性用来设置 th 或 td 中内容的水平对齐方式（默认的 th 内容是居中对齐的，td 元素的内容是左对齐的）。

vertical-align 属性用来设置 th 或 td 中内容的垂直对齐方式（默认的 th 和 td 的内容都是垂直居中对齐）。

padding 属性用来给内容和边框线之间添加填充。

border-bottom 属性用来实现表格的水平分割线效果。

# 完结撒花

★,°:.☆(￣▽￣)/$:.°★ 。

文章作者: Ex-monster

文章链接: http://example.com/2023/04/21/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E2%80%94%E2%80%94HTML+CSS/

HTML

打赏

微信
支付寶