一、基础标签:构建页面的 "砖瓦"
1. <img>
图片标签:展示视觉内容
-
核心格式 :
<img src="图片路径" alt="图片加载失败时显示的文字">
✅ 示例:
<img src="logo.png" alt="网站logo">
-
必知属性:
src
:图片的路径(本地路径或网络 URL,必填)。alt
:替代文本(不仅是 "加载失败提示",更是屏幕阅读器识别图片的关键,强烈建议填写,提升无障碍性)。
-
布局小技巧 :
若想让多张图片横向排列,只需给它们的父容器添加 CSS 样式:
display: flex
。
2. 列表标签:有序 / 无序展示内容
(1)无序列表 <ul><li>
:最常用的列表形式
-
标准结构:
css<ul> <li>第一项内容</li> <li>第二项内容</li> </ul>
-
核心规则:
ul
的直接子元素必须是li
,但li
内部可嵌套任何标签(包括ul
实现多级列表,如 "菜单→子菜单")。
-
必学样式(CSS) :
- 清除默认样式(几乎所有场景都需要):
ul { list-style: none; padding: 0; margin: 0; }
- 子元素换行:
ul { display: flex; flex-wrap: wrap; }
(子元素超出父容器宽度时自动换行)。 - 垂直居中:
ul { display: flex; align-items: center; }
(子元素在垂直方向居中对齐)。
- 清除默认样式(几乎所有场景都需要):
(2)有序列表 <ol><li>
:带序号的列表
-
作用:用于需要明确顺序的内容(如 "步骤说明""排名列表")。
-
示例:
css<ol> <li>打开浏览器</li> <li>输入网址</li> </ol>
-
局限性 :默认序号样式(数字 / 字母)难以自定义,且序号不可选中,实际开发中常用
ul
配合 CSS 模拟有序列表。
(3)定义列表 <dl><dt><dd>
:解释说明型内容
-
适用场景:展示 "主题 + 解释" 结构(如术语解释、FAQ 问答、商品参数)。
-
结构规则:
css<dl> <dt>主题(如"HTML")</dt> <dd>解释1:超文本标记语言</dd> <dd>解释2:用于构建网页结构</dd> </dl>
dl
的子元素只能是dt
(主题)或dd
(解释)。- 一个
dt
可对应多个dd
,也可单独存在(无解释)。
3. 文本与容器标签:组织页面内容
(1)段落标签 <p>
:包裹文本段落
-
作用:定义一段文字,自带默认上下间距,区分不同段落。
-
常用样式:
- 字体加粗:
p { font-weight: bold; }
- 调整行高:
p { line-height: 1.5; }
(让文字更易读)。
- 字体加粗:
(2)容器标签 <div>
:万能布局工具
-
核心特点:
- 块级元素,默认独占一行,可通过 CSS 改为行内或行内块级。
- 无固定语义,纯粹作为 "容器",可嵌套任何标签(包括自身),是页面布局的核心(如 "头部""侧边栏""内容区" 都可用
div
划分)。
(3)标题标签 <h1>-<h6>
:构建内容层级
-
使用原则:
h1
:页面最重要标题(如文章大标题),一个页面仅用一次(对搜索引擎友好)。h2-h6
:层级递减的副标题(如章节标题、小节标题),可多次使用,体现内容逻辑。
✅ 示例:h1
(文章标题)→h2
(章节标题)→h3
(小节标题)。
4. 链接与文本辅助:完善文字交互
(1)链接标签 <a>
:跳转与导航
-
基础格式 :
<a href="目标地址" target="打开方式">链接文字</a>
-
关键属性:
-
href
:跳转地址(必填,可为网页 URL、锚点#id
或邮件mailto:xxx@xx.com
)。 -
target
:_self
(默认):在当前窗口打开链接。_blank
:在新窗口打开,保留原页面(推荐外部链接使用)。
-
(2)<span>
标签:精细化控制文本
- 定位 :行内文本容器,仅用于包裹少量文字(如给某几个字改颜色)。
- 限制 :不可嵌套块级元素(
div
、p
、列表等)或表单元素,避免语义混乱。
(3)特殊符号:补充文本格式
:空格(一个
代表一个半角空格,多个连续使用可增加间距)。<br>
:换行(单标签,强制文字换行,不同于<p>
的段落间距)。
二、表格标签 <table>
:结构化展示数据
核心结构(语义化写法)
xml
<table>
<caption>学生成绩表</caption> <!-- 表格标题,位于表格上方居中 -->
<thead> <!-- 表头区域,存放列标题 -->
<tr> <!-- 行 -->
<th>姓名</th> <!-- 表头单元格,文字默认加粗居中 -->
<th>成绩</th>
</tr>
</thead>
<tbody> <!-- 表格主体,存放数据 -->
<tr>
<td>张三</td> <!-- 数据单元格 -->
<td>90</td>
</tr>
</tbody>
<tfoot> <!-- 表尾区域,可放总计、说明等 -->
<tr><td>平均分</td><td>85</td></tr>
</tfoot>
</table>
常用属性(快速调整表格样式)
属性名 | 作用说明 | 适用标签 |
---|---|---|
border |
设置边框宽度(如 border="1" ) |
table |
align |
水平对齐(left /center /right ) |
table (表格居中)、tr /td (内容对齐) |
valign |
垂直对齐(top /middle /bottom ) |
tr /td |
cellspacing |
单元格之间的间距(默认 2px) | table |
cellpadding |
单元格内容与边框的内边距 | table |
rules="all" |
显示所有内部边框(更清晰) | table |
rowspan |
合并行(如 rowspan="2" 跨 2 行) |
td /th |
colspan |
合并列(如 colspan="3" 跨 3 列) |
td /th |
三、表单标签:收集用户输入
表单是网页与用户交互的核心,用于登录、注册、信息提交等场景。
1. 表单容器 <form>
:统一管理表单元素
-
必须包裹所有表单元素,用于指定数据提交的目标和方式。
-
核心属性:
xml<form action="/submit" method="post"> <!-- 表单元素放这里 --> </form>
action
:数据提交的后台接口地址(如/api/login
)。method
:提交方式(post
用于敏感数据,get
用于简单查询,数据会拼在 URL 后)。
2. 输入元素 <input>
:多样化输入控件
<input>
是表单中最灵活的元素,通过 type
属性实现不同功能:
type 值 |
功能描述 | 核心属性及用法 |
---|---|---|
text |
单行文本框(如用户名) | - placeholder="请输入用户名" :提示文字 - maxlength="10" :最多输入 10 个字符 |
password |
密码框(输入隐藏) | 同 text ,但输入内容显示为圆点 / 星号 |
checkbox |
复选框(可多选) | - name="hobby" :同组选项 name 必须相同(如 "爱好" 分组) - checked :默认选中 |
radio |
单选框(仅选一个) | 同 checkbox ,但同组中只能选中一个 |
file |
文件上传(如头像) | - 可配合 accept="image/*" 限制仅上传图片 |
submit |
提交按钮 | 点击后自动提交表单数据到 form 的 action 地址 |
reset |
重置按钮 | 点击后清空所有表单输入内容 |
button |
普通按钮(需自定义功能) | 需配合 JavaScript 使用(如 <input type="button" value="点击触发事件"> ) |
3. 下拉选项框 <select><option>
:预设选项选择
-
适用场景:从固定选项中选择(如城市、性别)。
-
标准写法:
xml<select name="city"> <option value="beijing">北京</option> <option value="shanghai" selected>上海</option> <!-- selected:默认选中 --> </select>
name
:提交时的字段名(如表单提交后会传city=shanghai
)。value
:选项对应的实际提交值(而非显示的文字)。
4. 多行文本框 <textarea>
:输入长文本
-
用于输入大段文字(如留言、备注)。
-
常用写法:
xml<textarea rows="4" <!-- 默认显示4行 --> cols="30" <!-- 默认显示30列宽度 --> placeholder="请输入详细信息" style="resize: none;" <!-- 禁止用户调整大小 --> ></textarea>
-
特殊属性:
readonly
:只读(可选中但不能修改)。disabled
:禁用(背景灰色,不可输入,也不会提交数据)。
5. <label>
标签:提升交互体验
-
作用:扩大单选框 / 复选框的点击区域(点击文字也能选中选项)。
-
两种关联方式:
-
父子关联(推荐,更简洁):
bash<label> <input type="checkbox" id="agree"> 我同意协议 </label>
-
同级关联(需通过
for
和id
绑定):ini<label for="agree">我同意协议</label> <input type="checkbox" id="agree">
⚠️ 注意:
id
在页面中必须唯一,不可重复。 -