HTML/css/js 基础笔记
网站的建站流程
页面图例
网页的结构
WEB标准
WEB标准是网页制作的标准，它不是一个标准，它是根据网页的不同组成部分生成的一系列标准。这些标准大部分由W3C起草发布，也有部分标准由ECMA起草发布
（1）W3C( World Wide Web Consortium )万维网联盟，创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构；是专门负责网络标准制定的非赢利组织。制定了结构标准和样式标准；
（2）ECMA：欧洲电脑网商联合会（厂商协会），制定了行为标准；
计算机语言
HTML
HTML 指的是超文本标记语言 (Hyper Text Markup Language) www万维网的描述性语言。
XHTML指可扩展超文本标记语言（标识语言）（EXtensible HyperText Markup Language）是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。
HTML5指的是HTML的第五次重大修改（第5个版本）
HTML发展
编辑器
建立站点
规划网站的所有内容和代码
整合资源
文件的命名规范
- 小写英文字母、数字、下划线的组合，
- 其中不得包含汉字、空格和特殊字符；
- 必须以英文字母开头。
HTML开始
1：HTML
有三种： Strict（严格型)、
Trasitional（过渡型）、
Frameset（框架型）
2：HTML5基本结构
3:HTML语言
-
HTML语言组成
-
标签
-
写在尖角号<>里的第一个单词，叫做标记，也叫做标签，也称作元素；
-
-
属性
-
标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在双引号内 一个标记可以有多个属性，属性和属性之间用空格隔开，属性不分先后顺序
-
-
-
HTML语法
- 常规标记(双标记)：
<标记名称 属性1名=“属性1值” 属性2名=“属性2值” ………… > - 空标记（单标记）：<标记名 属性1名=“属性1值” />
- 常规标记(双标记)：
常用标签
1 ： 文本标题标签
文本标题共有6个（h1-h6）
一级标题
(唯一性,放网站LOGO)
二级标题
...
六级标题
2:字体倾斜&加粗标记
文本倾斜:
文本加粗：
3 : 段落标记
4：下划线
5 : 换行&水平线
6：上标&下标
7 : 字符 （ 小段文本 ）
8 : 常用转义字符
不换行空格
> >右尖括号
< <左尖括号
© 备案中图标版权 ©
® 注册商标
8 ：列表
（1） 无序列表
- 列表项内容
- 列表项内容
- 列表项内容
........
（2）有序列表
- 列表项内容
- 列表项内容
- 列表项内容
........
type:规定列表中的列表项目的项目符号的类型
语法：
1 数字顺序的有序列表（默认值）（1, 2, 3, 4）。
a 字母顺序的有序列表，小写（a, b, c, d）。
A 字母顺序的有序列表，大写（A,B,C,D)
i 罗马数字，小写（i, ii, iii, iv）。
I 罗马数字，大写（i, ii, iii, iv）。
start 属性规定有序列表的开始点。(start的属性值必须是数字)
语法：
（3）自定义列表
9 : 超链接
属性：
href = 'url'
target = "_black / _self";
title = '文本提示'
拓展1：
rel = 'nofollow'; 告诉搜索引擎“不要追踪此网页上的链接”或”不要追踪此特定链接”；
例：用户注册
以下是经常用到nofollow的几种情况：
1、不可信赖的内容
2、付费链接
3、按优先级别进行抓取
拓展2：
10 : 图片
![]()
属性：
src = 'url';
alt = ' 标签 实例 带有指定替代文本的图像'
title = '文本提示'
width = ''
height = ''
border = ''
图片 title 和 alt区别：
alt:
1、alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户，以及视觉障碍的用户和使用屏幕阅读器的用户。当图片不显示的时候，图片的替换文字。
2、alt属性值得长度必须少于100个英文字符
3、alt属性是img标签的必须属性，如果没有特别意义的图片，可以写alt=""
4、alt属性是搜索引擎判断图片与文字是否相关的重要依据，alt属性添加到img主要的目的才是为了SEO
title:
1、title属性并不是必须的。
2、title属性规定元素的额外信息，有视觉效果，当鼠标放到文字或是图片上时有文字显示。
3、title属性并不作为搜索引擎抓取图片的参考，更多倾向于用户体验的考虑。
11 : 相对路径
（同级）
1)当当前文件与目标文件在同一目录下，直接书写目标文件的文件名+扩展名；
（上级找下级）
2)当当前文件与目标文件所处的文件夹在同一目录下，写法如下：
文件夹名/目标文件全称+扩展名；
（下级找上级）
3)当当前文件所处的文件夹和目标文件在同一目录下，写法如下：
../目标文件文件名+扩展名；
/ : 从根目录出发
./ : 从当前位置出发 和不写的效果是一样的
../ : 返回上一层
12 ： DIV
13 : HTML注释
表格
1 : 表格基本结构
<table>
<tr>
<td>td>
<td>td>
tr>
table>
2 ： 数据行分组
<thead>thead> 表头 （一个表格里只能有一个）
<tbody>tbody> 表体
<tfoot>tfoot> 表尾 （一个表格里只能有一个）
3 ： 数据列分组
<colgroup span="value">colgroup>
3 ： 列标题
<th>th>
4 : 表格标题
<caption>caption>
5：表格的html属性
1）width="表格的宽度"
2）height="表格的高度"
3）border="表格的边框"
4）bordercolor="边框色"
5）cellspacing="单元格与单元格之间的间距"
6）cellpadding=“单元格与内容之间的距离"
7）align="表格水平对齐方式"
取值：left、right、center、
valign=“垂直对齐” top\bottom\middle
8）合并单元格属性：(td)
合并列： colspan=“所要合并的单元格的列数"
合并行： rowspan=“所要合并单元格的行数”
9） rules="rows/cols/all/none/groups" 添加分隔线
说明：
rows:位于行之间的线条
cols:位于列之间的线条
all：位于行和列之间的线条
none:没有线条
groups:位于行组和列组之间的线条
表单
1 ： 表单标签
<form>form>
属性 ：
action = '接口地址'
method = 'get / post'
name = '表单名称'
2 ： 表单控件
属性：
type = '控件类型'
name：属性标识表单域的名称；
Value：属性定义表单域的默认值，其他属性根据type的不同而有所变化。
maxlength：控制最多输入的字符数，
Size：控制框的宽度（以字符为单位）
1）文本框
2)密码框
3)提交按钮
4)重置按钮
5)空按钮
6）单选按钮组
男
(默认选中)女
7）复选框组
* disabled="disabled" (禁用)
* checked="checked" (默认选中)
8）下拉列表（菜单）：
表示下拉列表，name属性不是必须的
默认选择项用selected属性；
9）表单域多行文本定义：
语法:
多行文本。rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。
阻止浏览器对窗口的拖动设置:{resize:none;}（css属性）
10)上传文件：
语法：
11）隐藏表单，一般用作数据存储
文件域： 这是隐藏表单,一般用来传递参数,而又不想显示在客户端。
3 : 表单标签
1）表单字段集
语法：
说明：相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。disabled定义空间禁制可用；
2）字段级标题：
语法：
说明：legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的第一个元素。
3)提示信息标签：
语法：
说明：label元素用来定义标签，为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。
拓展：post/get
- (1). 从功能上讲，GET一般用来从服务器上获取资源，POST一般用来更新服务器上的资源；
- (2). 从REST服务角度上说，GET是幂等的，即读取同一个资源，总是得到相同的数据，而POST不是幂等的，因为每次请求对资源的改变并不是相同的；进一步地，GET不会改变服务器上的资源，而POST会对服务器资源进行改变；
- (3). 从请求参数形式上看，GET请求的数据会附在URL之后，即将请求数据放置在HTTP报文的 请求头 中，以?分割URL和传输数据，参数之间以&相连。特别地，如果数据是英文字母/数字，原样发送；否则，会将其编码为 application/x-www-form-urlencoded MIME 字符串(如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进制表示的ASCII)；而POST请求会把提交的数据则放置在是HTTP请求报文的 请求体 中。
- (4). 就安全性而言，POST的安全性要比GET的安全性高，因为GET请求提交的数据将明文出现在URL上，而且POST请求参数则被包装到请求体中，相对更安全。
- (5). 从请求的大小看，GET请求的长度受限于浏览器或服务器对URL长度的限制，允许发送的数据量比较小，而POST请求则是没有大小限制的。
css
CSS(cascading style sheet) 汉译为层叠样式表,是用于控制网页样式
WEB标准中的表现标准语言,在网页中主要对网页信息的显示进行控制。
目前推荐遵循的是W3C发布的CSS3.0版本；
用来表现HTML或者XHTML等样式文件的计算机语言。
1998年5月21日由w3C正式推出的css2.0
HTML + CSS（div+css）
弥补html语言的不足
缩减页面代码，提高访问速度;
代码减少，页面文件就会小，占用网络带宽就少，客户端打开速度就快，用户体验就会更好
结构清晰，有利于seo优化
有利于搜索引擎优化
缩短改版时间
对网站的重构有很好的支持
CSS语法
CSS语法由两部分组成：选择符、声明。
声明包括：属性和属性值
选择符 {属性: 属性值 ;属性:属性值}
选择符说明：CSS选择符（选择器）
选择符表示要定义样式的对象(标签名字)，可以是元素本身，也可以是一类元素或者制定名称的元素,简单来说就是给对应的元素起个名称。
1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；
2）属性必须放在花括号中，属性与属性值用冒号连接。
3）每条声明用分号结束。
4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序,用空格隔开。
5）在书写样式过程中，空格、换行等操作不影响属性显示。
CSS样式表
1:内部样式表
语法：
注：使用style标记创建样式时，最好将该标记写在;
2:外部样式
(1) 语法：
说明：使用link元素导入外部样式表时，需将该元素写在文档头部，即与之间。
rel：用于定义文档关联，表示关联样式表；
type：定义文档类型；
(2)、导入外部样式表
说明：@和import之间没有空格 url和小括号之间也没有空格；括号内部加引号，必须结尾以分号结束；
link @import区别
差别1：老祖宗的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS。
差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。
差别3：兼容性的差别。：@import是CSS2.1提出的，所以老的浏览器不支持，@import只在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.
3:内联样式表
<标签 style="属性1:值1;属性2:值2; ……">
CSS样式表的权重关系
1）内联样式表的优先级别最高
2）内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高。
3）同在一个样式表中的优先级和书写的顺序也有关，后书写的优先级别高。(被覆盖的只是相同属性的样式)
1.CSS选择符
CSS基本选择符：类型选择符、id选择符、class选择符(类选择符)
Css选择符分类：
类型选择符（标记选择器）
类选择符 （class选择符）
ID选择符 （id选择器）
伪类选择器
通配符（*）设置全局属性
群组选择符（集合选择器）
包含选择符（后代选择器）
属性选择符
伪对象选择符
2.类型选择符
类型选择符是根据html语言中的标记来直接定义
语法：标签名称 {属性：属性值；}
a)类型选择符就是以文档对象html中的标签作为选择符，即使用结构中元素名称作为选择符。例如body、div、p,img,em,strong,span......等。
b)所有的页面元素都可以作为选择符;
用法：
（1）如果想改变某个元素的默认样式时，可以使用类型选择符；（如：改变一个p段落样式）
（2）当统一文档某个元素的显示效果时，可以使用类型选择符；（如：改变文档所有p段落样式）
3.类（class）选择符
语法 ： .class名{属性：属性值;}
用法：class选择符更适合定义一类样式；
(1)当我们使用类选择符时，应先为每个元素定义一个类名称，
(2)类选择符的语法格式：
如：
.top{属性:属性值;}
4.ID选择符
语法： <标签 id=“名”>
#id名{属性：属性值;}
（1）可以给每个元素使用id选择符，但id是元素的唯一标识符，不可出现重复的id名；
如：
（2）id选择符的语法格式是“#”加上自定义的id名
如：#box{width:300px; height:300px;}
(3) 起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字)
如：div标记
(4)一个id名称只能在文档中出现一次，因为id是唯一的
(5) 最大的用处：创建网页的外围结构。(唯一性、起名字不能使用关键字)
5.伪类选择器
:link {color: red;} /* 未访问的链接状态 */
:visited {color: green;} /* 已访问的链接状态 */
:hover {color: blue;} /* 鼠标滑过链接状态 */
:active {color: yellow;} /* 鼠标按下去时的状态 */
说明：
1）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：
a，a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；
2）为了简化代码，可以把伪类选择符中相同 的声明提出来放在a选择符中；
例如：a{color:red;} a:hover{color:green;}
表示超链接的三种状态都相同，只有鼠标划过变化颜色
6.通配符
语法：*{属性：属性值;}
说明：通配选择符的写法是“*”，其含义就是所有标签；
表示该样式适用所有网页元素；
用法：常用来重置样式。
例：*{margin:0;padding:0;}
7.群组选择符
语法：选择符1，……，选择符5 {属性：属性值;}
说明：当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组。
实例：.top, #nav, p{width:100px;}
8.包含选择器（后代选择器）
语法：选择符1(父) 选择符2（后代）{属性：属性值;}
选择符父级 选择符子级{属性：属性值;}
说明：选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2;
实例： div ul li{height:200px;}
9.选择符权重
css中用四位数字表示权重，
权重的表达方式如：0，0，0，0；
权重规则：HTML标签(类型选择符)的权重是1，class的权重是10，id的权重是100。
类型选择符的权重为0001
class选择符的权重为0010
id选择符的权重为0100
属性选择符的权重为0010
伪类选择符的权重为0010
伪元素（对象）选择符的权重为0001
包含选择符的权重：为包含选择符的权重之和
内联样式的权重为1000
继承样式的权重为0000
群组集合选择符权重为他本身
通配符的权重为0000
注：如果权重相同时，则执行后写的样式；
css层叠性
css层叠指的是样式的优先级，当产生冲突时以优先级高的为准。
1. 开发者样式>读者样式>浏览器样式（除非使用!important标记 ）
2. id选择符>（伪）类选择符>元素选择符
3. 权重相同时取后面定义的样式
CSS属性
属性：属性是指定选择符所具有的属性，它是css的核心，css2共有150多个属性
属性值：属性值包括法定属性值及常见的数值加单位，如25px，或颜色值等。
文本属性
1:文本大小 font-size
说明：
1） 属性值为数值型时，必须给属性值加单位，属性值为0时除外。
2）单位还可以是pt，9pt=12px;
3）为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体大小默认值,即1em.默认情况下，1em=16px,0.75em=12px; rem
4）使用绝对大小关键字
xx-small =9px
x-small =11px
small =13px
medium =16px
large =19px
x-large =23px
xx-large =27px
2:文本颜色 color
说明：
用十六进制(是计算机中数据的一种表示方法)表示颜色值：
0 1 2 3 4 5 6 7 8 9
0 1 2 3 4 5 6 7 8 9 A B C D E F
颜色模式：光色模式
R G B
FF 00 00
颜色值的缩写：
当表示三原色的三组数字同时相同时，可以缩写为三位;
当用十六进制表示颜色值时，需要在颜色值前加“#”
# fa 00 00
3:文本字体 font-family:字体1，字体2，字体3…
说明：
浏览器首先会寻找字体1、如存在就使用改字体来显示内容，如在字体1不存在的情况下，则会寻找字体2，如字体2也不存在，按字体3显示内容，如果字体3 也不存在；则按系统默认字体显示；
当字体是中文字体时，需加双引号；
当英文字体中有空格时，需加双引号如（“Times New Roman”）
当英文字体只有一个单词组成是不加双引号；如：（Arial）；
Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial.
4:文字加粗f
ont-weight:bolder(更粗的)/bold（加粗）/normal（常规）/100—900;
说明：
在css规范中，把字体的粗细分为9个等级，分别为100——900，其中100对应最轻的字体变形，而900对应最重的字体变形，
100-400 一般 500常规字体 600-900加粗字体
5:取消倾斜，常规显示
font-style：italic/oblique/normal（取消倾斜，常规显示）;*
说明：
italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果.
6.**文字行高 **
{line-height:normal/value;}
说明：
当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；
当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上；
当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下（IE6及以下版本存在浏览器兼容问题）
*文字属性简写：font:12px/24px "宋体";
font属性的简写：字号，行高，字体
font-size:12px; line-height:24px; font-family:”宋体”；
font属性的简写：
说明:font的属性值应按以下次序书写(各个属性之间用空格隔开)
顺序: font-style font-weight font-size / line-height font-family
注意：
(1)简写时 , font-size和line-height只能通过斜杠/组成一个值，不能分开写。
(2) 顺序不能改变 ,这种简写法只有在同时指定font-size和font-family属性时才起作用,而且,你没有设定font-weight , font-style , 他们会使用缺省值（默认值）。
7：水平对齐方式
text-align:left/right/center/justify（两端对齐中文不起作用）
8:文本修饰
text-decoration:
说明：
none:没有修饰
underline:添加下划线
overline:添加上划线
line-through:添加删除线
9:首行缩进
1）text-indent可以取负值；
2）text-indent属性只对第一行起作用。
10:字间距、词间距
字间距{letter-spacing:value;}控制英文字母或汉字的字距。
词间距{word-spacing:value;}控制英文单词词距。
列表属性
1、定义列表符号样式
list-style-type：disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)；list-style-type:none===list-style:none;
2、使用图片作为列表符号
list-style-image：url(所使用图片的路径及全称)；
3、定义列表符号的位置
list-style-position:outside(外边)/inside(里边)；
list-style:none;去掉列表符号
边框属性
border:边框宽度 边框风格 边框颜色;
例如：border:5px solid #ff0000
边框：border,网页中很多修饰性线条都是由边框来实现的。
边框宽度：border-width:
边框颜色：border-color:
边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)可单独设置一方向边框，
可单独设置一方向边框，
border-bottom:边框宽度 边框风格 边框颜色;底边框
border-left:边框宽度 边框风格 边框颜色;左边框
border-right:边框宽度 边框风格 边框颜色;右边框
border-top:边框宽度 边框风格 边框颜色;上边框
背景属性
-
1、背景颜色 {background-color:颜色值;}
-
**2、背景图片的设置 background-image：url(背景图片的路径及全称)；**背景图片的显示原则
1）容器尺寸等于图片尺寸，背景图片正好显示在容器中
2）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；
3）容器尺寸小于图片尺寸，只显示元素范围以内的背景图。
网页上有两种图片形式：插入图片、背景图；
*插入图片：*属于网页内容，也就是结构。
*背景图：*属于网页的表现，背景图上可以显示文字、插入图片、表格等。 -
3、背景图片平铺属性{background-repeat:no-repeat/repeat/repeat-x/repeat-y }
-
**4、背景图的位置 性{background-position:left/center/right/数值 top/center/bottom/数值;}**水平方向上的对齐方式（left/center/right）或值
垂直方向上的对齐方式(top/center/bottom)或值
background-position:值1 值2;
两个值 ：第一个值表示水平位置的值，第二个值：表示垂直的位置。
当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置
说明：向左方向，向上方向是负值
背景属性的缩写语法：
background:属性值1 属性值2 属性值3；
背景缩写：background:url（背景图片的路径及全称） no-repeat center top #f00； -
5、背景图的固定 性{{background-attachment:scroll(滚动)/fixed(固定);}
fixed 固定，不随内容一块滚动；
scroll:随内容一块滚动。网页上常用的图片格式（压缩图片）
1)jpg :有损压缩格式（破坏性压缩），靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )如果网页中
2）gif：无损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;
3)png:无损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的 源文件格式，适用于颜色数量较少的图像;
表格属性
1、单元格间距：border-spacing:value;
说明：单元格间距(该属性必须给table添加) 表示单元格边框之间的距离， 不可取负值
2、合并相邻单元格边框：border-collapse:separate/collapse;
说明：合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值； collapse(边框合并)
3、无内容时单元格的设置：empty-cells:show/hide;
说明：定义当单元格无内容时，是否显示该单元格的边框区域；show：显示 ；hide：隐藏；
4、显示单元格行和列的算法(加快运行的速度)： table-layout:auto/fixed;
说明：只针对宽度起作用；
扩展：
:nth-child(2n+1) 结构为类选择器
（ 2n+1） （odd） 奇数
（ 2n） （even） 偶数
浮动
float：left （左）/right （右）/none （没有浮动）;
浮动的目的：
就是让竖着的元素进行横向排列，也就是能让元素和元素并排显示
浮动的显示规则：浮动对象会像左或者右移动直到遇到边框（border）、填充值（padding）、外边界（margin）或者另一个块元素为止。
无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。
显然标准流已经无法满足需求，这就要用到浮动。
标准文档流，在页面中独占一行，自上而下排列，也就是传说中的流
浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。
清除浮动语法：
clear : none | left | right | both
none：默认值。允许两边都可以有浮动对象
left：不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
注：只针对自身标签起作用
css属性继承
不可继承的：display、margin、border、padding、background、height、min-height、max- height、、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform。
块状元素可继承：text-indent和text-align
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。
盒模型
盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。
| padding用法: | |
|---|---|
| 1:padding是在盒子里面，在盒子与内容之间。 | |
| 2：padding的作用：控制子元素在父元素里面的位置关系。 | |
| 3：padding会把盒子撑大。 | |
| 4：如果想让盒子保持原有的大小：在宽高基础上减掉。（ 如果一个元素是被内容撑开的，没有设置固定的宽高，padding直接撑开。不用减掉 ） | |
| 5:如果给单一方向添加padding | |
| padding-top/bottom/left/right | |
| 6:padding的设置特点： | |
| padding:30px; 四周 | |
| padding:10px 30px; 上下 左右 | |
| padding:10px 30px 50px 上 左右 下 | |
| padding:10px 30px 50px 100px 上右下左 | |
| 7:padding不会对背景图的位置造成影响。 |
MARGIN
| margin用法 （外边距、边界） | |
|---|---|
| 1:margin在元素外围，不会撑大元素的大小 | |
| 2:作用:控制元素与元素之间的间距。 | |
| 3：给单一方向添加margin | |
| margin-left/right/top/bottom | |
| 4 :margin设置方法： | |
| margin:30px; 四周 | |
| margin:10px 30px; 上下 左右 | |
| margin:10px 30px 50px 上 左右 下 | |
| margin:10px 30px 50px 100px 上右下左 | |
| 5:margin:0 auto; | |
| 让当前元素在父元素里面左右居中。 | |
| 6:margin常出现的bug | |
| a:两个相邻元素上下的margin值 不会叠加 按照较大值设置。 | |
| b:如果父元素和第一个子元素没有浮动的情况下，给第一个子元素添加margin-top,会错误放在父元素上面。 |
盒子大小计算
文本溢出
overflow
visible:默认值，内容不会被修剪，会呈现在元素框之外；
hidden：内容会被修剪，并且其余内容是不可见的；
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
inherit：规定应该从父元素继承overflow属性的值。
white-space 空余空间
normal：默认值，多余空白会被浏览器忽略只保留一个；
pre：空白会被浏览器保留；
pre-wrap：保留一部分空白符序列，但是正常的进行换行；
pre-line:合并空白符序列，但是保留换行符；
nowrap:文本不会换行，文本会在同一行上继续，直到遇到
标签为止;
text-overflow （显示或者不显示省略号）
clip：不显示省略号（...），而是简单的裁切;
ellipsis：当对象内文本溢出时，显示省略标记；
文本溢出变省略号设置
省略号设置：
text-overflow属性仅是：当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：
1、容器宽度：width：value；（px、%，都可以）
2、强制文本在一行内显示:white-space：nowrap;
3、溢出内容为隐藏：overflow：hidden；
4、溢出文本显示省略号：
text-overflow：ellipsis;
注：必须是单行文本才能设置本文溢出！！！
css属性继承
不可继承的：display、margin、border、padding、background、height、min-height、max- height、、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform。
块状元素可继承：text-indent和text-align
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。
CSS文档流
- CSS 有三种基本的定位机制：普通流、浮动流、定位流。
POSTION
- position定位属性，检索或设置对象的定位方式
position属性值
| static | 默认值。位置设置为 static 的元素会正常显示，它始终会处于文档流给予的位置（static元素会忽略任何 top、bottom、left或 right 声明） |
|---|---|
| absolute | 相对于父级元素、的绝对定位，浮出、脱离布局流，它不占据空间，就是我们所说的层，其位置相对于最近的已定位父元素而言的位置，可直接指定“left”、“top”、“right” 以及 “bottom”属性。若父级都没有定位，则以可视窗口。(层叠的顺序z-index:value) |
| relative | 是相对于默认位置的相对定位，通过设置left、top、right、bottom值可将其移至相对于其正常位置的地方（相对于自己的开始的位置发生的位置上的移动，【不会破坏正常的布局流，占据空间】） |
| fixed | 相对浏览器的绝对定位，是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过 “left”、“top”、“right” 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。 |
| sticky | 可以看出是position:relative和position:fixed的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。 |
二、绝对定位和相对定位的区别
1、参照物不同，绝对定位的参照物是包含块（已定位的父元素），相对定位的参照物是元素本身默认的位置；
2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。
3、固定定位将对象从文档流中拖离出来因此不占据空间，始终相对浏览器可视窗口定位；
定位元素层次关系
z-index : auto |number
检索或设置对象的层叠顺序。
auto：默认值。
number:无单位的整数值。可为负数
没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上；
元素在浏览器窗口居中的方法
让一个元素始终在窗口水平、垂直位置居中：
1、div{width:200px;height:200px;background:#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;}
2、
div{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px;}
扩展：四则运算 calc()方法
注：运算符前后要留有空格
乘和除的时候 不能是固定的值 ，要是一个倍数；
锚点
命名锚点链接的应用：
命名锚点的作用：在同一页面内的不同位置进行跳转。
制作锚标记：
1)给元素定义命名锚记名
语法：<标记 id="命名锚记名">
2)命名锚记连接
语法：
宽高自适应
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是pc自适应。
自适应的优点：
元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。
宽度自适应
元素宽度设置为100%。（块元素宽度默认为100%）
或者不设置宽度（width）;（宽度是父元素的宽度）
高度自适应
1)自适应元素高度：height:auto;或者不设置;（是子元素撑开父元素的高度）
2)元素高度自适应窗口高度
设置方法：html,body{height:100%;}
注：如果设置子元素的高度跟随父元素的高度变化而变化，那么父元素必须有高度。
浮动元素父元素高度自适应（高度塌陷）
当子元素有浮动并且父元素没有高度的情况下父元素会出现高度塌陷
高度塌陷的解决方法
万能清除浮动法
选择符:after{
content:“";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
visibility:hidden/隐藏
visibility:hidden;和display:none;的区别：
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失不显示，也不再占用位置。
伪对象选择符
1）、::after : 与content属性一起使用，定义在对象后的内容。
语法：选择符:：after{content:”文字”;}
选择符:：after{content:url(图片路径)；}
如：div::after{content:url(logo.jpg);}
div::after{content:"文本内容";}
2）、::before: 与content属性一起使用,定义在对象前 的内容。
div::before{content:"在其前放内容";}
BFC
BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box（块）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC的布局规则
一、内部的Box会在垂直方向，一个接一个地放置。
二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）
三、每个元素的margin box的左边， 与包含块border box的左边相接触
四、BFC的区域不会与float box重叠。
五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
六、计算BFC的高度时，浮动元素也参与计算
哪些元素或属性能触发BFC
根元素(html)
float属性不为none
position为absolute或fixed
overflow不为visible
BFC的应用
1、自适应两栏布局
2、清除内部浮动 - 高度塌陷
3、防止margin上下重叠 - 常见的margin bug
图片整合（精灵图、css sprites、css精灵、雪碧图）
把网站里面的小图标有规则的整合在一起，利用 background-position 改变背景图的位置，每个图标应用。
优点:
（1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
（2）CSS Sprites能减少图片的字节；
（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。
（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。
缺点:
（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。
（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。
（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。
（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。
图片整合原则
1）边切图边整合。
2）定位时避免使用bottom,right等，用具体的数值，为了避免当你的宽度或高度上扩展sprites图时出现位置的错误。
3）将小图标预留足够的空间，因为使用这些图标元素通常会有大量的内容而且可能需要扩展的间距，以至于其它的图片可能会意外出现在本区域内。一般的情况下，会将这些小图标整合到文件的最右侧。
4）单张整合好的sprite图片在100KB以内。
5）按分类整合图片。
6）为了方便计算尺寸，一般情况会将sprites图的坐标计算成整数倍。
7）整合好的图片必须是背景透明的图片png或者gif
弹性元素
从元素类型分类
=> 行内元素 inline
=> 块级元素 block
=> 行内块级元素 inline-block
=> 弹性元素 flex(弹性元素不弹自己, 弹儿子
约定:
+ 我们管写了 display: flex 的元素叫做 弹性父元素
+ 管写了 display: flex 的元素的直系子元素叫做 弹性子元素
当一个元素开启了弹性布局以后, 会在浏览器出现一些默认弹性情况
1. 会生成一条主轴
=> 主轴方向是从左到右
2. 会生成一条侧轴
=> 侧轴方向是从上到下
=> 侧轴永远垂直于主轴
3. 弹性子元素在主轴方向上的排列方式
=> 默认从主轴开始方向向主轴结束方向排列
4. 尺寸问题
=> 当弹性子元素不设置宽高的时候
=> 主轴方向尺寸默认是元素内容的尺寸, 如果没有内容, 那么就是 0
=> 侧轴方向尺寸默认是侧轴长度, 父元素盒子长度
5. 弹性元素排列
=> 默认永不换行
=> 当子元素超出父元素范围的时候, 会默认挤压子元素内容区域
=> 当挤压到内容区域, 不能继续挤压的时候, 直接溢出父盒子
6. 允许换行以后, 会出现多条临时侧轴
=> 换多少行, 出现多少个临时侧轴
=> 多条临时侧轴的长度是一致的
书写在弹性父元素身上的样式
1. 主轴方向调整
=> 样式: flex-direction
=> 取值:
-> 默认: row 横向从左到右, 侧轴从上到下
-> row-reverse 横向从右到左, 侧轴从上到下
-> column 纵向从上到下, 侧轴从左到右
-> column-reverse 纵向从下到上, 侧轴从左到右
=> 注意:
-> 主轴可以有四种方向选择
-> 侧轴只能是 从左到右 或者 从上到下
2. 元素在主轴上的排列方式
=> 样式: justify-content
=> 取值:
-> 默认: flex-start 把所有元素当做一个整体排列在主轴开始位置
-> flex-end 把所有元素当做一个整体排列在主轴的结束位置
-> center 把所有元素当做一个整体排列在主轴居中的位置
-> space-between 把所有元素空余位置均分放在每两个元素之间(6个元素, 5个空)
-> space-around 把所有元素空余位置均分放在每个元素的两边(6个元素, 12个空)
-> space-evenly 把所有元素空余位置坐一个绝对均分(6个元素, 7个空)
(注意: space-evenly, 安卓不好使, ios 好使)
3. 允许换行
=> 样式: flex-wrap
=> 取值:
-> 默认: no-wrap 不允许换行
-> wrap 允许换行
-> wrap-reverse 允许换行并反转
4. 单行时侧轴的排列方式
=> 样式: align-items
=> 取值:
-> 默认: flex-start 在侧轴开始排列
-> flex-end 在侧轴结束排列
-> center 在侧轴居中位置排列
=> 注意: 当弹性子元素是多行的时候, 这个样式是有效果的
-> 当多行的时候使用 align-items 是以每一个临时侧轴为基准进行位置调整
5. 多行时侧轴的排列方式
=> 样式: align-content
=> 取值:
-> flex-start 把所有行元素当做一个整体排列在整体侧轴开始位置
-> flex-end 把所有行元素当做一个整体排列在整体侧轴结束位置
-> center 把所有行元素当做一个整体排列在整体侧轴居中位置
-> space-between 把所有行空余位置均分放在每两行之间(3行, 2个空)
-> space-around 把所有行空余位置均分放在每行两边(3行, 6个空)
-> space-evenly 把所有行空余位置绝对均分(3行, 4个空)
=> 注意: 当弹性子元素为单行的时候, 这个样式是没有效果的
弹性子元素相关的样式
1. 单独调整自己在侧轴上的排列位置
=> 多行的时候, 是单独调整自己在单独侧轴上的排列方式
=> 样式: align-self
=> 取值:
-> flex-start 自己放在侧轴的开始
-> flex-end 自己放在侧轴的结束
-> center 自己放在侧轴的中间
2. 元素顺序排列
=> 样式: order
=> 取值: 一个数字, 数字越大越靠后
3. 元素的默认尺寸设置
=> 样式: flex
=> 取值: 一个数字, 按比例计算
=> 计算方式
-> 当你给多个元素设置了 flex 样式以后
-> 首先计算非固定尺寸以外的数据(以下面结构为例, 剩余尺寸是 600)
-> 计算所有带有 flex 样式的元素的总和作为基数(以下面结构为例, flex 总基数就是 30)
-> 按照每一个元素的 flex 份数开始分配总剩余空间
+ 以下面结构为例
+ 2号元素就占据 600 的 8/30
+ 4号元素就占据 600 的 22/30
=> 注意:
-> 当我们不开启换行的时候, 元素如果超出父元素范围, 会挤压元素
-> 当你有了 flex 的元素, 会优先挤压
-> 挤压到 flex 的元素不能继续挤压了, 才会开始去挤压固定宽度元素
4. 是否允许挤压元素
=> 样式: flex-shrink
=> 取值: 0 or 1
-> 0 表示不参与压缩
-> 1 表示参与压缩
浏览器默认的背景相关内容
1.背景颜色(图片) 是填充到什么位置
=> content + padding + border 都会被填充
背景原点 从哪里开始的
=> 从 padding 左上角开始的
2. 调整填充范围(裁切范围)
+ 默认是 填充到 border 区域
+ 样式: background-cilp
+ 取值:
=> 默认: border-box 填充到 边框位置
=> padding-box 填充到 padding 区域
=> content-box 填充到 内容 区域
3. 调整图片原点
+ 默认是 padding 左上角是原点
+ 样式: background-origin
+ 取值:
=> 默认: padding-box padding 左上角开始
=> content-box 内容左上角开始
=> border-box 边框左上角开始
边框圆角
+ 样式: border-radius
+ 取值: 直接书写 数字+px 为单位即可
标准书写: 左上角x轴半径 右上角x轴半径 右下角x轴半径 左下角x轴半径 / 左上角y轴半径 右上角y轴半径 右下角y轴半径 左下角y轴半径
=> 在书写的过程中, 如果 x 轴和 y 轴半径一样, 可以省略 y 轴不写
=> 注意: 如果你要省略, 就省略四个 y 轴
简写:
=> 数写三个值, 表示 左上 右上和左下 右下
=> 书写两个值, 表示 左上和右下 右上和左下
=> 书写一个值, 表示四个角的圆
以左上角圆角为例: 15px 的圆角
+ 指的是盒子左上角的内切圆
=> x轴半径是 15px
=> y轴半径是 15px
盒子阴影
+ 样式: box-shadow
+ 取值: x轴偏移量 y轴偏移量 模糊 扩散 颜色
=> 书写的时候, 一个盒子可以书写若干个阴影, 多套之间使用逗号(,) 分隔
文字阴影
+ 样式: text-shoadow
+ 取值: x轴移动距离 y轴移动距离 模糊 颜色
=> 在书写的时候, 可以书写若干个文字阴影, 多个之间使用逗号(,) 分隔
js
-
js三大组成部分
1-1. DOM - Document Object Model 文档对象模型
=> 一整套操作页面元素的属性和方法
1-2. BOM - Browser Object Model 浏览器对象模型
=> 一整套操作浏览器相关内容的属性和方法
1-3. ECMAScript
=> js 的语法
+ 核心: 使用 ECMAScript 的语法去操作 DOM 和 BOM 发生变化
-
JS 的三种引入方式
2-1. 行内式(墙裂不推荐)
=> a 标签
-> 直接书写在 href 属性值的位置, 书写一个 javascript: 一段js代码 ;
=> 非 a 标签
-> 需要一个行为属性来执行 js 代码
-> 示例(onclick),
2-2. 内嵌式(不推荐)
=> 在当前页面书写一个 script 标签, 把 js 代码直接书写在 script 标签内
=> 打开浏览器的时候, 会直接执行 script 标签内的 js 代码, 不需要任何行为
=> script 标签可以书写在页面任意位置, 推荐书写在 head 的末尾或者 body 的末尾
-> 目前我们建议书写在 body 的末尾
=> 一个页面可以书写多个 script 标签, 会按照从上到下的顺序依次执行每一个标签内的 js 代码
2-3. 外链式(推荐)
=> 把 js 代码书写在一个 .js 后缀的文件内
=> 在当前页面使用 script 标签的 src 属性引入
=> 注意: 当一个script 标签被当做外链式引入 js 代码以后, 不能在当做内嵌式使用, 写在标签对内的代码没有意义
=> script 标签可以书写在页面任意位置, 推荐书写在 head 的末尾或者 body 的末尾
-> 目前我们建议书写在 body 的末尾
=> 一个页面可以书写多个 script 标签, 会按照从上到下的顺序依次执行每一个标签内的 js 代码
3. 常用的三种输出方式
3-1. alert() 弹出层
3-2. console.log() 控制台打印
3-3. document.write() 页面输出
+ 书写: () 内书写的内容
=> 如果书写纯数字, 可以不写引号, 因为就是数字输出
=> 如果带有其他内容, 必须要书写引号, 因为表示单纯的文本输出
=> 如果没有引号, 表示变量输出
+ 示例:
=> alert(123456)
=> console.log(‘hello’)
=> document.write(hello)
-> 输出的当前内存中 hello 这个变量保存的值
-> 如果没有 hello 这个变量, 就报错 xxx is not defined
4. 定义变量
+ 语法: var 变量名 = 值
=> var 定义变量关键字
=> 变量名 你自己起的名字
=> 等于号(=) 赋值符号
=> 值 该变量内存储的内容
+ 几种形式
=> var n
=> var n = 10
=> var n, m, x, y
=> var n, m = 100, x = 200, y
5. 变量名的命名规则和规范
+ 规则: 你必须遵守, 不遵守就是错的
\1. 变量名只能由 数字(0-9) 字母(a-zA-Z) 下换线(_) 美元符($) 组成
\2. 变量名不能由 数字开头
\3. 变量严格区分大小写
\4. 不能使用关键字和保留字
=> 关键字: js 语法中正在使用的关键字 var id for …
=> 保留字: js 语法将来可能会用到的关键字
+ 规范: 建议你遵守
\1. 变量语义化
\2. 驼峰命名法
=> 大驼峰: 第二个单词开始首字母大写 userName userEmail
=> 小驼峰: 第二个单词开始中间使用下划线连接 user_name user_email
\3. 不要用中文
6. 数据类型分类
6-1. 基本数据类型
=> Number 数值
-> 整数
-> 浮点数(小数)
-> 科学计数法 10e5
-> 其他进制表示的数值
+ 0b 二进制
+ 0x 十六进制
+ 0o 八进制
=> String 字符串
-> 单引号或者双引号包裹的就是字符串
-> 模板字符串 反引号(``)
=> Boolean 布尔
-> true
-> false
=> Undefined 空
-> undefined
-> 表示定义没有赋值
=> Null 空
-> null
-> 表示有值, 有一个空值
6-2. 复杂数据类型(地址数据类型/引用数据类型)
=> Object
=> …
7. 检测数据类型
7-1. typeof
=> 语法:
-> typeof 数据
-> typeof(数据)
=> 示例:
-> typeof 10 + 20
-> typeof(10 + 20)
=> 返回值(结果): 一定是一个字符串类型
-> 数值: 'number’
-> 字符串: 'string’
-> 布尔: 'boolean’
-> undefined: 'undefined’
-> null: 'object’
=> typeof 只能准确的检测基本数据类型
-> 准确的检测 function
=> 当多个 typeof 连用的时候, 返回值一定是 'string’
7-2. isNaN()
=> 专门检测是否是 非数字 的方法
=> 语法: isNaN(要检测数据)
=> 返回值: 一定是一个布尔值
-> true 表示你检测的内容是一个 非数字(不是数字)
-> false 表示你检测的内容不是一个 非数字(是数字)
7-3. Object.prototpye.toString.call(你要检测的数据)
=> 返回值: 必然是一个字符串类型
-> '[object 你检测的数据类型单词]'
=> 可以准确的检测所有数据类型
8. 数据类型转换
8-1. 转数值
+ Number()
=> 语法: Number(你要转换的数据)
=> 返回值(结果): 转换好的数值类型
=> 转换规则: 把要转换的数据当做一个整体来看待
-> 如果可以转换成合法数字, 那么就是一个数字
-> 如果不可以转换成合法数字, 那么就是 NaN(Not a Number)
+ parseInt()
=> 语法: parseInt(你要转换的数据)
=> 返回值(结果): 转换好的数值类型
=> 转换规则:
-> 不管是什么数据类型, 都是一位一位看待
-> 如果第一位就不能转换成合法数字, 那么直接返回 NaN 结束转换
-> 如果第一位可以转换, 那么保留, 继续看第二位
-> 以此类推, 直到不能转换的为止
+ parseFloat()
=> 语法: parseFloat(你要转换的数据)
=> 返回值(结果): 转换好的数值类型
=> 转换规则:
-> 和 parseInt 一模一样
-> 只是可以识别一个 小数点
+ 非 加法 的数学运算(隐式转换)
=> 当两个数据进行非加法的数学运算的挥手
=> 会先把数据都转换成数值类型, 在进行计算
=> 计算出来的结果一定是一个数值类型
8-2. 转字符串
+ String()
=> 语法: String(你要转换的数据)
=> 返回值(结果): 转换好的字符串类型
=> 所有数据都可以转换
+ toString()
=> 语法: 你要转换的数据.toString()
=> 返回值(结果): 转换好的字符串类型
=> undefined 和 null 不能转换
=> 注意: cannot read property(名字) of undefined(null)
-> 你一定写了一句代码是 xxx.名字()
-> 证明你的 xxx 是 undefined 或者
+ 进行字符串拼接
=> 使用 加号(+) 进行字符串拼接
=> 在 js 内 加号(+) 有两个作用
-> 字符串拼接: 当运算符号任意一边是字符串的时候, 会进行字符串拼接
-> 数学运算: 只有符号两边都是数值或者布尔的时候, 会进行数学运算
=> 在字符串拼接的时候, 为了不改变原始字符串
-> 一般会拼接一个 空字符串(’’)
8-3. 转布尔
+ Boolean()
=> 语法: Boolean(你要转换的数据)
=> 返回值(结果): 转换好的布尔类型
=> 在 js 中, 只有五个内容是 false, 其余全都是 true
-> 数值 0
-> 数值 NaN
-> 空字符串 ''
-> undefined
-> null
+ 双取反(!)
9. 运算符
9-1. 算数运算符(数学运算符)
1.+(两个作用)
2. -
**+ ***
3. /
4. %
9-2. 赋值运算符
1. =
2. +=
3. -=
*4. =
5. /=
6. %=
9-3. 比较运算符
1.>
2. <
3. >=
4.<=
5. == 只比较值, 不管数据类型
6.=== 值和数据类型都比较
7. != 只比较值, 不管数据类型
8.!== 值和数据类型都比较
9-4. 逻辑运算符
1.&& 同真则真，一假则假
2.|| 一真为真，同假则假
**3.! **
=> 本身是 true 结果是 false
=> 本身是 false 结果是 true
+ 短路表达式
=> 作用1: 用来执行一段代码
-> && 短路
+ 10 > 5 && console.log(‘hello world’)
+ 5 > 10 && console.log(‘hello world’)
-> || 短路
+ 10 > 5 || console.log(‘hello world’)
+ 5 > 10 || console.log(‘hello world’)
=> 作用2: 用来获取一个值
-> && 短路
+ var res = 10 > 20 && 30 > 20
+ var res = 20 > 10 && 30 > 20
+ 如果前面一半是 false, 那么 res 得到的就是 false
+ 如果前面一半是 true, 那么 res 得到的一定是后面一半的结果
-> || 短路
+ var res = 10 > 20 || 30 > 20
+ var res = 20 > 10 || 30 > 20
+ 如果前面一半是 true, 那么 res 得到的就是 true
+ 如果前面一半是 false, 那么 res 得到的一定是后面一半的结果
9-5. 位运算(不纠结)
1. & 位与
2.|
3.^
4.~
5.<<
6.>>
7.>>>
9-6. 自增自减运算符
1.++
2. –
+ 示例: ++
=> 前置++: ++ 在变量前面
=> 后置++: ++ 在变量后面
=> 共同点: 都会进行 +1 运算
=> 区别: 在于参与运算的时候
-> 前置++: 先把变量的值改变, 用改变以后的值参与运算
-> 后置++: 先把变量的值参与运算, 然后在改变变量的值
9-7. 三目运算符(三元表达式)
+ 条件 ? 成立 : 不成立
+ 作用1: 用来执行代码
=> 20 > 10 ? console.log(‘你说的对’) : console.log(‘滚犊子’)
=> 10 > 20 ? console.log(‘你消音’) : console.log(‘你说得对’)
=> 执行一段简单的代码
+ 作用2: 用来进行赋值
=> var sex = 1 // => 表示性别 1 男性 0 女性
=> var gender = sex === 1 ? ‘男’ : '女’
–>
/*
字符串扩展
+ 在 js 内 单引号 或者 双引号 包裹的都是字符串
+ 在 js 内 反引号(``) 包裹的也是字符串, 起名叫做 模板字符串
+ 从字符串的角度来说, 是没有区别的
模板字符串优势
1. 可以直接换行书写
2. 可以直接在字符串内解析变量
=> 当你需要在模板字符串内解析变量的挥手书写 ${ 变量 }