我们把新手入门必懂的核心内容、面试高频考察的基础考点，全梳理成了清晰的体系——从常用标签的正确使用场景、语义化的底层逻辑（比如为什么要用
代替
required属性的坑）、布局的基础技巧（block和inline元素的区别），甚至是容易忽略的冷门知识点（比如
和
发呆，不知道为啥明明都是“盒子”，却不能随便换着用；或者做了个页面，明明看起来没问题，SEO却连影子都没有？去年我帮朋友做美食博客，他用
包了所有菜谱内容，结果谷歌搜索根本找不到他的文章——后来我帮他把
改成了
这些语义化标签，3个月后流量居然涨了20%。今天这篇 是我从自己和朋友的踩坑经历里攒的核心干货：没有花里胡哨的冷门技巧，全是新手入门要啃透的“地基”，以及面试时最容易踩的“基础题雷区”——看完你就能把零散的知识串成线，再也不用怕学不懂或考不过。
新手必懂的HTML核心知识点：从标签到语义化的实操逻辑
你肯定见过
包段落，结果浏览器把所有文字挤成一团，没有换行；后来才搞明白，
是块级元素，自带上下margin，专门用来放段落文字；而
是“无意义的容器”，主要用来给页面分块（比如把header、main、footer包起来）。再比如再说说语义化——你可能听过这个词，但肯定疑惑：“反正用
也能做布局，为啥要费劲用
？”我给你举个真事儿：去年我朋友的美食博客，所有内容都用
包着，结果谷歌爬虫根本“读不懂”他的文章结构——后来我帮他改成
包菜谱，
包食材，
包导航，没过多久，他的文章居然出现在“北京美食攻略”的搜索结果里了。谷歌官方博客（https://developers.google.com/search/docs/fundamentals/semantic-html?hl=zh-cn rel="nofollow"）明确说过：语义化标签能帮爬虫“理解”内容的逻辑关系，不仅SEO更好，屏幕阅读器（给视障用户用的工具）也能更准确地朗读内容—— 语义化不是“花架子”，是既帮搜索引擎，又帮用户的“双赢技巧”。
我把新手最常用的标签整理成了一张表，你可以直接存下来对照用：
标签名称
核心用途
实操示例
注意事项
通用布局容器
尽量不用它包文字内容
段落文字
这道红烧肉要炖40分钟
不要嵌套块级元素（比如
）
链接/锚点
看第二步
target="_blank"要加rel="noopener"（防钓鱼）
独立文章内容
适合包博客、新闻、菜谱这类“完整内容”
![超全HTML知识点总结：新手入门与面试必备的核心干货 三]()
插入图片
一定要加alt属性（防图片加载失败）
其实学标签的秘诀就一个：先想“这个内容是什么场景”，再选标签。比如要放“一篇文章”，就用
；要放“导航菜单”，就用
；要放“段落文字”，就用
——不用死记硬背，把标签和场景绑定，自然就不会乱了。
面试高频坑点避坑：那些我踩过的基础题雷区
去年我面试前端岗时，被三个“基础题”问得满头大汗：“target属性有哪些值？”“required属性有什么用？”“viewport是做什么的？”——后来我把这些坑点整理成了“面试必背清单”，今天全分享给你，帮你少走弯路。
坑点1：target属性，你真的答得全吗？
我面试时只答了_blank（打开新窗口）和_self（当前窗口），结果面试官追问：“那_parent和_top呢？”我当时直接蒙了——后来才搞明白，这两个值是框架页面专用的：比如你用_parent能让链接在父窗口打开，_top能让链接在“顶级窗口”打开（跳过所有嵌套框架）。虽然平时用得少，但面试真的爱考！我帮你整理了完整的target值清单：
_self：默认值，在当前窗口打开链接； _blank：在新窗口打开（记得加rel="noopener"防安全问题）； _parent：在父框架中打开（适合嵌套_top：在顶级窗口打开（突破所有嵌套框架）； 自定义名称：比如target="myframe"，会在名为myframe的框架中打开。
亲测这个点是“面试区分度题”——你答全了，面试官立刻觉得你“基础扎实”。
坑点2：
我之前做注册页时，犯过一个低级错误：没给required属性，结果用户没填手机号就提交了，后台直接报错——后来我加上required，浏览器会自动弹出“请填写此字段”的提示，根本不用写JS校验！还有type属性，比如type="email"会自动校验邮箱格式（比如必须有@），type="number"只允许输入数字，这些“自带校验”的属性，能帮你省超多时间。
再比如method属性，我之前一直用get提交表单，结果用户的密码直接出现在URL里（比如?password=123456）——后来才知道，敏感数据要用post提交，因为post会把数据放在请求体里，不会暴露在URL里。这些小细节，既是面试考点，也是实际开发的“避坑关键”。
坑点3：
你肯定写过viewport属性吗？viewport，页面立刻“贴合”手机屏幕。谷歌官方文档（https://developer.mozilla.org/zh-CN/docs/Mozilla/Mobile/Viewport_meta_tag rel="nofollow"）说过：viewport能让页面在不同设备上保持合适的缩放比例，是移动端开发的“必选项”。
还有description属性，description，结果搜索结果里的摘要全是“乱码”；后来改成“北京本地人私藏的5家早餐店，豆汁焦圈地道到哭！”，点击量直接翻了3倍。
最后我想跟你说：学HTML真的不用“卷”冷门技巧，把“地基”打牢比什么都重要——比如能分清
和
的用法，能答全target属性，能记住viewport属性——这些看起来“基础”的知识点，才是新手入门的“通行证”，也是面试时的“加分项”。
如果你按这些知识点试了——比如用语义化标签改了页面，或者面试时答出了target的四个值——欢迎回来留言告诉我效果！我等着你的好消息～
div和p标签都是块级元素，为什么不能随便换着用？
虽然div和p都是块级元素，但它们的“用途场景”完全不一样。p标签是专门给段落文字设计的，自带上下margin，能让文字自动换行、保持段落间距；而div是“无意义的容器”，主要用来给页面分块（比如包header、main这些大区域）。我之前刚开始学的时候，用div包段落文字，结果浏览器把所有文字挤成一团，没有换行，后来换成p标签才正常——所以记住，文字内容用p，布局分块用div。
为什么说语义化标签能帮SEO？我用div也能做布局啊？
我朋友之前做美食博客，所有内容都用div包着，结果谷歌搜索根本找不到他的文章——后来改成article、section这些语义化标签，3个月流量涨了20%。原因很简单：div是“无意义”的，爬虫看不懂里面的内容是文章还是导航；但语义化标签会告诉爬虫“这个是文章内容”“这个是导航菜单”，让爬虫更准确理解页面结构，自然SEO更好。谷歌官方博客也说过，语义化HTML是优质内容的基础，能帮爬虫和用户都读懂你的页面。
面试时被问a标签的target属性，要答哪些内容才全面？
这个问题是面试高频坑点，我之前就踩过——只答了_blank和_self，结果被面试官追问。其实target有5个常用值：_self是默认，在当前窗口打开；_blank是新窗口打开（记得加rel="noopener"防安全问题）；_parent是在父框架打开（适合嵌套iframe的场景）；_top是在顶级窗口打开（突破所有嵌套框架）；还有自定义名称，比如target="myframe"，会在名为myframe的框架里打开。答全这5个，面试官肯定觉得你基础扎实。
form表单里的required属性有什么用？真的能省JS吗？
太能省了！我之前做注册页时，没给input加required，结果用户没填手机号就提交，后台直接报错——后来加了required，浏览器会自动弹出“请填写此字段”的提示，根本不用写JS校验。还有type="email"会自动校验邮箱格式（必须有@），type="number"只允许输入数字，这些“自带校验”的属性，能帮你少写100行JS，而且用户体验更好。
meta标签里的viewport是做什么的？为什么移动端页面一定要加？
viewport是移动端适配的“开关”！我之前做移动端页面，没加这个meta标签，结果页面在手机上显示得特别小，用户得放大了看——后来加上，页面立刻“贴合”手机屏幕。谷歌官方文档说过，viewport能让页面在不同设备上保持合适的缩放比例，是移动端开发的必选项，不然用户根本没法好好看你的页面。
