什么是HTML?
HTML是超文本标记语言（HyperText Markup Language）的缩写，是一种用于创建网页的标准标记语言。HTML允许网页设计师通过使用标签来描述网页的结构和内容。
W3C标准
W3C（World Wide Web Consortium）是一个国际组织，负责制定和推广互联网标准。W3C标准包括HTML、CSS、JavaScript等，这些标准确保了网页在不同浏览器和设备上的兼容性和一致性。
W3C标准包括：
- 结构化标准语言：HTML、XHTML、XM
- 表现标准语言：CSS
- 行为标准语言：DOM、ECMAScript
网页基本信息
网页的基本信息包括：
- DOCTYPE：使用
<!DOCTYPE html>标签定义文档类型，确保浏览器正确解析网页。 - 网页标题：使用
<title>标签定义网页的标题，该标题会显示在浏览器的标题栏中。 - 网页编码：使用
<meta charset="UTF-8">标签定义网页的编码，确保网页中的字符能够正确显示。 - 网页描述：使用
<meta name="description" content="网页描述">标签定义网页的描述，该描述会显示在搜索引擎结果中。 - 网页关键词：使用
<meta name="keywords" content="关键词1,关键词2,关键词3">标签定义网页的关键词，该关键词会显示在搜索引擎结果中。
示例使用
html
<!-- DOCTYPE 用于告诉浏览器我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!-- head标签标识网页头部 -->
<head>
<!-- meta标签用于描述网页的一些信息 -->
<meta charset="UTF-8">
<meta name="keywords" content="first web">
<meta name="description" content="第一个web网页">
<!-- title表示网页标题-->
<title>我的第一个web网页</title>
</head>
<!-- body 表示网页主体-->
<body>
Hello World!
</body>
</html>网页基本标签
网页的基本标签包括：
- 标题标签：使用
<h1>到<h6>标签定义网页的标题，其中<h1>表示最高级别的标题，<h6>表示最低级别的标题。 - 段落标签：使用
<p>标签定义网页的段落。 - 换行标签：使用
<br>标签定义网页的换行。 - 水平线标签：使用
<hr>标签定义网页的水平线。 - 字体样式(粗体、斜体)标签：使用
<b>标签定义网页的粗体文本，使用<i>标签定义网页的斜体文本。 - 注释标签：使用
<!-- 注释内容 -->标签定义网页的注释，注释内容不会显示在网页中。 - 特殊符号：使用
表示空格，使用<表示小于号，使用>表示大于号，使用&表示和号，使用"表示双引号，使用'表示单引号。
示例使用
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="first web">
<meta name="description" content="第一个web网页">
<title>我的第一个web网页</title>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<br/>换行标签
<p>这是一个<br>带有换行的段落。</p>
<hr/>水平线标签
<p><b>粗体文本</b></p>
<p><i>斜体文本</i></p>
<!-- 注释内容 -->
空格
<小于号
>大于号
&和号
"双引号
'单引号
</body>
</html>图像标签
图像标签使用<img>标签定义，其基本语法如下：
html
<img src="图片路径" alt="图片描述" title="悬停文字" width="宽度" height="高度"/>其中：
src属性指定图片的路径，可以是相对路径或绝对路径。alt属性指定图片的描述，当图片无法加载时，会显示该描述。width属性指定图片的宽度。height属性指定图片的高度。title属性指定图片的悬停文字，当鼠标悬停在图片上时，会显示该文字。
示例使用
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
<img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/>
</head>
<body>
</body>
</html>链接标签
链接标签使用<a>标签定义，其基本语法如下：
html
<a href="链接地址" target="打开方式">链接文本</a>其中：
href属性指定链接的地址，可以是相对路径或绝对路径。如果链接到另一个网页，则该地址应为该网页的URL。target属性指定链接的打开方式，可以是以下值之一：_self：在当前窗口中打开链接。_blank：在新窗口中打开链接。_parent：在父窗口中打开链接。_top：在顶级窗口中打开链接。
- 链接文本是用户点击后跳转到的页面,也可以是任何文本或图像。
示例使用
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度</a>
<a href="https://re.bluepoch.com/home/" target="_blank">
<img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/>
</a>
</body>
</html>锚点链接
锚点链接是指在一个网页内部创建一个链接，用户点击该链接后，可以跳转到网页中的某个特定位置。锚点链接使用<a>标签定义，其基本语法如下：
html
<a href="#锚点名称">链接文本</a>其中，#后面的锚点名称是网页中某个特定位置的标识符，用户点击该链接后，浏览器会自动滚动到该位置。
示例使用
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锚点链接</title>
</head>
<body>
<h2 id="top">顶部</h2>
<a href="#bottom">跳转到底部</a>
<br>
<img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/>
<img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/>
<img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/>
<img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/>
<img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/>
<img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/>
<img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/>
<img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/><img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/>
<img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/>
<img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/>
<img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/><img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/>
<img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/>
<img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/>
<img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/><img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/>
<img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/>
<img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/>
<img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/><img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/>
<img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/>
<img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/>
<img src="../resources/images/vertin.jpg" atl="维尔汀" title="维尔汀图片" width="889" height="500"/>
<br/>
<a href="#top">跳转到顶部</a>
<a id="bottom">底部</a>
</body>
</html>功能性连接
功能性连接是指连接到可以执行某些功能的页面，例如搜索、打印、发送电子邮件等。这些连接通常以图标或文本的形式表示，并带有适当的描述性文本。
html
<a href="mailto:example@example.com">发送电子邮件</a>
<a href="tel:+1234567890">拨打电话</a>
<a href="sms:+1234567890">发送短信</a>
<a href="https://www.example.com/search?q=example">搜索</a>
<a href="javascript:window.print()">打印</a>行内元素和块元素
在HTML中，元素可以分为行内元素和块元素。行内元素（inline elements）和块元素（block elements）在布局和样式上有一些重要的区别。
行内元素
行内元素是那些在页面中水平排列的元素。它们通常用于显示文本或图像，并且不会占据整行空间。行内元素通常不会在前后添加换行符，因此它们可以与其他行内元素在同一行中显示。
常见的行内元素包括：
<a>：超链接<span>：用于包裹文本或图像，以便应用样式<img>：图像<strong>：加粗文本<em>：斜体文本<small>：小号文本<big>：大号文本
块元素
块元素是那些在页面中垂直排列的元素。它们通常用于显示大块的内容，并且会占据整行空间。块元素会在前后添加换行符，因此它们会占据整行空间，并且可以包含其他块元素或行内元素。
常见的块元素包括：
<div>：用于包裹其他元素，以便应用样式<p>：段落<h1>-<h6>：标题<ul>、<ol>、<li>：无序列表、有序列表和列表项
列表标签
在HTML中，列表标签用于创建有序列表、无序列表和描述列表。这些标签可以帮助你以结构化的方式显示信息。
无序列表
无序列表使用<ul>标签创建，其中每个列表项使用<li>标签表示。无序列表中的项通常以项目符号（如圆点）表示。
html
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>有序列表
有序列表使用<ol>标签创建，其中每个列表项使用<li>标签表示。有序列表中的项通常以数字或字母表示。
html
<ol>
<li>步骤1</li>
<li>步骤2</li>
<li>步骤3</li>
</ol>描述列表
描述列表使用<dl>标签创建，其中每个描述项使用<dt>标签表示，每个描述内容使用<dd>标签表示。
html
<dl>
<dt>苹果</dt>
<dd>一种水果</dd>
<dt>香蕉</dt>
<dd>另一种水果</dd>
</dl>表格标签
在HTML中，表格标签用于创建表格。表格可以用于显示数据，也可以用于布局页面。
表格结构
表格由行和列组成。每个表格由<table>标签表示，行由<tr>标签表示，列由<td>标签表示。
html
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
</tr>
</table>表格属性
表格有一些常用的属性，例如：border用于设置表格边框的宽度，cellpadding用于设置单元格内容与边框之间的间距，cellspacing用于设置单元格之间的间距。
html
<table border="1" cellpadding="10" cellspacing="5">
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
</tr>
</table>表头单元格
表头单元格使用<th>标签表示，通常用于表格的第一行或第一列，以表示列或行的标题。
html
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
</tr>
</table>表格标题
表格标题使用<caption>标签表示，通常位于表格的开头，用于描述表格的内容。
html
<table border="1">
<caption>人员信息</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
</tr>
</table>表格合并
表格合并使用rowspan和colspan属性，rowspan用于合并行，colspan用于合并列。
html
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td colspan="3">李四</td>
</tr>
</table>视频和音频
视频标签
视频标签使用<video>标签表示，可以用于嵌入视频文件。
html
<video src="video.mp4" controls></video>音频标签
音频标签使用<audio>标签表示，可以用于嵌入音频文件。
html
<audio src="audio.mp3" controls></audio>controls属性
controls属性用于显示视频或音频的播放控件，如播放/暂停按钮、音量控制等。
html
<video src="video.mp4" controls></video>
<audio src="audio.mp3" controls></audio>autoplay属性
autoplay属性用于自动播放视频或音频，但请注意，并非所有浏览器都支持自动播放。
html
<video src="video.mp4" controls autoplay></video>
<audio src="audio.mp3" controls autoplay></audio>loop属性
loop属性用于循环播放视频或音频。
html
<video src="video.mp4" controls loop></video>
<audio src="audio.mp3" controls loop></audio>页面结构
页面通常包含如下元素：
- header：页面的头部，通常包含网站的logo、导航栏等。
- nav：导航栏，通常包含网站的链接。
- main：页面的主要内容区域。
- footer：页面的底部，通常包含网站的版权信息、联系方式等。
- section：用于将页面内容划分为不同的部分。
- article：用于表示独立的内容块，如新闻文章、博客文章等。
- aside：用于表示与主要内容相关的附加信息，如侧边栏、广告等。
iframe内联框架
iframe标签用于在网页中嵌入另一个网页。
html
<iframe src="https://www.example.com" width="500" height="300"></iframe>src属性
src属性用于指定要嵌入的网页的URL。
width和height属性
width和height属性用于指定iframe的宽度和高度。
frameborder属性
frameborder属性用于指定是否显示iframe的边框，默认值为1，表示显示边框，设置为0则不显示边框。
name属性
name属性用于指定iframe的名称，可以在JavaScript中使用该名称来操作iframe。
表单
表单用于收集用户输入的数据，并将其发送到服务器进行处理。
表单语法
表单的基本语法如下：
html
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>表单通常可以包含如下属性及元素：
action属性
action属性用于指定表单提交的URL，即用户提交表单后，数据将被发送到该URL进行处理。
method属性
method属性用于指定表单提交的方法，常用的方法有GET和POST，GET方法将表单数据附加在URL后面发送，POST方法将表单数据作为请求的主体发送。
label元素
label元素用于为表单元素提供标签，提高用户体验,点击可让用户跳转到某输入框。
input元素
input元素用于收集用户输入的数据，常用的类型有text、password、checkbox、radio、submit等。
textarea元素
textarea元素用于收集用户输入的多行文本。
select元素
select元素用于创建下拉列表，用户可以从列表中选择一个选项。
option元素
option元素用于定义下拉列表中的选项。
input元素的属性
input元素具有多个属性，用于指定输入框的类型、名称、值等。
type属性
type属性用于指定输入框的类型，常用的类型有file、text、password、checkbox、radio、submit、button、image(也是个按钮，可提交表单)、email(邮箱验证)、number(数字验证)、url(网址验证)、range（滑动条）、search(搜索框)。
name属性
name属性用于指定输入框的名称，在提交表单时，该名称将作为键值对的一部分发送到服务器。
value属性
value属性用于指定输入框的默认值，即用户在输入框中输入的内容。
maxlength属性
maxlength属性用于指定输入框的最大长度，即用户最多可以输入多少个字符。
size属性
size属性用于指定输入框的宽度，即输入框中可以显示的字符数。
checked属性
checked属性用于指定checkbox或radio类型的输入框是否被选中，默认值为false，设置为true表示被选中。
disabled属性
disabled属性用于指定输入框是否可用，默认值为false，设置为true表示不可用。
readonly属性
readonly属性用于指定输入框是否只读，默认值为false，设置为true表示只读。
hidden属性
hidden属性用于指定输入框是否隐藏，默认值为false，设置为true表示隐藏。
placeholder属性
placeholder属性用于指定输入框的占位符，即输入框为空时显示的提示信息。
required属性
required属性用于指定输入框是否必填，默认值为false，设置为true表示必填。
pattern属性
pattern属性用于指定输入框的验证模式(正则表达式)，即输入的内容必须符合该模式，否则无法提交表单。
示例使用
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--表单-->
<form action="图片标签.html" method="post">
<p>姓名： <input type="text" name="name" ></p>
<p>密码： <input type="password" name="pwd"></p>
<p><label for="mood">心情：</label>
<input type="text" id="mood" value="飞一样的感觉" maxlength="6"></p>
<p>
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
</p>
<!--多选框-->
<p>英雄选择</p>
<p>
<input type="checkbox" value="LiBai" name="hero">李白
<input type="checkbox" value="AnQiLa" name="hero">安其拉
<input type="checkbox" value="XiangYu" name="hero">项羽
<input type="checkbox" value="ZhangFei" name="hero">张飞
<input type="checkbox" value="HouYi" name="hero">后裔
</p>
<!-- 下拉框-->
<select name="武器" >
<option value="pistol">手枪</option>
<option value="boom">炸弹</option>
<option value="machineGun">机关枪</option>
<option value="bar" selected>棒子</option>
</select>
<!--文件选择框-->
<input type="file" name="files"> <input type="button" value="上传文件">
<!-- 按钮-->
<p>
<input type="button" value="按钮">
<input type="image" src="../resources/images/vertin.jpg">
</p>
<p><input type="submit" value="提交"> <input type="reset" value="清空"></p>
<!--文本框-->
<textarea name="文本框" cols="30" rows="10"></textarea>
<!-- 滑动条-->
<input type="range" name="vol" max="100" min="0" value="99">
<!-- 搜索框-->
搜索框<input type="search" name="sea">
</form>
</body>
</html>