什么是HTML?
HTML(HyperText Markup Language,超文本标记语言)是一种用于创建和设计网页的标准标记语言。HTML是Web开发的基础,结合CSS(层叠样式表)和JavaScript(脚本语言),可以创建外观精美且交互丰富的网页。
HTML使用标签(tags)来定义网页的不同部分,如标题、段落、列表、链接、图像等。这些标签帮助浏览器理解和呈现网页内容。HTML标签内可以包含属性(Attributes)。
HTML 标签是由尖括号包围的关键词,例如 <html>
HTML文档的基本结构
一个标准的HTML文档由以下几个主要部分组成:
<!DOCTYPE html>
:声明文档类型,告知浏览器使用HTML5标准。<html>
:HTML文档的根元素。<head>
:包含元数据,如文档标题、字符集声明、样式表和脚本链接等。<title>
:设置网页的标题,显示在浏览器标签栏中。<body>
:包含网页的主体内容,如文本、图像、链接、表格等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
HTML中的注释
<!-- 这是一个注释 -->
<h1> ~ <h6>标题标签
独占一行。<h1>表示最大的标题,通常用作表示页面的主要内容或主题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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">
<title>Title</title>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
<p>标签不能嵌套使用,也就是说一个<p>标签不能包含另一个<p>标签。
<!-- 不正确的嵌套 -->
<p>这是一个段落。
<p>这是嵌套在段落中的另一个段落。</p>
</p>
<!-- 正确的使用 -->
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
路径
/ 表示进入某一个文件夹里面
. 表示当前文件所在的文件夹
.. 表示当前文件的上一级文件夹
- 使用绝对路径可以避免路径错误,但代码的可移植性较差。
- 使用相对路径可以提高代码的可移植性,但需要确保当前工作目录的正确性。
相对路径
绝对路径从文件系统的根目录开始,指定了文件或文件夹的完整位置。它包括所有目录的名称,直到目标文件或文件夹的具体位置。
Windows 示例: C:\Users\Username\Documents\file.txt
绝对路径
相对路径是相对于当前工作目录的路径,指定了文件或文件夹的位置。它不包括根目录,而是从当前目录出发。
Windows 示例: Documents\file.txt(假设当前路径为 C:\Users\Username)
<br>换行标签
<br>标签用于实现文本的换行。由于浏览器不能识别代码中的" Enter 键 "换行,所以如果文本需要换行则可以使用换行标签<br>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>这是第一行<br>这是第二行</p>
</body>
</html>
<hr>水平线标签
<hr>标签用于创建一个水平分隔线。你可以通过CSS来修改<hr>标签的样式,例如改变颜色、宽度、边框样式等。
<pre>预格式化标签
<pre>标签用于表示预格式化文本。在<pre>标签内的文本会按照原样显示,包括空格、制表符和换行符。它通常用于显示代码、编程脚本或其他需要保留格式的文本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<pre>
春晓
春眠不觉晓,处处闻啼鸟。
夜来风雨声,花落知多少。
</pre>
</body>
</html>
<img>图像标签
<img>标签用于在网页中嵌入图像。
<img>标签的属性有src,用于指定图像文件的路径。alt属性是在图像无法显示时的替代文本。width属性和height属性用于表示图像的宽度和高度,可以用像素(px)或百分比(%)表示。title属性是当用户悬停在图像上时显示的文本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="/images/img.png" alt="图片" title="图片" width="600px">
<!-- 如果width="50%",这将设置图像的宽度为其包含元素宽度的50% -->
</body>
</html>
<a>锚点标签
<a>标签通常用于创建超链接,允许用户从一个页面跳转到另一个页面,或在同一个页面的不同部分之间进行跳转,还可以用于下载文件。
<a>标签最常见的属性是href,用于指定链接的目标URL。title属性用于当用户悬停在链接上时显示文本。target属性用于指定链接的打开方式,常见的值有:
_self
:在同一窗口或标签中打开链接(默认)。_blank
:在新窗口或标签中打开链接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="https://www.baidu.com" target="_blank" title="百度一下,你就知道">百度</a>
</body>
</html>
download属性可以指定用户所下载的文件的文件名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="/documents/resource.rar" download="fileName.rar">下载文件</a>
</body>
</html>
内部链接:可以使用<a>标签在同一页面的不同部分之间导航。为此,我们需要为目标元素设置id属性,并在<a>标签的href属性中填写#id。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#two">第2集 </a>
<hr>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<hr>
<!-- 目标元素 -->
<p id="two">第2集介绍</p>
</body>
</html>
<a>标签还可以包含其他HTML元素,如文本、图像等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 点击图片跳转网页 -->
<a href="https://www.baidu.com">
<img src="/images/img.png" alt="图片" title="图片" width="600px">
</a>
</body>
</html>
<audio>音频标签
<audio>标签用于在网页中嵌入音频内容。它支持多种音频格式,如 MP3、WAV 和 Ogg。
src属性用于指定音频文件的 URL。controls属性用于添加播放、暂停、音量等控件。autoplay属性用于在页面加载时自动播放音频。注意,现代浏览器出于用户体验和隐私考虑,可能会阻止自动播放。loop属性用于使音频播放结束后自动重新播放。muted属性表示默认静音播放。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<audio src="audio_file.mp3" controls autoplay loop></audio>
</body>
</html>
<video>视频标签
<video>标签用于在网页中嵌入视频内容。包含src, controls, autoplay, loop, muted, width, height等属性。
<video src="#" width="300px" autoplay muted loop controls></video>
列表
有序列表
在HTML中,<ol>标签用于定义一个有序列表(ordered list)。有序列表中的列表项会按照特定的顺序显示,通常是数字或字母。每个列表项都使用<li>标签包裹。可以在一个列表项内嵌套另一个<ul>或<ol>标签形成列表的嵌套(多级列表)。
<ol>标签的type属性用于指定列表项的编号类型。start属性用于指定列表的起始编号。reversed属性属性用于将列表项的顺序反转,列表项会从最后一个开始编号。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<ol type="A" start="1">
<li>第一项</li>
<li type="1" value="5">第二项</li>
<!-- value属性会改变后面列表项的符号顺序 -->
<!-- type属性不会改变后面列表项的编号类型 -->
<li>第三项</li>
</ol>
</body>
</html>
无序列表
在HTML中,<ul>标签用于定义一个无序列表(unordered list)。无序列表中的每个列表项都由<li>标签包裹。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
</body>
</html>
可以在一个列表项内嵌套另一个<ul>或<ol>标签形成列表的嵌套(多级列表)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>水果
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>胡萝卜</li>
<li>土豆</li>
<li>西红柿</li>
</ul>
</li>
</ul>
</body>
</html>
定义列表
在HTML中,<dl>标签用于定义一个定义列表(Definition List)。它由一个或多个定义项组成。定义列表通常用于展示术语和其对应的定义。
<dl>
标签:定义列表的容器。<dt>
标签:定义列表的标题或术语。<dd>
标签:定义列表的描述或定义。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dt>JavaScript</dt>
<dd>一种脚本语言,用于创建动态网页内容</dd>
</dl>
</body>
</html>
定义列表可以嵌套其他列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<dl>
<dt>水果</dt>
<dd>
<dl>
<dt>苹果</dt>
<dd>红色的水果</dd>
<dt>香蕉</dt>
<dd>黄色的水果</dd>
</dl>
</dd>
<dt>蔬菜</dt>
<dd>
<dl>
<dt>胡萝卜</dt>
<dd>橙色的蔬菜</dd>
<dt>土豆</dt>
<dd>常见的根茎类蔬菜</dd>
</dl>
</dd>
</dl>
</body>
</html>
表格
在HTML中,表格使用<table>标签来定义。表格由行和列组成,用于组织和展示数据。
<table>
标签:定义表格的开始和结束。<tr>
标签:定义表格中的一行(Table Row)。<th>
标签:定义表格中的表头单元格(Table Header),通常用于表格的标题部分。<td>
标签:定义表格中的数据单元格(Table Data),用于表格的具体数据。<caption>
标签:用于定义表格的标题。
<table>标签中的border属性用于设置表格的边框的粗细。rolspan和colspan属性用于合并行或列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px">
<caption>用户信息表</caption>
<tr>
<th>姓名</th>
<th colspan="2">联系方式</th>
</tr>
<tr>
<td>张三</td>
<td>电话</td>
<td>邮箱</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>电话</td>
<td>邮箱</td>
</tr>
<tr>
<td>手机</td>
<td>微信</td>
</tr>
</table>
</body>
</html>
<thead>
、<tbody>
和 <tfoot>
标签:分别用于定义表格的头部、主体和尾部,便于组织和样式化表格内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">数据来源:某某数据库</td>
</tr>
</tfoot>
</table>
</body>
</html>
表单
一个基本的表单结构如下:
<form action="处理地址" method="请求方法">
<!-- 输入控件 -->
<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<input type="submit" value="提交">
</form>
文本框:用于输入单行文本。
<input type="text" name="username" placeholder="请输入用户名">
密码框:用于输入密码,输入内容会被隐藏。
<input type="password" name="password" placeholder="请输入密码">
单选框:允许用户从一组选项中选择一个。
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
多选框:允许用户选择一个或多个选项。
<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="music"> 音乐
<input type="checkbox" name="hobby" value="game"> 游戏
下拉列表:提供一个下拉菜单供用户选择。
<select name="country">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="uk">英国</option>
</select>
文本域:用于输入多行文本。
<textarea name="message" rows="4" cols="50"></textarea>
按钮:用于提交表单或执行其他操作。需要配合<form>标签才能实现对应的功能。
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">
上传文件:默认情况下,文件上传表单控件只能上传一个文件,如果添加multiple属性则可以实现上传多个文件的功能。
<input type="file" multiple>
<label>
标签:一般配合<input>标签使用,使得用户点击文字就可以选中想选择的选项(增大点击范围)。当用户点击<label>标签的文本时,浏览器会自动将焦点转到与该标签关联的表单控件上,这使得表单更加易于使用和访问。
<label><input type="radio" name="gender" value="male"> 男</label>
<label><input type="radio" name="gender" value="female"> 女</label>
<!-- <label>标签通过 for 属性与表单控件的 id 属性进行关联 -->
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<button>
标签:是HTML中用于创建按钮的标签,可以用来执行JavaScript代码、提交表单数据等。<button>标签是一个通用的按钮标签,不同于其他类型的按钮(如:<input type="submit">, <input type="button">),它提供了更多的自定义选项和样式控制。
<button type="按钮类型">按钮文本</button>
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<!-- onclick属性用于定义按钮点击时所执行的JavaScript代码 -->
<button onclick="alert('按钮被点击了!')">点击我</button>
以下是一个完整的表单示例:
这个表单包含了多种输入控件,可以收集用户的用户名、密码、性别、爱好、国家和留言内容。提交后,数据将通过POST方法发送到submit.php。<form>标签中的enctype属性用于指定表单数据的编码方式。这个属性对于上传文件尤其重要,因为它决定了数据在提交时的编码格式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="submit.php" method="post" enctype="multipart/form-data">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required><br><br>
<label for="gender">性别:</label>
<input type="radio" id="male" name="gender" value="male"> 男
<input type="radio" id="female" name="gender" value="female"> 女<br><br>
<label for="hobby">爱好:</label>
<input type="checkbox" id="reading" name="hobby" value="reading"> 阅读
<input type="checkbox" id="music" name="hobby" value="music"> 音乐<br><br>
<label for="country">国家:</label>
<select id="country" name="country">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="uk">英国</option>
</select><br><br>
<label for="message">留言:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>
HTML中的特殊字符
在HTML中,有一些特殊字符在代码中具有特殊意义,因此需要使用特定的方式来表示它们,以避免冲突或错误显示。
特殊字符 | 代实体码 | 特殊字符 | 实体代码 |
小于号< | < | 版权符号© | © |
大于号> | > | 注册商标号® | ® |
和号& | & | 乘号× | × |
双引号" | " | 除号÷ | ÷ |
空格 |   |
文本格式化标签
效果 | 标签 |
加粗 | <strong> 或 <b> |
倾斜 | <em> 或 <i> |
下划线 | <ints> 或 <u> |
<del> 或 <s> |