HTML基础
标签
标签，表示页面的“头”，定义特殊内容，其常见的内部标签如下表所示：| 内部标签 | 说明 |
|---|---|
| <title> | 定义网页的标题 |
| <meta> | 定义网页的基本信息（供搜素引擎） |
| <style> | 定义CSS样式 |
| <link> | 链接外部CSS文件/脚本文件 |
| <script> | 定义脚本语言 |
| <base> | 定义页面所有链接的基础定位 |
标签
在通过VS Code快捷生成HTML时，会自动生成部分<meta>标签，更具体的使用参考下述文章，链接如下：
<meta>标签
单标签（自闭合标签）
不必确定开始和结束，例如<br>和<hr>
标题标签
标题标签属于块元素（独占一行），有<hi>(i=1,2,…,6)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题标签</title>
</head>
<body>
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
</body>
</html>
段落标签
段落标签<p>属于块元素，段落之间有一定的空隙。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>段落标签</title>
</head>
<body>
<h1>文章标题</h1>
<hr>
<p>123456789123456789<br>123456789123456789123456789123456789123456789123456789123456789123456789</p>
<hr>
<p>123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789</p>
<hr>
</body>
</html>
格式化标签
格式化标签用于修改文字样式，常用的格式化标签如下图所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本格式化标签</title>
</head>
<body>
<b>加粗字体</b><br>
<strong>加粗字体</strong><br>
<u>下划线字体</u><br>
<ins>下划线字体</ins><br>
<i>倾斜字体</i><br>
<em>倾斜字体</em><br>
<s>删除线字体</s><br>
<del>删除线字体</del><br>
<strong><ins><em><del>极限融合</del></em></ins></strong>
</body>
</html>
标题语义化
根据语义选择正确的标签，而不是通过其他标签叠加、修改样式等方式模拟出类似的效果。
例如标题使用<h1>，<h2>等，而段落要使用<p>。
图像标签
<img>标签，该标签内部有若干属性，常用的属性如下表所示：
| 属性 | 含义 |
|---|---|
| src | 图像的URL |
| alt | 图像的替换文本（加载失败时显示） |
| width | 图像宽度（HTML5-CSS像素;HTML4也可以是百分比） |
| height | 图像高度（没有该属性时等比例缩放） |
| title | 鼠标悬停时显示的文本内容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片标签</title>
</head>
<body>
<img src="./88.jpg" title="悬停显示" alt="加载失败显示" width="800">
<!--width和height，只需给出其中一个，另一个是自动等比例缩放-->
</body>
</html>
音频标签
<audio>音频标签，支持的音频格式有MP3，wav，ogg等。
<audio>常用的属性如下表所示：
| 属性 | 含义 |
|---|---|
| controls | 显示播放的控件 |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音频标签</title>
</head>
<body>
<audio src="./test.wav" controls>
</audio>
<audio controls>
<source src="..." type="mpeg"/>
<source src="..." type="ogg"/>
<source src="..." type="wav"/>
不支持现有音频格式
</audio>
<!--优先级mp3＞ogg＞wav，都没有则无法播放-->
</body>
</html>
视频标签
<video>视频标签，常用的属性同<audio>，但是自动播放需要配合muted属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频标签</title>
</head>
<body>
<video src="./舞蹈风2.mp4" controls autoplay muted width="200"></video>
</body>
</html>
超链接标签
<a>超链接标签，常用的属性如下表所示：
| 属性 | 含义 |
|---|---|
| href | 跳转目标链接（#代表空链接） |
| target | 链接打开方式 |
| download | 是否是下载而非打开 |
| title | 鼠标悬停时显示的文本内容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>链接标签</title>
</head>
<body>
<a href="http://today.hit.edu.cn" target="_blank">跳转至今日哈工大</a>
<a href="./88.jpg" download="picture.jpg">下载图片</a>
</body>
</html>
target属性
target属性表示链接打开的方式，常见的取值如下表所示：
| 取值 | 含义 |
|---|---|
| _blank | 在新窗口打开 |
| _self | 在当前窗口打开（默认值） |
| _parent | 在父窗口打开 |
列表
列表有无序列表、有序列表、自定义列表。
无序列表和有序列表
无序列表<ul>无序列表整体 <li>列表每一项
有序列表<ol>有序列表整体 <li>列表每一项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无序列表和有序列表</title>
</head>
<body>
<h1>
无序列表和有序列表
</h1>
<ul>
<li>123</li>
<li>234</li>
<li>345</li>
</ul>
<hr>
<ol>
<li>123</li>
<li>456</li>
<li>789</li>
</ol>
</body>
</html>
自定义列表
自定义列表<dl>列表整体 <dt>列表表头 <dd>每一项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义列表</title>
</head>
<body>
<dl>
<dt><strong>列表表头</strong></dt>
<dd><ins>123</ins></dd>
<dd>345</dd>
</dl>
<!--dd默认有缩进-->
</body>
</html>
表格标签
<table>标签，内含有标签<caption>表名，<thead>表头，<tbody>表体，<tfoot>表尾。
<thead>中使用<tr>和<th>标签，而<tbody>和<tfoot>中使用<tr>和<td>；
跨行合并与跨列合并
在<td>标签中，使用rowspan属性进行跨行合并（保留最上面单元格的值），使用colspan属性进行跨列合并（保留最左边单元格的值）。
但是不能跨结构合并（如跨越<tbody>、<thead>）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>综合案例表格</title>
</head>
<body>
<table border="2" width="800" height="600">
<caption><strong>优秀学生信息表格</strong></caption>
<thead>
<tr>
<th>年级</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">高三</td>
<td>张三</td>
<td>110</td>
<td>三年二班</td>
</tr>
<tr>
<td>赵四</td>
<td>120</td>
<td>三年三班</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>评语</td>
<td colspan="2">优秀</td>
</tr>
</tfoot>
</table>
</body>
</html>
表单标签
<form>标签，用于表示整体，其action属性表示提交地址。
在<form>标签内部，多用<input>标签。
<input>标签
<input>标签根据type取值不同，有不同的作用，type取值如下图所示：
其中，有以下几点：
（1）单选框（radio）需要配合name属性使用。同一个name属性值的radio为一组，具有单选功能。
（2）文件上传（file）可以使用multiple属性实现多个文件上传功能。
（3）placeholder属性表示占位符。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>综合案例表单</title>
</head>
<body>
<h1>青春不常在，抓紧谈恋爱</h1>
<hr>
<form action="#">
昵称：<input type="text" id="username" placeholder="请输入昵称">
<br>
性别：<label><input type="radio" name="gender">男</label> <label><input type="radio" name="gender">女</label>
<br>
所在城市：<select name="city">
<option value="shanghai" selected>上海</option>
<option value="beijing">北京</option>
</select>
<br>
婚姻状况：<label><Input type="radio" name="info1">未婚</Input></label> <label><input type="radio" name="info1">已婚</label> <label><input type="radio" name="info1">保密</label>
<br>
喜欢的类型：<input type="checkbox">可爱 <input type="checkbox">御姐 <input type="checkbox">小鲜肉
<br>
个人介绍:
<br>
<textarea name="info2" cols="40" rows="20"></textarea>
<br>
<strong>我承诺</strong>
<ul >
<li>年满18</li>
<li>真心</li>
</ul>
<input type="checkbox" id="agree"><label for="agree">我同意所有条款</label>
<br>
<button value="免费注册">免费注册</button> <input type="reset" value="重置">
</form>
</body>
</html>
下拉列表标签
<select>标签表示下拉列表，内部包含若干个<option>标签表示每一个选项，<option>中使用selected属性表示整体下拉列表的默认值。
<label>标签
使用<label>标签可以实现点击其他区域时，也能选中/取消<input>选项。
（1）使用<label>标签包裹文字，使用其for属性表示选中的标签的id。
（2）直接使用<label>标签包裹<input>和文字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Label</title>
</head>
<body>
<form action="">
性别:
<input type="radio" name="gender" id="male"> <label for="male">男</label>
<label><input type="radio" name="gender" id="female"> 女</label>
</form>
</body>
</html>
无语义标签
<div>标签独占一行，而<span>标签一行可以有多个。他们常用来实现页面布局（如CSS中的盒子模型）。
字符实体
字符实体用来表述特殊字符，有如下几点作用：
（1）避免HTML解析错误。
（2）保留原有字符的含义。
（3）提供可读性和可维护性。
常见的字符实体如下图所示：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
