HTML概述
1、HTML
HTML,称为超文本标记语言,与编程语言不同，标记语言使用一个个标签去规定浏览器如何呈现内容。HTML的标签由两种类型，双标签和单标签
双标签格式为：<标签名>中间包裹的内容</标签名>，其中内容前的标签叫做开始标签，内容后的标签叫做结束标签
单标签格式为：<标签名>
标签之间的关系分为两种：
嵌套关系：内容包含内容的关系
并列关系：内容与内容之间并列
2、HTML模板
目前大多数的网页，都是在HTML模板上进行编写的，HTML模板为：
<!DOCTYPE html>
<html lang="en">
<head><!--网页头部-->>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body><!--网页主体-->>
</body>
</html>该模板在vscode中输入！并按下回车+TAB键自动生成
其中
<!DOCTYPE html>：代表使用HTML5
<head>：网页头部，给浏览器读取，用于写CSS代码，中间存放<title>,为网页标题
<body>：网页主体，给用户展示的主体部分
<!--注释内容-->：用于在HTML中添加注释，注释不会被浏览器读取，VScode可以用ctrl+/快速添加注释
3、常用标签
标题标签(双标签)：
HTML中使用h1-h6代表六级标题，标题标签中间的内容加粗并换行
<h1>标题1</h1>段落标签（双标签）：
段落标签书写段落文字，使用p来表示一个段落，段落之间自动换行并保持行间距
<h3>一段段落</h3>
<p>你好你好你好你好你好</p>
<p>你好你好你好你好你好</p>换行标签和水平线标签（单标签）：
换行标签：<br>，用于强制换行
水平线标签：<hr>，用于在浏览器中画一条分割线
<h3>一段段落</h3>
<p>你好你好你好你好你好</p>
<hr>
<p>你好你好你好<br>你好你好</p>文本格式化标签：
文本格式化标签用于给网页里的文本做加粗、倾斜、删除线和下划线操作，其中
加粗：<strong>/<b>
倾斜：<em>/<i>
下划线：<ins>/<u>
删除线：<del>/<s>
<h3>一段段落</h3>
<p><strong>你好</strong>你好<ins>你好</ins><em>你好</em><del>你好</del></p>图像标签：
用于在网页里放置图片，图像标签为：<img src='图像路径/URL'[alt:若图像无法正常显示替换的文本 title:鼠标指针放在图片上的提示文字 width：图片宽度 height:图片高度]>
超链接标签：
超链接标签用于页面之间的跳转，超链接标签为<a herf="需要跳转的URL [target=_blank:若有该条说明在新窗口打开链接]">互动的内容，可以是文本、图片<\a>
若在开发初期不确定需要跳转的URL，可以用"#"代替
音频标签：
用于在网页中插入音频或视频，音频标签为：<audio src=“音频的路径/URL” 其他属性></audio>
其他属性有：
controls:显示音频的控制面板
loop：若有则音频循环播放
autoplay：自动播放音频，浏览器一般禁止自动播放，只允许静音状态下自动播放
muted：若有则视频默认静音播放
4、列表
列表是指在页面中需要整齐排列的一组文字，列表分为无序列表、有序列表和定义列表
无序列表：
是排列整齐且内容无序的区域，使用ul嵌套li来完成，ul代表无序列表，li代表列表条目,ul标签里只能包含li标签,li标签可以包裹其他标签
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
……
</ul>
<ul>
<li>你好</li>
<li>hello</li>
<li>nihao</li>
<li><a href="https://www.baidu.com/" target="_blank">跳转到百度</a></li>
</ul>有序列表：
是排列整齐且内容有序带数字编号的区域，使用ol嵌套li来完成，ol标签内只能包含li
<ol>
<li>首先</li>
<li>其次</li>
<li>最后</li>
</ol>定义列表：
定义列表显示标题+列表的有序区域，例如网页尾部的关于内容，定义列表使用dl嵌套dt和dd，dt表示列表标题，dd表示列表内容，dl只能包含dt和dd，dd和dt可以包裹其他标签
5、表格
表格标签用于在网页中绘制表，标签是table嵌套tr,tr嵌套td/th
table代表整个表格
tr代表行
th代表表头
td代表单元格
表格默认无边框线，需要加边框线要用border属性
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>分数</th>
<th>排名</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>100</td>
<td>1</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
<td>99</td>
<td>2</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>98</td>
<td>3</td>
</tr>
</table>合并单元格
若是跨行合并，保留最上边的单元格，在最上边的单元格添加rowspan属性；若是跨列合并，保留最左端的单元格值，添加colspan属性，添加属性后跟数字，代表需要合并的格数
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>分数</th>
<th>排名</th>
</tr>
<tr>
<td>张三</td>
<td rowspan="2">18</td>
<td>100</td>
<td>1</td>
</tr>
<tr>
<td>李四</td>
<td>99</td>
<td>2</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>99</td>
<td>3</td>
</tr>
<tr>
<td>备注</td>
<td colspan="3">优秀</td>
</tr>
</table>7、表单
表单用于在web中收集信息
input标签：
需要用户输入或者选择信息使用input标签：
<input type ="">
其中type决定输入信息的方式，当type值为：
text:文本框，用于输入单行文本，显示输入文本
password：密码框，用于输入密码，隐藏输入文本
radio：单选框
checkbox：多选框
file：上传文件
文本框和密码框还有属性placeholder，用于显示提示信息
radio还有属性name和checked
name:控件分组，实现单选，一组只能选一个
checked：默认选中
file还有属性multiple，浏览器默认只能上传一个文件，而加了multiple属性可以实现多个文件上传
用户名：<input type="text" placeholder="请输入用户名">
<br><br>
密码：<input type="password" placeholder="六位以上字母+数字">
<br><br>
性别：男<input type="radio" name="gender">女<input type="radio" name="gender">
<br><br>
爱好：打篮球<input type="checkbox">踢足球<input type="checkbox">游泳<input type="checkbox">
<br><br>
一寸照片：<input type="file">下拉菜单：
下拉菜单标签使用select嵌套option，select是菜单整体，option是选项，option中可以添加selected属性，代表默认选中
文本域：
文本域用于输入多行文本，标签<textarea>提示文字</textarea>
文本域默认可以随意拖拽大小，这个功能一般会用CSS禁用
label:
用于给标签提供说明文字，也可以增大表单的空间范围
label有两种写法，第一种是标签包裹内容，不包裹控件，在label设置for属性值和表单控件的id属性值相同；第二种是使用lable包裹住文字和控件
按钮：
按钮可以做提交表单、重置和结合JS使用功能
标签为<button type=" ">说明文字</button>，其中属性值type:
submit:提交（不写type该功能为默认）
reset:(重置按钮，清空表单)
button：（普通按钮，默认无功能，结合JS使用）
按钮的功能实现需要配合另外一个标签form使用
form标签为<form action=" ">表单区域</form>
其中action为提交表单的地址
<form action="">
用户名：<input type="text" placeholder="请输入用户名">
<br><br>
密码：<input type="password" placeholder="六位以上字母+数字">
<br><br>
<label for="man">男</label>
<input type="radio" name="gender" id="man">
<label>女<input type="radio" name="gender"></label>
<br><br>
爱好：打篮球<input type="checkbox">踢足球<input type="checkbox">游泳<input type="checkbox">
<br><br>
城市：<select>
<option selected>北京</option>
<option>上海</option>
<option>重庆</option>
<option>深圳</option>
<option>广州</option>
</select>
<br><br>
<textarea placeholder="请发表评论"></textarea>
<br><br>
一寸照片：<input type="file">
<br><br><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>8、无语义的布局标签
无语义的标签用于占用网页界面，来对网页进行布局，其中
div:大盒子，独占一行<div></div>
span：小盒子不换行<span></span>
9、字符实体
在网页中显示预留字符，即显示HTML已经定义的字符，为了显示这些字符，使用&+字母的形式显示，例如：
空格： 
<：<
>：>