《常见 HTML 标签和属性全解析》

IT农民工~

于 2024-10-10 11:15:29 发布

阅读量477

点赞数 10

分类专栏：前端专栏文章标签： html 前端

本文链接：https://blog.csdn.net/anyifeiyi/article/details/142816558

版权

前端专栏专栏收录该内容

2 篇文章 0 订阅

订阅专栏

《常见 HTML 标签和属性全解析》

在网页开发的世界里，HTML（超文本标记语言）就像是构建数字大厦的基石。它通过各种标签和属性来定义网页的结构、内容和样式。下面，让我们深入了解一些常见的 HTML 标签和属性。

一、HTML 标签

< html >标签
这是整个 HTML 文档的根标签，它包裹了所有其他的 HTML 元素，标志着网页内容的开始和结束。
< head >标签
位于< html >标签内部，包含了网页的元数据，如标题、字符编码、样式表链接和脚本链接等。其中，< title >标签用于定义网页的标题，显示在浏览器的标签栏上。
< body >标签
同样在< html >标签内部，包含了网页的可见内容，如文本、图像、链接、表格等。
< h1 >到< h6 >标签
用于定义不同级别的标题，< h1 >是最高级别的标题，通常用于网页的主标题，< h6 >是最低级别的标题。这些标签可以使网页内容具有层次结构，方便用户阅读。
< p >标签
用于定义段落，是网页中最常见的文本容器之一。可以通过 CSS 来控制段落的样式，如字体大小、颜色、行高等。
< a >标签
创建链接的重要标签。通过设置href属性，可以链接到其他网页、文件、电子邮件地址等。例如，< a href=“https://www.example.com” >链接文本< /a >。
< img >标签
用于在网页中插入图像。需要设置src属性指定图像的源文件地址，还可以设置alt属性提供图像的替代文本，以便在图像无法显示时提供描述。
< ul >和< ol >标签
分别用于创建无序列表和有序列表。列表项使用< li >标签定义。无序列表通常以项目符号显示，有序列表则以数字或字母顺序显示。
< table >标签
用于创建表格。包含< tr >（表格行）和< td >（表格单元格）等子标签。可以使用 CSS 来美化表格的样式。
< form >标签
用于创建表单，收集用户输入的数据。表单元素包括< input >、< select >、< textarea >等，可以通过设置不同的属性来实现各种输入类型和功能。

二、HTML 属性

class属性
用于为 HTML 元素分配一个或多个类名，以便通过 CSS 或 JavaScript 选择和操作这些元素。例如，< div class=“my-class” >内容< /div >。
id属性
为一个 HTML 元素分配唯一的标识符。可以通过 CSS 或 JavaScript 来选择具有特定id的元素。例如，< div id=“my-id” >内容< /div >。
style属性
允许直接在 HTML 元素上设置内联样式。例如，< div style=“color: blue;” >内容< /div >。但通常不建议大量使用内联样式，因为它会使代码难以维护。
src属性
主要用于< img >、< script >和< iframe >等标签，指定资源的地址。如< img src=“image.jpg” >。
href属性
如前所述，用于< a >标签，指定链接的目标地址。
alt属性
对于< img >标签，提供图像的替代文本，在图像无法显示时显示，也有助于搜索引擎优化和无障碍访问。
title属性
可以为任何 HTML 元素添加标题信息。当鼠标悬停在元素上时，会显示该标题。

三、示例代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>HTML 标签示例</title>
</head>

<body>
  <!-- 标题标签 -->
  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>

  <!-- 段落标签 -->
  <p>这是一个段落。段落是网页中常见的文本容器。</p>

  <!-- 链接标签 -->
  <a href="https://www.example.com">这是一个链接</a>

  <!-- 图像标签 -->
  <img src="beautiful-image.jpg" alt="一张美丽的图片">

  <!-- 无序列表标签 -->
  <ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
  </ul>

  <!-- 有序列表标签 -->
  <ol>
    <li>有序列表项 1</li>
    <li>有序列表项 2</li>
    <li>有序列表项 3</li>
  </ol>

  <!-- 表格标签 -->
  <table>
    <tr>
      <th>表头 1</th>
      <th>表头 2</th>
    </tr>
    <tr>
      <td>表格内容 1</td>
      <td>表格内容 2</td>
    </tr>
  </table>

  <!-- 表单标签 -->
  <form>
    <input type="text" name="username" placeholder="请输入用户名">
    <input type="password" name="password" placeholder="请输入密码">
    <select name="options">
      <option value="option1">选项 1</option>
      <option value="option2">选项 2</option>
    </select>
    <textarea name="description" placeholder="请输入描述"></textarea>
    <input type="submit" value="提交">
  </form>

  <!-- class 属性示例 -->
  <div class="highlighted-text">这段文本有特定的样式类</div>

  <!-- id 属性示例 -->
  <div id="unique-element">这个元素有唯一的标识符</div>

  <!-- style 属性示例 -->
  <p style="color: red;">这段文本使用内联样式设置为红色</p>

  <!-- title 属性示例 -->
  <img src="another-image.jpg" alt="另一张图片" title="鼠标悬停时显示此标题">
</body>

</html>