HTML之常用基础标签
HTML之常用基础标签
- 一、HTML文档基本结构标签
- 1. `<html>`标签
- 2. `<head>`标签
- 3. `<body>`标签
- 二、文本相关基础标签
- 1. 标题标签（`<h1>` - `<h6>`）
- 2. 段落标签（`<p>`）
- 3. 换行标签（`<br>`）
- 4. 强调标签（`<em>`和`<strong>`）
- 5. 代码标签（`<code>`、`<pre>`等）
- 三、链接相关基础标签
- 1. 超链接标签（`<a>`）
- 2. 图像标签（`<img>`）
- 四、列表相关基础标签
- 1. 无序列表（`<ul>`和`<li>`）
- 2. 有序列表（`<ol>`和`<li>`）
- 3. 自定义列表（`<dl>`、`<dt>`和`<dd>`）
- 五、表格相关基础标签
- 1. 表格标签（`<table>`、`<tr>`、`<td>`等）
- 六、表单相关基础标签
- 1. 表单标签（`<form>`）
- 2. 其他表单元素（`<select>`、`<textarea>`等）
一、HTML文档基本结构标签
1. <html>标签
<html>标签是HTML文档的根元素，整个HTML页面的所有内容都包含在该标签内。它就像是一座大厦的框架，界定了网页的范围。一个标准的HTML文档以<html>标签开始，以</html>标签结束。
<html><!-- 网页内容都写在这里 -->
</html>
2. <head>标签
<head>标签用于定义HTML文档的头部信息，这些信息不会直接显示在网页的可视区域，而是包含了网页的元数据，如网页标题、字符编码、引入外部样式表和脚本等。它类似于一本书的目录页，虽然不展示具体内容，但对整体内容的呈现起到重要的辅助作用。
<head><meta charset="UTF-8"><title>我的网页标题</title><link rel="stylesheet" href="styles.css"><script src="script.js"></script>
</head>
在上述代码中，<meta charset="UTF-8">定义了网页的字符编码为UTF-8，确保网页能够正确显示各种字符；<title>标签设置了网页在浏览器标签页显示的标题；<link>标签用于引入外部的CSS样式表，让网页可以按照指定的样式进行渲染；<script>标签则用于引入外部的JavaScript脚本，实现网页的交互功能。
3. <body>标签
<body>标签是HTML文档的主体部分，网页中所有可见的内容，如文字、图片、链接等，都要写在<body>标签内。它是用户实际浏览到的页面内容区域，相当于书中真正的正文部分。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>我的网页</title>
</head>
<body>这是网页的正文内容！
</body>
</html>
二、文本相关基础标签
1. 标题标签（<h1> - <h6>）
HTML提供了6个等级的标题标签，从<h1>到<h6>，重要性依次递减，字体大小也逐渐变小。标题标签常用于划分网页的不同章节和主题，使页面结构更加清晰，就像书籍中的各级标题一样。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>标题标签示例</title>
</head>
<body><h1>一级标题：网页主标题</h1><h2>二级标题：章节主题</h2><h3>三级标题：小节主题</h3><h4>四级标题：更小的主题</h4><h5>五级标题：辅助主题</h5><h6>六级标题：最次要主题</h6>
</body>
</html>
2. 段落标签（<p>）
<p>标签用于定义一个段落。在网页中，将相关的文本内容放在<p>标签内，可以使文本以段落的形式展示，增强可读性。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>段落标签示例</title>
</head>
<body><p>这是第一个段落，包含了一些描述性的文字。</p><p>这是第二个段落，与第一个段落内容相互独立。</p>
</body>
</html>
3. 换行标签（<br>）
<br>标签是一个单标签（自闭合标签），用于在文本中强制换行。当需要在段落内实现换行效果，但又不想产生新的段落间隔时，就可以使用<br>标签。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>换行标签示例</title>
</head>
<body><p>这是一行文本<br>这是换行后的文本。</p>
</body>
</html>
4. 强调标签（<em>和<strong>）
<em>标签用于定义强调文本，通常会以斜体的形式显示；<strong>标签用于定义重要文本，一般会以加粗的形式呈现。两者都能起到突出文本内容的作用，但语义略有不同，<strong>表示内容的重要性，<em>侧重于表达强调语气。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>强调标签示例</title>
</head>
<body><p>这是一段普通文本，其中<em>这句话</em>需要强调语气，<strong>这句话</strong>非常重要。</p>
</body>
</html>
5. 代码标签（<code>、<pre>等）
在网页中展示代码片段时，<code>标签用于标记内联代码，<pre>标签则用于保留文本的原始格式（包括空格和换行）展示代码块。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>代码标签示例</title>
</head>
<body><p>以下是一个简单的JavaScript代码示例：</p><pre><code>
function add(a, b) {return a + b;
}</code></pre>
</body>
</html>
三、链接相关基础标签
1. 超链接标签（<a>）
<a>标签用于创建超链接，通过href属性指定链接的目标地址，可以链接到其他网页、文件、锚点等。它是网页之间相互跳转的桥梁。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>超链接标签示例</title>
</head>
<body><p>点击以下链接访问百度：<a href="https://www.baidu.com">百度</a></p><p>下载文件：<a href="example.pdf" download>示例文件</a></p><p>跳转到页面内的锚点：<a href="#section1">跳转到第一节</a></p><h2 id="section1">第一节内容</h2><p>这里是第一节的具体内容……</p>
</body>
</html>
在上述代码中，第一个链接通过href属性指向外部网站；第二个链接添加了download属性，用于实现文件下载功能；第三个链接通过href属性指向页面内带有id="section1"的元素，实现页面内的跳转。
2. 图像标签（<img>）
<img>标签用于在网页中插入图像，通过src属性指定图像文件的路径，alt属性用于在图像无法显示时显示替代文本，width和height属性可以设置图像的宽度和高度。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>图像标签示例</title>
</head>
<body><img src="example.jpg" alt="示例图片" width="300" height="200">
</body>
</html>
四、列表相关基础标签
1. 无序列表（<ul>和<li>）
<ul>标签用于创建无序列表，列表项使用<li>标签定义，列表项前面会显示默认的项目符号（如圆点）。常用于展示没有顺序要求的项目集合。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>无序列表示例</title>
</head>
<body><h2>水果列表</h2><ul><li>苹果</li><li>香蕉</li><li>橙子</li></ul>
</body>
</html>
2. 有序列表（<ol>和<li>）
<ol>标签用于创建有序列表，同样使用<li>标签定义列表项，列表项前面会显示数字序号。适用于有先后顺序的内容展示。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>有序列表示例</title>
</head>
<body><h2>任务清单</h2><ol><li>完成需求分析</li><li>进行设计规划</li><li>编写代码实现</li></ol>
</body>
</html>
3. 自定义列表（<dl>、<dt>和<dd>）
<dl>标签用于创建自定义列表，<dt>标签定义术语，<dd>标签定义术语的解释。常用于展示术语与解释的对应关系。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>自定义列表示例</title>
</head>
<body><h2>计算机术语解释</h2><dl><dt>HTML</dt><dd>超文本标记语言，用于创建网页结构。</dd><dt>CSS</dt><dd>层叠样式表，用于美化网页外观。</dd><dt>JavaScript</dt><dd>一种脚本语言，用于实现网页交互功能。</dd></dl>
</body>
</html>
五、表格相关基础标签
1. 表格标签（<table>、<tr>、<td>等）
<table>标签用于创建表格，<tr>标签定义表格的行，<td>标签定义表格的单元格。此外，<th>标签用于定义表头单元格，通常会以加粗、居中的样式显示。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>表格标签示例</title>
</head>
<body><table border="1"><tr><th>姓名</th><th>年龄</th><th>性别</th></tr><tr><td>张三</td><td>25</td><td>男</td></tr><tr><td>李四</td><td>23</td><td>女</td></tr></table>
</body>
</html>
在上述代码中，border="1"用于显示表格的边框，实际开发中更多通过CSS来控制表格样式。
六、表单相关基础标签
1. 表单标签（<form>）
<form>标签用于创建表单，用于收集用户输入的数据，如注册、登录、调查问卷等。通过action属性指定表单数据提交的目标地址，method属性指定提交数据的方式（如GET或POST）。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>表单标签示例</title>
</head>
<body><form action="submit.php" method="post"><label for="username">用户名：</label><input type="text" id="username" name="username"><br><label for="password">密码：</label><input type="password" id="password" name="password"><br><input type="submit" value="提交"></form>
</body>
</html>
在上述代码中，<label>标签用于为表单元素添加描述信息，for属性与对应的表单元素的id属性值相同，这样点击标签文本时会自动聚焦到对应的表单元素上。<input>标签用于创建不同类型的输入字段，如文本框（type="text"）、密码框（type="password"）、提交按钮（type="submit"）等。
2. 其他表单元素（<select>、<textarea>等）
<select>标签用于创建下拉选择框，<option>标签定义下拉选项；<textarea>标签用于创建多行文本输入框。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>其他表单元素示例</title>
</head>
<body><form action="submit.php" method="post"><label for="city">选择城市：</label><select id="city" name="city"><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option></select><br><label for="message">留言：</label><br><textarea id="message" name="message" rows="5" cols="30"></textarea><br><input type="submit" value="提交"></form>
</body>
</html>
若这篇内容帮到你，动动手指支持下！关注不迷路，干货持续输出！
ヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉ