互联网原理

互联网原理：上网即请求数据

HTML：制作网页文件

上网时，用户通过客户端发送http请求到服务器，服务器端将对应请求找到后，通过http响应传给本地计算机，计算机加载网页

上网过程由实际的物理文件的传输

http协议

浏览过程

输入URL→DNS域名解析（浏览器无法直接通过域名发起请求，需要将域名解析为IP地址）→建立TCP链接→发送HTTP Request→Web服务器Nginx反向代理→应用服务器Servlet处理请求→关闭TCP链接→渲染响应页面

纯文本和超文本区别

定义：纯文本只包含文字内容，不能包含文字以外的（图片视频等）。

纯本文文件：文件内部只能书写纯文本，且不包含样式，常见如.txt、.html、.css、.js。

超文本文件：是一种含有特殊标记的文本文件，其作用类似word的排版标记最常见的.docx、.pptx。

查询某一浏览器html5兼容情况：https://html5test.com/results/desktop.html

查询某一新增方法浏览器兼容情况：https://caniuse.com

HTML骨架

DTD(Document Type Definition)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

html就是HTML超文本标记语言

关于html标签

整个网页必须被包裹，其中包含和两部分

：网页的配置：网页的内容

标签属性lang(language)：整个网页的主题语言

英语：en

汉语：zh、cn、zh-CN。

无论那种语言都要使用英文开发

字符集

head标签对中几乎所有的配置都是些在meta标签中的，meta意为元

<meta charset="UTF-8">
<meta charset="gb2312">
<meta charset="gbk">

网页面向国际使用"UTF-8"，面向国内使用"gbk"

如需修改字符集

以将现有字符集utf-8修改为gbk为例

将meta标签修改为gbk
点击右下角字符集标志[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DAfH6KcB-1630767244050)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210721185344849.png)]
在弹出检索栏点击通过编码重新打开[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6UWIMe2w-1630767244051)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210721185516140.png)]
搜索gbk，选中搜索内容即可[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iu2yIoKa-1630767244052)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210721185610876.png)]

视口标签

meta name="viewport" content="width=device-width, initial-scale=1.0">

如果不加这个视口，手机看这个网页是“俯瞰”模式，将以980px俯瞰网页

如果加上这个视口，手机看网页就是“APP”模式，将以APP的状态字号看页面

浏览器私有设置

edge是win10中IE升级版浏览器，这句话的意思表示设置兼容性为让IE和edge渲染方式一样

<meta http-equiv="X-UA-Compatibale" content="ie=edge">

还有些双核浏览器都可以加上这句话表示尽可能用高级核打开页面

<meta name="renderer" content="webkit">

title标签

网页标签

<title>Document</title>

关键字

最基本的SEO技术就是把keywords写好，keywords是网页关键字

<meta name="keywords" content="前端,HTML,JavaScript">

description页面描述

页面描述就是搜索引擎搜索到之后显示的文字

<meta name="Description" content="网页描述"/>

HTML基本语法

单标签	双标签
img	h1-h6
br	div
hr	span
	p
	a
	ul+li

容器级	文本级
div	span
ol	img
ul	b
li	u
dl	i
dt
dd
h1-h6

标签属性

对标签赋予职能，但前提是它具有此项功能，多个属性用空格隔开。

<a href="" title="">我是超链接</a>

文字的位置不通过标签位置决定，而是通过标签特性决定。

<p>文字</p><p>文字</p>

其输出结果是换行的

<span>文字</span>
<span>文字</span>

标签与其他标签之间对空白、换行、缩进不敏感，有没有空白不影响浏览器加载效果
HTML语法中，认识标签的开始和结束，不论有没有换行都只认标签开始结束
标签之间还认识嵌套关系
书写过程中，为了让代码是容易解读的，建议进行合理的换行和缩进
在上传代码的过程中，为了提高传输速度，可以将代码进行压缩，删除多余的空白，目的是压缩文件大小

空白折叠现象

多个空格会被折叠成一个空格

<p>你好        我是张三</p>

多个空格显示需要特殊写法

<p>你好&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我是张三</p>

HTML常见标签

h系列标签(headline)

一共六级标题(h1-h6)

都是双标签，容器级标签

作用：给内部添加对应级别标题的语义

标题标签权重最高

    <h1>我是h1标签</h1><h2>我是h2标签</h2><h3>我是h3标签</h3><h4>我是h4标签</h4><h5>我是h5标签</h5><h6>我是h6标签</h6>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L8i8syU3-1630767244054)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210722160410847.png)]

h1一般是logo，如用多个，浏览器会认为你作弊，从而降低排名

p标签(paragraph)

文本级标签

img标签

文本级标签

用于插入一张图片

src：图片路径

alt：文件加载不出来时的替换文本

title：鼠标悬停图片上时出现的文字

width：图片宽度

height：图片高度

border：边框设置

<img src="" alt="" width="" height="" title="" border="">

一般为了避免图片变形长度宽度不会同时使用

一般不在此处使用border，而在css中使用，边框颜色不光有黑色

src中使用相对路径或绝对路径都可以，实战中因为没有盘符划分所以很少使用绝对路径。相对路径中常见有："/"：进入某个文件夹；"…/"：出某个文件夹；同级文件夹不需要进出。

锚点(anchor)

a标签

双标签，文本级标签

作用：指定位置添加一个娼妓链接，从而实现相应的跳转

a标签常见属性：

href：超文本引用（hypertext reference）

<a href="http://www.baidu.com">链接到百度</a>

跳转也可以使用绝对路径和相对路径

target：

作用是是否在新标签打开链接，值一定是"_blank"

<a href="http://www.baidu.com" target="_blank">链接到百度</a>

title:

和img的title一致，都是设置鼠标悬停的文字

<a href="http://www.baidu.com" target="_blank" title="我是鼠标悬停的文字">链接到百度</a>

锚点的使用

方法一：name属性定位

锚点的锚

<a href="#abc">标题1</a>

锚点的点

<a name="abc"></a>

代码示例

    <h1>总标题</h1><a href="#abc">标题1</a><a href="#def">标题2</a><a href="#hij">标题3</a><h2>标题1</h2><a name="abc"></a><p>内容1</p><h2>标题2</h2><a name="def"></a><p>内容2</p><h2>标题3</h2><a name="hij"></a><p>内容3</p>

方法二：id属性定位

锚点的锚

<a href="#abc">标题1</a>

锚点的点

 <h2 id="abc">标题1</h2>

代码示例

    <h1>总标题</h1><a href="#abc">标题1</a><a href="#def">标题2</a><a href="#hij">标题3</a><h2 id="abc">标题1</h2><p>内容1</p><h2 id="def">标题2</h2><p>内容2</p><h2 id="hij">标题3</h2><p>内容3</p>

列表

无序列表

用于定义无序列表，标签包括：

ul: unordered list

li: list item

    <h2>古典四大名著</h2><ul><li><h3>西游记</h3><ul><li>唐僧</li><li>孙悟空</li><li>猪八戒</li><li>沙僧</li></ul></li><li><h3>水浒传</h3><ul><li>林冲</li><li>卢俊义</li><li>宋江</li><li>武松</li></ul></li><li><h3>三国演义</h3><ul><li>董卓</li><li>曹操</li><li>孙权</li><li>刘备</li></ul></li><li><h3>红楼梦</h3><ul><li>贾宝玉</li><li>林黛玉</li><li>薛宝钗</li><li>王熙凤</li></ul></li></ul>

ul内部嵌套且只能嵌套li标签，li标签内部可以嵌套任何标签

无序列表之间没有前后顺序之分

列表项之间的前缀样式是CSS去控制的，目前只需搭建结构

有序列表

用于定义有序列表，包括：

ol: ordered list

li: list item

    <h2>三年级期末考试排名</h2><ol><li><h3>三年级1班</h3><ol><li>第一名：王同学</li><li>第二名：李同学</li><li>第三名：张同学</li></ol></li><li><h3>三年级2班</h3><ol><li>第一名：王同学</li><li>第二名：李同学</li><li>第三名：张同学</li></ol></li><li><h3>三年级3班</h3><ol><li>第一名：王同学</li><li>第二名：李同学</li><li>第三名：张同学</li></ol></li></ol>

嵌套规则同无序列表

定义列表

用于定义自定义列表，标签包括：

dl: definition list

dt: definition term

dd: definition description

    <h3>国内明星</h3><dl><dt>明星1</dt><dd>作品：《作品1》、《作品2》、《作品3》</dd><dt>明星2</dt><dd>作品：《作品1》、《作品2》、《作品3》</dd><dt>明星3</dt><dd>作品：《作品1》、《作品2》、《作品3》</dd><dt>明星4</dt><dd>作品：《作品1》、《作品2》、《作品3》</dd></dl>

di内部只能存放dt和dd，dt和dd是同级关系

dt和dd都是容器级标签，内部可以存放任意内容

每个dt主题后面跟0或多个解释的dd，每个dd解释上一个dt

很多时候dl、dt、dd组合使用

    <h3>国内明星</h3><dl><dt>明星1</dt><dd><p>作品：《作品1》、《作品2》、《作品3》</p><p>家庭成员：成员1、成员2、成员3</p><p>合作演员：演员1，演员2，演员3</p></dd></dl><dl><dt>明星2</dt><dd><p>作品：《作品1》、《作品2》、《作品3》</p><p>家庭成员：成员1、成员2、成员3</p><p>合作演员：演员1，演员2，演员3</p></dd></dl><dl><dt>明星3</dt><dd><p>作品：《作品1》、《作品2》、《作品3》</p><p>家庭成员：成员1、成员2、成员3</p><p>合作演员：演员1，演员2，演员3</p></dd></dl><dl><dt>明星4</dt><dd><p>作品：《作品1》、《作品2》、《作品3》</p><p>家庭成员：成员1、成员2、成员3</p><p>合作演员：演员1，演员2，演员3</p></dd></dl>

如果再加上一定的CSS设置

    <style>dl{border: 1px solid #333;float: left;height: 500px;width: 200px;margin: 0 5px;}</style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AHJDVhG9-1630767244055)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210723184904264.png)]

表格

表格基本标签

table: 定义表格

tr: table rows，定义表格列

td: table dock，定义表格的单元格

关系：table>tr>td

table上有两个标签：一是边框，二是CSS样式

如果表格需要添加表头，可以使用tr>th

    <table border="1" style="border-collapse:collapse"><tr><th>1</th><th>2</th><th>3</th><th>4</th></tr><tr><td>第1行，第1列</td><td>第1行，第2列</td><td>第1行，第3列</td><td>第1行，第4列</td></tr><tr><td>第2行，第1列</td><td>第2行，第2列</td><td>第2行，第3列</td><td>第2行，第4列</td></tr2><tr><td>第3行，第1列</td><td>第3行，第2列</td><td>第3行，第3列</td><td>第3行，第4列</td></tr></table>

单元格合并

跨行跨列合并，可以给对应的td和th标签设置相关属性

rowspan：上下跨行合并

colspan：左右跨列合并

        td{width: 80px;height: 60px;text-align: center;}

    <table border="1" style="border-collapse: collapse;"><tr><td colspan="2">1</td><td rowspan="2">2</td><td colspan="3">3</td><td>4</td></tr><tr><td rowspan="2">5</td><td>6</td><td>7</td><td>8</td><td rowspan="2">9</td><td>10</td></tr><tr><td rowspan="2">11</td><td>12</td><td colspan="2">13</td><td rowspan="2">14</td></tr><tr><td>15</td><td>16</td><td>17</td><td colspan="2">18</td></tr></table>

表格分区

完整表格主要包括三部分：表格标题、表格表头、表格主题

table内部还有三个分区标签组成

caption: 定义表格的主题

thead: 定义表格的头部

tbody: 定义表格的主体

    <table border="1"><caption>各地区资产投资情况</caption><thead><tr><th rowspan="2">地区</th><th colspan="2">按总量分</th><th colspan="2">按比重分</th></tr><tr><th>自年初累计</th><th>去年同期增长（%）</th><th>自年初累计</th><th>去年同期（%）</th></tr></thead><tbody><tr><td>全国</td><td>10000</td><td>100</td><td>100</td><td>100</td></tr><tr><td>全国</td><td>10000</td><td>100</td><td>100</td><td>100</td></tr><tr><td>全国</td><td>10000</td><td>100</td><td>100</td><td>100</td></tr><tr><td>全国</td><td>10000</td><td>100</td><td>100</td><td>100</td></tr><tr><td>全国</td><td>10000</td><td>100</td><td>100</td><td>100</td></tr></tbody>

表单元素

form标签

form是表单的意思

form是容器级标签，内部存放可输入的控件。如果输入的表单需要提交到数据，所有的控件需要被表单包裹

method：数据提交的方法。属性值是post和get

action：是数据提交的位置

input标签

input是输入框的一种，但不仅仅是输入框，通过type属性实现多功能

输入框

输入框有两个重要的属性：

value：设置默认显示的内容，属性值为自定义内容

placeholder：属性作用是如果没有value的时候提示用户的文字占位符

        <p>用户名：<input type="text" value="" placeholder="请输入用户名"></p>

密码框

通过type设置为password实现

        <p>密&nbsp;码：<input type="password" placeholder="请输入密码"></p>

单选框

通过type设置为radio实现

欲实现一组互斥的按钮，将单选按钮组name属性设置成相同

        <p>性&nbsp;别：<input type="radio" name="sex">男<input type="radio" name="sex">女<input type="radio" name="sex">保密</p>

复选框

通过type设置为checkbox实现

复选框可以通过对自身进行多次点击实现选择或者取消

一组多选框建议设置相同的name

不论单选复选，若希望默认选定则需要添加

checked="checked"

        <p>爱&nbsp;好：<input type="checkbox" name="hobby">绘画<input type="checkbox" name="hobby" checked="checked">读书<input type="checkbox" name="hobby">音乐<input type="checkbox" name="hobby">天文</p>

label标签

如果想实现点击文字即选中，则需要label标签来扩大选取

        <p>年&nbsp;龄：<label><input type="radio" name="sex">0-20</label><label><input type="radio" name="sex">21-40</label><label><input type="radio" name="sex">40+</label></p>

文本域

标签textarea

input之前只能输入单行文本，如果想实现多行输入，就需要使用textarea

textarea是一个双标签，是文本级标签

属性值为rows和cols

rows：定义当前文本域有几行，单位是数字

cols：定义当前文本域有几列，单位是数字（以英文为准）

placeholder：占位符

<textarea rows="3" cols="10" placeholder="请输入自我介绍"></textarea>

textarea默认是可以通过右下角进行缩放，如不想缩放设置style

<textarea rows="3" cols="10" placeholder="请输入自我介绍" style="resize: none;"></textarea>

下拉菜单

需要一组标签进行制作

select：表示搭建下拉项

option：表示搭建下拉项

select内部嵌套option

如果需要将某一选项定位默认则

            籍贯：<select><option>北京</option><option selected="selected">广州</option><option>上海</option><option>重庆</option></select>

HTML字符实体

&开头，；结尾。常见如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BYDPARTf-1630767244056)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210724210950674.png)]

参考链接：https://www.w3school.com.cn/html/html_entities.asp

错误表达：

   <div>今天学习了<h1>标签的作用</div>

正确表达：

   <div>今天学习了&lt;h1>标签的作用</div>

div和span

div和span都是常用布局标签，俗称盒子

div：分割大跨度。主要用于网页布局拆分，没有明确语义

span：分割小跨度。用于小范围，只是用于文本

作用：用来分割页面布局。div是跨度布局分割，span是文字分割

div是容器级标签

    <!-- 顶部 --><div><div>今天收入<span style="color: aqua;">300</span>元</div></div><!-- 内容 --><div><div></div></div><!-- 底部 --><div><div></div></div>

CSS(cascading style sheet)

CSS样式

文字样式

盒模型的样式

CSS布局

辅助页面布局，完成HTML无法完成的功能，比如并排显示、精确定位显示

从HTML4.0开始，结构层和样式层进行了分离

前端三层

结构层：HTML作用是从语义的角度进行网页结构的搭建

样式层：CSS作用从美观的角度讲修饰页面样式

交互层：JavaScript作用是从交互的角度讲述页面的行为

CSS常用属性

CSS常用的文字属性有三个：color, font-size, font-family

CSS的属性样式发生了改变，由HTML的k="v"变为了k:v

文字三属性

文字颜色

文字属性：color

颜色值：

十六进制：#ff0000/Green(#00ff00)/Blue(#0000ff)，可简化(#00ff00简化为#0f0)

RGB: Red(255,0,0)/Green(0,255,0)/Blue(0,0,255)，共1670万种颜色

    <p style="color: blue;">颜色1</p><p style="color: #0000FF;">颜色2</p><p style="color: rgb(0, 0, 255);">颜色3</p>

https://www.w3school.com.cn/cssref/css_colors.asp

字号

属性：font-size

数值：以px（像素）为单位的数值；以百分比为单位；以em（倍数）为单位

<p style="font-size: 16px;">文字大小1</p>

不同浏览器有自身不同的默认大小和最小显示大小（chrome的默认大小是16px，最小为8px）

字体

属性：font-family

属性值：必须以双引号包裹，属性可以有多个（前置属性无法识别就识别下一个），使用逗号分隔

中文常用字体属性：微软雅黑(Microsoft Yahei)，宋体(Smisun)

英文常用属性值：Arial，consolas

<p style="font-family: 宋体;">字体1</p>
<p style="font-family: 微软雅黑;">字体2</p>

大多数浏览器默认字体为微软雅黑，以上两种书写皆可

如果有中英文混杂，则同时设置对应字体

行高

文字一定垂直居中

属性：line-height

属性值：

px为单位：数值以像素为单位

百分比：参考自身字号大小

<style>*{margin: 0px;padding: 0px;}p{font-size: 14px;background: aqua;height: 200px;width: 100px;margin: 100px auto;line-height: 200px;}
</style>

文字加粗(font-weight)

数值表示

单词表示

normal表示不加粗

<style>font-weight: 700;
</style>

bold表示加粗（默认加粗700）

<style>font-weight: bold;
</style>

字体样式(font-style)

设置文字是否有倾斜或者斜体

属性值

normal：正规的，没有倾斜

italic：斜体的，文字斜体（该文字有斜体样式才会倾斜，使用最多）

oblique：倾斜的，与字体无关（无论什么字体都会倾斜）

<style>    #noraml{font-style: normal;}#italic{font-style: italic;}#oblique{font-style: oblique;}
</style>

font属性综合写法

包含五个单一属性，属性之间使用空格隔开，字号和行高使用斜杠分割，字号、行高、字体必须连续书写，顺序不能变，必须位于倒数三个

<style>.font{font: italic bold 24px/48px 'Simsun';}
</style>

文本

对齐text-align

用来设置段落整体水平方向对齐

属性值：left、center、right

<style>p{width: 200px;height: 200px;border: 1px solid red;text-align: center;}
</style>

文本修饰(text-decoration)

设置文本整体是否有线条修饰

属性值

none：没有修饰

overline：上划线

line-through：中划线、删除线

underline：下划线

<style>.none{text-decoration: none;}.overline{text-decoration: blue overline;}.line-through{text-decoration: green line-through;}.underline{text-decoration: red underline;}
</style>

缩进(text-indent)

设置段落首行缩进

属性值

px为单位：数字代表多少像素

百分比为单位：参考标签的父级元素width值的百分比

em为单位：数字是几表示缩进几个字符（最常用）

<style>.none{text-indent: 20px;}.overline{text-indent: 10%;}.line-through{text-indent: 2em;}
</style>

盒模型（盒子）

宽度属性：width

高度属性：height

内边距属性：padding

边框：border

外边距属性：margin

背景颜色属性：background-color（也有单词和数字三属性）

盒子实际加载区域：width+height

盒子可实体化显示区域：width+height+padding+border

盒子实际占位区域：width+height+padding+border+margin

<div style="width: 100px;height: 100px;background-color:red"></div>

div{width: 400px;height: 400px;padding: 20px;border: 10px solid black;margin: 50px;background-color: pink;
}
p{color: rgb(214, 19, 19);font-size: 20px;width: 50%;height: 50%;background: green;padding: 0;margin: 0;
}

宽和高(width&height)

如果盒子不设置宽高，则默认撑满父盒子宽度

如果盒子不设置高度，则默认被文字撑满（文字包括其行高）

内边距(padding)

设置宽高到边框的间距

不能加载内容但可以加载背景

属性名：padding

属性值：px为单位的数值

对四周一起设置

padding: 20px;

对四周分别设置

padding-left: 40px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 30px;

四值法：以上可简写为（顺序为上右下左）

padding: 10px 20px 30px 40px;

三值法：设置顺序为上、左右、下

padding: 10px 20px 30px;

二值法：设置顺序为：上下、左右

padding: 10px 20px;

边框(border)

设置盒子显示边缘

border: 10px solid black;

border是个综合属性，包括了：线宽(border-width)、线形(border-style)、颜色(border-color)，单个属性书写也有四值法，顺序规则同padding。

border-style常见效果有：实线(solid)、虚线(dashed)、点线(dotted)、双线(double)、边框凹陷效果groove、边框凸显效果(rideg)、内容凹陷效果(inset)、内容凸现效果(outset)等。

border-width: 10px 20px 30px 40px;
border-style: solid dashed dotted double;
border-color: red blue green yellow;

也可以对某一方向某一属性精确设置（border+方向+类型）

border-right-color: purple

外边距(margin)

设置盒子与其他盒子的间距

设置与padding一致

盒模型扩展

默认样式清除

所有的标签都有自身的边距，如有需要可对其进行删除

<style>常见清除样式body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dl,dt,dd,th,td,input{margin: 0;padding: 0;}ul,ol{list-style: none;   /* 清除小圆点 */}h1,h2,h3,h4,h5,h6{font-weight: normal;font-size: 100%;}
</style>

<style>*{padding: 0;margin: 0;/*全局清除*/}
</style>

height属性扩展

一个盒子必须有高度，否则看不到内容样式，比如超出部分，如果没有设置高度，则被内容撑高；如果设置高度小于文本高度，则文本不会被隐藏，会自动超出。

超出部分，可通过overflow进行设置。

overflow属性

visible: 显示超出部分

hidden: 隐藏超出部分

scroll: 增加一个滚动轴样式

auto: 对超出部分进行滚动轴样式

居中

单行文字设置居中

<style>p{width: 100px;height: 100px;border: 1px solid #ccc;text-align: center;     /* 设置水平居中 */line-height: 100px;     /* 设置垂直居中 */}
</style>

多行文字设置居中

<style>ul,li{margin: 0px;padding: 0px;}li{width: 100px;border: 1px solid #ccc;text-align: center;padding: 20px 0;list-style: none;}
</style>

盒子水平居中

margin: auto;

盒子垂直居中

<style>div,ul,li{margin: 0px;padding: 0px;}/*此处div标签内嵌套p*/div{width: 600px;/* height: 300px; */padding: 75px; /* 盒子设置垂直居中（不设置父盒子的高只设置padding） */background-color: chartreuse;}/* 盒子设置居中 */p{width: 100px;height: 100px;background-color: cyan;border: 1px solid #ccc;margin: auto;           /* 设置盒子水平居中 */}
</style>

margin塌陷现象

垂直方向两个盒子margin相遇，两个盒子垂直距离为两个盒子margin中较大值

父子盒子中，如果子盒子的margin-top比父盒子大，或者父盒子没有设置margin-top，则父子盒子一同向下塌陷

阴影

阴影分为盒子阴影和文本阴影，用法几乎一样，只是文本阴影没有内阴影

/* 盒子阴影 */
/* 四个参数分别代表：边距左移距离，边距下移距离，模糊程度（越大越模糊），颜色 */
/* inset可有可无 */
box-shadow: inset 50px 50px 30px cyan,60px 60px 30px yellow,70px 70px 30px red;

.text{font-size: 30px;color: skyblue;text-shadow: 5px 5px 3px cyan,10px 10px 3px yellow;
}

标准文档流

HTML文件就是一个标准文档流文件

元素类型

从HTML角度来说分两种：文本级和容器级

从CSS角度来说分三种：块级元素、行内元素和行内块元素

块元素

文字自动换行。常见块级元素：div, p, h1-h6, ul, ol, dl等

行内元素

文字并排显示，不能设置宽高。常见行内元素：span, a, b, u, i等

行内块元素

可设置宽高且并排显示、常见行内块元素：input, img, table。

display显示模式

大多数标签有其自身显示模式，但可以通过CSS属性display进行切换

display属性值：block, inline, inline-block

浮动

脱离标准文档流，不受元素等级限制，可以并排显示，可以设置宽高

属性标签为float，属性值为left、right。（贴左边从左往右或贴右边从右往左）

脱标

如果兄弟盒子中一部分设置浮动而另一部分不设置浮动，则浮动盒子会飘在标准流之上，我们将其称之为脱标。

字围

同级元素中，如果前面盒子浮动，后面标准流会占有前面盒子的文字；如果后面标准流盒子有文字，则不会占有前面浮动盒子的文字，而是会绕开形成文字环绕。

浮动中的margin塌陷

在设置浮动后，标准流中的margin塌陷现象消失。

浮动清除

在标准流中，如果不设置父盒子高度，则父盒子会被子盒子撑高。

如果子盒子浮动了则：父盒子的高度不会被撑高了；父盒子后面还有其他与父盒子同级的兄弟标签，且其中也有浮动标签，则前面的浮动会影响后面的贴边。

清除方法一：height属性

通过设置父盒子的高消除浮动影响

清除方法二：clear属性

CSS属性中的clear有三个属性值

left：清除左浮动的影响

right：清除右浮动的影响

both：清除两种浮动的影响

清除方法三：隔墙法

结合使用height和clear属性，制作一堵墙。只能实现分别贴边不能实现撑高

<style>*{margin: 0;padding: 0;}.box1{width: 500px;border: 5px solid black;}.box1 p{width: 80px;height: 100px;background: gold;margin: 0 5px;float: left;}.box2{width: 500px;border: 5px solid black;}.box2 p{width: 80px;height: 100px;background: gold;margin: 0 5px;float: left;}.wall{clear: both;height: 10px;}
</style>
<body><div class="box1"><p></p><p></p><p></p><p></p></div><div class="wall"></div><div class="box2"><p></p><p></p><p></p><p></p></div>
</body>

清除方法四：内墙法（推荐）

通过把墙设置在父盒子内来达到撑高和分别贴边

<style>*{margin: 0;padding: 0;}.box1{width: 500px;border: 5px solid black;}.box1 p{width: 80px;height: 100px;background: gold;margin: 0 5px;float: left;}.box2{width: 500px;border: 5px solid black;}.box2 p{width: 80px;height: 100px;background: gold;margin: 0 5px;float: left;}.wall{clear: both;height: 10px;}
</style>
<body><div class="box1"><p></p><p></p><p></p><p></p><div class="wall"></div></div><div class="box2"><p></p><p></p><p></p><p></p><div class="wall"></div></div>
</body>

清除方法五：伪类

CSS选择器的一种

        .clearfix::after{content: '';display: block;height: 0;clear: both;visibility: hidden;}

清除方法六：overflow（推荐）

<style>*{margin: 0;padding: 0;}.box1{width: 500px;border: 5px solid black;overflow: hidden;}.box1 p{width: 80px;height: 100px;background: gold;margin: 0 5px;float: left;}.box2{width: 500px;border: 5px solid black;overflow: hidden;}.box2 p{width: 80px;height: 100px;background: gold;margin: 0 5px;float: left;}
</style>
<body><div class="box1"><p></p><p></p><p></p><p></p></div><div class="box2"><p></p><p></p><p></p><p></p>
</body>

overflow属性有BFC特性，设置该属性的特性便是会被内部元素撑高

a标签的伪类

概念

a标签可以根据用户的不同行为的触发，从而实现不同形态的样式，我们将这四种可设置的样式称为伪类。

标签类型

a:link{/* 标签未访问过 */color: #0f0
}
a:visited{/* 标签已经访问过 */color: #f0f
}
a:hover{/* 鼠标在标签上 */color: #ff0
}
a:active{/*鼠标点击*/color: #0ff
}
a:disabled{/*不可使用*/color: #00f
}
a:focus{/*聚焦*/color: #fff
}
a:empty{/*空的*/color: #f00
}

注意事项

对于普通元素，非超级链接，也可进行设置伪类状态，但只可以设置hover和active，

伪类选择器推荐使用类名来精确匹配。

伪类权重和普通选择器权重相同

书写顺序必须是：link, visited, hover, active（保证全部加载）

伪元素

双闭合标签才有伪元素

伪元素务必有content属性

伪元素必须脱离文档流

伪元素	样式
写法一	::after
写法二	::before

伪元素可以当成通过CSS样式给父元素层叠一个子元素

一个元素最多两个伪元素

HTML5新增标签

布局标签

新增七个布局标签，全都是块元素，双向闭合标签，使用同div

新增标签	意义
header	标签头部
footer	页脚
main	网页主要部分
nav	导航
aside	侧边栏
section	段落
article	文章

小语义化标签

address

显示地址，内部文字倾斜

地图生成器：百度地图→地图生成器http://api.map.baidu.com/lbsapi/creatmap/

bdo

设置文本方向，属性值dir有两个值：ltr（从左到右），rtl（从右到左）

cite

引用标签，文本倾斜显示

code

网页中的代码可以封装在code标签内

details&summary

details要结合summary标签一起使用（details内嵌套summary）显示效果是折叠卡片

pre

文本如何复制，标签就如何显示，文字显示会偏小

ruby&rt

ruby要结合rt标签一起使用（ruby内嵌套rt），显示效果是rt内拼音显示在ruby文本上

template

内部文本、嵌套内容都不可视

新增表单元素

form标签有个action属性，用于设置提交路径

新增元素	意义
range	范围选取，后续还可以设置最值(min/max)、默认值(value)
color	颜色选取
date	日期选取
week	周目选取
time	时间选取
email	邮箱输入（非法邮箱会报错）
url	网址输入（非法网址会报错）
search	搜索输入
number	计数器，可以设置步长(step)

<form action=""><p>你的身高<input type="range" min='150' max='200' value="180"></p><p>你喜欢的颜色<input type="color"></p><p>日历<input type="date"></p><p>当前这个月是第几周啊<input type="week"></p><p>时间<input type="time"></p><p>你的邮箱地址<input type="email"></p><p>你经常逛的网址<input type="url"></p><p>你要搜索什么<input type="search"></p><p>计数器<input type="number" step="0.5"></p><p><input type="submit"></p>
</form>

label标签与datalist标签组合使用

用于实现下拉选项输入的功能

        <!-- label标签 --><label><input type="checkbox">选项一</label><!-- datalist标签 --><input type="text" list="box"><datalist id="box"><option>JS</option><option>OS</option></datalist>

表单元素新增属性

新增属性	意义
placeholder	占位符
disable	不可选中
autofocus	自动聚焦
readonly	只读，不可输入新文本

<p>placeholder: <input type="text" placeholder="请输入密码">
</p>
<p>disabled: <input type="text" disabled>
</p>
<p>autofocus: <input type="text" autofocus>
</p>
<p>readonly: <input type="text" readonly value="只能读取数据">
</p>

background

background-color

作用范围：width，height，padding，margin

rgb、十六进制、rgba(rgb+透明度（0-1）)

background-image

作用范围：width，height，padding，margin

给标签的显示区域添加图片

属性值为url（相对位置或者绝对位置）

如果对background-color和background-image同时设置，则都会被加载，但是image会覆盖color

background-repeat

属性值为repeat，repeat-x（水平重复），repeat-y（垂直重复）和no-repeat，如不需要对背景图进行重复渲染，则可将属性值设置为no-repeat

background-position

用于设置背景图位置（常用不设置背景图重复）

属性值：单词定位法、像素定位法、百分比定位法。不论那种都有两个值，第一个值是水平方向位置，第二个值是垂直方向。

单词定位法

水平方向：left, center, right

垂直方向：top, center, bottom

像素定位法

水平方向：左上角水平方向移动距离

垂直方向：左上角垂直方向移动距离

像素值还可以为负数

正数：图片以左上顶点为参考点，向右向下移动

负数：图片以左上顶点为参考点，向左向上移动

百分比定位法

水平方向100%=（盒子width）-图片宽度

垂直方向100%=（盒子height）-图片高度

background-attach

设置背景图是否随着页面滚动而滚动

属性值：scroll（和页面一起滚动）、fixed（不会和页面一起滚动）

background综合属性

可以将五个background属性组成一个综合属性，属性值1-5皆可，空格隔开，顺序可颠倒。

background: url() no-repeat center top scroll cyan

background应用

logo替换文案

使用背景图片替换文字，文字通过设置text-indent为负移出h1盒子，后设置overflow: hidden隐藏文字

使用padding制作背景图

将原来的ul默认小黑点去掉（list-style: none），用padding挤出位置（padding可以加载背景图片），后为每一个li设置背景图片即可。

精灵

图片大盒子小的时候，只显示局部。图片位置设置与图片小盒子大的时候刚好相反

背景精灵就是将许多小的icon图标汇集在一起显示，利于网页加载

background-origin

即背景起源，HTML5新增内容

background-origin的属性值	意义
border-box	背景图从border开始设置
padding-box	背景图从padding开始设置
content-box	背景图从content开始设置

background-clip

即背景图裁切，HTML5新增内容

background-clip的属性值	意义
border-box	从border开始裁切（即border以外切掉）
padding-box	从padding开始裁切（即padding以外切掉）
content-box	从content开始裁切（即content以外切掉）
text	使用text裁切（即text以外切掉）

注：文本裁切有兼容问题，需要在background-clip属性前加上私有前缀，例如

-webkit-background-clip:text;

不同浏览器有不同的私有前缀

浏览器名称	浏览器私有前缀
谷歌	-webkit-
火狐	-moz-
IE	-ms-

background-size

即背景图尺寸，HTML5新增内容

属性值可以是：px、百分比、cover、contain，其中cover会尽可能拉伸，会有一部分不被显示，contain则是尽可能显示整张图，会有空白

定位

定位就是把盒模型按照指定位置加载

相对定位不脱离标准流，绝对定位和固定定位脱离标准流

position：设置盒子针对某个参考元素进行位置偏移设置

属性值

relative：相对定位

absolute：绝对定位

fixed：固定定位

如果定位的元素想要发生位置偏移，就必须加上偏移量属性进行设置

水平方向：left，right

垂直方向：top，bottom

相对定位

position: reletive;
left: 100px;    /* 相当于right: -100px，数值有正负之分 */
top: 100px; /* 相当于bottom: -100px，数值有正负之分 */

参考点依然是左上顶点

同时设置数值冲突的left/top和right/bottom，会按照left/top的设置为准，与顺序无关

绝对定位

原理

position: reletive;
left: 100px;
top: 100px;

参考元素为最近的祖先元素，如果没有就参考body

绝对定位的元素是脱离标准流的，后面标准流的元素会占领之前的位置

任何元素都可以设置绝对位置，设置后不受标准流控制（span可以设置宽高）

属性设置与参考点：

设置left&top的参考点是body的左上顶点

设置right&top的参考点是body的右上顶点

设置left&bottom的参考点是body的左下顶点

设置right&bottom的参考点是body的右下顶点

应用场景

制作压盖

<style>*{margin: 0;padding: 0;}div{width: 1202px;height: 676px;margin: 20 auto;background: url(绝对位置.jpg) no-repeat;position: relative;left: 300px;top: 100px;}p{width: 300px;height: 50px;background: #fff;text-align: center;line-height: 50px;position: absolute;top: 50%;left: 50%;margin-top: -150px;margin-left: -200px;border-radius: 8px;box-shadow: 3px 1px 3px 1px rgba(0,0,0,.5);}
</style>

居中

position: absolute;
left:50%;
margin-left:自己宽度的一半；

固定定位

参考元素为浏览器窗口；参考点根据组合方向不同为浏览器窗口的四个点（同绝对位置参考点）。

position: fixed;
left: 100px;
top: 100px;

压盖顺序

默认压盖顺序

标准流非标准了重叠在一起，优先级是根据HTML书写顺序决定的，后写的压盖先写的。

自定义压盖顺序

属性标签为z-index，属性值为数字（1，2，3，…），数字较小的元素在下面，数字较大的元素在上面；数字相同按顺序后写的压盖先写的。如果没有z-index则定位失败。

父子盒子不涉及优先级设置，一定是子盒子压盖父盒子

CSS样式表

行内式样式表

基本语法：

<div style="width: 100px;height: 100px;background-color:red"></div>

内嵌式样式表

    <style>div{color: aqua;font-size: 20px;}</style>

外链式样式表

<link rel="stylesheet" href="外链式文件.css">

link标签的作用是引入外部文件，rel="stylesheet"意为引入样式表，通过href=文件地址来引入样式

导入式样式表（了解）

必须写在style最顶部

    <style>@import url(外链式文件.css);</style>

四种样式表优缺点

样式表名称	权重	优点	缺点
行内式样式表	第一	样式设置精确	结构和样式没有分离；不能批量修改
内嵌式样式表	第二	样式结构分离；可批量修改	未完全分离，不能实现多个html使用
外链式样式表	第二	样式和结构完全分离，css文件可多次使用	写小demo时会比较麻烦
导入式样式表	第三	样式和结构完全分离，css文件可多次使用	导入式有加载问题，且涉及加载顺序（网页进去会先白一下，影响使用体验）

CSS选择器

基础选择器：标签选择器、类名选择器、id选择器、通配符选择器

高级选择器：后代选择器、交集选择器、并集选择器

标签选择器

通过标签名称选择，特点是无视嵌套（只能实现全选）

<style>p{color: red;}h3{color: aqua;}
</style>
<body><p>标签1</p><div><div><p>标签2</p></div></div><h3>标签3</h3>
</body>

id选择器

通过id属性确定位置，权重最高，只能是单选，同名id不允许

<style>#p1{color: aqua;}#p2{color:aquamarine;}#p3{color: bisque;}
</style>
<body><p id="p1">标签1</p><p id="p2">标签2</p><p id="p3">标签3</p>

类名属性

通过class属性确定

<style>.p1{color: bisque;}.p2{color: blue;}
</style>
<body><p class="p1">标签1</p><p class="p1">标签2</p><p class="p2">标签3</p><p class="p2">标签4</p>
</body>

通配符选择器

选择包含html在内的所有标签

通配符*后面添加的样式，每个标签都会加载一次

我们通常使用清除页面的默认样式

    <style>*{margin: 0;padding: 0;}p{width: 100px;height: 100px;background: crimson;}div{width: 100px;height: 100px;background: cyan;}</style>
</head>
<!-- <style>*{color: brown;}
</style> -->
<body><span>span标签</span><p>p标签</p><div>div标签</div><h3>h3标签</h3>
</body>

后代选择器

通过标签之间的后代关系去决定选择某个某个范围的元素

<style>.box1 ul li{color: cyan;}/* 前后不一定是父子关系 */.box2 ul li{color: darkblue;}
</style>
<body><div class="box1"><ul><li>box1中的li</li><li>box1中的li</li><li>box1中的li</li><li>box1中的li</li></ul></div><div class="box2"><ul><li>box2中的li</li><li>box2中的li</li><li>box2中的li</li><li>box2中的li</li></ul></div>
</body>

交集选择器

满足所有条件进行匹配，书写方法是将多个选择器连接，之间不加空格（同一层级不加空格，下辖标签要以空格隔开）

<style>p{color: darkblue;}p.p1{color: darkcyan;}
</style>
<body><p>标签1</p><p class="p1">标签2</p><div class="p1">标签3</div>
</body>

并集选择器

对多个标签进行同类设置，标签之间用逗号隔开

<style>div,p,span{color: darkcyan;}
</style>
<body><div>标签1</div><p>标签2</p><span>标签3</span>
</body>

自定义属性选择器

<style>/* p标签，且带有v-if这个自定义标签 */p[v-if]{color:red;}/* p标签，且带有v-if='cur'这个自定义标签 */p[v-if='cur']{color:green;}/* p标签，带有v-show这个自定义标签，且以li开头 */p[v-show^='li']{color:pink;}/* p标签，带有v-show这个自定义标签，且以tion结尾 */p[v-show$='tion']{color:cyan;}/* p标签，带有v-show这个自定义标签，且带有i */p[v-show*='i']{color:yellow;}
</style>
<body><p>标签1</p><p v-if>标签2</p><p v-if='cur'>标签3</p><p v-show='like'>标签4</p><p v-show='condition'>标签5</p><p v-show='i am'>标签6</p>
</body>

JQuery库也支持属性选择器

不区分元素类型的字类选择器

方法	意义
first-child	父标签下的第一个子标签
last-child	父标签下的最后一个子标签
nth-child()	第括号内数字个子标签，如果是2n则是顺序上偶数个子标签
nth-last-child()	第括号内数字个子标签，如果是2n则是倒序上偶数个子标签

<style>p:first-child{background-color:red;}h6:last-child{background-color:blue;}p:nth-child(1){background-color:green;}p:nth-child(2n){background-color:cyan;}h6:nth-last-child(2n){background-color:purple;}
</style>
<body><div><p>段落1</p><h1>一级标题1</h1><h1>一级标题2</h1><p>段落2</p><p>段落3</p><p>段落4</p><p>段落5</p><p>段落6</p><p>段落7</p><h6>一级标题2</h6><h6>一级标题2</h6></div>
</body>

区分元素类型的字类选择器

方法	意义
first-of-type	该类型的第一个子节点
last-of-type	该类型的最后一个子节点
nth-of-type()	该类型的第括号内元素个子节点
nth-last-of-type()	该类型的第括号内元素个子节点

<style>p:first-of-type{background-color:red;}h6:last-of-type{background-color:blue;}p:nth-of-type(1){background-color:green;}p:nth-of-type(2n){background-color:cyan;}h6:nth-last-of-type(2n){background-color:purple;}
</style>
<body><div><p>段落1</p><h1>一级标题1</h1><h1>一级标题2</h1><p>段落2</p><p>段落3</p><p>段落4</p><p>段落5</p><p>段落6</p><p>段落7</p><h6>一级标题2</h6><h6>一级标题2</h6></div>
</body>

关系型选择器

语法	意义
A+B	A标签后紧随的姊妹标签B（不包括A）
A~B	A标签后紧随的所有姊妹标签B（不包括A）

<style>p+h1{color:red;}p~h6{background-color:blue;}
</style>
<body><div><p>段落1</p><h1>一级标题1</h1><h1>一级标题2</h1><p>段落2</p><p>段落3</p><p>段落4</p><p>段落5</p><p>段落6</p><p>段落7</p><h6>一级标题2</h6><h6>一级标题2</h6></div>
</body>

伪类选择器

a:disabled{/*不可使用*/color: #00f
}
a:focus{/*聚焦*/color: #fff
}
a:empty{/*空的*/color: #f00
}

伪选择器

以两个冒号开头

方法	意义
::first-letter	对选中的第一个字母/汉字进行设置
::first-line	对选中的第一行进行设置
::first-selection	对浏览器中鼠标选中的文本进行设置

p::first-letter{color:red;
}
p::first-line{background-color:yellow;
}
p::first-selection{background-color:blue;
}

CSS继承性与层叠性

继承性

祖先元素进行设置，后代元素就可以继承（继承的都是文字属性）

<style>.box{color: darkgoldenrod;}
</style>
<body><div class="box">标签1<ul>标签2<li>标签3</li></ul></div>
</body>

层叠性

CSS样表又称为层叠性样表

<style>p{color: darkgoldenrod;}.p1{font-size: 20px;}#p1{text-decoration: underline;}
</style>
<body><p class="p1" id="p1">标签1</p>
</body>

一个标签可以被多个选择器选择（优先级为：id选择器>class选择器>标签选择器，多个选择器同时定义一个标签的同一属性会被层叠掉）

<style>p{color: darkgoldenrod;}.p1{color: darkgoldenrod;}#p1{color: darkgoldenrod;}
</style>
<body><p class="p1" id="p1">标签1</p>
</body>

就近原则

文本离得近的选择器生效

<style>p{color: darkblue;}p.p1{color: darkcyan;}
</style>
</head>
<body><p>标签1</p><p class="p1">标签2</p><div class="p1">标签3</div>
</body>

ound-color:cyan;
}
h6:nth-last-of-type(2n){
background-color:purple;
}

段落1

一级标题1

一级标题2

段落2

段落3

段落4

段落5

段落6

段落7