快捷键：
ctrl+s：保存
ctrl+a：全选
ctrl+x：剪切
ctrl+c：复制
ctrl+v：粘贴
ctrl+z：撤销
ctrl+y：前进
shift+end：从头选中一行
tab：向后缩进
shift+tab:向前缩进
alt+鼠标左键：多光标
ctrl+g：导航
HTMNL：结构 CSS：样式 Javascript：行为
HTML:超文本、标记、语言
超文本：文本内容+非文本内容（图片、视频、音频等）
标记：<单词> 标记也叫标签 例：<header><footer>
写法分成两种：单标签：<单词> 双标签：<单词>\</单词>
语言：编程语言
创建标签的快捷键：单词+tab
标签可以上下排列也可以组合嵌套
标签的属性：来修饰标签的，来设置标签的一些的功能。
<标签 属性=“值” 属性2=“值”.....>
为了符合规范，要写初始代码。快捷键：！+tab
!DOCTYPE html ：文档声明，告诉浏览器这是一个html文件
html lang="en" ：html文件的最外层标签：包裹着所有html标签代码 lang="en"表示是一个英文网站 lang="zh-CN"表示是一个中文网站
head ：网页最上方（输入网址的地方及以上）
meta charset="UTF-8" ：源信息，是编写网页中的一些赋值信息 charset="UTF-8"是国际编码，让网页不出现乱码的情况
title>Document</title ：设置网页的标题
/head
body
显示网页内容的区域
/body
/html
HTML注释：在代码中是看得见的，在浏览器中看不见
写法：!-- 注释的内容 --
意义：1.把暂时不用的代码藏起来，方便以后使用
2.对开发人员进行提示作用，例：标注此处的代码是用来做什么的
快捷添加注释与删除注释：
1.ctrl+/ 光标放在开头按住即可添加或删除
2.shift+alt+a 选中才能使用，但不知道为什么我无法使用
HTML语义：
什么结构就使用什么标签 例：h标签是标题 p标签是段落
h标签：双标签 可以分h1——h6，h1只可以出现一次，h5 h6用到比较少
p标签：双标签
文本修饰标签：
强调双标签：<strong></strong>、<em></em>
区别：1.写法与展示效果是有区别的，一个加粗，一个斜体
2.strong的强调性更强，em的强调性更弱
下标：<sub></sub>
上标：<sup></sup> <del></del> <ins></ins>:删除文本、插入文本
注：一般情况下，删除文本和插入文本配合使用
图片标签与图片属性：单标签
快捷键：img+tab <img src="转存失败，建议直接上传图片文件 " alt="转存失败，建议直接上传图片文件">
src:引入图片的地址
alt：当图片出现问题的时候，可以显示一段友好的文字提示
title:提示信息，光标放上去时，会有提示信息
width、height：图片的大小，当不加这两个属性时，虽然会默认大小，但会因为刷新效果，影响客户体验
引入文件的地址路径：
1.相对路径
.在路径中表示当前路径，及同层级文件夹或者下一级文件夹
..在路径中表示上一级路径，及上一级文件夹
2.绝对路径
1.图片在文件夹中的绝对路径，加最前面加/，会自动找到在什么盘，正斜线/和反斜线,都不影响，但规范写法，还是用正斜线
2.图片的网址，不会影响其他人在其他电脑上使用，不能使用反斜线\\
跳转链接：
<a>标签 双标签
href属性：链接的地址
target属性：可以打开链接打开的方式，默认情况下：在当前页面打开 \_self 新窗口打开 \_blank <base>：单标签，作用是改变链接的默认行为。一般写于<head>当中 \<base target="\_blank"
跳转锚点：1.#号+id属性 例：<a href="#1"></a> <h id="1">
2.#号+name属性 <a href="#1"></a> <a name="1"></a> <h>
特殊符号：&+字符 解决冲突 例：<> 加多个空格
空格符号：\ ；
版权：\©；
注册商标：\®；
小于号：\<；
大于号：\>；
和号：\&；
人民币：\¥；
摄氏度：\°；
无序列表：
<ul><li> 符合嵌套规范 ul和li之间不能有别的标签
type属性：改变前面标记的样式（一般都是用css控制）
有序列表：
<ol>：列表的最外层容器 <li>:列表项
注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表
type属性：改变前面标记的样式（一般都是用css控制）
定义列表：
<dl>:定义列表 <dt>:定义专业术语或名词 <dd>:对名词进行解释和描述
嵌套列表：
列表之间可以互相嵌套形成多层级列表
表格标签：
<table>:表格最外层容器
<tr>：定义表格行
<th>：定义表头
<td>：定义表格单元
<caption>：定义表格标题
注：之间是有嵌套关系的，要符合嵌套规范
语义化标签：
<thead> <tbody> <tfoot> 不会改变显示结果，只是帮助更好的梳理，更符合规范写法\
注：在一个table中，tbody是可以出现多次的，但是thead和tfoot只能出现一次
表格属性：
border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式 left、center、right
valign：上下对齐方式 top、middle、bottom
表单标签：
<form>:表单的最外层容器
：
标签用于搜索用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
inpput：type属性 含义
text 普通的文本输入框 placeholder：在框中显示的文字
password 密码输入框
checkbox 复选框 checked、disabled :自动选择和不可选择
radio 单选框
file 上传文件 multiple：多选
submit 提交按钮
reset 重置按钮
多行文本框:<textarea>
下拉菜单： <select> <option>\
size：显示项数 selected表示当前默认此选项
multiple：多选 disabled：不可选择
辅助表单：<label> 可以扩大选择可点击的范围
div与span
div(块):做一个区域划分的块
div全称为division，“分割、分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
span(内联):对文字进行修饰的内联
用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行。
css基础语法：
格式：选择器{属性1：值1：属性2：值2} 在<head>中插入<style>标签内写
单位：px：像素、%：百分比
基本样式：width、height、background-color
css注释：/\* css注释的内容 \*/ 快捷键：ctrl+/或shift+alt+a
css样式的引入方式
1.内联样式 style属性 在<head>中插入<style>标签内写
2.内部样式 style标签 在<body>中的标签内部写
区别：内部样式的代码可以复用、符合w3c的规范标准，让结构和样式分开处理。
3.外部样式：引入一个单独的css文件，name.css
通过<link>标签引入外部资源，rel属性：指定资源跟页面的关系，href属性：资源的地址
第一种引入方式：<head>
\<link rel="stylesheet" href:"。/文件所在位置"> </head>
第二中引入方式：@import 有很多问题，不建议使用 <head> <style>@import url('./文件所在位置')</style> </head>
css中的颜色表示法
1.单词表示法：red bule green
2.十六进制表示法：#000000 最小值（黑色） #ffffff 最大值（白色）
0 1 2 3 4 5 6 7 8 9 a b c d e f
3.RGB三原色表示法：r是红 g是绿 b是蓝
rgb（255，255，255） 最大值（白色） rgb（0，0，0） 最小值（黑色） 取值范围：0\~255
css背景样式 url（背景地址）
background—color:背景颜色
background—image：背景图片 默认水平垂直都铺满背景图
background—repeat：背景图片的平铺方式 repeat—x repeat—y repeat（x，y 都进行平铺，默认值） no-repeat 都不平铺
background—position：背景图片的位置 x y：number（px、百分比）或单词：x：left、center、right y：top、center、bottom
background—attachment：背景图随滚动条的移动方式 scroll：默认值（背景位置是按照当前元素进行偏移的）fixed：背景位置是按照当前浏览器进行偏移的
css边框样式；
border-style：边框的样式
solid：实线
dashed：虚线
dotted：点线
border-width：边框的大小
px...
border-color：边框的颜色 颜色：透明颜色 transparent
red #ffffff...
注：针对某一条边进行单独设置 例：border-right-style: 中间是方向 left、right、top、bottom
css文字样式：
font-family：字体类型
英文字体：Arial、'Times New Roman'
中文字体：微软雅黑、宋体
中文字体的英文名称：
微软雅黑：'Microsoft YaHei'
宋体：SimSun
衬线体与非衬线体:现在多用非衬线体
多语言设置：在font-family：字体类型1，字体类型2，字体类型3，...优先识别使用靠前的
引号的使用：当字体类型里出现空格的时候需要用引号引起来，没有空格的不需要
font-size：字体大小 默认：16px 写法：font-size：number px/单词写法
单词写法： 属性取值 字体大小 不推荐使用
xx-small 最小
x-small 较小
small 小
medium 正常（默认值）
large 大
x-large 较大
xx-large 最大
注：字体大小一般为偶数
font-weight:字体粗细
模式：正常（normal） 加粗（bold）
写法：单词（normal、bold）/number（100 200 ...... 900，100到500都是正常的，600到900都是加粗的）
font-style：字体样式
模式：正常（normal） 斜体（italic）
写法：单词（normal、italic）
注：oblique也是表示斜体，一般用的少
区别：italic 带有倾斜字体的才可以设置倾斜操作 oblique 没有倾斜字体的也可以设置倾斜操作
color：字体的颜色
段落样式：
text-decoration：文本装饰
下划线 underline
删除线 line-through
上划线 overline
不添加任何装饰：none
多个装饰：text-decoration：单词1 单词2 单词3 （用空格隔开）
text-transform：文本大小写（针对英文段落）
小写：lowercase
大写；uppercase
只针对首字母大写：capitalize
text—indent：文本缩进
首行缩进
em单位：相对单位，1em永远都是跟字体大小相同
text-align：文本对齐方式
对齐方式：left、right、center、justify（左右均对齐）
line-height：定义行高 行高由上边距、字体大小、下边距 组成 所有上下边距都是等价的
默认行高不是固定值，也随着字体大小变化
取值：1.number（px）/number（scale比例值、跟文字的大小成比例）
letter-spacing：定义字间距
word-spacing：定义词间距（针对英文）
强制折行；（针对英文）
1.word—break:break-all；(非常强烈的折行)
2.word-wrap：break-word；（不是那么强烈的折行，不会把一个单词折了，而是另起一行）
css复合样式
一个css属性只控制一种样式，叫单一样式
一个css属性控制多种样式，叫复合样式
复合样式：background、border、font
复合的写法是通过空格实现的 例：background：red； url（背景地址） no-repeat center center;（有两个center 是因为x轴y轴，两个不能分开）
注：复合写法有些是不需要关心顺序的，例：background、border； 有些是要按照顺序的，例：font
font：至少要有两个值 size family
weight style size family √
style weight size family √ 永远size和family是写在最后且注意顺序
eight style size/line-height family √ color无法加入进去
注：尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式
css选择器
1.id选择器
\#elem{} id=“elem” 快捷键 例如;<p id="1"> p#1+tab
注：1.在一个页面中。id只能出现一次，出现多次是不符合规范的
2.命名的规范，由字母/划线/中划线、数字 组成 （第一个不能为数字）
3.命名方式：不要随便起名，最好是有语义的，例如写那块是干嘛的-
驼峰写法：searchButton（小驼峰） SearchButton（大驼峰） searchSmallButton
短线写法：search-small-button w3c推荐写法
下划线写法：search\_small\_button
2.class选择器
.elem{} class="elem"
注：1.class选择器是可以复用的 类似于两个p都用同一个class id
2.可以添加多个class样式 类似于一个p可以使用多个css class
3.多个样式的时候，样式优先级根据css决定的，而不是class id里的顺序 通常生效css中更靠后的class样式
4.标签+类的写法 类似于p.elem{} 这样就算是div也是同样的id 也不会生效
3.标签选择器(TAG选择器)
div{} <div></div>
使用的场景：1.一般会用于你想要消除掉全部的某些标签的默认设置
2.复杂的选择器中，如：层次选择器
4.群组选择器（分组选择器）
可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用 如：div，#id，.class
5.通配选择器
*{}
会给所有的标签都添加上样式，一般不介意使用
6.层次选择器
后代 M N {} 会选择M标签里所有的后代N标签
父子 M > N {} 会选M标签里下一层级的N标签，不包括所有后代
兄弟 M ~ N {} 会选择M下面所有的N标签
相邻 M + N {} 会选择M下面相邻的N标签
7.属性选择器
M[attr] 所有M标签中有attr属性的
M[attr=value] 所有M标签中有attr且值必须是value的
M[atter*=value] 所有M标签中有attr且值带有value的
M[atter^=value] 所有M标签中有attr且起始值是value的
M[atter$=value] 所有M标签中有attr且结束值是value的
M[atter1][atter2]...[] 组合的方式，所有含attr1和attr2的
8.伪类选择器 用于向某些元素添加特殊的效果，一般用于初始样式添加不上的时候，用伪类来添加
M:伪类{}
:link 访问钱的样式 （只能添加给a标签）
：visited 访问后的样式 （只能添加给a标签）
：hover 鼠标移入时的样式 （可以添加给所有标签）
：active 鼠标按下时的样式 （可以添加给所有标签）
注：如果要同时使用这四个伪类，要注意顺序 L V H A。一般网站都只设置 a{}（link、visited、active）和a：honer{}
：after before 通过伪类的方式给标签内的内容在前面或后面添加一段文本内容 使用的是content属性 写法: M:before{content：""}
用法：可以专门给添加的文本改变样式
：checked disabled focus 都是专门针对表单元素的
当被checked后，才会出现css中 :checked 的样式或者在body部位的表单标签内含有checked属性的 disabled同上
：focus，是光标点击后才会出现的样式
9.结构性伪类选择器
M:nth-of-type(数字、n代表0~无穷，2n代表偶数行，2n+1可以代表奇数行) :nth-child
:first-of-type（选中第一个M标签） :first-child
:last-of-type（选中最后一个M标签） :last-child
:only-of-type （只有一个M标签时，才可以被选中） :only-child
type和child的区别：type是在M标签的顺序中选择 child是在M标签的同一级中的所有标签中去选择，如果选中的是同级的N标签，甚至不会有效果
css样式继承
文字相关的样式可以被继承
布局相关的样式不能被继承（默认是不能继承的，但可以设置继承属性 inherit值）
例如：div里包含一个p标签 当对div进行css样式编辑时，如果是属于布局相关的样式，p标签内的内容是不受影响的，如果是属于文字相关的样式是可以影响p标签内的内容，但如果布局相关的样式也影响到p，在css中加p{布局属性：inherit;}即可
css优先级
1.相同样式优先级：当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况
2.内部样式与外部样式：内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高
3.单一优先级：style行间>id>class>tag>\*>继承
注：style行间 权重 1000
id 权重 100
class 权重 10
tag 权重 1
4.!important：提升样式优先级，非规范方式，不建议使用。一般用于样式太多，无法大量改动或样式挪不了位置等情况。（无法对继承样式使用）
5.标签+类：如：div.box > .box
6.群组优先级：群组选择器与单一选择器的优先级相同，靠后写的优先高
7.层次优先级：1.权重比较
ul li .box p inputZ{} 权重1=1+1+10+1+1 （这里代表的不是数值，而是等级，就算是100个1也没有10大）
.hello span #elem{} 权重2=10+1+100
权重2>权重1
2.约分比较
ul li .box p input{} 等级相同的约分以后： li p input{}
.hello span #elem{} #elem{}
注：写层次选择器的时候尽量避免写3个以上
css盒子模型：
1\. 组成：content padding border margin
物品 填充物 包装盒 盒子与盒子之间的间距
content：内容区域，width和height组成的
padding: 内边距（内填充） 边框到内容的距离
1.用number：~px来决定大小 只写一个值：~px（上下左右） 写两个值~px ~px（上下、左右） 写四个值~px ~px ~px ~px（上、右、下、左）
2.用padding—left/right/top/bottom来决定哪条边 此种写法只能写一个值
margin：外边距（外填充） 两个盒子之间的距离
1.用number：~px来决定大小 只写一个值：~px（上下左右） 写两个值~px ~px（上下、左右） 写四个值~px ~px ~px ~px（上、右、下、左）
2.用margin—left/right/top/bottom来决定哪条边 此种写法只能写一个值
注：1.背景色会填充到margin以内的区域（不包括margin） 思考题：背景图是什么样的填充
2.文字只会在content区域
3.padding不能为负数，而margin可以
2.box-sizing：盒尺寸，可以改变盒子模型的展现形态
默认值：box-sizing：content-box：width、height --> content 加上此代码表示此时编辑的width和height只作用于content
box-sizing：border-box: width、height --> content、padding、border 此时表示width和height分给这3个部分
使用场景：1.不用去计算一些值，类似于你想要这3个部分加起来只有~px
2.解决一些100%的问题，如：当密码框设置成100%时，会随着网页的大小进行变化，但如果加一个边框，就不会随着网页大小的变化而变化了，而加这个代码可以解决这个问题，当然也有css计算可以解决这个问题（~%=~px），但这里不用学习。
3.盒子模型的一些问题：
1.margin叠加问题，出现在上下margin同时存在的时候，会取上下种值较大的值（左右不会有这个问题）
解决方案：1.bfc规范（此处不学习）
2.尽量不要出现上下都有margin的情况，给其中一个添加margin属性就行
2.margin传递问题，只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的
解决方案：1.bfc规范
2.给父容器加边框
3.margin换成padding
思考题：把盒子模型操作添加给span标签，会不会出现同样效果
4.盒模型扩展：
1.margin自适应居中：margin左右自适应间距（margin-left/right：auto）是可以的，但是上下是不行的（正确写法：margin：0 auto；）
2.不设置content的现象：width、height不设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码。
标签分类：
按类型：block（块）：div、p、ul、li、h1...
1.独占一行
2.支持所有样式
3.不写宽的时候，跟父元素的宽相同
4.所占区域是一个矩形
inline（内联）: span、a、em、strong、img...
1.挨在一起的
2.有些样式不支持，例如：width、height、margin、padding （图片是例外）
3.不写宽的时候，宽度是由内容决定的
4.所占的区域不一定是矩形
5.内联标签之间会有空隙，原因：换行产生的
inline-block（内联块）: inpput、select...
1.拥有上面两种的特性
注：布局一般都用块标签，修饰文本一般用内联标签
按内容：flow：流内容 （看文件夹中的 按内容标签分类图）
metadata：元数据
sectioning：分区
heading：标题
phrasing：措辞
embedded：嵌入的
interactive：互动的
按显示：
替换元素：需要标签内的属性才显示一定的内容 如：img、input...
非替换元素：光标签就可以显示一定的内容 如：div、h1、p ...
显示框类型
display：
可以通过在css标签中加入属性display：block/inline/inline-block/none(隐藏，不显示) 来改变标签默认值
注：display：none与visibility：hidden 区别
前者是不占空间的隐藏，后者是占着空间的隐藏
标签嵌套规范：
快标签可以嵌套内联标签，块标签大部分能嵌套块标签（特殊：p标签内不能嵌套div，只能输入文本内容）
内联标签大部分不能嵌套块标签（特殊：a标签中可以嵌套块）
溢出隐藏
overflow：visible（默认）/hidden（隐藏溢出的内容）/scroll（可以通过拉条，上下左右调节出被隐藏的内容）/auto（自动调节是否需要拉条）
overflow-x、overflow-y 针对两个轴分别设置
css透明度与手势
opacity：0（透明）~~1（不透明） 0.5（半透明）
注：透明了也会占空间，并且所有内容都会透明
rgba（）：0~~1 rgb代表颜色 a代表透明度
注：可以让指定的样式透明，不影响其他内容
cursor：定义互动时鼠标光标样式 default（默认箭头）/...(还有很多样式)
要实现自定义手势：准备图片：.cur/.ico 写法：cursor：url(图片地址)，auto；
最大、最小宽高
max/min-weight/height 自适应宽高，代表着可以根据内容调节小于等于/大于等于多少宽高度
%单位：以父容器的大小进行换算的。（一个容器怎么适应屏幕的高，容器加height：100%； body：100%； html：100%；）
css默认样式：
1.没有默认样式的：div、span
2.有默认样式的：
1.body： margin：8px
2.h1： margin：上下 21.440px
font-weight：bold
3.p： margin：上下16px
4.ul：margin：上下16px padding：左 40px list—style（点样式）：disc（默认）
5.a：text-decoration：underline；（默认下划线）
注：有些默认样式可以帮助我们，但有些默认样式是影响到我们的网页开发的
css默认样式改变（css reset）：
\*{margin：0； padding：0；}
优点：不用考虑哪些标签有默认的margin和padding
缺点：稍微的影响性能，现在的浏览器都可以忽略，如果不想失去这一点性能，就这样写:body,p,h1，ul...{margin:0; padding:0;}
ul{ilist-style：none；} 不要默认点
a{text-decoration：none； color；#999；} 不要下划线
img{dispaly：block}/vertical-align：baseline；（默认值：基线对齐）/bottom（底线对齐）
问题的现象：图片跟容器底部有一些空隙。原因：因为内联元素的对齐方式是按照文本基线对齐的，而不是文字底线对齐。
解决：利用dispaly将其改变成块元素或者vertical-align：bottom（底线对齐）
写一个具体页面时或一个布局效果时：1.写结构 2.css重置样式 3.写具体样式
