HTML 总结
一.基本概念
1.网页和网站：
网站有N个网页组成
网页中包含：文字、图片、音频、视频、超链接
网页的内容有HTML技术实现
网页的后缀通常都是.html
2.网页组成
阶段一：HTML元素； 网页的内容结构
阶段二：HTML元素 + CSS样式； 网页的视觉体验
阶段三：HTML元素 + CSS样式 + JavaScript语言； 网页的交互处理
3.浏览器和渲染引擎
常见的五大浏览器: IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）
渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分
浏览器出品的公司不同，内在的渲染引擎也是不同的
注意点：渲染引擎（浏览器内核）
4.网页的三层结构
结构层：使用HTML技术实现，说白了，就是给网页提供内容
样式层：给王爷提供样式（布局 梅花）
交互层：使用JS实现，JS是前端程序员最需要掌握的技术
5.开发工具
推荐使用Vs Code工具，好处；小巧，插件多
快捷键：
shift + alt + 向下箭头 => 复制上一行
tab => 向后移动代码
shift + tab => 向前移动代码
! + tab => html基本骨架 !是英文的!
div.wraper + tab => 生成一个带名字的div
鼠标中键 + 向下拽 => 同时选中多行
键盘上的del键 => 删除文件
F2 => 重命名
shift + alt + f => 格式化代码
ctrl + f => 查找内容并替换内容
6.标签， 属性， 元素
标签：标签都是使用<>抱起来的，分单标签和双标签， 分男标签，女标签和人妖标签
标签与标签之间是有关系，分兄弟关系和父子关系
属性：写在开始标签中，一个标签中可以出N个属性
属性也两类：公有属性，特有属性
公有属性：class， id ，title，style
元素：标签+属性+标签之间的内容
二.HTML 基本骨架
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body></body>
</html>
注意: 我们在以后写代码(html,css,js...)遇到特殊符号,必须都是英文输入下的符号
制作一个网页必须按照 html 的结构去写.
1.文档说明
<!DOCTYPE html> HTML5的文档声明
告诉浏览器，以什么样的标准来解析我们的代码
2.HTML 元素
是一个网页的根元素，只有这一个
lang属性：指定网页的语言 zh-CN表示中文
3.head 元素
网页的头部：基本上在对网页的设置，都会在head实现
title属性：指定网页的标题
meta属性：charset="utf-8"如果不指定，会出现乱码
4.body 元素
网页的主要内容都写在body中的
三.常用标签
1.h 系列-标题标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!-- 只要是一个网站，基本上都有h1标签 -->
<!-- 即使没有大标题，也会使用h1标签把网页的logo包起来 -->
<!-- h1标签有利于SEO -->
<h1>我是一个大标题</h1>
<h2>我是一个h2标签</h2>
<h3>我是一个h3标签</h3>
<h4>我是一个h4标签</h4>
<h5>我是一个h5标签</h5>
<h6>我是一个h6标签</h6>
</body>
</html>
h1->h6逐渐递减
文字都有加粗
文字都有变大，并且从h1 → h6文字逐渐减小
独占一行
注意点：
h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分
2.p 标签，段落标签
浏览器会自动适应用换行
单词：p元素是paragraph单词的缩写，是段落、分段的意思
场景:在新闻和文章的页面中，用于分段显示
语义:段落
特点：
1.段落之间存在间隙
2.独占一行
注意点：
1.p元素多个段落之间会有一定的间距
2.可以配合br标签进行换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!-- p标签表示一个段落 -->
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>
6月7日，2022年全国高考拉开帷幕。今年高考共有1193万人报名，再创历史新高。
</p>
<p>
“不经一番寒彻骨，怎得梅花扑鼻香”，
</p>
<p>又是一年高考季，为广大考生鼓劲加油！</p>
</body>
</html>
3.换行标签
强制换行
单标签
4.文本格式化
加粗 <strong></strong>或者<b></b>
倾斜 <em></em>或者<i></i>
删除线 <del></del>或者<s></s>
下划线 <ins></ins>或者<u></u>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!-- b u i s是女标签 特点：并排显示 -->
<!-- b u i s 了解就OK -->
<!-- b u i s 四个标签，仅仅是样式有区别，但是没有强调的意思 -->
<b>今天开始学习HTML了，明天学习CSS</b> <br />
<u>今天开始学习HTML了，明天学习CSS</u> <br />
<i>今天开始学习HTML了，明天学习CSS</i> <br />
<s>今天开始学习HTML了，明天学习CSS</s> <br />
<hr />
<!-- b标签仅仅是加粗，strong标签不只可以加粗，还可以强调，有利于SEO -->
<strong>今天开始学习 HTML 了，明天学习 CSS</strong> <br />
<!-- em标签也有强调的意思，表示形式和 i 标签是一样，会倾斜-->
<em>今天开始学习 HTML 了，明天学习 CSS</em> <br />
<!-- 使用strong和em能达到的效果，使用css也可以达到，但是stong和em有强调作用 -->
<!-- ins和del标签，不重要，了解就OK -->
<!-- ins和del标签达到的效果，使用CSS也可以使用 -->
<ins>今天开始学习 HTML 了，明天学习 CSS</ins> <br />
<del>今天开始学习 HTML 了，明天学习 CSS</del> <br />
</body>
</html>
5.无语义标签
div
span
6.图片标签
属性：
src：图片的路径（来源）
alt：当图片加载错误时显示的文字
width：图片的宽度
height：图片的宽度
border：图片的边框
属性的特点：
1.属性之间部分先后顺序
2.属性名与属性值之间以建值对的形式存在
3.属性名与属性值之间以等号分割 属性值要以引号包裹
width 和 height 属性：
1.如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
2.如果同时设置了width和height两个，若设置不当此时图片可能会变形
7.路径和连接
路径：
相对路径：
向上一级../ 向下/
绝对路径：
外部链接 <a href="http://www.qq.com"></a>写完整的协议 域名 网址
内部链接 <a href="index.html"></a> 直接写文件名即可
属性： href：指定跳转的页面
title：鼠标悬停显示文字
target：_self（默认会覆盖原来的窗口）_blank（会以新的窗口打开） 窗口的打开方式
#：会阻止页面跳转但是会刷新页面
9.锚点
链接使用#
目标标签id值与链接#号后面一致
10.注释与特殊字符
<!--我是注释--> 编译器使用Ctrl+/快捷键
四.列表标签
1.无序列表
<ul>
<li></li>
</ul>
1.场景：在网页中表示一组无顺序之分的列表，如：新闻列表
2.ul标签：表示无序列表的整体，ul标签中只允许包含li标签
3.li标签：表示无序列表的每一项，li标签可以包含任意内容
4.li标签可以包含任意内容
5.列表的每一项前默认显示圆点标识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
html叫标签语言，不是编程语言。
无序列表：
1）不是一个标签，是一组标签 ul + li
2）ul是无序列表 li是无序列表中的列表项
3）order是订单，有序的意思 unordered是无序的意思 list列表的意思
4）li list-item list-item是列表项的意思
5）ul中只能放li元素 -->
<h1>常见的编程语言</h1>
<!-- ul 中有一个type属性，用来指定列表项前面的标识样式 -->
<!-- type="square" 属性值有很多，不需要记，因为，后面学习CSS，主要通过CSS来设置 -->
<ul type="square">
<li>JavaScript</li>
<li>Java</li>
<li>C</li>
<li>C#</li>
<li>C++</li>
<li>Python</li>
<li>汇编</li>
<li>易语言</li>
<li>Go</li>
<li>PHP</li>
</ul>
</body>
</html>
2.有序列表
<ol>
<li></li>
</ol>
1.场景：在网页中表示一组有顺序之分的列表，如：排行榜。
2.ol标签中只允许包含li标签
3.li标签可以包含任意内容
4.列表的每一项前默认显示序号标识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
有序列表：
1）是一组标签 ol+li
2）ol 是有序列列表的意思 ordered list
3）li 是list item的意思 列表项
4）列表项与列表项之间是有顺序的
5）ol只能放li li里面可以放任何内容
-->
<h1>飙升榜</h1>
<ol>
<li><a href="#">看得最远的地方</a></li>
<li><a href="#">圆</a></li>
<li><a href="#">下一站天后</a></li>
<li><a href="#">孤独患者</a></li>
</ol>
</body>
</html>
3.自定义列表
<dl>
<dt>
</dt>
<dd>
</dd>
</dl>
1.场景：在网页的底部导航中通常会使用自定义列表实现。
2.dl标签中只允许包含dt（definition term）/dd（definition description）标签
3.dt/dd标签可以包含任意内容
4.dd前会默认显示缩进效果
5.列表中每一项的具体描述，是对 dt 的描述、解释、补充
6.一个dt后面一般紧跟着1个或者多个dd
总结: 1.无序列表最常用，有序列表偶尔用，自定义列表底部导航用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
自定义列表：
1）definition 自定义的意思 list 是列表的意思 dl
2）对一个事件，时间点，名词等解释说明
3）是一组标签 dl + dt + dd
4）dt definition term/title
5）dd definition description description是描述的意思
6）dt和dd中可以包含任何内容
-->
<h1>前端开发</h1>
<dl>
<dt>阶段一：打好基本阶段</dt>
<dd>HTML</dd>
<dd>CSS</dd>
<dd>JS基础</dd>
<dd>DOM操作</dd>
<dd>JS高级</dd>
<dt>阶段二：框架实战</dt>
<dd>vue</dd>
<dd>react</dd>
<dd>ng</dd>
<dd>node</dd>
<dt>阶段三：原理讲解</dt>
<dd>js原理</dd>
<dd>vue原理</dd>
<dd>react原理</dd>
</dl>
</body>
</html>
4.表格类标签
1.<table></table> 表格
2.<tr></tr>(table row) 表格中的行
3.<td></td>(table data) 行中的单元格
4.<thead></thead> 表格的表头
5.<tbody></tbody> 表格的主体
6.<tfoot></tfoot> 表格的页脚
7.<caption></caption> 表格的标题 写在内部 显示外部 居中
8.<th></th> 表格的表头单元格 加粗 加黑 自动居中
相关属性：
1.border, width, height。实际开发时针对于样式效果推荐用CSS设置
2.border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。 3.table { border-collapse: collapse; } 合并单元格的 边框
表格标题和表头单元格标签:
1.在表格中表示整体大标题和一列小标题
2.caption定义表格大标题，caption标签书写在table标签内部
3.th定义表头单元格， th标签书写在tr标签内部（用于替换td标签）
表格的结构标签（了解）:
1.场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
2.thead表示表格头部， tbody表示表格主体， tfoot表示表格底部
3.表格结构标签内部用于包裹tr标签
4.表格的结构标签可以省略
border表格的边框 默认的0
width：宽度
height：高度
cellspacing：单元格与单元格之间的距离
cellspadding：单元格与内容的距离
注意： 当给表挨个设置居中整个表格会居中（文字不会居中）当 tr 或者 td 文字居中 align：left/center/right colspan:列合并 rowsopan：行合并 1.合并单元格步骤： 2.只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）
六.表单类标签
常见的表单元素和表单项元素：
1.form 表单 一般情况下，其他表单相关元素都是它的后代元素
2.input 单行文本输入框、单选框、复选框、按钮等元素
3.textarea 多行文本框 文本域：textarea用户留言
4.select、option 下拉选择框
<select>
<option>请选择</option>
<option selected>zj</option>
<option>mi</option>
</select> 下拉列表默认选中：selected
5.button 按钮
6.label 表单元素的标题
label 的用法：
<label>请输入<input type="text"> </label>
<label for="a">请输入</label>
<input type="text" id="a">
label 元素:
1.场景：常用于绑定内容与表单标签的关系
2.使用方式一：label for id
3.使用方式二：label包裹整个元素
input 元素中的 type 属性:
1.text：文本输入框（明文输入） 场景：在网页中显示输入单行文本的表单控件, 可以使用placeholder，提示用户输入内容。
2.password：文本输入框（密文输入） 场景：在网页中显示输入密码的表单控件, 可以使用placeholder，提示用户输入内容。
3.radio：单选框 场景：在网页中显示多选一的单选表单控件，可以使用name实现多选一，可以使用checked表示默认选中。
4.checkbox：复选框 场景：在网页中显示多选多的多选表单控件，可以使用checked表示默认选中。
5.button：普通按钮 场景：在网页中显示不同功能的按钮表单控件。
6.reset：重置按钮 需要配合form表单才有作用 场景：点击之后，恢复表单默认值。
7.submit：提交按钮 提交表单数据给服务器 场景：提交按钮，点击后之后提交数据给后端服务器。
8.file：文件按钮 文件上传 场景：在网页中显示文件选择的表单控件，可以使用multiple表示多文件选择。
9.image ：属性src
name 属性
发送给后台.....
name的标识对于单按钮只能选择一个
value：文本框默认显示文字
form 表单
action：提交后台的地址
method="get/post" 提交（传输）后台的方式
name="a"告诉服务器 由那个表单提交过来
form 常见的属性:
1.form通常作为表单元素的父元素，将整个表单作为一个整体来进行操作
2.对整个表单进行重置 或 对整个表单的数据进行提交
3.action属性：用于提交表单数据的请求URL
4.method属性：请求方法（get和post），默认是get
5.target属性：在什么地方打开URL（参考a元素的target）
input 元素中的其它属性:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
input是人妖标签，特点：并排显示
radio 是 收音机的意思
type="radio" 为了可以实现N选一，需要给每一个input上添加name属性，保证name属性的值是一样的
checked="checked" 默认选中某个单选框
value="登录" 表示input输入框中的内容
-->
<form action="http://www.baidu.com">
<!-- 文本输入框，明文 -->
用户名：<input type="text" placeholder="请输入你的用户名~" /> <br />
密 码：<input type="password" placeholder="请输入你的密码~" /> <br />
性别：男<input type="radio" checked="checked" name="sex" /> 女<input
type="radio"
name="sex"
/>
<br />
爱好：篮球<input type="checkbox" /> 足球<input type="checkbox" />
双色球<input type="checkbox" checked="checked" /> <br />
<!-- type=button在谷歌浏览器中具备提交功能，在其它浏览器中不具备提交功能 -->
<input type="button" value="登录" /> <br />
<!-- 所谓的重置，就是清空输入框中的内容，项目中基本不用 -->
<input type="reset" value="重置" /> <br />
<!-- 是一个按钮，具有提交功能 -->
<!-- 如果不写value，默认就是提交两个字 -->
<input type="submit" /> <br />
<!-- 文件选择按钮 -->
<input type="file" /> <br />
<!-- type是没有abc这个属性值，写错了，type此时就是text -->
<input type="abc" />
</form>
</body>
</html>
1.readonly：只读
2.disabled：禁用
3.checked：默认被选中，只有当type为radio或checkbox时可用
4.autofocus：当页面加载时，自动聚焦
5.name：名字，在提交数据给服务器时，可用于区分数据类型，当前控件的含义，
提交之后可以告诉后端发送过去的数据是什么含义
后端接收到数据的格式是：name的属性值 = value的属性值
6.value：取值 用户输入的内容，提交之后会发送给后端服务器
textarea 文本域元素:
1.场景：在网页中提供可输入多行文本的表单控件
2.cols：规定了文本域内可见宽度
3.rows：规定了文本域内可见行数
4.右下角可以拖拽改变大小
5.禁止缩放：resize: none;
6.水平缩放：resize: horizontal;
7.垂直缩放：resize: vertical;
8.水平垂直缩放：resize: both;
button 元素的使用:
1.场景：在网页中显示用户点击的按钮
2.button的type的取值，可以是button,submit,reset
3.谷歌浏览器中button默认是提交按钮
3.button标签是双标签，更便于包裹其他内容：文字、图片等
select 下拉菜单元素:
1.场景：在网页中提供多个选择项的下拉菜单表单控件
2.select标签：下拉菜单的整体, option标签：下拉菜单的每一项
3.selected：下拉菜单的默认选中
emmet 语法
场景:场景：在网页中展示特殊符号效果时，需要使用字符实体替代
1.!和html:5可以快速生成完整结构的html5代码
2.>子代）和+（兄弟） 如：div>ul>li， div+div>p>span+i， div+p+ul>li
3.*（多个）和^（上一级）如：ul>li x 5， div+div>p>span^h1， div+div>p>span^^^^h1
4.()（分组） 如：div>(header>ul>li*2>a)+footer>p
5.属性(id属性、class属性、普通属性) {}（内容） 如：div#header+div#main>.container>a
[href]， a [href=""]
6. $（数字） 如：ul>li.item$*5
7. 隐式标签 如：<div> .box+.container </div>， ul>item*3
