编程技术

Document

HTML 常用标签

HTML 常用标签

在 HTML 中，有许多常用标签用于构建网页内容，以下是一些主要的常用标签介绍：

一、标题标签

标题标签用于定义不同级别的标题，从<h1>到<h6>，重要性依次递减。例如：

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

<h1>标签通常用于表示页面最重要的标题，而<h6>则用于相对次要的标题层次。每个标题标签所包含的文字都会独占一行，并且随着数字增大，标题字体逐渐变小。

二、段落标签

<p>标签用于定义段落文本。例如：

<p>这是一段文本内容，它在网页上以段落的形式呈现。段落标签可以将文本进行合理的分段，使页面布局更加清晰易读。</p>

三、换行标签

<br />是换行标签，它用于在文本中强制换行。比如：

第一行<br />第二行

这样就会在“第一行”和“第二行”之间产生换行效果，而不需要像段落标签那样有较大的间距。

四、文本格式化标签

  1. 字体加粗：可以使用<strong>或<b>标签。例如：
<strong>这段文字加粗显示</strong>
<b>这也是加粗的文字</b>
  1. 字体倾斜：<em>或<i>标签可实现字体倾斜。例如：
<em>这段文字倾斜显示</em>
<i>这同样是倾斜的文字</i>
  1. 字体加删除线：<del>或<s>标签用于添加删除线。例如：
<del>这段被删除线划过的文字</del>
<s>这行文字也有删除线</s>
  1. 字体加下划线：<ins>或<u>标签可给文字添加下划线。例如：
<ins>带有下划线的文字</ins>
<u>这串文字也有下划线</u>

五、<div>和<span>标签

  1. <div>标签常用于对页面进行布局划分，它是一个块级元素，意味着<div>内的文本内容独占一行。例如：
<div>
  <p>这是 div 中的一段文字</p>
  <p>这是 div 中的另一段文字</p>
</div>
  1. <span>标签是内联元素，一行可以有多个<span>。例如：
<span>第一个 span 元素</span><span>第二个 span 元素</span>

六、图像标签

<img />是用于插入图像的单标签。它有多个重要属性：

  • src：指定图像的源文件路径，例如<img src="image.jpg" />，这里的“image.jpg”就是图像的文件名或网络路径。
  • alt：当图像无法显示时，用于替代图像显示的文本描述，如<img src="image.jpg" alt="这是一张美丽的图片" />。
  • title：当鼠标悬停在图像上时显示的提示文本，例如<img src="image.jpg" title="图片详情" />。
  • width和height：用于设置图像的宽度和高度，如<img src="image.jpg" width="300" height="200" />。

七、超链接标签

超链接标签<a>用于创建链接到其他页面、文件或同一页面内特定位置的链接。其基本格式为：

<a href="链接目标" target="链接打开方式">文本信息</a>

其中，href属性是必须的，用于指定链接的目标地址。例如：

<a href="https://www.example.com">点击跳转到示例网站</a>

target属性表示网页的跳转方式，常见的值有“_self”（在当前窗口打开，默认值）和“_blank”（在新窗口打开），如：

<a href="https://www.example.com" target="_blank">在新窗口打开示例网站链接</a>

超链接可以分为多种类型：

  • 外部链接：链接到其他网站的链接，如上述示例。
  • 内部链接：链接到同一网站内其他页面的链接，例如<a href="about.html">关于我们</a>。
  • 空链接：当href属性值为“#”时，创建空链接，可用于添加 JavaScript 行为或作为占位符，如<a href="#">点击此处无实际跳转</a>。
  • 下载链接：通过设置href为文件的路径，当用户点击时可下载文件，如<a href="document.pdf">下载文档</a>。
  • 网页元素链接：可以链接到页面内的某个特定元素，需要先给目标元素设置id属性，然后在链接的href中使用“#元素 id”，例如：
<div id="section1">这是目标区域</div>
<a href="#section1">跳转到目标区域</a>
  • 锚点链接：类似于网页元素链接，可用于在长页面中快速导航到特定位置。

八、表格标签

表格标签用于创建表格结构，大致格式如下：

<table>
  <tr>
    <td>文本信息 1</td>
    <td>文本信息 2</td>
  </tr>
</table>

其中，<table>标签定义整个表格，<tr>标签表示表格的行，<td>标签表示表格的单元格。例如：

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

还有一些特殊的表格标签：

  • 表头单元格标签：使用<th>标签代替<td>标签来定义表头单元格，会使文字加粗并居中显示，例如：
<table>
  <tr>
    <th>列名 1</th>
    <th>列名 2</th>
  </tr>
  <tr>
    <td>数据 1</td>
    <td>数据 2</td>
  </tr>
</table>
  • 表格结构标签：可以使用<thead>标签定义表格头部，<tbody>标签定义表格主体，使表格结构更清晰，例如：
<table>
  <thead>
    <tr>
      <th>表头 1</th>
      <th>表头 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据 1</td>
      <td>数据 2</td>
    </tr>
  </tbody>
</table>
  • 合并单元格：跨行合并使用rowspan = "合并单元格的个数"属性，跨列合并使用colspan = "合并单元格的个数"属性。例如：
<table>
  <tr>
    <td rowspan="2">合并两行的单元格</td>
    <td>普通单元格</td>
  </tr>
  <tr>
    <td>普通单元格</td>
  </tr>
</table>

九、列表标签

  1. 无序列表：<ul>标签表示 HTML 页面中的无序列表，其中的<li>标签来存放列表项。例如：
<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>

无序列表默认的列表项标记是实心圆点，也可以通过 CSS 样式进行修改。
2. 有序列表：<ol>标签表示 HTML 页面中的有序列表，同样使用<li>标签存放列表项。例如：

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

有序列表默认的列表项标记是数字序号，也可通过 CSS 定制。
3. 自定义列表：<dl>标签表示定义列表，<dt>标签定义名字，<dd>标签定义名字解释。例如：

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用于构建网页结构。</dd>
  <dt>CSS</dt>
  <dd>层叠样式表，用于美化网页样式。</dd>
</dl>

十、表单标签

表单标签用于收集用户信息并提交到服务器。它由表单域、表单控件和提示信息三部分组成。

  1. 表单域：使用<form>标签来定义表单域，包含以下重要属性：
  • action：指定表单数据提交的目标 URL，例如<form action="submit.php">，表示表单数据将提交到“submit.php”页面进行处理。
  • method：指定提交数据的方式，常见的值有“get”（将数据附加在 URL 后发送，适合少量非敏感数据）和“post”（将数据放在请求体中发送，适合大量或敏感数据），如<form method="post">。
  • name：给表单命名，方便在 JavaScript 等脚本中引用，如<form name="myForm">。
  1. 表单控件：
  • input 输入表单元素：有多种类型，如文本框（type="text"）、密码框（type="password"）、单选按钮（type="radio"）、复选框（type="checkbox"）、提交按钮（type="submit"）、重置按钮（type="reset"）等。例如：
<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="submit" value="提交">
<input type="reset" value="重置">
  • select 下拉表单元素：用于创建下拉菜单，例如：
<select name="city">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
</select>
  • textarea 文本域元素：用于输入多行文本，例如：
<textarea name="message" rows="5" cols="30">请在此输入留言</textarea>

这些 HTML 常用标签是构建网页的基础，通过合理组合和运用它们，可以创建出丰富多样、功能完备的网页。