最近复习知识，打开了阶段一写的笔记，可以说是惨不忍睹，实在看不下去，怒写一遍。
以下是新版的阶段一笔记，使用markdown重写。
删除了许多重复的内容，修正了错误内容，明确了一些似是而非的部分。
真的，不要看自己以前写的代码和笔记，简直是屎山。
以下是正文。
HTML部分
什么是网页？
网站是因特网上按照一定规则，使用HTML等制作的用于展示特定内容得网页集合。
网页就是其中一页，通常是HTML格式的文件。需要通过浏览器来阅读。
什么是HTML？
指的是超文本标记语言，Hyper Text Markup Language，缩写HTML。
属于标记语言，标记语言是一套标记标签 markup tag。
超文本指，可以放多种媒体内容，超越文本限制，且可以跳转其他网站。
编程语言分类
- 解释型语言
- 编译型语言
- 标记语言
- 混合语言
html是标记语言，使用标签来对页面进行标记
浏览器与浏览器内核
浏览器内核：渲染引擎，负责读取网页信息，计算网页显示方式并显示页面。
web标准的构成
结构structure，主要是html
表现presentation，表现 css
行为behavior，交互编写 javascript
HTML语法规范
1.HTML是尖括号包围的关键处，如：<html>
2.HTML标签通常成对出现，第一个是开始标签第二个是结束标签。如：<html></html>
3.特殊标签是单个标签，<br />
标签关系有并列关系和包含关系。
每个网页会有基本结构标签，如
<html></html> <!--页面中最大的标签，称为根标签-->
<head></head> <!--文档头部，在此标签中必须设置title子标签-->
<title></title> <!--页面标题-->
<body></body> <!--文档主体，此元素包含文档的内容-->
开发工具与基本骨架
文档类型声明标签<!DOCTYPE html> ，需要写在最前面，声明采用HTML5版本
用来定义当前文档的显示语言，<html lang="en">，但是不会限制页面具体显示语言，主要对浏览器和搜索引擎有用。
字符集<meta charset="UTF-8">,UTF-8 万国码，
HTML常用标签
标题标签 h <h1> - <h6>，标题独占一行
段落标签 p <p>， paragraph
换行 <br /> break
分割线 <hr>
文本格式化标签
加粗斜体下划线
加粗 <strong> </strong> 或者<b></b>
斜体 <em></em> <i></i> em主要是强调 恰好选择了用斜体来表示强调 一般都用i来表示。
下划线 <u> <ins> ins
删除线 <s> <del> dels
<div>divison 竖向分割
<span> 跨度 跨距 横向分割
div占据一行
span可以一行显示多个
图像标签
开头不写斜杠/
<img src = “images/lola.jpg” alt = " ">
相关属性：
alt 图片显示不出来的时候显示字
title 图片放上去的时候提示的文字
width
height
border
绝对路径D:\web\img\logo.gif
or network address : www.baidu.com/jpg.jpg
属性采用键值对形式，即 key = "value"格式，属性 = “属性值”
HTML中怎么插入图片链接使用a标签和img标签，示例：
<a href=''><img src='/image/aaa.jpg'></a>
<a href="http://www.w3school.com.cn">W3School</a>
超链接标签
<a> anchor
<a href="目标地址" target = "目标窗口弹出方式 _self默认值，_blank新窗口">
内部放文本或者图像</a>
链接分类 (6种)
1 .外部链接 ： <a href="http://www.w3school.com.cn">W3School</a>
2 .内部链接 ： 直接写内部的网页名字 <a href="index.html"></a>
3 .空连接 ：<a href = "#">
4 .下载链接 ：<a href = "img.zip">
5 .网页元素链接，在网页中的各种元素，如文本图像表格音频视频等，都可以添加超链接。
例如用图片来跳转新链接
<a href="http://www.baidu.com"><img src="img.jpg"></a>
6 .锚点链接
本页面内的快速跳转
1.设置调整起点<a href="#two"> 第2集</a>
2.设置调整目的点添加id <h3 id="two">第2集介绍</a>
表格table
<table></table> 定义一个表格。
<tr> 标签定义 HTML 表格中的行。
body 元素是定义文档的主体，通俗的来说，表示网页的主体部分。
<td> 标签定义 HTML 表格中的标准单元格。例如<td></td>是一个单元格。
<tr> 标签定义 HTML 表格中的行。例如:<tr></tr>是一行。
<th>表头单元格标签，通常使用在表格的标题栏位，就是说通常使用<th></th>来当表格中的每一列的标题。对标的是td标签。
<thead> 定义表格的页眉，内部必须有tr标签。
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
table 的 rules 属性规定内侧边框的哪个部分是可见的。
table标签的属性
1 .align ="left center right "
对齐方式，规定了表格靠左剧中还是靠右显示
<table align="center" border="1">
<caption>monthly savings</caption>
</table>
2 .边框 border ，值为1 或者 “”。
属于属性的 写在括号内
属于显示出的内容的 写在两个括号的中间
3 .cellpadding table中，文字和边框的距离
4 .cellspacing table中，内部边框中间的距离
5 .width，height，表格整体的高宽。
caption可以设置标题。
th != thead
表格里面可以放任何元素
图片文字链接都可以
合并单元格
rowspan = “2” 跨行合并 竖着 两个单元格
colspan 跨列合并 横着
跨行合并三部曲
1 .先确定是跨行还是跨列合并。
2 .找到目标单元格，写上合并方式 = 合并单元格数量。<td colspan = "2"></td>
3 .删除多余单元格。
列表ul、ol、dl
看到有顺序排放的几个类似盒子就应该想到可以用列表来做。比如商品品类列表，商品方形图片展示等。
无序列表ul
无序列表里面各项之间没有顺序级别之分，是并列的。
ul 里面只能有li，不能有p或其他标签文字
li相当于一个容器，什么都可以放进去。
无序列表自带样式，可通过css去除。
<ul>
<li>雏菊</li>
<li>taiyanghua</li>
<li>puchongcao</li>
</ul>
有序列表ol
自带编号
自定义列表dl
自定义列表通常用于对术语或者名词进行解释和描述，列表前面没有项目符号。
只能放dt和dd，dt比dd大一点。dt和dd里面可以放任何标签。
有小标题和下面几个解释说明的时候，用自定义列表。
表单
使用场景：收集用户信息。
表单由：表单域、表单控件/表单元素、表单提示信息，三个部分构成。
<form action="demo.php" method="POST" name="name1">用户名：<input type="text" name="username" value="请输入用户名">
<br>
密码：<input type="password" name="pwd">
<br>
<!-- name 是表单元素名字，必须有相同name才能实现单选 -->
性别：
男 <input type ="radio" name="sex" value="male">
女 <input type="radio" name="sex" value="female">
保密 <input type="radio" name="sex" value="unknow">
<br>
爱好：吃饭<input type="checkbox"> 睡觉<input type="checkbox"> 打豆豆<input type="checkbox">
<br>
</form>
form表单三个属性：
1 action属性值为url地址，用于指定接收并处理表单数据的服务器程序的url地址；
2 method 属性值 为 get/post，用于设定表单的提交方式；
3 name名称用于指定表单名，用于区分一个页面中的多个表单域。
表单控件
input
<input type = "text">
type值可选：
单选 radio
复选 checkbox
可点击按钮 button
密码 password
重置 reset
提交 submit
文本 text
input属性之name：可以通过name属性给input添加自己的name，radio想要实现单选功能，需要安排相同name属性。代码见上一代码段。
input属性之value：可以直接显示在文本输入框中。也可以告知后台，选取的值是什么。
input属性之checked，默认勾选。
input属性之maxlength，值为正整数，规定输入字段中最大字符长度，比较少用。
label标签
可以绑定一个表单元素，当点击label标签内的文字时，自动定位到绑定的元素上。
<label for = "text">用户名：</label><input type="text" id="text">
<input type = "radio" id = "male"><label for = "male">男</label>
<label for=ID>for 属性规定 label 与哪个表单元素绑定。绑定后点这个label就可以选中绑定的那个radio
<input type="radio" name="sex" value="1" id="sex1">
<label for="sex1" ><img src=img/man.jpg>Male</label>
name的主要作用是区分不同表单的元素
下拉菜单select
配备option
<select>
<option value="volvo" selected = "selected">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
文本域标签 textarea
禁止拖拽 <textarea name="" id="" style="resize:none"> </textarea>
表单 提交表单给服务器
文件域上传文件
<input type=“file” name=“file” />
文本域 上传文本 如留言意见等
第一天第二天的总结：
列表 有序无序自定义 ulol配li dl配dtdd
表格table tr td th表头
表单form
文本框 input type= "text"
密码框input type="password"
按钮 input type="button"
type=submit提交按钮 value=free to regist
button多数情况下用于启动js脚本
不提交表单
比如发送手机验证码
上传头像：<input type="file">
CSS部分
day01
简介 、基础选择器、字体文本属性、引入方式，综合案例，chrome调试。
CSS用于美化网页。称为CSS样式表或者级联样式表，层叠样式表。也是标记语言。主要用于设置页面文本内容（字体、大小、对齐方式等）、图片外形（宽高边框边距等）以及版面的布局外观显示样式。
CSS语法规范
CSS规则 主要两部分构成
选择器和声明部分
选择器表明是给谁改样式
声明表明怎么改。
写在页面style标签内。style标签在title标签下。
属性与属性值 以键值对形式出现
h1 {
color: red;
font-size: 16px;
}
按tab自动补全。
代码风格：紧凑格式和展开格式。采用小写形式。属性值与冒号中间一个空格。选择器与大括号中间一个空格。
任何标签都可以设置类名，使用class属性，类名选择器以‘.’符号开头
placeholder 输入框内提示文字
下划线标签<u><u>www.divcss5.com</u> !
选择器
选择器分为基础选择器和复合选择器
类选择器：格式为 .+类名
class = 选择器名字
基础选择器又包括：
标签选择器（p h等） ：类名自动匹配调用
类选择器（class） ：定义 class=“指定的类名”
id选择器（#开头 +id名字） ：定义 id=“id名字”
通配符选择器（* 所有标签全部改）：自动调用
课堂案例
css划分不同部分颜色 class选择器
多类名 ：一个标签多个名字
class中可以写多个类名字，中间用 空格 分开
id选择器常搭配js用
一个标签可以叠加多个类名class="red font"
实际开发中复用代码，减少代码重复，可以统一修改样式等
字体属性
font-family:‘微软雅黑’ 单引号!
如果写了多个字体，以 " , "分隔，依次类推，在显示页面的设备上有第一个字体就用第一个字体，没有用第二个字体。
实际开发中鼓励使用数字来表示加粗变细，注意不要跟单位。
font-weight : 400normal 700bold
font-style 倾斜还是不倾斜
italic 倾斜 ，normal 不倾斜。
把em标签改为不倾斜：em {font-style:normal;}
font复合写法
font字体复合属性：font: font-style font-weight font-size/line-height font-family;
font的属性不可以更换顺序。各个属性间以空格隔开。
不需要的可省略，必须保留font-size 和 font-family。
div {font:italic 700 16px/20px 'microsoft yahei';}
文本属性
css text属性可以定义文本的外观，如文本颜色、文本对齐 、装饰文本 、文本缩进 、行间距等。
color
文字颜色，可使用十六进制#ff0000; ，文字’red’，rgb(255,0,0)红色 ，来定义颜色。
对齐文本
text-align设置元素内文本内容的水平对齐方式。text-align:center;
text-decoration 下划线删除上划线等。
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
a {text-decoration:none}
text-indent 首行缩进，P {text-indent: 10px;}
P {text-indent: 2em;}
em是一个相对单位，即当前元素的1个文字大小为一个单位，如果当前元素没有设置大小，则按照父元素1个文字的大小。
line-height 行间距 （行高），包括上间距下间距与文本高度。
css引入方式
1 .内部样式表
理论上可以放在HTML文档的任何地方，一般放在head标签中：<style></style>
2 .行内样式表
样式写在行内，适合修改简单情况
<div style="color: red;"></div> <div style="color:red; font-size:12px;"></div>
3 .外部样式表
适合样式很多的情况
单独写到css文件中，然后引入html中使用
使用方法
1 新建 .css文件
2 引入 <link rel="stylesheet" href="(自己命名的css文件).css">写在head中
chrome浏览器调试工具中，按ctrl+鼠标滚轮可以调整控制台中的文字大小。
图片居中对齐 通过将他父标签居中对齐来实现
css day02
emmet语法
vscode内部已经集成
- 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
- 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
- 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
- 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two 再按tab键就可以了
- 如果生成的div 类名是有顺序的， 可以用 自增符号 $
- 标签内部写内容可以用 { } ，
ul>li.test$*3{测试$} - 分组()，
div>(ul>li>a)+div>p（括号里面的内容为一个代码块，表示与括号内部嵌套和外面的的层级无关） - 属性指令[]，
<a href="###" name="xiaoA"></a> - 隐式标签，可在ul 和 ol 中使用 例如：
ul>.test$*3，可在select中使用例如：select>.test$*5等。
快速格式化代码
Shift+Ctrl+F
设置为保存时自动格式化
1 vscode左下角找设置
2 设置里找emmet.include
3 添加语句后，保存退出
"editor.formatOnType":true,
"editor.formatOnSave":true
复合选择器
通过两个或者多个基础选择器不同方法组合而成
常用复合选择器：后代，子，并集，伪类选择器等
alt+shift+下键 快速复制
1 .后代选择器
后代选择器，称为包含选择器
选择父元素里面子元素
两个元素间用空格隔开
元素1 元素2 {shengming}
ul li {color:red;}
2 .子代选择器
亲儿子选择器 > ，孙代不管。
3 .并集选择器
用‘,’进行分割
页面元素只要满足其中一个要求，就会被选择到。选择多组标签，设置统一的样式。通常用于集体声明。元素之间用逗号隔开。
元素1,元素2 {样式声明}
任何形式的选择器都可以成为并集选择器的子元素
按键变化形态 自带
<input type="submit"value="free to regist">
<input type="reset" value="reset page">
#333黑色
#369蓝色
4 .伪类选择器
链接伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
用冒号表示。
分为链接伪类，结构伪类等。
例如给a标签添加特殊效果：书写顺序 lvha，不要颠倒
/*未访问过的链接*/
a:link {
color: black;
}
/*已访问过的链接*/
a:visited {
color: orange;
}
/*鼠标移入状态*/
a:hover {
color: red;
}
/*激活状态（按下鼠标未松开的状态）的链接*/
a:active {
color: skyblue;
}
focus伪类
/*:focus伪类选择器*/
/*:focus 示例*/
/*当光标在输入框上的时候*/
input:focus {
background-color: pink;
}
5 .交集选择器
页面元素需要同时满足所有条件才会选中。中间紧挨着，不能有空格或者’,’，标签和类名之间以点号隔开，
标签和id选择器之间以‘#’隔开。
语法：/*标签元素.类名*/
p.class1 {
/*类名为class1的所有p元素*/
color: red;
}
伪类和伪元素
伪类用于向某些选择器添加特殊的效果，外观。伪类用于定义元素的特殊状态。
伪元素可以在盒子里插入一个新盒子，实际上不存在。
逻辑上存在就像你们的硬盘分区。
常见伪元素
::first-letter,
::first-line,
::before,
::after,
::selection
请注意双冒号表示法 - ::first-line 对比 :first-line
在 CSS3 中，双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试。
在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。
为了向后兼容，CSS2 和 CSS1 伪元素可接受单冒号语法。
css元素显示模式
分为行内元素和块元素
1 .块级元素
h1 - h6 , p , div , ul , ol , li是常见块级元素。
特点：
1 独占一行
2 高宽边距可调
3 宽度默认是容器（父级宽度）的100%
4 是一个新的容器，里面可以放行内或者块级元素
注意
文字类元素内 ，不能再使用块元素
如 p 和 h 里面不能放div
2 .行内元素
a , strong , b 粗文本 , em , i 斜体 , del 删除线 , s , ins 下划线 , u , span
特点：
1 行内元素在一行，可显示多个
2 不能设置宽高
3 只能容纳文本和其他行内元素
4 默认宽度是本身内容宽度
a链接里不能再放链接 ，特殊情况里面可以放块级元素，但是给a转换下模式更安全。
3 .行内块元素
img input td
同时具有行内特点和块级特点。
1 和相邻行内元素在一行，但是有空白间隙
2 默认宽度是文字内容宽度
3 高度、行高、外边距都是可以设置的 （块元素特点）
4 .显示模式转换
行内元素转块元素
在style中声明并写入 display：block;
反过来 display：inline;
转为行内块 display：inline-block;
a是行内元素
一般都给转化为行内块元素
单行文字 垂直居中
让文字的行高等于文字的高度 height = line-height
水平居中显示 text-align:center
背景
背景属性，可以给页面设置背景颜色图片平铺位置图像固定等。
背景颜色
backgroud-color:transparent透明
背景图片
background-image：none | url(images/logo.png)
背景平铺
background-repeat:repeat | no-repeat | repeat-x | repeat-y
背景图片位置
background-position:x,y;使用准确单位或者方位名词，两者可以混用在xy的描述中。如果只写一个默认为x位置，y位置默认居中。
准确单位
使用准确单位的话，可以用百分数或者数字+单位。
background-position:20px,30px;
方位名词
top center bottom left center right
如果用方位词则和xy顺序无关
body {background-position: center top;}
body {background-position: 20px center;}
小的装饰性背景图片一般用背景来做。
背景固定/滚动
background-attchment：scroll/fixed;
背景图在框中大小情况
background-size: length|percentage|cover|contain;
其中 length直接设置大小，只设置x则y跟着变。percentage同理。cover是保持宽高比，图像调整成完全覆盖区域的最小大小。contain是保持宽高比，图像缩放成适合背景区域的最大大小。
background
背景复合写法
| 值 | 说明 | CSS版本 |
|---|---|---|
| background-color | 指定要使用的背景颜色 | 1 |
| background-position | 指定背景图像在父盒子中被显示的位置 | 1 |
| background-size | 指定背景图片的大小，可实现背景图缩放，用于二倍图。 | 3 |
| background-repeat | 指定如何重复背景图像 | 1 |
| background-origin | 指定背景图像的定位区域 | 3 |
| background-clip | 指定背景图像的绘画区域 | 3 |
| background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动。 | 1 |
| background-image | 指定要使用的一个或多个背景图像 | 1 |
顺序可以随便写。 font的属性不可以更换顺序。
background:rgba(0,0,0,.4) url(../images/bg.jpg) no-repeat fixed center top;
设置半透明
background-color:rgba(0，0，0，0.3);
最后一个参数是alpha透明度 取值0-1；
可以只写 ‘.x’，不写0
div{opacity:0.5;} 透明度设置
背景图片一般用于logo小装饰图片或者超大背景图。优点是方便控制位置。
cssday03
css三大特性
1层叠 2继承 3优先级
1 css层叠性
相同选择器设置同样属性，如果属性值不同，则一个会覆盖另外一个。层叠性主要解决冲突的问题。
样式冲突：就近原则
冲突才就近，不冲突不就近
2 继承
子标签会继承父标签的某些样式
设置div中包裹一个p，给div设置如下样式，则p的样式见图
div {
font-size:16px;
color:red;
}
主要是文字的样式、color和行高可以继承，
但是如高度内外边距之类的不会继承。
行高不带单位那就是文字大小的倍数。body {font:12px/1.5 Microsoft YaHei}，
此时子元素可以根据自己文字大小进行灵活调整行高。
3 优先级
选择器相同则按照层叠原则
| 标签类型 | 权重 |
|---|---|
| 继承或者通配符 | 0000 |
| 元素选择器 | 0001 |
| 类选择器/伪类选择器 | 0010 |
| ID选择器 | 0100 |
| 行内样式style="" | 1000 |
| !important | 无穷 |
权重可以叠加，但是永远不会进位。
只要是继承权重，无论父元素中权重多高，
到子元素中全部都是0
复合选择器会有权重叠加。
多个权重加在一起时算最终权重。
ul li {
color:green;
}
li {
color:red;
}
div {
color:red!important;
}
ul li 权重 0001+0001=0002 ，大于li 单独一个，颜色为green。
css盒子模型
网页布局三大核心
盒子 浮动 定位
网页布局过程：
1 准备好相关元素 网页元素基本都是盒子box
2 利用css设置好盒子样式然后摆放到相关位置
3 往往盒子放东西
网页布局的核心：利用css摆盒子。
所谓盒子模型，就是把HTML网页布局元素看作一个矩形盒子，包含边框、内边距、外边距、实际内容 四个部分。
border
border可以设置元素的边框，由边框粗细，边框样式，边框颜色组成。书写没有顺序。
border:border-width || border-style || border-color
常见style属性：dotted , dashed , solid .
边框复合写法
border:1px solid pink;
边框各部分开写法：
border-top
border-bottom
表格细线边框
表格细边框 合并 border-collapse:collapse;
边框会影响盒子实际大小，需要在width基础上再加边框宽度。
padding
padding 需要加上width来进行计算，也会影响 盒子实际大小。
如果想省事 那就用margin。
padding复合写法 padding:5px,10px;
一个 ，代表上下左右
两个 ，代表上下 和 左右
三个 ，代表上、左右 和 下
四个 ，顺时针顺序上右下左
padding 不撑开盒子的情况
父元素没有指定宽度或者高度，不撑开父盒子大小
width可以写为百分比，width：100%;，此时算作写了width。
margin
外边距，上下左右四个外边距。与padding使用方法基本一致。
一个 ，代表上下左右
两个 ，代表上下 和 左右
三个 ，代表上、左右 和 下
四个 ，顺时针顺序上右下左
水平居中
1 块级盒子水平居中
外边距典型应用：让块级盒子实现水平居中
1 .给盒子指定宽度width
2 .设置左右外边距 auto , margin:0 auto;
2 行内元素/行内块元素水平居中
行内元素/行内块元素没有宽度，无法自动水平居中。
行内元素/行内块元素水平居中，给其父元素添加：
text-align:center;
外边距合并
使用margin定义块级元素的垂直外边距时，可能出现外边距的合并，主要由两种情况：相邻块元素垂直外边距合并和嵌套块元素垂直外边距合并
1 .相邻块元素垂直外边距合并
上下两个相邻块元素，上有margin-bottom，下有margin-bottom，则垂直外边距是两者中较大的那个，不是两者合并。
解决方案：尽量只给一个盒子添加margin值。
2 .嵌套块元素垂直外边距合并
嵌套形成父子关系。父元素给一个margin-top，子元素给一个margin-top，则最终父元素margin-top塌陷为较大的值。
解决方案：
1 .给父元素定义上边框
2 .给父元素添加overflow:hidden
3 .给父元素定义上内边距 padding:1px
其他：浮动、固定、绝对定位的盒子不存在塌陷问题。
<div style="margin-top: 200px;background-color: red;height: 200px;width: 200px;">
<div style="margin-top: 50px;background-color: pink;height: 100px;width: 100px;"></div>
</div>
清除内外边距
* {margin:0;padding:0;}
注意：行内元素为了照顾兼容性，尽量值设置左右内外边距，不设置上下内外边距，转为块级和行内块就可以了。行内元素设置了也不显示。
PS基本操作
CTRL+R调出标尺， 右击标尺，调整为px单位。
CTRL + + 调整大小，
按住空格，可以拖动图片。
矩形选区工具精确测量大小。
吸管工具取色，点击左侧颜色框得到详细信息。
cssDay3总结答疑
盒子与盒子之间的距离最好是用margin比较好。
嵌套块元素（两个块元素一个套一个）垂直外边距塌陷（竖直方向上的外边距合并）
隐藏div：div {display:none;}
合理的地方使用合理的标签，实现语义化，标题的地方用h标签来做。大量文字的地方用P标签。小部分文字用span。
每个盒子都起一个类名，方便寻找到盒子，方便后期维护。
margin和padding，在大部分情况下两者可以混用，但是，上面的垂直的距离，在盒子有高度的时候最好用margin。
老师教的只是布局实现的其中一个思路，还有其他方法实现。
多运用辅助工具，如截图、屏幕画笔、PS等。
css Day 04
css注释 /* */
html注释 <!-- -->
JS注释 //
圆角边框
CSS3新增，圆角边框，
border-radius:(length);
参数可以是数值或百分比。
border-top-right-radius:15px;右上角改为圆角
内部书写先后顺序不可更改。
border-radius 属性可以接受一到四个值。规则如下：
1 .四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）；
2 .三个值 - border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角）；
3 .两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）；
4 .一个值 - border-radius: 15px;（该值用于所有四个角，圆角都是一样的）。
还可以创建椭圆角： border-radius: 50px / 15px;
或者椭圆：长宽不一致。radius设置为50%。
#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
盒子阴影
给盒子添加阴影，默认是外阴影，不能再写。不占用空间不影响其他盒子排列。
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 2px 2px 30px 30px black;
box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, .3);
.radius:hover {
transition: all 2s;
box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, .3);
}
blur 模糊 n.v.
文字阴影
text-shadow: h-shadow v-shadow blur color;
text-shadow： 水平阴影的位置。允许负值；垂直阴影的位置。允许负值；模糊的距离 ；阴影颜色
浮动
传统布局方式
css提供三种传统布局方式， 简单来说就是把盒子怎么样排列顺序。三种方式同时进行才能将页面写好，移动端布局会学习新的方式。
1 普通流（标准流/文档流）
2 浮动
3 定位
浮动最典型应用：让多个块元素一行内排列显示。且不存在外侧白边框。
两个准则：
1 .多个块级元素竖直排列用 标准流，
多个块级元素横向排列用 浮动，
先用标准流排列上下位置，
再用浮动设置左右位置。
2.先设置盒子大小，
再设置盒子位置。
实现浮动
float:left/right;
特性：
1 .浮动元素会脱离标准流（脱标），不再保留原有位置
2 .浮动的元素会一行内显示且顶部对齐
3 .浮动元素会具有行内块元素特性
行内块元素特点，内容多宽度自然变多
如果没指定宽度，则为内容实际宽度。
如果行内元素有了浮动，则不需要转换块级/行内块元素即可直接给宽高。
如果是块级元素添加浮动，则也会有行内块元素特性。
浮动元素经常和标准流的父级搭配使用。
准备一个父元素，指定宽度和高度。
浮动两个注意点
1 .和父元素搭配使用，以父元素为准来对齐
2 .一个子元素float，其他子元素一般也要浮动
3 .浮动盒子只影响后面的标准流，不影响前面的标准流
父盒子必须有高度吗？
不一定。
比如瀑布流页面，随着用户下拉，传输过来的子盒子越来越多。再如，文章页面，不同文章长度不同，需要灵活调整。
可以不给父盒子高度，
但是盒子浮动后，父盒子高度为0。浮动盒子不占用高度，悬浮在空中。会影响后面的标准流元素。
css第四天
清除浮动
清除浮动的本质是清除浮动元素造成的影响，
清除浮动的策略是闭合浮动，只让浮动发生在父盒子内部，不影响父盒子外的其他元素。
如果父盒子本身有高度不需要清除浮动。
清除浮动之后父级会根据浮动的子盒子自动检测高度。
1 .额外标签法/隔墙法
在浮动元素末尾设置一个空盒子，设置style为：clear:both; ，盒子必须是块级元素。<div style = "clear:both;"> </div>
2 .父级添加CSS样式overflow:hidden;溢出隐藏。
3 .::after伪元素法
定义一个类clearfix，添加在父盒子的类里。
高级写法，伪元素可以在盒子里插入一个新盒子。
在标准流中没有写新盒子，但是通过css给添加了盒子。
代码更简洁，但是要照顾低版本浏览器。
HTML：div class = "box clearfix"
CSS：
.clearfix::afrer{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
/*兼容代码*/
.clearfix {
*zoom:1;
}
4 .双伪元素清除法
前后都添加盒子
HTML：div class = "box clearfix"
CSS：
.clearfix:before , .clearfix:afrer{
content:"";
diaplay:table;/*注意这里是table*/
}
.clearfix:afrer{
clear:both;
}
.clearfix {
*zoom:1;
}
PS切图
常见图片格式：
1 jpg：色彩信息保留好，
2 gif：最多存储256色，用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际用于图片小动画效果。
3 png：结合以上两者优点，想切成背景透明图片选择png。
4 PSD：photoshop专用格式，比较专业，存储较多信息，可以直接复制文字，获取图片，测量大小距离。
通过文字工具可以获取psd上的文字。
图层切图
对应图片上点击后，在右侧选择图层，在右击选择快速导出为png。
多数情况下我们需要合并图层再导出，需要选中所需要的多个图层，再按 ctrl+e合并，右击导出png。
切片切图
使用切片工具选中所需图层，切片工具在ps左侧工具栏，按住裁剪工具，选择切片工具，框选所需区域，点击文件中的导出，选存储为web的选项。点存储，再选择下方切片选项中“选中切片”即可。
如果不想要背景色，在右侧图层中的最下方可以不选择背景色。
插件切图
cutman切图，自动将所需图层输出，代替传统手工导出格式等繁琐操作。www.cutterman.cn
CSS属性书写顺序
建议遵循如下顺序
1 布局定位属性 ：display、position、float、overflow等
2 自身属性：width margin、border等
3 文本属性：color、font、text-align等
4 其他属性（css3）：content、cursor、border-radius等
现有结构后有样式
先理清楚布局结构，再写代码
实际开发中导航栏是用 li+a的办法来写
直接用a 搜索引擎会认为有推砌关键字嫌疑
推砌关键字有降权风险
行内块元素之间彼此都有空隙
shift+alt+鼠标左键 可以在多行中同一位置同时选中
方便对相同位置进行粘贴同样内容
#fff 白色
banner 横幅
多光标选择 css中可以用？
Windows: ctrl+alt+up or ctrl+alt+down
行高会继承
margin:20px 0 15px 0;
上20 下15 左右是0
定位 postition
场景：
在一个盒子内自由移动并且压住其他盒子。
滚动页面的时候固定一些盒子。
浮动可以实现横向排列盒子,
定位则可以自由移动，或者放在某个位置或者压住其他盒子。
定位 = 定位模式 + 边偏移
| 定位模式 | 脱标 | 相对于 |
|---|---|---|
| 静态 static | 不脱标 | 不可使用边偏移 |
| 相对 relative | 不脱标 | 相对于自身位置 |
| 绝对 absolute | 脱标 | 带有定位的父级 |
| 固定 fixed | 脱标 | 浏览器可视区 |
| 粘性 sticky | 不脱标 | 浏览器可视区 |
边偏移属性：top，bottom，left，right
a {
position: sticky;
top: 10px;
}
四种定位模式
1.静态定位
选择器 {position:static;}
按照标准流特性摆放，没有边偏移，很少用到。
2.相对定位
选择器 {position:relative;}
相对自己原来的定位，不脱标，后面的盒子仍然以标准流的方式来对待他。
典型应用：给绝对定位当爹爹。
3.绝对定位
脱标，选择器 {position:absolute;}
如果没有祖元素或者祖元素无定位
则参考浏览器（document文档）
如果父元素为标准流或者没有定位 如浮动
还是参考浏览器（document文档）
如果祖元素有定位（绝对相对固定）则参考祖元素
最近一级有定位的祖元素
子绝父相
子用绝对定位
父用相对定位
4.固定定位
固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以使得元素在浏览器滚动页面时，位置不变。
选择器 {position:fixed;}
以浏览器可视窗口为参考，跟父元素没有任何关系，不随滚动条滚动。
不占用原有位置。可看做特殊的绝对定位。
固定定位技巧：
目标 ，定位到版心右侧。
小算法，定位在版面中心线右侧 left:50%;，再向右走版心盒子的半个宽度margin-left:400px;。
.fixed {
postiton:fixed;
left:50%;
margin-left:400px;
}
5.粘性定位
可以被认为是相对定位和固定定位的混合。
选择器 {position:sticky;top:10px;}
距离未满足设定值，做相对定位。距离满足设定值时，转换为固定定位。
1 以浏览器的可视窗口为参照点移动元素（固定定位特点）
2 粘性定位占有原先的位置 （相对定位特点）
3 必须添加 top left right bottom 其中一个才有效
兼容性差ie不支持
6.定位的扩展内容
定位中的层叠问题
添加z-index:1;
数值越高越靠上 。
数字后面不能加单位i，只有定位的盒子才有z-index属性。
绝对定位的盒子居中
走父盒子宽度的一般left:50%，再往回走自己盒子宽度一半,margin-left:-100px。
定位特殊特性
绝对定位和固定定位和浮动类似。
1.行内元素添加绝对或固定定位后可设置宽高
2.块级元素添加绝对或固定定位后，如果不给宽高，默认大小是内容的大小
3.脱标盒子不触发外边距合并。
4.绝对定位/固定定位会完全压住盒子
浮动最早出现的目的是做文字环绕，
浮动会压住盒子但是不会压住盒子里面的文字 ，
定位会完全压住盒子和里面的文字。
<，> 可以在页面上显示向左向右的箭头。
如果一个定位盒子既有left属性也有right属性，会执行left。
网页元素的显示与隐藏
1.display: none/block;
display隐藏元素，配合js可以做很多事情。
隐藏后不再占有原来位置。
2.visibility:hidden /visible隐藏后仍然占有位置
3.overflow：hidden 对溢出部分进行处理，
一般不想让溢出内容显示。
如果有定位的盒子慎用overflow：hidden。
visible：默认显示不隐藏，
scroll：显示滚动条，
auto：需要的时候才添加滚动条。
土豆视频案例
遮罩不占位置，
所以遮罩是绝对定位absoulet，
并且显示和隐藏的状态都不占有位置，
所以用display。
不使用的时候，display:none，遮罩效果是bgc实现的，中间的图标是background-image实现的。
.mask {
/* 隐藏遮罩层 */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
}
div也可以加 :hover。
.tudou:hover .mask 这句代码应该解析为：
使用后代选择器，选择出符合class为.tudou .mask的元素，将其display属性设置为block，又因为添加了:hover伪类，所以要满足在.tudou被鼠标悬浮的情况下，子元素mask才显示。
.tudou:hover .mask {
display:block;
}
CSS高级技巧
精灵图
一整个图片包含页面尽可能多的小图片
到了之后客户端进行切割显示
使用到background-position，此属性决定了盒子里的背景图是否发生移动，此时盒子不动，在页面的标准流位置不变，变得是盒子里面的图片显示在哪个具体方位。
字体图标
主要用于简单的图标或者小图标。花纹夫复杂的还是用精灵图。
精灵图缺点：图片体积大，放大缩小存在模糊现象，更换复杂。
字体图标展示的是图标，本质是字体。可以不失真地调整大小，更换颜色。
两个网站：icomoon : icomoon.io ， iconfont 字体库 : iconfont.cn
1 . 去网站上选取图标，下载后解压，把fonts文件夹放在页面根目录下。
里面有四种格式的文件，对应win，mac，ie等不同平台，svg格式字体是基于svg字体渲染的一种格式。
2 . 在css中全局声明字体，可以打开style.css文件中找到这些代码。
一整块代码 不要写直接复制，粘贴到<style>标签中。
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display：normal;
}
/*iconfont*/
@font-face {
font-family: 'iconfont'; /* Project id 2818467 */
src: url('//at.alicdn.com/t/font_2818467_c3a6bvynay.woff2?t=1631792717826') format('woff2'),
url('//at.alicdn.com/t/font_2818467_c3a6bvynay.woff?t=1631792717826') format('woff'),
url('//at.alicdn.com/t/font_2818467_c3a6bvynay.ttf?t=1631792717826') format('truetype');
}
3 .打开文件夹中的demo.html文件，根据页面 代码 或 代码后面的 方框 ，复制到html中需要的位置。
<span>口</span>
4 .给对应标签声明一个字体
span {
font-family:'icomoon';
}
5 .添加新图标
将压缩包里的selection.json重新上传到字体图标网站import icons，选中需要的新图标重新生成，下载即可。
css三角形
给一个盒子，宽高为0，边框设置不同颜色和高度
.triangle {
width: 0;
height: 0;
border-top: 25px solid yellow;
border-bottom: 25px solid green;
border-left: 25px solid black;
border-right: 25px solid red;
}
界面样式
改变界面样式获得更好的用户体验。
鼠标样式cursor
li {cursor:pointer}
default 默认小白箭头
pointer 小手
move 十字架型移动
text 竖线文本
not-allowed 禁止
表单轮廓线
input {outlin:none:}
防止文本域拖拽
<textarea name="" cols="30" rows="10" style="resize:none;"></textarea>
清除li样式 去除小圆点
li {list-style:none;}
清除a标签默认样式
a {text-decoration:none;}
vertical-align
用于实现图片或表单与文字的垂直对齐。
设置一个元素的垂直对齐方式，图片或表单都是行内块元素，
默认为极限对齐
语法
vertical-align:baseline | top | middle | bottom
图片添加边框后下面有白边，
因为图片默认是和文字基线对齐，所以会出现下面的白边。
把vertical-align 改上去就行了，
或者把图片改为块元素，块元素没有vertical-align 。
溢出文字显示省略号
单行文字溢出，用省略号代替多余部分
1 强制单行显示 （不许换行）
white-space:nowrap;
2 超出部分隐藏
overflow:hidden;
3 用省略号替代
text-overflow:ellipsis;
多行文字省略
1 .超出的部分隐藏
overflow:hidden;
2 .文字用省略号替代超出的部分
text-overflow:ellipsis;
3 .弹性伸缩盒子模型显示
display:-webkit-box;
4 .限制在一个块元素显示的文本的行数
-webkit-line-clamp:2;
5 .设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient:vertical;
更推荐让后台来设置这个效果，操作更简单。
常见布局技巧
margin负值
解决相邻有边框块元素的边框相接过宽问题
margin-left:-1
让两个边框上下叠加在一起，显示出一个边框宽度的效果
文字围绕浮动元素
只给.pic设置浮动属性，文字自动围绕图片，不需要再给文字设置浮动。
<div class="father">
<div class="pic">
<img src="./img/img.png" alt="">
<p>环绕文字内容</p>
</div>
</div>
行内块
看到上下翻页元素，可能会想到用ul>li来做，然后设置大小再设置margin再设置浮动。比较麻烦。
可以直接用行内块，自动一行排列展示，且自带空白缝隙。
给父盒子添加text-align:center 之后。
父盒子内的所有行内元素和行内块元素都会居中显示。
css三角强化
做出一个长三角形，而不是等腰三角形
.box1 {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-left: 50px solid skyblue;
border-right: 0px solid;
border-bottom: 0px solid;
}
/*或写为*/
.box1 {
width: 0;
height: 0;
border-color: transparent transparent transparent skyblue;
border-style: solid;
border-width: 100px 0 0 50px;
}
css初始化
因为不同浏览器对不同标签默认值不同，为了消除差异，提高兼容性，需要对css进行初始化。
font-family:"\9ED1\4F53" 这里将中文字体的名称换为Unicode编码来替代。避免浏览器解析css时出现乱码。
h5c3新特性（略）
H5部分
语义化标签
-
header— 头部标签 -
nav— 导航标签 -
article— 内容标签 -
section— 块级标签 -
aside— 侧边栏标签 -
footer— 尾部标签
音视频标签
audio video
MP4全部支持
尽量用MP4
双标签
<video> </video>
autoplay=autoplay 自动播放
muted=muted 静音
h5新增input表单与属性
新增表单类型
限定为具体的内容格式 type=email
类型很多，我们现阶段重点记忆三个： number tel search
新增表单属性
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 文本框内容不能为空 |
| placeholder | 提示文本 | 提示文本，点击则不显示 |
| autofocus | autofocus | 自动聚焦属性，页面加载完成，光标自动定位到这里 |
| autocomplete | on/off | 记录以前的输入记录，然后进行快速输入。需要在表单内加上name属性，且成功提交过。 |
| multiple | multiple | 可以多选文件提交 |
<!--上传多个文件，使用multiple属性-->
<!--按ctrl即可多选-->
<input type="file" multiple="multiple">
更改输入框默认填充字体颜色
注意：这是一个实验中的功能，有兼容性问题。
input::placeholder{
color:pink;
}
tudou:hover::before {
display：block；
}
CSS3部分
选择器
属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用。
*[title] {color:red;}
| 类型 | 描述 |
|---|---|
| E[abc] | 选择具有 abc 属性的E元素 |
| E[abc=“def”] | 选择具有 abc 属性,值等于 “def” 的E元素 |
| E[abc^=“def”] | 选择具有abc 属性,值以 “def” 开头的E元素 |
| E[abc$=“def”] | 选择具有abc 属性,值以 “def” 结尾的E元素 |
| E[abc*=“def”] | 选择具有abc 属性,值中包含子串 “def” 的E元素 |
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
结构伪类选择器
first-child , last-child , nth-child(n) , first-of-type , last-of-type , nth-of-type(n)
和链接伪类（锚伪类）一样都是伪类。用单冒号:
选择符：E:first-child
作用：筛选出父元素中第一个子元素E
ul :first-child {
background-color: red;
color: blue;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
注意：
1 .在ul样式中，ul和:first-child中间必须有一个空格，不然会应用到ul上，无法起到筛选作用。
更安全的写法：
ul li:first-child {
background-color: red;
color: blue;
}
2 .这里筛选的条件有两个：第一个子元素，li ，必须同时满足两个条件。
nth-child(n) 中的n可以是数字可以是关键字可以是公式。
数字 就是第n个子元素，从1开始计算。
关键字 even偶数，odd奇数，
公式 从0开始计算。2n偶数，2n+1奇数，n+5从第五个开始（包含第5个），-n+5 前5个（包含第5个）。
nth-child和nth-of-type 的区别
nth-child选择父元素里面的第几个子元素，不管是第几个类型nt-of-type选择指定类型的元素
伪元素选择器
before和after创建一个元素，属于行内元素。在文档树中不展示，所有叫伪元素，语法：element::before{}。
before和after必须有content属性，权重和标签选择器一样为1.
使用before显示字体图标，将字体图标写在content里面，如果是代码需要在开头加\表示转义
div::before {
font-family:'icomoon';
content:'\e921';
}
土豆遮罩层案例
注意，这里hover和::中间不要加空格。
.tudou:hover::before{display:block;}
伪元素清除浮动
所有清除浮动的办法，都会对标W3C规定的额外标签法，
额外标签法的核心是两点：1 块级元素 2 clear:both
所以，使用伪元素清除法时：
1 .display设置为block，保证伪元素从行内元素变成块级元素
2 .核心语句 clear:both 必须添加
3 .content内容设置为空，配合其他语句保证不显示出来
使用双伪元素清除法时：
1 .display设置为table，保证两个前后两个伪元素当作table的子元素一行显示，不要分行
2 .content设置为空。
3 .最后给after添加 clear:both;
css3盒子模型
以前的盒子默认为：content-box。
保持精准
不会被padding撑开不会被border撑开
box-sizing:border-box盒子大小为width
filter 滤镜
可以让图片模糊 或者色彩偏移。
用法：filter:函数()，filter有多个函数可供使用，现阶段先了解blur
例如：filter:blur(5px);
img {
filter:blur(15px); /*数值越高模糊程度越高*/
}
img:hover {
filter:blur(0); /*鼠标经过时，不再模糊*/
}
calc函数
计算函数
width:calc(100%-80px);
css3 过渡 （重点）
动画效果，在不使用js和flash的情况下当元素从一种状态变为另一种状态时，为元素添加效果。
经常和:hover搭配使用
transition：要过渡的属性 过渡时长 运动曲线 何时开始;
谁做过渡给谁加。如果想让所有属性变化都过渡，写一个all即可。
div {
width:200px;
transition:width .5s ease 1s,height .5s ease 1s;
}
div:hover {
width:400px;
height：400px;
}
favicon图标
网站标签栏图标
1制作
2放在根目录下
3引入到html
引入<link rel="shortcut icon" href="favicon.ico" />，放在head中。
图片favicon.ico放在根目录下。
tdk搜索优化
T tittle ：<title>Document</title>
d description：<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
k keyword：<meta name= " keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
行内替换元素
替换元素：替换元素根据其标签和属性来决定元素的具体显示内容，<img><input><textarea><select><object>等。替换一般有内在尺寸如img默认的src属性引用的图片的宽高，表单元素如input也有默认的尺寸。img和input的宽高可以设定
扫一扫
1291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
