HTML入门指南：网页结构基础与常用标签代码详解
HTML 是什么？
HTML（Hyper Text Markup Language，超文本标记语言）由 Tim Berners-Lee 发明，主要用于定义网页的内容和结构。它是编写网页的基础语言，只能在浏览器中运行。一个完整的网页通常由三种技术构成：HTML 负责搭建页面结构（类似人的骨架），CSS 负责美化样式（类似人的皮肤），JavaScript 负责实现交互特效（类似人的技能）。
浏览器与开发工具
推荐使用谷歌浏览器（Chrome）进行网页开发。打开浏览器后，按 F12 或右键选择“检查”即可打开开发者工具（DevTools），用于查看和调试网页代码。
- 通过“元素”面板可以查看网页对应的 HTML 代码。
- 通过“计算样式”（Computed）面板可以查看元素的具体边距和样式。
网站基本目录结构
新建网站项目时，建议创建如下目录结构：
网站文件夹/├── css/ # 样式文件
├── js/ # 脚本文件
├── imgs/ # 图片资源
└── index.html # 网页文件
W3School 提供了完整的 HTML 标签参考手册，可访问 https://www.w3school.com.cn/tags/tag_wbr.asp 查询所有标签的属性和用法。
创建第一个网页
创建一个以 .html 结尾的文件即为网页文件。可以用记事本打开并编写代码，保存后使用浏览器打开即可查看效果。注意：编写代码后务必按 Ctrl+S 保存，且文件编码需为 UTF-8，否则可能出现乱码。
网页基本结构
<!DOCTYPE html> <!-- 声明 HTML5 版本 -->
<html>
<head></head> <!-- 网页头部 -->
<body>hello html!</body> <!-- 网页可视区域 -->
</html>HTML 标签由尖括号包裹，带斜杠的是结束标签，不带的是开始标签。标签可以嵌套使用，形成树状结构。
HTML 常用术语
- 标签：HTML 的基本单位，由尖括号和英文单词组成。
- 闭合标签：由开始标签和结束标签成对出现，如
<p></p>。 - 自闭合标签：开始和结束在同一个尖括号内，如
<meta>、<hr>、<br>、<input>、<img>等。 - 嵌套：标签可以无限嵌套，形成树状结构，通常用缩进表示层级。
- 属性：标签名后的附加信息，如
title属性可显示提示内容。 - 元素：开始标签和结束标签及其包裹的内容。
块级元素与行内元素
- 块级元素：独占一行，如
h1-h6、p、blockquote。 - 行内元素：不独占一行，尺寸随内容变化，如
span、strong、em、a等。
HTML 对换行和空格有自己的处理规则：标签内容开始和结束的空格与换行会被忽略，内容之间的多个空格和换行会被合并为一个空格。
常用文本标签
<h1>至<h6>：标题标签，字体由大到小，默认加粗，可通过align属性设置对齐方式。<p>：段落标签，上下自带 16px 外边距。<hr>：水平分割线。<span>：无语义的行内容器，常用于配合 CSS 设置样式。<br>：换行标签。<b>：加粗文本（HTML4），无语义。<strong>：加粗文本（HTML5），有强调语义。<i>：斜体文本（HTML4），无语义。<em>：斜体文本（HTML5），有强调语义。<sup>：上标，<sub>：下标。<blockquote>：引用一段话，默认有外边距。<cite>：引用出处。<q>：短引用，内容自动加引号。<code>：代码片段，显示为等宽字体。<mark>：标记文本，背景为黄色。<pre>：保留换行和空格，但不易控制显示效果。<small>：小号字体（HTML5）。<time>：表示时间日期，可通过datetime属性提供机器可读的日期。<data>：表示数据文本，可通过value属性提供值。<address>：地址文本，默认斜体。<del>：删除线，<ins>：下划线。<abbr>：缩写术语，title属性提供解释。<!-- 注释 -->：注释内容，浏览器不渲染。
特殊空格符号：  表示半角空格（一个英文字母宽度），  表示全角空格（一个中文字符宽度）。
VSCode 编辑器推荐
下载地址：http://vscode.bianjiqi.net/。安装后建议配置以下插件：
- HTML Snippets：HTML 代码提示。
- Auto Rename Tag：自动闭合和同步修改标签。
- HTML CSS Support：智能提示 CSS 类名和 ID。
- open in browser：在浏览器中打开当前 HTML 文件。
- Live Server：创建本地服务器实时预览。
在 VSCode 中输入 shift+! 并回车，可快速生成网页基本结构。
网页布局元素（块级）
<div>：无语义的块级容器，常用于布局。<header>：网页或文章头部。<main>：网页主体内容，一个页面仅一个。<section>：独立主题区域，可替代 div。<aside>：侧边栏或文章评论。<article>：一篇文章或帖子，可包含 header、footer 等。<footer>：底部区域。<nav>：导航模块。
标签嵌套规则
- 布局元素可以嵌套任意元素。
- 块级元素可以嵌套行内元素。
- 行内元素不能嵌套块级元素。
p标签不能嵌套其他块级元素。
其他常用标签
超链接标签 a
<a href="https://www.baidu.com" target="_self">到百度</a>href：跳转地址，支持tel:电话协议、mailto:邮件协议、锚点（#id）和文件下载。target：打开方式，_self当前窗口（默认），_blank新窗口。ping：点击时向指定地址发送 POST 请求，用于用户行为跟踪。
图片标签 img
<img src="./imgs/shop_33.jpg" alt="商品图片" height="50" loading="lazy" />src：图片地址（本地或网络）。alt：图片无法显示时的替代文字。width/height：设置宽高，只设一个则另一个自动计算。loading：加载行为，lazy懒加载，eager立即加载。
图像区域 figure
<figure>
<img src="bridge.jpg" />
<figcaption>大桥图片</figcaption>
</figure>figure 将图像与描述信息包裹，figcaption 作为图片标题。
列表
有序列表 ol<ol type="1" start="5">
<li>一年级1班</li>
<li>一年级2班</li>
</ol>type 属性：1 数字、a 小写字母、A 大写字母、i 小写罗马数字、I 大写罗马数字；reversed 倒序；start 起始值。
<ul type="square">
<li>一年级1班</li>
</ul>type 属性：disc 实心圆（默认）、circle 空心圆、square 矩形。
<dl>
<dt>web前端</dt>
<dd>网页前台</dd>
</dl>dt 表示术语，dd 表示解释。
iframe 网页容器
<iframe src="/uploadfile/2026/1009/shop_33.jpg" preload="auto"></video>controls：显示控制条。autoplay：自动播放（Chrome 需配合 muted）。muted：静音。loop：循环播放。poster：封面图。preload：预加载策略（auto/none/metadata）。
为兼容不同浏览器格式，可使用 source 元素：
<video controls autoplay muted>
<source src="./media/test.webm" type="video/webm">
<source src="./media/test.mp4" type="video/mp4">
</video>表格
table 标签用于创建表格，常用属性：border 边框宽度，width 宽度，cellspacing 单元格间距，cellpadding 单元格内边距，align 对齐方式，bgcolor 背景颜色。
tr：行。th：表头单元格，默认加粗居中。td：标准单元格。colspan：跨列合并，rowspan：跨行合并。caption：表格标题。thead、tbody、tfoot：表格结构分区。
form 表单
URL（统一资源定位符）由协议、主机、端口、路径和查询参数组成。HTTP 协议默认端口 80，HTTPS 默认 443（带 SSL 加密）。
form 标签包含表单控件，通过 action 属性指定数据提交地址，method 指定提交方式（get 或 post）。get 请求数据以查询参数传递，速度快但不安全；post 请求数据在请求体中，相对安全且大小几乎不限。
input 输入框
常用属性：maxlength 最大长度，placeholder 提示文字，readonly 只读，disabled 禁用，value 默认值，pattern 正则校验，checked 默认选中，required 必填。
type 属性值：
text：文本输入（默认）。password：密码输入。number：数字输入，可配合min、max、step。search：搜索框，带清除按钮。radio：单选按钮，需设置name一致。checkbox：多选框。email：邮箱格式校验。tel：电话输入，需配合pattern。url：网址格式校验。color：颜色选择器。range：滑块。hidden：隐藏域。date、time、month、week、datetime-local：日期时间选择。button：普通按钮。submit：提交按钮。reset：重置按钮。file：文件上传，需设置enctype="multipart/form-data"。
fieldset 与 legend
<fieldset disabled>
<legend>个人信息</legend>
</fieldset>fieldset 是表单控件集合，legend 设置标题，disabled 使内部控件全部禁用。
label 标签
用于关联表单控件，for 属性指向控件 id，或将控件嵌套在 label 内：
<input type="checkbox"><label for="c">未知</label>
<label><input type="radio" name="sex" value="man">男</label>button 按钮
type 属性：submit 提交、reset 重置、button 普通按钮。可通过 form 属性关联外部表单。
select 下拉菜单
<select name="province" required multiple size="8">
<optgroup label="南">
<option value="sc">四川</option>
<option value="gd" selected>广东</option>
</optgroup>
</select>select 属性：name、disabled、required、multiple（多选）、size（可见行数）。option 的 value 为选中值，selected 默认选中。optgroup 对选项分组。
datalist 数据列表
<datalist>
<option value="a" label="A11">
<option value="b" label="B11">
</datalist>为 input 提供输入提示，通过 list 属性关联。
textarea 多行文本
属性：placeholder、rows、cols、disabled、maxlength、minlength、required。包裹的内容即为默认值。
output、progress、meter
<output name="result">20</output>
<progress max="100" value="50">50%</progress>
<meter min="100" max="500" value="455" low="150" high="350"></meter>output 显示计算结果，progress 进度条，meter 指示器（value 在 low 和 high 之间显示绿色）。
details 折叠标签
<details>
<summary>折叠标题</summary>
<ul><li>test1</li></ul>
</details>默认折叠内容，点击 summary 展开。
常用标签分类总结
块级标签：div、p、form、ul、h1-h6、dl、header、nav、section、aside、main、article、footer。
行内标签：span、em、strong、input（text、password、radio、checkbox、file）、button、select、label。
掌握以上标签及属性，即可构建结构清晰、功能完整的网页页面。
原文链接：本站整理
本文来自互联网用户投稿，该文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 service@2cto.cc 进行投诉反馈，一经查实，立即处理！
您可能感兴趣的文章:
下一篇：HTML中使用Flex布局实现双行夹批效果的方法详解