HTML 常用标签的使用方法及属性

原创已于 2024-12-15 14:42:24 修改 · 1.8k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2024-12-15 01:33:55 首次发布

一、<HTML>标签

二、<head>标签

三、<body>标签

四、<div><span>标签

五、<input>标签

总结

前言

在网页开发中，HTML（超文本标记语言）是构建网页的基础。了解 HTML 常用标签的使用方法及属性对于创建吸引人且功能强大的网页至关重要。本文将详细介绍一些常见的 HTML 标签及其用法和属性。

定义与用途：<html>标签是整个 HTML 文档的根元素，它包裹了文档的所有内容。这个标签告诉浏览器这是一个 HTML 文档，并为文档的结构和内容提供了一个框架。
属性：通常使用lang属性来指定文档的语言，例如<html lang="en">表示文档是英文的，<html lang="zh-CN">表示文档是中文简体。

1.定义与用途：<head>标签包含了文档的元数据，这些信息不会直接显示在网页上，但对浏览器和搜索引擎非常重要。

2.常用子标签及属性：

<title>：定义网页的标题，显示在浏览器的标题栏和标签页上。例如<title>精彩网页标题</title>。
- <meta>：用于提供各种元数据，如字符编码、页面描述、关键词等。
  - charset属性用于指定字符编码，常见的有<meta charset="UTF-8">，确保网页能够正确显示各种字符。
  - name和content属性可用于设置页面描述和关键词，有助于搜索引擎优化。例如<meta name="description" content="这是一个精彩的网页描述。">和<meta name="keywords" content="HTML, 标签, 网页开发">。
- <link>：用于连接外部资源，如样式表和图标。例如<link rel="stylesheet" href="styles.css">连接了一个名为styles.css的样式表文件。

1.定义与用途：<body>标签包含了网页中所有可见的内容，如文本、图像、链接、表格等。

2.常用子标签及属性：

<h1> - <h6>：标题标签，用于定义不同级别的标题。<h1>是最高级别的标题，通常用于网页的主标题，<h6>是最低级别的标题。例如<h1>网页主标题</h1>。
<p>：段落标签，用于定义文本段落。例如<p>这是一个段落的内容。</p>。
<a>：超链接标签，用于创建链接到其他网页或资源的链接。
- href属性指定链接的目标地址，例如<a href="https://www.example.com">链接文本</a>。
- target属性可以设置链接在何处打开，如_blank表示在新窗口中打开链接。
<img>：图像标签，用于在网页中插入图像。
- src属性指定图像的文件路径，例如<img src="image.jpg" alt="图像描述">。
- alt属性提供图像无法显示时的替代文本，对于无障碍访问很重要。
<ul>和<ol>：分别用于创建无序列表和有序列表。
- 通常与<li>标签一起使用，例如<ul><li>列表项 1</li><li>列表项 2</li></ul>和<ol><li>第一项</li><li>第二项</li></ol>。
<table>：表格标签，用于创建表格结构。
- 使用<tr>标签定义表格行，<td>标签定义表格单元格。例如:

效果如下图：

<form>:表单标签，用于收集用户输入的数据。

action属性指定表单提交的目标URL，method属性指定提交方法（如GET或POST）。例如<form action="submit.php"method="POST">。包含各种输入元素，如<input>，<select>，<textarea>等。

1.定义与用途：

a.<div>是块级元素，用于划分网页的区域，通常用于布局目的可以包含其他HTML元素，并通过CSS进行样式设置。

b.<span>是内联元素，用于对文本的一部分进行样式设置或添加特定功能。

2.属性及使用示例：可以使用 id 和 class 属性和引用这些元素，以便通过CSS和JavaScript进行操作。例如：

定义与用途：<input>标签是表单中最常用的元素之一，用于接收用户的输入。
类型及属性：
- type="text"：用于接收文本输入。
  - placeholder属性提供提示文本，例如<input type="text" placeholder="请输入姓名">。
  - maxlength属性限制输入的最大字符数。
- type="password"：用于输入密码，输入内容会被隐藏。
- type="checkbox"：创建复选框，允许用户选择多个选项。
  - 通常与<label>标签配合使用，例如：
效果如下图：
- 通常与<li>标签一起使用，例如<ul><li>列表项 1</li><li>列表项 2</li></ul>和<ol><li>第一项</li><li>第二项</li></ol>。