HTML 常用标签

文本标签

标签	说明	示例
<strong>	加粗（语义强调）	<strong>重要</strong>
<b>	加粗（视觉效果）	<b>bold</b>
<em>	斜体（语义强调）	<em>emphasis</em>
<sub>	下标	H<sub>2</sub>O
<sup>	上标	x<sup>2</sup>
<pre>	预格式文本（保留空格换行）	<pre>代码块</pre>
<span>	行内容器（无语义）	<span class="red">文本</span>

标题与布局

标签	说明	类型
<h1> ~ <h6>	标题，数字越小字越大	块级
<div>	块级容器，用于布局	块级
<p>	段落，相邻 p 之间有间距	块级

行内元素：不自动换行（span, a, strong, img, input） 块级元素：独占一行（div, h1-h6, p, hr）

换行与分割

<br>          <!-- 换行 -->
<hr>          <!-- 水平分割线 -->
<hr width="80%" size="2">

超链接

<a href="https://www.baidu.com/">百度</a>
<a href="mailto:example@email.com">发邮件</a>
<a href="#section1">页面内跳转</a>

body 颜色属性

属性	说明
link	未访问链接颜色
vlink	已访问链接颜色
alink	激活时链接颜色
text	文本颜色
bgcolor	背景颜色
background	背景图片

图片

<img src="photo.jpg" alt="描述文本" width="300" height="200">

属性	说明
src	路径（相对或绝对）
alt	替代文本（SEO + 无障碍）
width / height	尺寸，单位 px 或 %
border	边框，默认 0
align	对齐：top / middle / bottom / left / right

表单

form 标签

<form action="/submit" method="post" name="loginForm">
    <!-- 表单元素 -->
</form>

属性	说明
action	提交路径
method	get（明文 URL）或 post（请求体）
name	表单名称

input 标签

<input type="text" name="username" value="" placeholder="请输入" required>

type 取值

type	说明	type	说明
text	文本框	password	密码框
submit	提交	reset	重置
radio	单选	checkbox	多选
file	文件上传	hidden	隐藏域
email	邮箱	color	颜色
date	日期	time	时间
datetime-local	日期时间	range	滑块

常用属性

属性	说明
readonly	只读
checked	默认选中
disabled	禁用
autofocus	自动聚焦
required	必填项

select 下拉

<select name="city">
    <option value="bj" selected>北京</option>
    <option value="sh">上海</option>
</select>

属性	说明
selected	默认选中
multiple	多选模式

textarea 文本域

<textarea name="desc" cols="60" rows="10">默认内容</textarea>

多媒体

<!-- 音频 -->
<audio controls autoplay loop>
    <source src="music.mp3" type="audio/mpeg">
</audio>

<!-- 视频 -->
<video controls autoplay loop width="640" height="360">
    <source src="video.mp4" type="video/mp4">
</video>

图像映射

<img src="china.png" usemap="#chinamap">
<map name="chinamap">
    <area shape="rect" coords="0,0,100,100" href="/beijing">
    <area shape="circle" coords="200,150,50" href="/shanghai">
</map>