目录
注释
注释的写法是<!-- -->，无论内部写什么，无论是标签还是普通文字都不会显示到浏览器上，只能存在于写的文件中，被写的人看到。
在vscode内用ctrl+/可没有时，添加注释，有时，在注释所在那一行任意位置都可以删除。
标题和段落标签
标题标签
h1~h6，是双标签 ，该标签可将标签内部的内容加粗，换行，最后一个字所在行独占一行。如果在span/div等被设置了宽度和高度的盒子内，就是相对父标签，独占一行。h1标签用于网页标题和logo，只用一次，h2是副标题，只用一次。
段落标签
p标签，是双标签，标签内开独占一行，如果多行，最后一个可独占一行。在该标签后内容，在浏览器显示时，会在最后一行，多处一行作为间隙，再显示。无论该标签后是什么。
对比：
| 相同 | 不同 |
| 最后一个字独占一行。 | 标题标签加粗，段落标签没有。段落标签有间隙，标题标签没有。 |
注意：再vscode中，在字当中写标签，可直接写标签内的字母，直接回车，可自动生成无论单标签或是双标签。只要前面有一个空格就可自动生成。
换行和水平线标签
换行标签
br，单标签，在某一个字后面写该标签，该标签会让后面一个在浏览器显示内容在下一行显示。浏览器无法识别换行键的。只能识别两个字之间的空格且只显示一个。
水平线标签
hr，单标签，在上一个字的下一行显示水平线占满父标签的宽。
文本格式化标签
为文本加特殊格式，strong,em,ins,del等标签带强调含义，它是默认浏览器显示这个，但是它是可以设置别的格式的，只是强调，浏览器默认显性以下，但是b,i,,u,s等是就是要设置这种效果。因此我们常用strong,em,ins,del等标签。这八个标签都是双标签，不换行，后面的可接着写。
图像标签img
图像标签是img，是单标签，可以在网页中插入图片，src属性用于指定图片位置和名称，是该标签的必须的属性。该标签还有alt属性，表示无法加载，加载速度慢时会显示的文本内容，title属性表示当图片显示时，鼠标停留在改图片上的提示内容。所有的属性写法都是=“”，带双引号。标签名或属性之间用空格隔开。
| 绝对路径，windows等其他操作系统是用盘符，如C:\use\admin.png，但是在windows操作系统内，既可以用\也可以用/来表示进入文件夹内寻找文件。 |
| 相对路径，.表示当前文件所在的文件夹，/表示进入该文件夹内，..表示该文件所在文件夹的所在文件夹。如./a.png |
| https://www.tmall.com/?spm=a2156.1676643.a2226n0.1.64dc195ayjrKKG 在其他网页复制图片所在地址/链接也可以。 |
超链接a
链接a是双标签。href是该标签的必要属性。是网页地址。点击该标签内的所写内容会跳转到href所在网址。默认跳转所在的页面在点击时的页面。修改target属性为target="_blank"可跳转到新页面。开发初期，不确定跳转地址，href的值可用#，不会跳转，和不写一样的。
| 绝对路径，直接将其他网页的地址复制 |
| 相对路径，用.或..可将自己的文件搞到网页上 |
| 相对路径，盘符。 |
音频和视频标签
音频标签
audio标签，是双标签。有controls属性，当属性名和属性值相同时，可直接写controls
当写controls，会将控制面板显示出。loop，属性名和属性值相同。当用户点击播放时，会自动循环播放，autoplay是页面出现时，自动播放。但是音频为了用户体验会禁用。src内和上面两一样。
视频标签
video标签，是双标签，src和之前一样。多的是muted标签都是属性名和属性值一样的，muted会打开网页时，静音，只有设置静音，才能设置autoplay有用。但是这些都可以用户去改，只是默认情况。这两个src地址只能写./这种写法。且有后缀名要求。
无序，有序，定义列表
这些列表无需写最外的ul/ol/dl都能有自己的功能，但是ul里面写li，ol里面写li让li有序，dl内有dd/dt
能整体控制内部。显示的格式特定的。
| 无序列表 | 有序列表 | 定义列表 |
| <ul> <li></li> <li></li> </ul> | <ol> <li></li> <li></li> </ol> | <dl> <dt></dt> <dd></dd> <dd></dd> </dl> |
表格
表格标签是table，标签内必须有tr，tr内必须有th/td，只有在td/th标签内的文本才能显示在表格内，且一行上有几个格子，几个td/th决定。th标签内加粗。必须有tr和th/td，要一行上只有一个格子，一定要td的。只有tr没用，显示的是td/th上的。tr不会显示。其实td和th就是是否加粗的区别。th可以不在表头的。thead和tfoot和tbody等是划分，且加载时，可以一块一块加载。表格内可以用多个tbody，但是其他只有一个。表格内如果行行不同的单元格数，就是每个都按某一行最小的单元格。
合并单元格
table标签有border属性，border属性无需写单位。设置整个表格边框宽度。td/th有rowspan，colspan所在td/th的下面/右边几个单元格组成一个单元格。要注意表格不要被破坏了。所有的属性值都是有”“，无论是数字啥的。colspan/rowspan标签是右边/下面几个单元格。如果设置了tbody/tfoot/thead必须在同一个包括下才能合并单元格。
表单和input标签
input标签有很多形式。placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。只用于input，且只有显示的能输入的文本框。
text是单行文本，不会有多行，无论在哪里显示的placeholder都是文本，在密码框上也不会是点。
| input，button有type=‘button’，submit/reset。重置/提交都可以有相同作用，但是必须在表单from标签内才有用。写在button标签内的也是value。button不写type，默认是submit。 | 但是input在按钮上显示的需要写在value属性上面，但是button标签写在标签内。 |
radio类型是圈，checkbox是正方形。可以选择。但是radio类型的，只要name相同就只能选中一个。checkbox即使name相同也可以选多个。checked默认打开网页显示。checkbox可多个，但是如果是name相同的只会选中最后面一个。input标签都不会换行。input是单标签。
下拉列表
select标签，没有multiple属性时，只能下拉，选中一个，有该属性时，滚动，可ctrl选中多个，如果时name，value和checkbox一样。size可设置选几个。默认选中是selected属性在option上。
文本域
<textarea>文本域是双标签，是显示为文本，显示网页右下角可以拉动，但是我们要设置它不变。但不变/不拉，写满会有滚轮，在下继续写。有cols，rows设置宽度和高度，name和id，不过高度和宽度是css来设置。
label标签
label标签是双标签，可以在标签内写有id属性的标签，无论写一个还是多个，label内除了标签外的文本点击可以，鼠标会点击有id属性的标签。或者如果label表情写for属性，和label外的标签的id属性相同，label标签内文本点击等于点击另一个标签，是点击。有for，for优先。
疑问1，点击label内文本时，对应标签是敲击事件吗？yes，会点击对应标签，对于下拉事件，系统点击不会显示下拉列表。
疑问2，for寻找label外的标签的id相同吗？会不会找label内。会，且那个在前就是就是那个标签。
div和span标签，字体实体
当不设置，div是相对父标签的宽独占一行，当div设置可以不独占一行。div和span都是盒子。
> < 带;这几个写在程序上在浏览器上显示就是> < 空格。如果在程序内写的是html的标签，且<p>这种，< p>这种程序不会识别，且浏览器上带有空格，如果是<p>，直接写会被认为是标签，不是标签是文本显示是用上面的。> 大于号，< 小于号  ； 空格，可在浏览器显示多个空格，如果在程序上敲空格只会识别文本之间且只显示一个空格无论敲了几个空格。
CSS引入
css的引入有三种方式，因为如果在html内写样式会不好维护，因此我们用css来。
1.内部
直接用标签的style属性名，内部设置css键值对。
如：<div style=" width:100px"> 但是内部写法都是：，value无论是什么都无需用双引号，键值对之间用空格或者；分开。
2.外部
在title标签下，head内写style标签。标签内写选择器，自上而下编译时，会将对应的标签设置对应的样式
如 <style>
p{
width:100px
}
</style>
3.外部引入css文件
在外部写css文件，文件内含有选择器，用link标签，href属性，交互，rel=stylesheet要写这个 Stylesheet -- 定义一个外部加载的样式表
标签上的属性名和属性值需要=‘’，属性之间用空格隔开，css样式无‘’，是：，可以用空格或者；隔开。
<link href=' ' rel='styleshee'>
选择器
1.标签选择器
该选择器是以标签名写的选择器，所写的css样式会给到所有这个标签
<style>
p{
width:100px
}
<.style>
2.类选择器
该选择器是以每个标签的class属性的属性值来找。如下
<style>
.a{
width:100px
}
<.style>
<div class=" a"></div>
class属性值可以写多个,以空格隔开，且style的class选择器.后只是一个类名，不能有多个。
<style>
.a{
width:100px
}
.b{
height:100px
}
<.style>
<div class=" a b"></div>
3.id选择器
<style>
#a{
width:100px
}
<.style>
<div id=" a"></div>
在html内每个标签的id的值一定是独一无二的，设置了id，在style内#id名，可以给对应的id的标签设置样式。但是一般不用id，id要给团队中做jjs的人来绑定事件，css不用id来设置样式。
4.通配符选择器
通配符选择器只需要在style标签内写
<style>
* {
width:100px
}
</style>
会给所有在浏览器上显示的标签设置该样式。设置样式其实就是给标签的盒子啥的，以及直接内部的文字设置样式。不会给子级标签设置但是会继承。
div高宽以及独占一行
div不设置样式，div是在浏览器上是一个盒子存在，不设置就是宽度是父级宽度，高度是是内部多高。但是我们div这个盒子的高度和宽度是可以设置的，用css。仍是独占一行，所在宽度不能被
用。独占网页的一行。无论父级啥的，就是独占网页宽度哪一行。span标签无法独占一行
这些都是什么类型标签决定的。background-color是背景颜色，color是字体颜色。
div设置内部文字水平居中，缩进等，里面设置的文字是多个1111111111，这种会溢出。
不会溢出的文字，写在标签内，写满div盒子的宽度，就直接写下一行。溢出会打乱页面分布，在程序上写上下行，在页面体现是空格。无论是文字或是标签。
文字控制属性
font-size字体大小
属性值是数字+单位，一般网页的单位是px，不设置单位没有用哦。设置该样式会让对应标签内部文字的字体大小为该值。无论是否溢出都显示字体大小为该值。
如 font-size:10px
font-weight字体粗细
属性值是
1.100，200，300，400，500，600，700，800，900从浅到粗字体，
2.关键字bold加粗（对应数字700），normal正常（对应数字400，同等效果）
可以设置标签内部文字的粗细。
font-style字体倾斜
属性值是关键字italic倾斜，normal正常，不倾斜。
设置这些可以让标签对应文字是否倾斜，有些标签自己设置这些样式，但是当在css设置1时会
用css，css的样式设置宽度和html属性来设置宽度，css起作用。
line-height设置行高
当标签内的文字没有设置行高时，在下一行都如下图
一行文字和下一行文字挨着。但是如果设置行高后，一行文字于一行文字亦或时文字于下一行内容文字都是自带间隙的。
属性值有数字+px，单位只是px哦。
直接写数字，表示是文字字体的倍数
line-height:2
行高是上间隙+字体高度+下间隙，上下间隙一定是相同的。因此如果是一段行高和字体大小设置的都是一样的，求行高是字体高度+某两行文字之间的间隙。
如果多行文字，设置行高是div等标签的高度，第一行文字是标签垂直居中，不设置是从标签内容左上角开始。
font-family设置文字的字体
属性名是字体名，设置标签文字内的字体是什么类型。
该属性值可以写多个字体名，但是从左到右哪个有就用哪一个。可以写中文也可以是英文。
最后一个必须写字体库。sans-serif是表示字体库，无衬线字体，是会寻找相似的字体。
font复合属性
html和css都是叫属性。不过写法不同。
font属性值是按下面顺序写，如果有就按下面写，但是字号（字体大小），和字体值必须要写，如果不写，font属性设置无效。
text-indent文本缩进
text-indent设置文本每段首行缩进多少，不设置就不缩进。属性值可以是
1.数字+px
2.数字+em 1em是缩进当前文本字体大小。2em是缩进当前文本字体大小的2倍。
text-align文本水平对齐方式
标签上的文本写的时候每一行都是放到哪，文本水平居中，内部所有标签都可以水平居中
left--左对齐，文本开头对其左边
centre--每一行文本都是居中
right--每一行文本靠右
text-decoration文本修饰
该属性值是设置文字是否具有删除，上划线，下划线等。无，这些都没。
属性值有以下四种。可以将标签内的文字设置为这种形式。
对于div盒子，在不溢出的情况下，文本对齐text-align和text-indent文本缩进是有效的，文本对齐方式是对于盒子来说的。
ackground-color是设置标签背景色。
所有的设置颜色不是照片啥
文字颜色
color是给文字设置颜色，b
的都是以下四种写法
1.div独占一行2.伪类选择器放中间怎么样
一.我设置了定位，发现独占一行的div一行上也可以有别的元素，所以独占一行是是啥意思？
个人认为独占一行是块状元素独占浏览器他的宽度那一行，当写在块状元素后面的元素，没写定位时，所有的标签都会放在下一行，但是当设置定位就不是了。
span不会独占一行，定位定到哪都可以，独占不独占都是指当没写定位的时候，标签后面的怎么样，span这种都是会都一行后面，而块状是下一行。行内块元素不独占一行。
二.伪类选择器不存在放中间这种，都是放选择器最后，放中间好像失效了。
复合选择器
后代选择器：找到父选择器的所有子代，第一级，第二级...子要是包括在父标签就行。
子代选择器：选中最近一代子代进行，和只有一个一样都是找到标签。，可以写多个选择器>选择器>选择器，会依次找。
并集选择器：选择器1的标签+选择器2的标签等都设置该样式
交集选择器，满足所有选择器要求的标签设置。标签和通配符必须放前面。
复合选择器中的基础选择器也是可以找到标签的只是它就是要经过这种找第二次。
伪类选择器
写在选择器后面会找到对应标签，在标签是该状态下显示样式，不是该状态不显示该样式。不写这种状态的选择器的样式/默认样式会被伪选择器样式覆盖。伪选择器样式也是有选择器之间的覆盖。伪选择器有五个还有一个focus获得焦点，但是普通的只有三个，没有link和visted。如果是同等的选择器中的状态，先后顺序需要是LVHA/VLHA，访问前，按下和悬停前的状态，只是显示出的状态，visited是悬停/点击及之后的的状态，需要放到前面。悬停包括按下。link可以写在任意位置。我们这些样式只在对应时机显示，不是对应状态不会显示，当不显示时，就是设定的/默认的。伪类选择器其实在特定时机去覆盖。相同属性就覆盖，不同的仍保持。
伪类选择器四个状态写的同类选择器的顺序LVHA（love+hate)
首先鼠标悬停，可能访问后悬停也可能未访问悬停在这表示悬停的样式，访问前包括访问前的一切状态包括访问前悬停都会被link设定，我们让hover在link后面样式会覆盖。所以访问前link需要写在hover前面，visited同理。hover要写在active前面，是点击时鼠标仍是悬停在标签上的。悬停也会设置点击时的样式，因为点击时也是悬停的。所以active写在hover后
。所以可以是LVHA/VLHA。
悬停，悬停在整个盒子上就会触发。
CSS选择器的三大特性
继承性
我们最后经过style会给标签设置样式，找到对应标签设置样式，给对应标签设置样式时，还会看子标签（内部所有标签）都会设置父类的样式，只是看能不能覆盖，父类是最弱的，所有只有原本没有的父类才能给它设置。
层叠性
对应标签而言设定css时，对于某一个设定，如果看选择器时，如果是同种类型的选择器，无论是什么选择器，多个对于同一个/同一群标签的选择器都是起作用的，只是起作用时，如果是对某一群标签的同一个属性起作用，则是同一个选择器，后面的选择器内同一个属性会覆盖前面的选择器内的属性。
优先性
我们给标签设置样式时，无论你写了多少个标签选择器，即使都会对某一个标签起作用。都会设定，只不过时自上而下依次执行，会存在优先性是否能覆盖。
选择器起作用的前提是没有内部样式，内部样式最高的。第二是，设定的标签是选择器内的important且这个选择器就是对该标签。第三层是选择器的比较，选择器的比较无论是复合选择器还是基础选择器都是一起比较（id选择器，类选择器，标签选择器）从左优先，那个数量多就是那个优先。
第四层是对父标签的设定会继承到子类标签，无论父类是内部样式亦或其他比如设定的important只是对选择器锁定的标签除却内部最优先。
Emmet写法
对于CSS和HTML内部简写
CSS可以写首字母直接接属性值无需带单位，但是如果是颜色写数值需要带#，CSS有
w100+h100会生成长宽都100px的代码。需要1写数值要不不能回车生成。
对于HTML有下面几种对于HTML的第一二最后一行都是标签不能写（）失效，这些生成都比较符合先乘除后加减，从左往右啥的。div对于第一二行可以不写div会生成div的。
背景有关属性
background-image设置背景图
属性值是url（地址），地址就是src会找的地址。只设置背景图，浏览器默认设置平铺方式是平铺repeat，会将初始位置的图片复制，让整个标签都被该图片覆盖。初始地址是左上角。
background-repeat设置平铺方式
属性值有以上四种，自上而下表示不平铺只有初始照片，/平铺覆盖整个标签，/水平方向平铺，初始图片左右平铺/垂直方向平铺。
background-position设置初始图片的位置
属性值可以是关键字bottom top center left right 等也可以是数字。可以写两个关键字/数字以空格隔开，第一个是水平方向，第二个是垂直方向只是针对数字，如果是关键字可以第一个写垂直方向，都可以，或者关键字+数字也可以随便写第一个/第二个。但如果只写一个的话，不懈的默认是center，如果只写一个数字是水平方向的，垂直方向默认是center，写的数字，是照片的上线和左线离标签上线和左线的距离，如果是正的，往下往右，如果是负的，往上，往左。需要带单位，初始位置是图片左上角放在盒子哪里，默认是盒子最左上角，如果写数字·是·盒子左上角移动后的位置。
background-size控制初始图片的缩放
值有关键字cover，contain，contain表示在初始图片的位置等比放大到宽/高和标签一个相等。
cover放大到初始照片覆盖标签所有内容。但是会有一部分不显示。背景图只在标签内显示。
值也可以是一个数字/两个数字，如果写一个数字表示宽。可以百分比，表示缩放到占标签宽的多少百分比。如果是auto值一个表示图片原有尺寸，只设置一个，高度等比例的高度，如果设置两个都为auto，就是原始尺寸。第一个auto是原始尺寸，第二个auto无论前面写什么都是等比例的意思。以空格隔开。css样式object-fit和这个一样，盒子有这个css属性。
background-attachment背景图固定
设置该值，会让背景图固定，元素会随着滚轮动，但是背景图固定的，背景图只会设置滚轮没有滚动时的视图。即使你是平铺。
background背景复合属性
该属性值时这种写法，和font一样的只不过font有顺序且一定得有字体字号，这里不是，顺序随意，但是都是以空格隔开。复合属性的值都是单个属性的属性值写在这。
显示模式
所有的标签都是有显示模式的，当你不设定显示模式时，他们都是按这个显示模式执行。所有标签的宽和高都是编辑决定的，不会用户输入改变。
我们可以设置转换显示模式，比如div，写了就有这种模式是原本携带的，因此改变就会和其他显示模式一样。
行内块设置文本位置text-align有用的，行内块有盒子的，但是对外是行内元素，外部设计的都是对于页面一行而言。
块级元素，父亲和自己设置文本的水平对齐，都是对于盒子，有盒子，不是被撑大，可以设置长宽。
行内元素，无法设计高宽，所以，父亲和自己设置文本的水平对齐都是对于页面那一行来说
写在以免一行右边，可以是块级盒子，一整行盒子，设计在盒子右边，也可以是行内，行内块。如果是块级设置页面右边，必须块级元素的盒子宽是100%。
整个浏览器窗口，html和body标签设置了宽，但是没有设置高，高是靠内容撑大，但是当背景图cover/contain放的时候，
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
