标签语法
1.HTML定义
超文本：链接。
标签：标记也叫标签，带尖括号的文本。
2.标签语法
需要加粗的文字（strong标签）：划定开头结尾的位置（开始标签&结束标签）<>里面：标签名
标签成对出现，中间包裹内容。
结束标签多一个/
双标签：成对出现。单标签：只有开始标签。e.g
3.保存HTML标签文件扩展名：.html
HTML基本骨架
1.基本骨架是网页模板
html：整个网页
head：网页头部，存放给浏览器看的代码，例如：CSS
body：网页主体，存放给用户看的代码，例如：图片，文字
title：网页标题
2.vs code快速生成骨架：在HTML文件（.html）中，！（英文）配合Enter/Tab键
标签的关系
1.作用：明确代码的书写位置
父子关系（嵌套关系）有缩进
兄弟关系（并列关系）在结束的后面回车，对齐格式
shift，Tab往前一格，Tab向后一格。
注释
对代码的解释说明
<!--......-->注释不会在浏览器里面显示
添加删除注释的快捷键：Ctrl+/
标题标签
新闻标题，文章标题，产品名称等等。
标签名：h1~h6，h1一级标题/主标题，h2二级标签/副标签......会加粗
1~6：逐渐变小，并且每个之间都会换行。
h1只能用一次（一个网页中），用来放新闻标题或网页logo。
h2到6没有次数限制。
段落标签
一般用在新闻段落，文章段落，产品描述信息等等。
标签名：p
特点：独占一行，段落之间有间隙
换行和水平线
都是单标签
换行：br 浏览器中不识别回车换行
第一行内容
第二行内容
水平线：hr
文本格式化标签
给文字添加特殊格式，以突出重点，加粗，倾斜，下划线等等。
strong加粗 em倾斜 ins下划线 del删除线（这几个标签自带强调含义）
b i u s
图像标签
作用：在网页中插入图片
<img src+"图片的URL">src用于指定图像的位置和名称，是<img>的bixu属性。
写./找到对应图片即可。
属性：alt 作用：替换文本，图片无法显示时显示的文字。（网速慢时图片加载不出来时用）
title：提示文本，鼠标悬停在图片上面的时候显示的文字。
浏览器缩放图片默认等比例缩放。
属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序。
路径
相对路径：从当前文件位置出发查找目标文件。
绝对路径：从盘符出发找目标。
从网页找图片：网页就是当前，从它出发找图片。
/表示进入某个文件夹里面 文件夹名字/
.表示当前文件所在文件夹 ..表示上一级文件夹（../表示进入上一级文件夹）（打完./会有文件夹提示）
绝对路径：<img src+"C:\im....">windows默认\，推荐写成/
不在自己电脑中：复制网址。
超链接
作用：点击跳转到其他页面。
<a href ="跳转地址"></a>
中间那里点击什么显示什么 用相对路径
同时显示两个网页，后面target属性添加（打开新窗口）
不确定跳转地址：# 表示空链接。
音频标签
audio
(src是必须属性)
controls 显示音频面板 loop循环播放 autoplay自动播放
视频标签
video src=" " /video
muted静音播放 自动播放的前提是静音播放
列表
布局内容排列整齐的区域
无序，有序，定义列表
无序列表（没有序号）ul嵌套li，li是列表条目
ul里面只能有li，li里面可以包裹任何内容。
有序列表 ol嵌套li
定义列表dl嵌套dt和dd
dt：标题 dd描述/详情
dl里面只能有dt和dd
表格
用来展示数据。
table嵌套tr，tr嵌套td/th
tr行，th表头单元格，td内容单元格
th标签会加粗居中（默认）
表格中默认没有边框线，使用border属性可以加。
表格结构标签：thead表格头部，tbody表格主体，tfoot表格底部（针对浏览器）
合并单元格
合并同类信息
跨行合并，跨列合并都可以
跨行：保留最上单元格，添加rowspan
列：保留最左，添加colspan 然后删掉其他
属性“”里面写数字，合并几个写几
表单
收集用户信息。如登录页面，搜索功能等等。
1.input标签 type属性 是单标签！！！
text文本框，输入单行文本 password密码框 radio单选框 checkbox多选框 file上传文件
input标签占位文本：添加提示信息，加placeholder=“提示信息”（框里面浅色提示）
单选框：name控件分组，每组只能选中一个，checked默认选中（比如化妆品网站里面点进去默认选中女）。
上传文件
file（type里面写）默认上传一个文件，添加multiple属性可以实现文件多选功能。
多选框也叫复选框，默认选中checked
下拉菜单
例如选择来自哪个城市。
select嵌套option，select下拉菜单整体，option是每一项，selected默认选中。
文本域
多行输入文本的表单控件（例如发朋友圈）
textarea双标签，右下角有拖拽功能，但之后会禁用。
label标签
表单前面的说明文字，双标签 增大表单控件的点击范围。（点字也可以选中）
可以直接包裹文字和表单控件。或让for，id属性值一样。
按钮
button双标签 有type属性
submit提交（默认），reset重置，button普通按钮默认没有功能，配合JavaScript使用。
用form统一管理才会有效果。
无语义的布局标签
作用：布局网页
div：独占一行，span：不换行
字符实体
显示预留字符。
空格 ，小于<，大于>
显示<p>两边的尖括号用上面的&...代替。
CSS初体验
样式表语言，美化内容。
title标签下方添加style双标签，双标签里面书写CSS代码。
找p：
p：p {
/CSS属性/
color：red
}
CSS引入方式
除上面的内部样式，还有外部样式：将CSS代码写在单独的CSS文件中（.css）
在HTML里面使用link引入
选择器
查找标签，设置样式。
1.标签选择器 选择同名标签设置相同的样式。
2.类选择器 查找标签，差异化
定义：.类名 使用：class=“类名”
类名要见名知意。
id选择器
查找标签，差异化设置标签的显示效果。
配合js使用。
定义id选择器：#id名，使用：标签添加id=“id名”
同一个id选择器在一个页面里面只能用一次。
通配符选择器
查找所有标签，设置相同样式
*，不需要调用。会选所有标签
开发时使用，清楚默认样式。
画盒子
使用类选择器。
width宽度，height高度，background-color背景色
文字控制属性
1.大小
属性名：font-size
属性值：文字尺寸，单位px
谷歌浏览器里面默认16
2.字体粗细
font-weight
属性值：数字（开发使用），关键字 取消效果（400/normal）
3.倾斜 font-style
正常不倾斜：normal 斜italic
4.行高 设置多行文本的间距。line-height
数字加px 数字：当前font-size属性值的倍数
行高属性值等于盒子高度属性值-垂直居中。
5.字体族 font-family
属性值：字体名 两个字体名用逗号隔开。建议使用无衬线字体。属性最后一个写字体族名。
6.复合属性font
设置网页文字公共样式
按顺序：倾斜，加粗，字号/行高，字体。字号字体必须写，否则不生效。
7.文本缩进 text-indent
数字加px/em 1em=当前标签字号大小。
8.文本对齐 text-align
left 左对齐（默认） center居中 right右对齐
9.水平对齐方式 取值center
10.文本修饰线 text-decoration
none无，underline下划线（添加超链接的下划线）
11.文字颜色 color
颜色关键字：red英文单词
rgb：rgb红绿蓝三原色 0~255
rgba：a透明度，取值：0~1
十六进制 开发使用
调试工具
发现代码问题，解决问题。 谷歌浏览器
浏览器窗口内任意位置/选中标签-鼠标右键-检查 F12
错误的有黄叹号
复合选择器
用两个或多个基础选择器组合。
1.后代选择器
父选择器，子选择器，之间用空格展开。
并集选择器
多组标签设置相同的样式 用逗号隔开各个选择器。建议逗号后面加一个换行。
交集选择器
同时满足多个条件，只想选一个。
选择器之间直接连着写中间没有任何符号。
伪类选择器
表示元素状态，某个元素状态设置样式。
鼠标悬停：hover 访问前dink 访问后visited 点击时（激活）active
CSS特性
1.继承性 子级默认继承父级的文字控制属性。
一般把文字写进body里面
标签自己有属性，就不会继承了。
2.层叠性 相同属性会覆盖，后面覆盖前面的，不同属性会叠加，不同的都生效。
3.优先级 用了多种选择器，基于不同种类选择器匹配规则。
规则：选择器优先级高的样式生效。
通配符<标签<类<id<行内<!important(选中标签范围越大，优先级越低)
如果是复合选择器，则需要权重叠加计算。同一级个数多优先级高。！important权重最高，继承权最低。
Emmet
代码简写方式，输入缩写vs code会自动生成对应的代码
CSS大多数为属性单词的首字母
背景属性
1.背景图 background-image
2.背景图平铺 background-repeat
no-不平铺，repeat平铺，-x水平方向平铺，-y垂直方向平铺
3.背景图位置 background-position
关键字center居中 坐标：数字（正负都可以）+px 可以混用 水平方向加垂直方向
4.背景图缩放 background-size
关键字：cover可能背景图有部分看不见，contair可能区域会留白。 百分比，数字+px
5.背景图固定 background-attachment
背景图不会随着元素的内容滚动。 属性值：fixed
6.背景图复合属性 background
空格隔开，没有先后顺序
显示模式
标签元素的显示方式
1.块级元素 独占一行，宽度默认是父级的百分之百，添加宽度属性生效
行内块：一行内存多个，宽高属性生效，宽高默认由内容撑开。
转换显示模式display block块级，inline-block行内块，inline行内
结构伪类选择器
根据元素的结构关系查找元素。
E：first-child，查找第一个E元素，找哪个标签把哪个放在冒号前面
last-child查找最后一个元素，nth-child（N）查找第N个E元素
：nth-child（公式）查找多个元素：偶数2n，奇数2n-1，2n+1，5的倍数5n，找5个以后标签n+5，5个以前-n+5
伪元素选择器
创建虚拟元素，摆放装饰性内容。
E：：before，在E元素里面最前面添加一个伪元素。
after， 后
必须设置content：“”来设置伪元素内容，没有则留空。
默认行内显示模式。
权重与标签选择器同。
PxCook
软件，支持PSD文件文字，颜色，距离自动智能识别。
开发面板（自动智能识别）
设计面板（手动测量尺寸和颜色）
