html标签大全及用法

写html不需要背标签，标签但你必须知道它们长什么样。大全一个标签就是及用一对尖括号，比如<p>是标签段落，<img>是大全图片。就这么简单。及用可真正用起来，标签很多人连最基础的大全都搞混。

先分清两类：块级标签和行内标签。及用块级的标签像<div>、<h1>到<h6>、大全<p>，及用它们独占一行，标签像砖头一样堆叠。大全行内的及用像<span>、<a>、<strong>，它们挤在文字流里，不换行。这个区别决定了布局的骨架——用<div>搭框架，用<span>做局部修饰。

文本标签里，<em>表示强调，浏览器默认渲染成斜体；<strong>是更强烈的强调，默认加粗。别用<b>和<i>，它们只是视觉样式，没有语义。我见过有人整篇文章塞满<b>，结果屏幕阅读器根本不知道哪里重要。

链接和图片是网页的命脉。<a href="url">创建超链接，别忘了加target="_blank"才能新窗口打开。<img src="图片路径" alt="描述">插入图片，alt属性是给搜索引擎和视障用户看的——我经常发现有人漏写，这不光是不专业，还让图片挂掉时显示一个破图标。

列表有三种：无序列表<ul>配<li>，适合做导航菜单；有序列表<ol>也是配<li>，自动编号，适合步骤说明；定义列表<dl>配<dt>和<dd>，适合术语表。做页面底部链接时，我几乎只用<ul>，因为语义清楚，还好用css去掉圆点。

表格标签别乱用。<table>、<tr>、<td>是基础三件套，<th>表头会自动加粗居中。<thead>、<tbody>、<tfoot>把表格分区，方便css控制。现在布局基本不用table了，但展示数据时它依然无可替代——比如商品规格表，用div硬拼反而费劲。

表单是交互的核心。<form>本身不显示东西，真正干活的是里面的<input>。它的type属性决定一切：text是文本框，password是密码框，radio是单选，checkbox是多选，submit是提交按钮。<label>千万别省，它让用户点文字也能聚焦到输入框，体验差很多。我见过一个注册页，十几个input没有label，点起来跟猜谜似的。

还有几个冷门但实用的。<details>和<summary>能做出原生折叠面板，不用写一行js。<progress>显示进度条，<mark>高亮文字。这些标签浏览器都支持，但很多人不知道，还在用一堆div模拟。

最后说个坑：标签必须闭合。<p>忘了写</p>，浏览器能忍，但嵌套错乱时你会看到诡异的布局——文字跑到按钮外面，图片突然换行。我调试过最离谱的一次，是少了一个</div>，整个页面右移了200像素。所以写的时候养成习惯，每开一个标签立刻补上闭合，再回来填内容。

html不复杂，但细节决定成败。你现在能分清<section>和<article>的区别吗？前者是页面分区，后者是独立内容。用错了搜索引擎不会罚你，但维护代码的人会骂你。