html代码大全及详解

用记事本写个网页，代码大全第一行敲下<!DOCTYPE html>，及详解浏览器就知道你要用HTML5标准渲染页面。代码大全这行声明不写，及详解页面照样能显示，代码大全但某些CSS或JS特性可能抽风——我见过有人排查两小时布局错位，及详解最后发现只是代码大全忘了写doctype。

标签分两类：需要闭合的及详解和自闭合的。<p>要配</p>，代码大全<br>自己就是及详解完整的。新手常犯的代码大全错是把<img>写成<img></img>，浏览器虽然不报错，及详解但HTML校验器会标红。代码大全属性值建议加引号，及详解<div class=box>能跑，代码大全<div class="box">更稳。单引号双引号都行，别混用。

文本标签藏着不少细节

<strong>和<b>都加粗，前者表示重要性，后者只是视觉加粗。给盲人用的屏幕阅读器读<strong>时会加重语气，读<b>就正常念。<em>和<i>同理，一个表强调，一个表斜体样式。

<p>这段代码里的 空格 会被合并成一个</p> <pre>这段代码里的 空格 原样保留</pre>

<pre>标签在展示代码片段时特别有用，但注意它默认用等宽字体，而且不会自动换行。移动端上长代码行会撑破容器，得配合white-space: pre-wrap;用。

链接和图片的坑

<a href="page.html" target="_blank">新窗口打开</a>，target="_blank"有个安全隐患：新页面能通过window.opener操作原页面。加个rel="noopener"就安全了。现代浏览器已经默认处理，但老版本还得手动加。

图片的alt属性不是可选项。网络差时图片加载不出来，alt文字就是替代内容。有次我关掉图片加载测试页面，满屏的alt文字反而比图片更清楚说明每个区域的功能。装饰性图片写alt=""，让屏幕阅读器跳过它。

表格别拿来布局

2005年那会儿用<table>排三栏布局是常规操作，现在这么干会被同事吐槽。表格只放数据，布局用<div>加CSS。<th>表头默认加粗居中，<td>普通单元格。<caption>写表格标题，位置在表格上方居中。

<table> <caption>月度开销</caption> <tr><th>项目</th><th>金额</th></tr> <tr><td>服务器</td><td>¥3200</td></tr> </table>

表单元素容易忽略的细节

<label for="email">邮箱</label>和<input id="email">通过id关联后，点label文字光标会自动跳进输入框。这个细节能提升移动端体验，手指点小屏幕上的复选框经常点不准，有label就好多了。

<input type="text">的默认宽度大概20个字符，用size属性调。placeholder文字颜色默认浅灰，想改得用CSS的::placeholder伪元素。required属性让浏览器自带非空校验，但别只依赖它——后端必须再验一遍。

语义化标签不是摆设

<header>、<nav>、<main>、<article>、<aside>、<footer>这些HTML5标签，浏览器默认渲染跟<div>没区别。但搜索引擎和辅助技术能读懂结构。<main>只能出现一次，放页面核心内容。<article>适合独立的博客帖子或新闻条目，内部再用<header>和<footer>没问题。

有次改版把<div class="nav">换成<nav>，CSS选择器从.nav改成nav，样式全丢了——因为nav选择器权重比.nav低。语义化标签的默认样式得重置，nav ul { list-style: none; }这种代码跑不掉。

写HTML不用背全标签，记住常用的二十来个就够干活。遇到不确定的，MDN文档查一下比瞎猜快。代码写多了会发现，结构清晰的HTML自己就会说话——三个月后回头看还能秒懂当时想干什么。