刚接触网页制作的朋友，是不是一看到 HTML 的尖括号标签就头大？教程里的标签密密麻麻，记了这个忘那个；好不容易记住几个标签，想拼个简单网页，内容却堆得乱七八糟，完全没有排版；更别说想做个像模像样的布局，结果文字、图片挤成一团，根本没法看？别着急，今天兔子哥就带来超实用的 HTML 教程零基础入门指南，从最基础的标签用法讲到网页布局技巧，哪怕你之前从没碰过代码，跟着学也能轻松上手，做出整齐好看的网页，一起往下看吧！

一、先搞懂：HTML 到底是啥？为啥学网页非得学它？

可能有新手会问，做网页不是拖拖拽拽就能行吗？为啥非得学 HTML？其实啊，HTML 就像网页的 “骨架”，所有文字、图片、按钮都得靠它来 “搭架子”。你看到的网页再花哨，背后都是 HTML 标签在起作用：

• 文字要显示成标题，得用
  到
  标签；
• 段落内容要分段，得用
  标签；
• 想插张图片，得用标签；
• 按钮、输入框这些交互元素，也得靠 HTML 标签来定义。

没有 HTML 这个骨架，网页内容就像一堆散架的积木，拼不成完整的页面。有个朋友刚开始用可视化工具做网页，改个文字格式都找不到地方，学了 HTML 后笑着说：“原来直接改标签这么方便，再也不用对着工具面板瞎点了！”

二、核心标签用法：这 10 个标签学会，能搭基础网页

HTML 标签虽然多，但新手先掌握这 10 个核心标签，就能应付大部分基础网页制作，咱们一个个说：

1. 标题标签：让文字有大有小，层次分明

网页里的标题得有主次，就像文章的标题和副标题。用

到

标签，数字越小标题越大：
plaintext

这是最大的一级标题
这是二级标题，比一级小一点
这是三级标题，适合做小节标题

一个网页里

最好只放一个，用来突出主题，比如网页的大标题，太多会显得乱。

2. 段落和换行：让文字排版不拥挤

写文章要分段，网页文字也一样。

标签就是段落标签，能让文字之间自动留空隙：
plaintext

这是第一段文字，用p标签包起来后，浏览器会自动在段落前后加空白，看着不拥挤。
这是第二段文字，段落之间的空隙就是p标签自带的效果。

要是想在段落里换行，不用另起一个

标签，用
标签就行，比如写诗、地址的时候：
plaintext

床前明月光，
疑是地上霜。


标签很特殊，不用写结尾标签，单标签就能用。

3. 图片标签：给网页加点 “画面感”

光有文字太单调，插张图片能让网页更生动。用标签插图片，记住两个关键属性：
plaintext

• src：填图片的路径，就像告诉浏览器 “图片在哪”，错了图片就显示不出来；
• alt：图片加载失败时显示的文字，比如图片没找到，就会显示 “美丽的风景”，还能帮搜索引擎理解图片内容。

新手常犯的错是src路径写错，比如图片存在 “images” 文件夹里，就得写成src="images/风景.jpg"，不然浏览器找不到图片哦。

三、网页布局入门：别让内容堆成 “一锅粥”

学会标签后，最头疼的就是布局 —— 怎么让文字在左、图片在右，或者分成上下几部分？其实用这几个技巧，新手也能做出整齐的布局：

1. 用标签 “分组”，把内容归归类

标签就像个 “盒子”，能把相关的内容装在一起，方便统一排版。比如把标题和段落放一个盒子，图片和说明放另一个盒子：
plaintext

我的旅行日记
这是我去海边旅行的故事...
海边的日落真美啊！

有了这些盒子，后面调布局就知道 “要移动哪个部分”，不会乱改一气。

2. 简单排版：用换行和空格 “手动调整”

刚开始不用学复杂的布局技术，用简单的换行和分组，就能让页面整齐不少。比如想让两张图片并排，或者上下排列，靠分组后，浏览器会自动让盒子上下排列；要是想让内容之间有空隙，多写几个
标签就行（虽然不规范，但新手入门够用）。
不过话说回来，这种手动调整的方法只能应付简单布局，复杂的还得学 CSS，但刚开始不用急，先把基础布局思路理顺更重要。

3. 避坑指南：这些布局错误别再犯

新手做布局最容易踩这几个坑：

• 不用分组，所有内容堆在一起，想调整都不知道从哪下手；
• 乱用换行标签，靠一堆
来调间距，结果屏幕变小后内容全乱了；
• 图片不设大小，大图片直接塞进网页，把页面撑得变形。

其实解决办法很简单：内容分组用，间距靠合理换行，图片加个width属性控制大小，比如，这样图片就不会乱撑页面了。

四、实战小案例：用学到的知识做个个人简介页

光说不练假把式，咱们用上面学的标签和布局技巧，做个简单的个人简介页，步骤超简单：

1. 用
   做页面大标题 “关于我”；
2. 用分两个盒子：左边放文字，右边放图片；
3. 文字部分用
   做小标题，
   写段落介绍；
4. 图片部分用插一张照片，加width控制大小；
5. 用
在段落间加换行，让内容不拥挤。

做完后保存成.html文件，用浏览器打开，就能看到自己做的第一个网页啦！有新手跟着做完后说：“原来做网页这么有成就感，虽然简单，但都是自己敲出来的！” 这或许暗示只要掌握基础标签和布局思路，新手也能快速做出能看的网页。

五、常见问题自问自答，帮你少走弯路

问题 1：标签记不住怎么办？

答：不用死记硬背！刚开始把常用的 10 个标签写在纸上，敲代码时对着看，用得多了自然就记住了。兔子哥刚开始也是边查边写，一周就熟了。

问题 2：网页在不同浏览器里显示不一样？

答：这是常见问题，因为不同浏览器对标签的解析有点差异。不过新手不用怕，基础标签的显示差异很小，等学到 CSS 再慢慢优化，现在先保证内容正确显示就行。

问题 3：想做更复杂的布局，比如分三栏，该怎么学？

答：分栏布局需要结合 CSS 的float或flex属性，这部分对纯 HTML 来说有点超纲。关于 flex 布局的具体适配机制，我目前也只是掌握基础用法，更深的浏览器兼容性细节可能还得进一步研究。但刚开始不用急，先把 HTML 基础打牢，再学 CSS 布局会更轻松。

兔子哥的小建议

学 HTML 最忌讳 “只看不动手”，哪怕教程看得再明白，不自己敲代码永远学不会。建议每天花 20 分钟，照着教程敲标签、拼页面，哪怕是模仿别人的简单网页，练多了手感自然就来了。
刚开始不用追求完美，做出的网页有点乱也没关系。重点是搞懂每个标签的作用，比如为什么用

不用

做标题，为什么图片要加alt属性。这些基础原理搞懂了，后面学复杂布局、交互效果会轻松很多。
其实 HTML 入门真的不难，就像搭积木一样，熟悉了每个 “零件” 的用法，就能拼出越来越复杂的 “作品”。别害怕犯错，代码报错了就慢慢改，每个新手都是这么过来的。希望这篇教程能帮你迈出网页制作的第一步，坚持下去，你会发现做网页真的很有趣！

标签： 床前明月光 像模像样