HTML常用标签与属性详解：构建网页结构与表单的完整指南

脚本专家 · 发表于昨天 21:00

HTML（HyperText Markup Language）是由Tim Berners-Lee发明的超文本标记语言，用于定义网页的结构和内容。网页技术三要素包括HTML（骨架）、CSS（皮肤）和JavaScript（交互动作）。常用浏览器推荐Chrome，按F12或右键选择“检查”即可打开开发者工具，通过Elements面板查看HTML结构，Computed面板查看元素边距。

在开始前，需要了解网站的基本目录结构：新建一个网站文件夹，内部创建css、js、imgs等子目录，以及网页文件（.html）。W3School（https://www.w3school.com.cn）是查询HTML标签和属性用法的常用手册。

创建一个网页只需新建文本文档并改后缀名为.html，用记事本打开，写入基本结构：

<!DOCTYPE html>
<html>
<head></head>
<body>hello html!</body>
</html>

复制代码

<!DOCTYPE html>声明HTML5版本，<head>定义头部信息，<body>为可视区域。标签写在<>内，带斜杠的是结束标签，不带斜杠的是开始标签。大部分标签成对出现（闭合标签），也有自闭合标签如meta、hr、link、br、input、img。HTML标签可以嵌套，形成树状结构，建议用缩进（Tab键）表示层级。

标签的属性写在开始标签内，例如<h2 title="hello h2">h2标题</h2>中的title是全局属性，几乎所有标签都可以使用。私有属性是特定标签独有的。元素指开始标签、结束标签及其中间的内容。块级元素（如h1-h6、p、blockquote）独占一行；行内元素（如span、strong、i、em、q、code、mark）不换行，尺寸由内容决定。HTML会忽略标签内容前后的空格和换行，连续的空格和换行合并为一个空格。

常用文本标签：
- 标题标签h1-h6，字号依次减小，加粗，align属性可设置left、center、right对齐。
- 段落标签<p>，上下自带16px外边距。
- 水平线<hr />。
- <span>无默认样式，用于CSS。
- 换行<br />。
- <b>和<strong>都使文本加粗，但<strong>有强调语义（HTML5新增）。
- <i>和<em>都使文本斜体，<em>有强调语义。
- <sup>上标，<sub>下标。
- <blockquote>引用一段话，有外边距。
- <cite>引用出处。
- <q>行内引用，内容带双引号。
- <code>表示代码，等宽字体。
- <mark>标记内容，背景黄色。
- <pre>保留空格和换行。
- <small>小一号字体（h5新增）。
- <time>表示时间，可选datetime属性。
- <data>用于数据文本，可选value属性。
- <address>地址文本，默认斜体。
- <del>删除线，<ins>下划线。
- <abbr>专业术语，title属性提供解释。
- 注释：，VS Code快捷键Ctrl+/。

布局元素（块级）：

<div>默认无样式，块级区域。
<header>网页或文章头部。
<main>主体内容，一个页面仅一个。
<section>独立主题，可替代div。
<aside>侧边栏或文章评论。
<article>一篇文章或帖子。
<footer>底部区域。
<nav>导航模块。

复制代码

嵌套规则：布局元素可嵌套任意元素；块级元素可嵌套行内元素；行内元素不能嵌套块级元素；p标签不能嵌套块级元素。

其他常用标签：

1. 超链接<a>：

<a href="https://www.baidu.com" target="_self">到百度</a>

复制代码

- href：跳转地址，可使用tel:（电话）、mailto:（邮件）、#id（锚点跳转）、文件地址（下载）。
- target：_self（当前窗口）、_blank（新窗口）。
- ping：点击时向指定地址发送POST请求，用于跟踪用户行为。

2. 图片<img>：

<img src="./imgs/shop_33.jpg" alt="描述" height="50" loading="lazy" />

复制代码

- src：图片地址（本地或网络）。
- alt：替代文字，图片不显示时显示。
- width/height：设置宽高，只设一个则另一个自动按比例计算。
- loading：auto（默认）、lazy（懒加载）、eager（立即加载）。

3. 图像区域<figure>和说明<figcaption>：

<figure>
<img src="F" />
<figcaption>大桥图片</figcaption>
</figure>

复制代码

4. 列表：
- 有序列表<ol>：type属性（1、a、A、i、I），start设置起始值，reversed倒序。
- 无序列表<ul>：type属性（disc实心圆、circle空心圆、square矩形）。
- 自定义列表<dl>：<dt>术语，<dd>解释。

5. iframe网页容器：

<iframe src="https://player.youku.com/embed/XNTg2MzEyMjY2NA==" frameborder="0" allowfullscreen></iframe>

复制代码

frameborder设置边框，allowfullscreen允许全屏。

6. 多媒体：
- <video>视频标签：

<video src="test.mp4" controls autoplay muted loop height="300" poster="cover.jpg" preload="auto"></video>

复制代码

属性包括controls、autoplay（需muted配合）、muted、loop、poster封面、preload（auto/none/metadata）。可通过<source>元素提供多种格式供浏览器选择：

<video controls autoplay muted>
<source src="test.webm" type="video/webm">
<source src="test.mp4" type="video/mp4">
</video>

复制代码

7. 表格：

<table border="1" width="100%">
<caption>表格标题</caption>
<thead>
<tr><th>表头1</th><th>表头2</th></tr>
</thead>
<tbody>
<tr><td colspan="2">合并两列</td></tr>
</tbody>
<tfoot>
<tr><td>底部</td></tr>
</tfoot>
</table>

复制代码

常用属性：border（边框宽度）、cellspacing（单元格间距）、cellpadding（内边距）、align（表格对齐）、bgcolor（背景颜色）。单元格属性：colspan（跨列合并）、rowspan（跨行合并）、align/valign（水平/垂直对齐）。

8. 表单：
表单<form>用来收集用户输入，提交数据到后端。action指定URL，method常用get（查询参数传数据）和post（请求体传数据），enctype用于指定POST请求的MIME类型（文件上传需multipart/form-data）。

输入控件input的type属性：
- text（默认文本）、password（密码）、number（数字，配合min/max/step）、search（搜索框带清除按钮）、radio（单选，需同名name）、checkbox（多选，需同名name）、email、tel、url、color、range（滑块）、hidden（隐藏）、date/time/month/week/datetime-local（日期时间）、button（普通按钮）、submit（提交）、reset（重置）、file（文件上传）。
常用属性：maxlength、placeholder、readonly、disabled、value、pattern（正则）、checked（默认选中）、required。

其他表单相关标签：
- <fieldset>容器，包裹一组表单控件，可设置disabled，<legend>设置标题。
- <label>关联表单控件，for属性指定控件id，或将控件放入label内部自动关联。
- <button>按钮，type可为submit、reset、button，可用form属性关联不属于父表单的<form>。
- <select>下拉菜单，搭配<option>（value、selected）和<optgroup>（分组，label、disabled），select有multiple多选、size选项。
- <datalist>为input提供提示列表，通过input的list属性关联datalist的id。
- <textarea>多行文本，rows/cols设定行列数，另有placeholder、maxlength、minlength、required等。
- <progress>进度条，max表示最大值（默认1），value当前进度。
- <meter>指示器，min/max/value/low/high定义范围及颜色区域。
- <details>折叠标签，<summary>设置折叠标题，点击展开内容。

常用块级标签：div、p、form、ul、h1-h6、dl、header、nav、section、aside、main、article、footer。常用行内标签：span、em、strong、input（部分type）、button、select、label。掌握这些标签及其属性，即可搭建完整的网页结构和交互表单。

热心网友5 · 发表于昨天 21:10

楼主的教程非常详细，从基础结构到各种标签的属性都讲得很清楚，对新手特别友好。尤其是后面列举的嵌套规则和 `loading` 属性这些细节，平时容易忽略，看完更清晰了。有个小问题想请教：`` 标签的 `ping` 属性第一次注意到，这种发送 POST 请求追踪用户点击的方式，是不是主要用在统计分析上？实际开发中常用吗？

HTML常用标签与属性详解：构建网页结构与表单的完整指南

Re: HTML常用标签与属性详解：构建网页结构与表单的完整指南

浏览过的版块

指导单位

旗下站点

联系我们