HTML
第三节
编辑器写代码，浏览器看效果（推荐vscode，google）
第四节
HTML：超文本标记语言 ，超文本是链接，标记就是标签。
标签包裹的内容放在开始标签与结束标签之间。
第五节
基本骨架：
html：整个网页；
head：网页的头部，存放给浏览器看的代码，例如css；
body：网页的主体，存放给用户看的代码，例如图片文字等；
title：网页标题；
快速生成骨架：英文状态下的! ；
标签有两种关系：父子关系和兄弟关系；
TAB往后缩进，SHIFT+TAP向后缩进；
第六节
注释标签：<!--...-->
VS添加/删除注释的快捷键：ctrl+/ (光标放在要注释文字的任意一行按快捷键都行)；
第七节
标题标签：
用途：一般用在新闻标题、文章标题、网页区域名称、产品名称等等；
标签名：h1~h6(双标签) h1标签一个网页只能使用一次，用来放新闻标题或网页logo；
显示特点：文字加粗，字号逐渐减小，独占一行；
段落标签：
用途：一般用在新闻段落、文章段落、产品描述信息等等；
标签名：p(双标签)
显示特点：独占一行，段落之间存在间隙；
第八节
换行标签：br(单标签)
水平线标签：hr(单标签)
第九节
文本格式化标签(不带换行效果)：
strong:加粗；
em:倾斜；
ins:下划线；
del:删除线；
第十一节
图像标签：img src = "图像的URL"，不会换行；
src用于指定图像的位置和名称，是img的必须属性；
../或者./就行，在VSCODE中；
图像标签的属性：
alt：图片无法显示时显示的文字；
title：鼠标悬停在图片上的时候显示的文字；
第十二节
路径：指的是查找文件时，从起点到终点经历的路线；
相对路径：从文件的当前位置出发查找目标文件；
绝对路径：从盘符出发查找目标文件；
第十三节
超链接：点击跳转到其他页面；
a herf = “网址或者地址，写#表示空链接，不会跳转” target = “_blank”//点击链接时，保存原网页
第十四节
音频标签：audio src = "音频的URL"
controls：显示音频控制面板；
loop：循环播放；
autoplay(双标签)：自动播放；浏览器一般会禁止自动播放视频
视频标签(双标签)：video scr = "视频的 URL"
controls：显示视频控制面板；
loop：循环播放；
muted：静音播放；
autoplay：自动播放；浏览器支持在静音状态下的自动播放
第十八节
列表：
作用：布局内容排列整齐的区域；
列表分类：无序列表、有序列表、定义列表。
无序列表：
作用：布局排列整齐的不需要规定顺序的区域；
标签：ul 嵌套 li，ul 是无序列表，li 是列表条目；
注意事项：ul中只能放li标签，li标签里可以放任何内容；
有序列表：
作用：布局排列整齐的需要规定顺序的区域；
标签：ol 嵌套 li，ol 是无序列表，li 是列表条目；
注意事项：ul中只能放li标签，li标签里可以放任何内容；
定义列表：
作用：类似于导航 帮助中心的区域；
标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd是定义列表的描述/详情；
注意事项：dl中只能放dt、dd标签，dt、dd标签里可以放任何内容；
第十九节
表格：
标签：table 嵌套 tr ，tr 嵌套 td / th；
table：表格；
tr：行；
th：表头单元格；
td：内容单元格；
注意：表格默认没有边框线，使用boder属性可以为表格添加边框线；
合并单元格（给td添加属性）：
跨行合并：保留最上单元格，添加属性 rowspan；
跨列合并：保留最左单元格，添加属性 colspan；
第二十节：
表单（form中action属性写文件发送的地址）：
用途：登录页面、注册页面、搜索区域；
input标签的使用：
type属性值不同，功能不同；
text：文本框，用于输入单行文本；
password：密码框；
radio（单选框）：
name：控件名称，控件分组，同组只能选中一个；（给选项分组）
checked：默认选中，简写为一个单词；
checkbox（多选框）：
checked：默认选中；
file（上传文件）：
multiple：可以实现选择多个文件的功能；
input标签占位文本：
文本框和密码框可以使用：placeholder = “提示信息”
第二十一节
下拉菜单：
标签：select嵌套option，select是下拉菜单的整体，option是下拉菜单的每一项；
selected表示默认选中；
第二十一节：
文本域标签：textarea（双标签）
第二十二节：
lable标签：
作用：网页中，某个标签的说明文本；用label标签绑定文字和表单控件的关系，增大表单控件的点击范围；
增大表单控件的点击范围：
写法一：
label只包含内容，不包含表单控件：
设置label标签的for属性值和表单控件的id属性值相同；
写法二：
使用label标签包裹文字和表单控件，不需要属性相同；
第二十五节：
按钮标签：
button（必须放到form标签里面）：
type：submit：提交按钮，默认；
reset：重置按钮；
button：普通按钮；
第二十六节：
无意义布局标签：
div：大盒子，独占一行；
span：小盒子；
字符实体：
作用：在网页中显示预留字符。
空格： ；
小于号：<；
大于号：>；
第三十一节：
css引入方式：
内部样式：学习使用，css代码写在style标签里面；
外部样式：开发样式；
写在单独的css文件中，css文件中书写格式与style标签中一致；
在HTML使用link标签引入（放在head标签里面），rel(关系) = "stylesheet" hert = "./my.css(文件 位置)"；
行内样式：配合JavaCript使用；
第三十二节：
选择器：
作用：查找标签，设置样式；
基础选择器：
标签选择器：标签名作为选择器->选中同名标签设置相同样式；
类选择器：查找标签，差异化设置标签的显示效果；
定义： .类名；
使用：标签添加class = "类名"；
id选择器：查找标签，差异化设置标签的显示效果；
场景：id选择器一般配合JavaScript使用，一般不用来设置css样式；
步骤：定义id选择器-> #id名；
标签添加 id = "id名"；
同一个id选择器在一个页面里只能使用一次；
通配符选择器：查找页面所有标签，设置相同样式；
使用方法： * ，不需要调用，浏览器自动查找页面的所有标签，设置相同的样式；
第三十四节：
画盒子：
目标：使用合适的选择器画盒子；
width:宽度；
height：高度；
background-color：背景色；
第三十五节：
文字属性：
font-size:字体大小 单位px；
font-weight:字体粗细 400（正常）、700（加粗）；
font-style:字体倾斜；
line-height:行高；
font-family:字体族；
font:字体复合属性；
text-indent:文本缩进；
text-align:文本对齐；
text-decoration:修饰线；
color:颜色；
第四十节：
调试工具——谷歌浏览器：
作用：检查、调试代码；帮助程序员发现问题、解决问题；
F12，快捷键；
第四十五节：
复合选择器：
定义：有两个或多个基础的选择器，通过不同的方式组合而成；
作用：更准确、更高效的选择元素目标（标签）；
后代选择器：选中某元素的后代元素；
写法：父选择器 子选择器（css属性），两个选择器之间用空格隔开；
子代选择器：选中某元素的子代元素（最近的子级）；
写法：父选择器>子选择器（css属性），两个选择器之间用>隔开；
并集选择器：选中多组标签设置相同的样式；
写法：选择器1，选择器2，...... ，选择器n，选择器中用，隔开；
第四十六节：
伪类选择器：伪类表示元素的状态，选中元素的某个状态设置样式；
（任何标签都可以设置）鼠标悬停状态：选择器： :hover（css属性）；
超链接的四个状态：
:link：访问前；
:visited：访问后；
:hover：鼠标悬停；
:active：点击时（激活）；
需要按LVHA顺序写；
第四十七节：
CSS的三大特性：
继承性：子级继承父级；
层叠级：同一标签：相同属性覆盖，后面的覆盖前面的；不同属性会叠加；
优先级：当一个标签使用了多种选择器时，基于不同的种类选择器的匹配规则
规则：选择器优先级高的样式生效；
公式：通配符<标签<类<id<行内样式<!important;(选中的标签范围越大，优先级越低)
第四十八节：
Emmet：代码的简写方式，输入缩写 VS Code 会自动生成对应的代码；
第四十九节：
background-color：背景色；
background-image：背景图；
background-repeat：背景图平铺方式；
background-position：背景图位置；
background-size：背景图缩放；
background-attachment：背景图固定；
background：背景图复合属性；
第五十节：
转换显示模式：
属性名：display；
属性值：block：块级；
inline-block：行内块；
inline：行内；
第五十五节：
结构伪类选择器：
作用：根据元素的结构关系来查找元素；
格式：标签：first-child:查找第一个该标签；
标签：last-child：查找最后一个该标签；
标签：nth-child(n)：查找第n个该标签；
-n+5：表示第五个以前的；
n+5：表示后五个；
第五十六节：
伪元素选择器：
作用:创建虚拟元素（伪元素），用来摆放装饰性的内容；
格式：
E::before：在E元素里面的最前面添加一个伪元素；
E::after：在E元素里面的最后面添加一个伪元素；
注意点：必须设置content ：“ ”，用来设置伪元素的内容，没有引号留空即可；
默认是行内显示模式；
权重和标签选择器相同；
