基础html代码大全

写网页就像搭积木，基础<html> 是代码大全那个最大的箱子。你打开任何网页，基础右键“查看源代码”，代码大全第一眼看到的基础基本都是它。我见过有人用记事本写出一整个个人主页，代码大全也见过用 Dreamweaver 拖拽三天还没搞懂 <div> 和 <span> 区别的基础。区别在哪？代码大全前者至少知道标签是成对出现的。

骨架三件套：html、基础head、代码大全body

一个最简 HTML 文档长这样：

<!DOCTYPE html> <html> <head> <title>我的基础第一个网页</title> </head> <body> <h1>你好</h1> </body> </html>

<!DOCTYPE html> 不是标签，是代码大全告诉浏览器“按 HTML5 规矩来”。少了它，基础浏览器可能进入怪异模式，代码大全你调的基础边距全乱。我2013年第一次去掉这行，页面在 IE 里直接崩了——那时候 IE 还活着。 <head> 里放的是给浏览器看的信息，比如 <meta charset="UTF-8">，不加这行，中文可能变乱码。 <body> 才是用户看得见的部分。

标题和段落：h1 到 h6，p 和 br

<h1> 到 <h6> 是六级标题，字号依次减小。<h1> 一般一个页面只用一个，代表主标题。别为了字大就用 <h1> 包正文，搜索引擎会困惑。段落用 <p>，它会自动在上下加空行。如果你只想换行不加空行，用 <br>——注意它没有闭合标签，写成 <br> 或 <br/> 都行。

有个新手常犯的错：用多个 <br> 来制造段落间距。我早期也这么干，后来发现用 CSS 的 margin 控制更干净。但如果你只是临时调格式，<br> 确实快。

链接和图片：a 与 img

超链接用 <a>，核心属性是 href。比如 <a href="https://example.com">点我</a>。加 target="_blank" 会在新标签页打开。图片用 <img>，必须带 src 和 alt。alt 是图片加载失败时显示的文字，也是给屏幕阅读器用的。我见过有人写 alt="图片"，这跟没写差不多。描述具体点，比如 alt="一只橘猫趴在键盘上"。

图片路径分相对和绝对。同目录直接写文件名，上一级用 ../。别用中文文件名，服务器上容易出问题——这是我踩过的坑，当年一个“背景图.jpg”在 Linux 服务器上死活加载不出来，换成英文立刻好了。

列表：ul、ol、dl

无序列表 <ul> 里套 <li>，有序列表 <ol> 也是套 <li>，区别是前者显示圆点，后者显示数字。导航菜单通常用 <ul> 做，因为 CSS 好控制。定义列表 <dl> 少用，但适合术语表：<dt> 放术语，<dd> 放解释。

<ul> <li>苹果</li> <li>香蕉</li> </ul>

列表可以嵌套，但别超过三层。嵌套太深，缩进乱得自己都看不懂。

表格：table、tr、td、th

表格现在多用于展示数据，不再用来做页面布局了——那是 2005 年以前的做法。 <table> 里放 <tr> 表示行，行里放 <td> 表示单元格，表头用 <th> 加粗居中。加 border="1" 能快速看到边框，但正式项目都用 CSS 控制。

合并单元格用 colspan 和 rowspan。我见过一个课程表页面，因为 rowspan 算错，整个表格错位，学生课表全乱了。写表格时最好先在纸上画格子。

表单：input、textarea、button

表单是交互的核心。 <input> 的 type 属性决定形态：text 文本框、password 密码框、radio 单选、checkbox 多选、submit 提交按钮。 <textarea> 是多行文本， <button> 比 input type="submit" 更灵活，里面可以放图标。

每个输入框最好配 <label>，用 for 属性关联 id。点文字就能聚焦输入框，对手机用户友好。我测试过，没有 label 的表单，填写速度慢 20%。

语义化标签：header、nav、main、footer

HTML5 引入了一堆语义标签。 <header> 放页头， <nav> 放导航， <main> 放主体内容， <footer> 放页脚。它们和 <div> 功能一样，但名字有意义。屏幕阅读器能直接跳转到 <main>，搜索引擎也更清楚页面结构。

有人觉得用 <div class="header"> 也一样。短期看没区别，长期维护时，满屏的 div 会让你找不着北。我现在写页面，能不用 div 就不用。

注释和特殊字符

注释写 <!-- 这是注释 -->，浏览器不显示。调试时临时注释掉一段代码很方便。特殊字符比如小于号要写 <，大于号写 >，和号写 &。版权符号是 ©。这些叫 HTML 实体，记不住就查表。

代码写多了，你会发现最常用的就那十几个标签。剩下的，用到再查。别背，背了也会忘。打开编辑器，敲一遍，报错，改对——这才是记住的方式。