新手写HTML应优先掌握h1–h6、p、strong、em、img、a这7个语义化标签，而非盲目使用div和span；img须带描述性alt属性，a链接文字需自解释并外链加rel="noopener"，meta charset="UTF-8"必须置于head最前。
直接说结论：新手写 HTML 不是堆标签，而是用对标签——h1到h6、p、strong、em、img、a 这 7 个标签覆盖 90% 的基础内容表达，其余标签先放一边。
为什么别一上来就学 div 和 span
很多新手打开编辑器就写 <div></div>，以为这是“万能容器”。但浏览器和搜索引擎根本不知道这个 div 是导航、是标题，还是广告位。它只是个空盒子，没语义。结果就是：SEO 抓不到重点，屏幕阅读器念不出结构，自己半年后回来看代码也得靠注释猜。
真正该优先建立的习惯是：看到一段内容，先问“它在网页里扮演什么角色？”
- 页面主标题？→ 用
h1（且全页只用一个） - 一段说明文字？→ 用
p（不是br换行凑出来的“伪段落”） - 强调某个词很重要？→ 用
strong（不是加粗样式<b>） - 想让某处读起来语气不同？→ 用
em（不是斜体<i>）
img 和 a 的坑比你想象的多
img 标签不加 alt 属性，等于把图片内容对搜索引擎和视障用户完全屏蔽；路径写错又不报错，只是显示一个空白方块，新手常卡在这儿半天找不到原因。
立即学习“前端免费学习笔记（深入）”；
a 标签如果只写 <a href="contact.html">联系我们</a>，点击后页面跳转，但没告诉用户“去哪”——尤其当链接文字是“点击这里”这种模糊表述时，既不利于 SEO，也不符合无障碍规范。
实操建议：
-
img必须带alt，内容要描述图本身，比如<img src="logo.png" alt="公司蓝色圆形 logo，含英文缩写 ABC"> - 本地图片路径优先用相对路径，如
./images/photo.jpg，避免C:\Users\...\photo.jpg这种绝对路径 -
a的文字尽量自解释，比如把“点击这里”改成<a href="/about">了解我们的团队</a> - 外链记得加
rel="noopener"，防止安全漏洞：<a href="https://example.com" target="_blank" rel="noopener">外部网站</a>
语义化不是“高级技巧”，是起步就该踩的线
新手常以为语义化是“等我学会 CSS 再来搞”的事。其实不是——它直接影响你写的代码能不能被正确解析。比如用 <h2>产品介绍</h2><p>我们提供……</p>，比 <div class="title">产品介绍</div><div class="content">我们提供……</div> 多了三层价值：
- 搜索引擎一眼识别出标题层级和正文关系
- 键盘用户按
Tab切换时，h2自动成为可聚焦的语义节点 - 后续加 CSS 时，
h2天然有默认字号/间距，不用重置div的所有样式
所以别等“以后”，从第一个 h1 开始就用对。哪怕你现在只会改颜色、调字体，也要先让结构立住。
最容易被忽略的一点：HTML 骨架里的 <meta charset="UTF-8"> 必须写，而且必须放在 <head> 最前面。漏掉它，中文显示为乱码，但错误不会报出来，你会以为是字体问题、编辑器问题，甚至怀疑人生。
