HTML常见标签及用法

标签	用途	示例代码	常见属性
<div>	块级容器，用于组织内容	<div class="container">内容</div>	class、id、style
<span>	行内元素，可用于样式应用	<span style="color:red;">红色文本</span>	class、id、style
<p>	定义段落	<p>这是一个段落。</p>	class、id、style
<h1> - <h6>	标题标签，<h1> 最大，<h6> 最小	<h1>标题</h1>	class、id
<a>	超链接	<a href="https://www.example.com" target="_blank">点击跳转</a>	href、target (_blank、_self)、title
<img>	插入图片	<img src="image.jpg" alt="示例图片">	src、alt、width、height
<ul> / <li>	无序列表	<ul><li>项目1</li><li>项目2</li></ul>	class、id
<ol> / <li>	有序列表	<ol><li>第一项</li><li>第二项</li></ol>	type (1、A、a、I、i)
<table>	创建表格	<table border="1"><tr><td>数据</td></tr></table>	border、cellpadding、cellspacing
<tr> / <td>	表格行、单元格	<tr><td>单元格</td></tr>	colspan（跨列） 、rowspan（跨行）
<th>	表格表头	<th>标题</th>	scope (col、row)
<form>	表单	<form action="/submit" method="post"></form>	action、method (GET、POST)
<input>	输入框	<input type="text" placeholder="请输入内容">	type (text、password、email)、name、value
<textarea>	多行文本输入框	<textarea rows="4" cols="50">默认文本</textarea>	rows、cols、placeholder
<button>	按钮	<button type="submit">提交</button>	type (submit、reset、button)
<select> / <option>	下拉选择框	<select><option value="1">选项1</option></select>	name、multiple
<label>	关联表单控件	<label for="username">用户名</label>	for（绑定 input 的 id）
<header>	页面头部	<header>网站标题</header>	class、id
<footer>	页面底部	<footer>版权所有 &copy; 2025</footer>	class、id
<main>	主要内容	<main><p>主要内容</p></main>	class、id
<section>	章节	<section><h2>章节标题</h2></section>	class、id
<article>	文章	<article><h2>文章标题</h2></article>	class、id
<aside>	侧边栏	<aside>相关信息</aside>	class、id
<nav>	导航栏	<nav><a href="/">主页</a></nav>	class、id
<audio>	插入音频	<audio controls><source src="music.mp3" type="audio/mpeg"></audio>	controls、autoplay、loop
<video>	插入视频	<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"></video>	controls、autoplay、loop
<iframe>	内嵌网页	<iframe src="https://www.example.com"></iframe>	src、width、height
<canvas>	画布绘图	<canvas id="myCanvas"></canvas>	width、height
<svg>	矢量图形	<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="black" fill="red"/></svg>	width、height
<mark>	高亮文本	<p>这是<mark>重要的</mark>信息</p>	class、id
<code>	代码片段	<code>console.log("Hello")</code>	class、id
<pre>	预格式化文本	<pre>格式化文本</pre>	class、id
<blockquote>	引用文本	<blockquote>这是引用内容</blockquote>	cite
<cite>	引用来源	<cite>《HTML基础》</cite>	class、id
<abbr>	缩略语	<abbr title="World Health Organization">WHO</abbr>	title
<time>	时间	<time datetime="2025-03-05">3月5日</time>	datetime
<progress>	进度条	<progress value="50" max="100"></progress>	value、max
<meter>	计量器	<meter value="60" min="0" max="100"></meter>	value、min、max

---

---

• ← Previous Post
• Next Post →

---

---