WEB前端
学习小记
HTML+CSS
1.HTML是内容，CSS是样式，JS是行为(具有的功能)。
2.前端人员要乐观、为用户考虑、勇于探索。
快捷键打开控制台，按F12，不管用就是ctrl+shift+i。
3.下载最新版本的webstorm，进行破解安装。
4.webstorm中长代码自动换行。
file—>settings—>editor—>"use soft wraps in editor"打上勾，代码就自动换行。
5.webstorm修改快捷键主题。
file—>settings—>keymap—>eclipse
6.webstorm复制和删除当前行。
ctrl+alt+向下箭头。
ctrl+D。
7.webstorm统一编辑
按住alt—>点击统一编辑的位置。点击一次选中，点击两次取消。
8.常用快捷键
ctrl+O：打开。
ctrl+N：新建。
9.DTD文档 = 有文档类型声明 = doctype
document type definition(DTD)
10.文档类型声明
作用：告诉浏览器按当前标准解析代码。
11.注意：<!DOCTYPE html>不是标签。
HTML(超文本标记语言)
HTML不区分大小写，但是建议小写。
HTML是由浏览器解析执行的。由上往下，由左往右。
1.元素
元素指从开始标记到结束标记之间的所有内容。
例如：
<p> 段落 </p>
开始标签 内容 结束标签
元素的开始 元素的内容 元素的结束
2.属性
align=“left/center/right” ————>设置元素内容水平对齐方式。
(标题、段落中的align默认左边对齐且加粗；水平线的align默认是水平居中的。)
<br/> 换行标签没有任何的属性。
注意：html默认单位是像素(px)，当单位为像素时建议不写。
3.HTML的头部head
lang=“en”——>对每张页面中的主要语言进行声明。en代表英文；zh-CN代表中文。
head中常用标签：meta、title、link、style、script等。
title是网页的标题，一个网页只能有一个标题。
meta标签用来描述一个HTML网页文档的属性。
4.块级元素和行内元素的区别
- 块级元素独占一行，行内元素在同一行显示。
- 块级元素默认宽度为100%，行内元素默认宽度由内容撑开。
- 块级元素：hn(标题，1~6)、p、hr
- 行内元素：img、a
- 块级元素的特点：比较霸道，自己独占一行；高度、宽度、外边距以及内边距都可以控制；宽度默认是容器（父级宽度）的100%；是一个容器及盒子，里面可以放行内或者块级元素。注意：文字类的元素内不能使用块级元素；p标签主要用于存放文字，因此p里面不能放块级元素，特别是不能放div；同理，h1-h6等都是文字类块级标签，里面也不能放其他块级元素。
- 行内元素的特点：相邻行内元素在一行上，一行可以显示多个；高、宽直接设置是无效的；默认宽度就是它本身内容的宽度；行内元素只能容纳文本或其他行内元素。注意：链接里面不能再放链接；特殊情况链接a里面可以放块级元素，但是给a转换一下块级模式最安全。
- 行内块元素：在行内元素中有几个特殊的标签——img、input、td，它们同时具有块元素和行内元素的特点。它们的特点是：和相邻行内元素在一行上，但是他们之间会有空白缝隙，一行可以显示多个；默认宽度就是它本身内容的宽度；高度、宽度、外边距以及内边距都可以控制。
5.图片
<img> 属性：路径：src；alt：图片不能正常显示，给予提示；title：鼠标悬停，给予提示(除了br，其他标签都有的属性)；设置元素的宽度：width；设置元素的高度：height。
注意：图片宽高设置一个属性，等比例缩放。
图片常用格式：jpg png(支持背景透明) gif(支持动图) psd(ps)
路径：
- 绝对路径：网址(直接去复制)；盘符
- 相对路径(html文件去找文件)：平级(直接写)；下一级(/)；上一级(./)。
6.超链接
- 作用：做跳转
- 标签：
<a href=""></a> - 属性：href。有绝对路径和相对路径。
href=“a” ：空连接——效果是返回页面顶部。 - target：设置在哪个窗口打开（目标）。
取值：_self：默认值，原窗口打开。
_blank：新窗口打开。 - name：名字（锚点：同一个页面做跳转）（了解即可）。
点击a跳转到a：
<a href="#mingzi">点击</a>
<a name="mingzi">跳转到</a>
注意：name只能给a标签加。
点击a跳转到块级元素：
<a href="#mingzi">点击</a>
<p id="mingzi"></p>
注意：ID具有唯一性。
7.文本格式化标签（了解）：给文本添加样式。这些都是双标记，都是行内元素。
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<del>删除线</del>
<s>删除线</s>
<em>强调 倾斜显示</em>
<strong>强调 加粗显示</strong>
<sup>上标</sup>
<sub>下标</sub>
<small>小号字体</small>
<big>大号字体</big>
浏览器默认字体大小是16px。掌握i、del、b
8.列表
- 无序列表：
无序列表的结构：
<ul> unordered list 无序 列表
<li></li> list item 列表 项
<li></li>
<li></li>
</ul>
注意：ul包含li，所有内容写在li里面。
ul>li*6>a[href=“#”]{文本} //tab键自动补全
ul、li的属性type拥有的选项：disc–默认实心圆；circle–空心圆；square–小方块； none–不显示。
只要是列表都是块级元素。
- 有序列表
ol > li
type表示数字类型，设置项目符号。
start表示从数字几开始，取值为数字。
reversed表示倒序，如5、4、3、2、1. - 自定义列表
从dl开始，每个自定义的列表项以dt开始，每个自定义列表项的定义以dd开始。
9.表格
<table> //定义表格
<tr> table row //定义行
<td></td> table data //定义列、单元格，所有内容写在单元格内
</tr>
</table>
作用：向用户展示数据
特点：同行等高、同列等宽。
结构：table>tr3>td3
标签：<th>：特殊的单元格，默认水平居中且加粗，和td同一个位置。<caption>表格的标题，写在table下面。
属性：border是表格的边框，默认没有边框；align="center"是表格居中，默认居左；bgcolor是背景颜色；background是表格的背景图片：background=“images/img2.gif”；背景颜色和背景图片同时存在，背景图片的优先级高于背景颜色；cellpadding设置内容距边框的距离；cellspacing设置单元格之间的距离。
tr涉及的一个新属性：valign设置垂直对齐方式，分为上中下：top、middle、bottom。
colspan：水平合并。
rowspan：垂直合并。
10.form表单
表单的作用：可以提交数据到服务器，使页面具有交互性。
属性：
type：输入框的类型；
name：表单元素的名称；
value：当前值；
checked：默认被选中，一般配合单选和多选按钮使用；
selected：默认显示，配合option使用；disable：禁用，属性等于属性值；
readonly：只读，属性等于属性值；
action：提交的地址；
method：提交的方式。
get和post的区别：get提交的数据不安全，只能提交少量的数据，post与之相反。
form之间不能相互嵌套，但是一个页面可以包含多个form。
input：输入；
type：类型；
text：文本；
value：当前值；
radio：单选按钮，必须加name才能进行单选；checkbox：多选框；
下拉列表：select，option是选项、选择框；textarea：文本域，cols和rows用来设置文本域有多少行和多少列；
label是标签，用于提高用户体验度,当点击label之间的内容，相关的标签会被选中，label的for属性和表单元素的id属性一致。
<input type="radio" name="sex" id="man"/>
<label for="man">男</label>
当想上传文件时，type=“file”，注意：默认的表单编码格式不支持上传文件，当表单元素有文件时，需要把表单的编码格式改为二进制，enctype=“multipart/form-data”。
隐藏域： type=“hidden” 隐藏域用户看不到，但它携带的信息可以正常提交。
图片提交：type=“image” src=“路径”。
10.HTML5新增：
HTML5新增的type类型：
emali--邮箱；
url--网址；
search--搜索；
color--颜色；
tel--电话；
number--数字，type="number" min="" max="" step=""(步长)；
range--范围（滑块）；
date--日期；
week--周；
month--月。
HTML5新增的form类型：
autofocus：自动获取焦点，推荐写在第一个表单元素上；
required：必填项；
min、max、step：配合数字和范围使用；
minlength=""：最小长度；
maxlength=""：最大长度；
multiple：可以输入多个，用英文的逗号隔开，配合邮箱和网址使用。
语义化标签：看到标签，知道其表示的含义。
语义化标签的优势：代码结构清晰，方便阅读，有利于团队合作开发；方便其他设备解析以语义的方式来渲染网页；有利于搜索引擎优化(SEO)。
placeholder=“” —— 默认提示。
实体字符：当页面一些特殊的字符产生歧义或者HTML不识别，可以用实体字符来替代。
空格：
<：<
>：>
版权：©
注意：块级元素可以包含块级元素和行内元素；行内元素一般不要包含块级元素；hn和p，一般不包含div。
视频和音频：
视频：<video src="" width="" autoplay controls loop muted poster=""> autoplay：自动播放(谷歌浏览器不支持)； controls：控制播放；loop：循环播放；muted：视频播放默认静音；poster=""视频播放前显示一张图片。支持的格式：.mp4；.ogg(移动端)；.webM(高清)。
音频：<audio src="" controls loop autoplay muted> 支持格式：.mp3;.ogg;.wav。
source(实际就是src)：
作用：给浏览器提供多种视频或者音频格式的选择。
标签：<source/>
语法：
<video autoplay>
<source src=""/>
<source src=""/>
<source src=""/>
您的浏览器不支持视频
</video>
CSS–层叠样式表
作用：实现了将内容与表现分离；提高代码的可重用性和可维护性。
CSS代码风格：属性值前面，冒号后面，保留一个空格；选择器和大括号中间保留空格。
1.CSS基础选择器
- CSS选择器的作用：就是根据不同需求把不同的标签选出来，这就是选择器的作用。简单来说，就是选择标签用的。
- 标签选择器：用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。优点：能快速为页面中同类型的标签统一设置样式。缺点：不能设计差异化样式，只能选择全部的当前标签。
语法：
p {
color: red;
}
- 类选择器：如果想要差异化选择不同的标签，单独选择一个或者某几个标签，可以使用类选择器。
语法(结构需要用class属性来调用class类)：
.类名 {
属性1: 属性值1;
}
<style>
.red {
color: red;
}
</style>
<div class="red"></div>
背景颜色：background-color
多类名：使用方式和使用场景。
使用方式：在class属性中写多个类名，多个类名中间必须用空格分开。
使用场景：把公共样式放到一个类里面。
- id选择器
样式#定义，结构id调用，只能调用一次，别人切勿使用。
语法：
<style>
#pink {
color: pink;
}
</style>
<div id="pink"></div>
- 通配符选择器
使用”*“定义，表示选取页面中所有元素。通配符选择器不需要调用，特殊情况下使用，例如清除所有的元素标签的内外边距。
语法：
- {
属性1: 属性值1;
}
2.CSS字体属性
font-family：字体。
font-size：字体大小。谷歌默认是16px。
font-weight：字体粗细，700-->加粗，400-->正常，后面不用跟单位。
font-style：文字样式。normal是默认值，italic是倾斜。平时很少给文字加斜体，反而给斜体标签改为不倾斜。
字体复合样式–不能随意更换顺序：
body {
font: font-style font-weight font-size/line-height font-family;
}
body {
font: italic 700 16px 'Microsoft yahei';
}
不需要的属性可以省略，但是font-size和font-family必须保留。
3.CSS文本属性
文本颜色：color（开发中最常用的就是十六进制）；
对齐文本：text-align（只能设置文本水平对齐方式，默认左对齐）；
装饰文本：text-decoration，可以给文本添加下划线--underline、删除线--line-through、上划线--overline。一般会给a标签设置none取消超链接的下划线。
文本缩进：text-indent，文本的第一行缩进，通常将段落缩进，一般用2em缩进两个文字大小的距离。
行间距：line-height，控制文字行与行之间的距离。行间距=上间距+文本高度+下间距。
4.CSS引入方式
行内样式表（行内式–权重高）、内部样式表（嵌入式）、外部样式表（链接式）
5.Emmet语法
- 快速生成HTML结构语法
按tab键。
div
div*3
ul>li 包含关系
div+p 兄弟关系
如果生成带有类名或者id名字的，直接写.demo或者#two ，按tab键即可，默认是div的，如果想是别的标签，可以写成p.gray或span#red。
如果生成的div类名是有顺序的，可以用自增符号$。如.demo$*5。
如果想要在生成的标签内部写内容可以用{}表示。
- 快速生成CSS样式语法
CSS基本采用简写形式即可，如w200，按tab可生成width:200px;lh26，可生成line-height:26px;
- 快速格式化代码
VScode中右键选择格式化文档，或者Shift+Alt+F。 emmet.include
6.CSS的复合选择器
复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
复合选择器可以更准确、更高效的选择目标元素。
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。
常用选择器有：后代选择器、子选择器、并集选择器、伪类选择器。
后代选择器（包含选择器）：可以选择父元素里面子元素，写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代。语法为：元素1 元素2 {样式声明}。
子选择器：只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素。语法为：元素1>元素2 {样式声明}。
并集选择器：可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。是各选择器通过英文逗号连接而成。语法为：元素1,元素2{样式声明}。约定的语法规范，并集选择器喜欢竖着写。一定要注意，最后一个选择器不需要加逗号。
伪类选择器：用于向某些选择器添加特殊效果，比如给链接添加链接效果，或者选择第1个、第n个元素。用冒号表示，如 :hover :first-child。分为链接伪类和结构伪类。
链接伪类选择器：a:link /*选择所有未被访问的链接*/ a:visited /*选择所有已被访问的链接*/ a:hover /*选择鼠标指针位于其上的链接*/ a:active /*选择活动链接（鼠标按下未弹起的链接）*/
链接伪类选择器注意事项：1.为了确保生效，请按照LVHA的顺序声明： :link :visited :hover :active。2.因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
:focus伪类选择器：用于选取获得焦点的表单元素。一般情况<input>表单元素才能获取。如： input:focus {background-color:yellow;}
复合选择器总结：
7.CSS的元素显示模式
作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。
元素显示模式就是元素（标签）以什么方式进行显示，比如div自己占一行，一行可以放多个span。
- 元素显示模式转换：即一个模式的元素需要另外一种模式的特性。
把行内元素转换成块内元素： display: block;
把块内元素转换成行内元素： display: inline;
转换成行内块： display: inline-block;
一个小技巧：单行文字垂直居中。让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中。
8.CSS的背景
通过CSS背景属性，可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定。
- 背景颜色：background-color:颜色值;
transparent：透明，为默认的。 - 背景图片：background-image:none | url;
none:无背景图（默认的）；url:使用绝对或相对地址指定背景图像。提倡背景图片后面的地址，url不要加引号。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。 - 背景平铺：background-repeat : repeat | no-repeat | repeat-x | repeat-y ;
repeat：背景图像在纵向和横向上平铺（默认的）；no-repeat：背景图像不平铺；repeat-x：背景图像在横向上平铺；repeat-y：背景图像在纵向平铺。 - 背景位置：background-position : length || length;background-position : position || position ;
length：百分数 | 由浮点数字和单位标识符组成的长度值；position：top | center | bottom | left | center | right 方位名词。
注意：必须先指定background-image属性；
position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位；
如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致；
如果只指定了一个方位名词，另一个值默认居中对齐；
如果position 后面是精确坐标， 那么第一个肯定是 x ， 第二的一定是y；
如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中；
如果指定的两个值是精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标。 - 背景附着(背景是滚动的还是固定的)：background-attachment:scroll | fixed;
scroll：背景图像是随对象内容滚动；fixed：背景图像固定。 - 背景简写
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
语法：
background: transparent url(image.jpg) repeat-y scroll center top ;
- 背景透明：background: rgba(0, 0, 0, 0.3);
最后一个参数是alpha 透明度 取值范围 0~1之间。注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响。
8.CSS三大特性
层叠性：
所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。原则：样式冲突，遵循的是就近原则，哪个样式离着结构近，就执行哪个样式。
继承性：
子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
优先级：
!impprtant>行内>id>类>元素>继承。
权重不会有进位。
继承的权重为0，如果该元素没有直接选中，不管父元素的权重多高，子元素得到的权重都是0。
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。
9.盒子模型
盒子模型由元素的内容、边框(border)、内边距(padding)和外边距(margin)组成。
语法：
border : border-width || border-style || border-color （没有先后顺序）
border-width：定义边框粗细，单位是px；
border-style：边框的样式；
border-color：边框颜色。
边框的样式：
none：没有边框即忽略所有边框的宽度（默认值）；
solid：边框为单实线(最为常用的)；
dashed：边框为虚线；
dotted：边框为点线。
很多情况下，我们不需要指定4个边框，我们是可以单独给4个边框分别指定的。
通过表格的cellspacing="0",将单元格与单元格之间的距离设置为0，但是两个单元格之间的边框会出现重叠，从而使边框变粗，通过css属性：table{ border-collapse:collapse; }
看透网页布局的本质
网页布局过程：先准备好相关的网页元素，网页元素基本都是盒子box；利用CSS设置好盒子样式，然后摆放到相应位置；往盒子里面转装内容。
边框会影响盒子实际大小：
有两种解决方案——测量盒子大小的时候，不量边框；如果测量的时候包含了边框，则需要width/height减去边框宽度。
内边距：padding 上右下左
| 值的个数 | 表达意思 |
|---|---|
| padding:5px; | 1个值，代表上下左右都有5像素内边距 |
| padding:5px 10px; | 2个值，代表上下内边距是5像素，左右内边距是10像素 |
| padding:5px 10px 20px; | 3个值，代表上内边距是5像素，左右内边距是10像素，下边距是20像素 |
| padding:5px 10px 20px 30px; | 4个值，代表上是5像素，右是10像素，下是20像素，左是30像素。顺时针。 |
| 内边距也会影响盒子实际大小：如果盒子已经有了宽度和高度，此刻再指定内边框，会撑大盒子。 | |
| 如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子对应的大小。 | |
| 外边距（margin） | |
| 控制盒子与盒子之间的距离。 | |
| 外边距的典型应用：外边距可以让块级盒子水平居中，但是必须满足两个条件： |
- 盒子必须指定了宽度。
- 盒子左右的外边距都设置为auto
margin:0 auto;。
行内元素和行内块元素水平居中，给其父元素添加text-align:center;。
外边距合并：
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并，主要有两种情况：
- 相邻块元素垂直外边距的合并。
- 嵌套块元素垂直外边距的塌陷。
相邻块元素垂直外边距的合并。
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者。
嵌套块元素垂直外边距的塌陷。
1019
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
