零基础前端入门：用VsCode和HTML写出第一个网页

很多零基础的朋友想转行做前端或者在校学生刚接触网页开发第一关往往不是代码本身而是被各种工具和概念搞得一头雾水。打开视频网站搜“前端入门”满屏都是几十个小时的付费课程光环境配置那一节就能劝退一半人。其实没这么复杂——如果你只是想又快又稳地迈出第一步选对编辑器、搞懂最核心的HTML骨架剩下的事就是不断写、不断看效果、不断改仅此而已。这篇内容就是写给纯小白的入门指南核心锁定两件事第一把 VsCode 这个目前最主流的编辑器装好、配好、用好让你写代码的过程不别扭第二把 HTML 最基础但最关键的语法结构拆开揉碎讲清楚让你拿到一个网页源码至少能看懂每一行在干嘛能自己动手写一个像模像样的简单页面。全程不碰任何高阶框架不讲花哨的工程化方案只做一件事让你从零到一先把路走通。1. 内容整体设计与思路拆解1.1 为什么入门阶段首选 VsCode 而不是其他编辑器先回答一个几乎所有新手都会纠结的问题编辑器那么多Sublime、WebStorm、Atom、Notepad为什么非要选 VsCode我的答案很简单免费、轻量、生态庞大、跨平台。这四点凑在一起目前市面上没有第二个编辑器能同时做到。WebStorm 功能确实强大但它是收费的而且相当吃内存开个项目风扇就开始转对于入门阶段来说属于杀鸡用牛刀。Sublime 启动速度快、界面干净但配置插件需要自己折腾对新手不太友好。Notepad 太简陋了连代码高亮都做得一般更别提智能提示和调试功能。VsCode 是微软出品的免费开源编辑器Windows、macOS、Linux 全平台通用。它启动速度快内存占用控制得不错最重要的是插件市场极其丰富几乎所有你能想到的开发场景都能通过装插件搞定。你用 VsCode 写前端装几个关键插件之后体验完全不输给那些重型 IDE。另外一个很现实的原因是现在整个前端行业不管是初级岗位还是资深岗位大部分开发者的主力编辑器就是 VsCode。你从入门开始用它等于提前进入行业主流工作流后面看教程、查资料、向同事请教沟通成本都会低很多。1.2 入门阶段学 HTML 必须把握的核心思路HTML 全称是 HyperText Markup Language翻译过来叫“超文本标记语言”。注意“标记语言”这四个字它不是编程语言没有逻辑运算、没有变量、没有循环判断它做的唯一一件事就是“标记”——告诉你浏览器这一段是标题那一段是段落这张图要显示在这里这个链接点击后要跳转到哪里。所以学 HTML 的思路和学 JavaScript 完全不一样不需要去理解“执行流程”和“逻辑分支”只需要记住一件事标签的语义和作用。什么场景用语义化标签比如导航用nav主体内容用main底部信息用footer什么场景用功能性标签比如跳转链接用a插入图片用img创建输入框用input。这些就是 HTML 入门的全部核心。在后面的章节里我会刻意避免堆砌一堆标签列表让你死记硬背。那样学完即忘没有意义。我会带你从一段真实的网页结构入手把最常用的标签放在场景里讲一遍你以后写页面的时候能自然想到“哦这里可以用这个标签”那就足够了。1.3 这套学习方法的整体流程预览我建议小白的完整学习路径分成四步走安装配置工具 → 理解网页文件结构 → 动手写页面 → 用浏览器验证效果。第一步把 VsCode 装好必要的插件配好这一步做踏实了后面写代码就是享受不然自动补全没有、格式化快捷键没反应你会以为是自己的问题其实就是环境没搭好。第二步搞懂一个 HTML 文件的标准结构。别小看这一步很多人写了几百行代码问!DOCTYPE html是干嘛的、langzh-cn是什么意思完全答不上来。基础不牢后面面试必挂。第三步动手去写从最简单的标题、段落开始逐渐加入图片、链接、列表、表格、表单。这就像学乐器看谱是前提但只有手指真的在琴弦上动起来才叫会弹。第四步用浏览器打开自己写的文件亲眼看到代码变成漂亮的页面。这一步千万别省它决定了你能不能在“代码”和“页面效果”之间建立稳定的映射关系——这条映射关系就是前端开发的“手感”。2. 核心细节解析与实操要点2.1 VsCode 下载、安装与界面认识先说下载。百度搜索“VsCode 官网”认准官方域名是code.visualstudio.com。这里提醒一句很多第三方下载站会捆绑流氓软件或者让你关注公众号才能下载千万别去直接走官网最安全。点进官网后首页正中有一个大按钮它会自动识别你的操作系统直接点击下载即可。下载速度如果太慢可以把下载地址中的域名部分替换为vscode.cdn.azure.cn这是微软在国内的 CDN 节点速度会快不少。安装过程基本都是下一步下一步但有几个选项需要注意勾选“添加到 PATH环境变量”这样以后可以在命令行里直接输入code .打开当前文件夹。勾选“将‘通过 Code 打开’操作添加到 Windows 资源管理器目录上下文菜单”这样你在任意文件夹右键都能直接用 VsCode 打开。选择“安装”类型时如果不需要为所有用户安装默认“仅为我安装”就行。安装完成第一次打开界面是英文的。没关系按CtrlShiftX打开扩展面板搜索“Chinese (Simplified)”找到微软官方出品的简体中文语言包点 Install装完重启编辑器就是中文界面。VsCode 的界面布局需要认识四个区域左侧是活动栏和资源管理器也就是文件树中间是编辑区你写代码的地方底部是面板区终端、输出、问题等顶部是菜单栏和编辑器标签页。记住这四个区域后面操作基本不会迷路。2.2 新手必装的几个 VsCode 插件及配置建议插件是 VsCode 的灵魂。下面这几个插件是前端入门阶段装完之后立刻能感受到明显效果的强烈建议全部装上。第一个是Live Server。这个插件能起一个本地开发服务器并且实时刷新页面。以前你写一个 HTML 文件想预览效果每次改完代码都要手动切到浏览器按 F5 刷新。装了 Live Server 之后保存代码浏览器页面自动更新效率提升不是一点点。第二个是Prettier - Code formatter。它是代码格式化工具。新手写代码最大的问题之一就是缩进混乱、引号不统一、换行随心所欲。保存时自动用 Prettier 格式化代码从头到尾整整齐齐能省下很多调整格式的精力。第三个是Auto Rename Tag。编辑 HTML 标签时你修改开始标签的名字它会自动同步修改对应的结束标签。比如div改成section/div会自动变成/section少了很多修改低级错误。第四个是HTML CSS Support。它会智能提示 HTML 中引用的 CSS 类和 ID也会在 CSS 文件中提示哪些类名在 HTML 中被使用写样式的时候非常省事。插件装完之后建议打开设置界面快捷键Ctrl,搜索“Format On Save”把 “Editor: Format On Save” 的勾选打开。这样每次保存文件都会自动格式化配合 Prettier你的代码风格从此稳定统一。2.3 HTML 文件后缀名与创建方式HTML 文件的后缀名是.html或者.htm现代开发统一用.html。一个网页本质上就是一个纯文本文件只不过里面写的是 HTML 语法浏览器能识别这种语法并渲染成可视化的页面。在 VsCode 中创建一个新 HTML 文件非常简单打开一个文件夹建议专门建一个web-dev之类的目录存放练习代码点击资源管理器的“新建文件”图标输入文件名index.html回车即可。文件名用index是有讲究的。在 Web 开发中index.html是一个网站的默认入口文件。当你访问一个网站不带具体文件名时比如访问example.com服务器默认就会寻找index.html来返回。所以以后每次新建一个网页入口文件都命名为index.html是一个好习惯。创建好文件后VsCode 右下角会显示文件的编码格式是 UTF-8。这一点非常重要后面讲字符集时会详细说明这里先记住一句话网页文件必须保持 UTF-8 编码否则中文会乱码。2.4 HTML 页面必须包含的标准骨架新建一个index.html输入一个感叹号!然后按 Tab 键或回车VsCode 会自动生成一份标准的 HTML 骨架。!DOCTYPE html html langzh-cn head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body /body /html这段骨架一共包含五个部分每个部分都有自己的职责。!DOCTYPE html这一行声明文档类型。它的作用用一句话概括告诉浏览器“我这是一份现代标准的 HTML5 文档”浏览器就会严格按照标准模式来渲染页面。如果缺了这行声明老版本的浏览器可能会进入“怪异模式”导致 CSS 布局的盒子模型计算方式都不一样页面很可能乱七八糟。所以不管什么时候写 HTML第一行必须是它。html langzh-cn是根标签所有内容都被它包在里面。langzh-cn声明这是简体中文文档这个属性有两个实际作用一是帮助浏览器正确选择翻译和拼写检查的语言二是对无障碍阅读设备屏幕阅读器友好它知道用什么语音读页面内容。head部分是页面的头部信息区这里面的内容不会直接显示在页面上但它承载了页面的“元信息”metadata——字符集、关键词、描述、样式表链接等。meta charsetUTF-8声明了页面使用的字符编码是 UTF-8。UTF-8 是目前互联网最通用的编码标准支持世界上几乎所有语言文字。如果漏掉这行或者编码声明错误中文在页面上就会显示成一堆乱码。这也是新手最常遇到的问题之一。meta nameviewport contentwidthdevice-width, initial-scale1.0是移动端适配的核心设置。它告诉浏览器把视口宽度设置为设备本身的宽度初始缩放比例为 1。简单理解没有这行代码手机浏览器打开你的页面会像看一个缩小版的电脑网页字特别小还要放大才能看。有了这行页面才能自适应屏幕。在现代前端开发中这行代码是标配。titleDocument/title是页面的标题它会显示在浏览器顶部的标签页上。修改成你的页名即可例如title我的第一个网页/title。这个标题还影响 SEO搜索引擎优化搜索引擎会优先抓取这个内容来显示搜索结果中的标题。body部分才是真正显示在页面上的内容区域所有用户看得见的内容都写在这里。2.5 常用的基础标签与分类逻辑为了让记忆负担小一点我把最常用的 HTML 标签按照用途分成五类每一类掌握两到四个就足够应付绝大多数场景。第一类是标题与文本类。h1到h6是六级标题h1最大h6最小。注意h1一个页面一般只出现一次它是页面的核心主题过多使用会影响 SEO。段落用p要点加粗用strong斜体用em换行不换段用br。第二类是超链接与媒体类。a标签可以创建超链接href属性指定链接地址target_blank属性让链接在新标签页打开。img标签用于插入图片src属性是图片路径alt属性是图片加载失败时显示的替代文字这个属性对无障碍访问和 SEO 都很重要。第三类是列表类。无序列表用ul搭配li有序列表用ol搭配li。导航菜单、商品列表、功能清单这类内容几乎都用列表来组织。列表还能嵌套做出多级菜单的效果。第四类是表格类。表格用table标签创建行用tr单元格用td表头单元格用th。现在纯表格布局页面已经过时了但展示数据统计、对比信息仍然离不开它。第五类是表单类。表单是用来收集用户输入的容器标签用form创建。里面有各种输入控件单行文本框input typetext、密码框input typepassword、单选框input typeradio、复选框input typecheckbox、下拉选择框select搭配option、多文本区域textarea、提交按钮button。表单是前后端交互的基础写一遍就会明白用户填写的所有数据都在这些标签里面。3. 实操过程与核心环节实现3.1 用 VsCode 新建第一个项目的完整流程现在跟着我做一遍完整操作目标是创建一个最简单的个人介绍页。第一步在电脑上新建一个文件夹命名为my-first-page。这个文件夹就是你整个项目的根目录以后所有文件都放在里面。第二步打开 VsCode按CtrlK再按CtrlO弹出打开文件夹的窗口选择刚才创建的文件夹。第三步在资源管理器区域找到“新建文件”按钮创建文件index.html。输入一个英文感叹号!按 Tab生成骨架。第四步使用键盘快捷键CtrlS保存文件。首次保存时 VsCode 会询问是否信任该文件夹的“作者”选择“是”这是 VsCode 的安全机制自己的项目直接信任即可。3.2 编写第一个包含多种标签的 HTML 页面把下面这段代码完整替换到你的index.html文件中。这是一个麻雀虽小五脏俱全的页面里面几乎用到了前面提到的所有标签分类。!DOCTYPE html html langzh-cn head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的个人介绍页/title /head body !-- 这是页面的顶部区域 -- h1你好我是张三/h1 p一名正在学习前端开发的 strong零基础新手/strong。/p h2我的爱好/h2 ul li阅读/li li跑步/li li写代码/li /ul h2我的日常作息/h2 table border1 tr th时间段/th th活动/th /tr tr td上午/td td学习 HTML 和 CSS/td /tr tr td下午/td td练习代码、刷前端面试题/td /tr /table h2给我留言/h2 form label forname你的名字/label input typetext idname namenamebrbr label formessage留言内容/labelbr textarea idmessage namemessage rows4 cols40/textareabrbr button typesubmit提交留言/button /form p想了解更多访问我的 a hrefhttps://example.com target_blank个人博客/a。/p /body /html保存后在 VsCode 编辑器空白处点击右键选择“Open with Live Server”浏览器会自动打开一个页面地址栏显示类似http://127.0.0.1:5500/index.html的本地地址。这个页面就是刚才那段代码渲染出来的成果。我逐块拆解一下这段代码里的核心点h1是一个页面里最显眼的标题大号加粗用户第一眼看到的内容。p段落标签中间的文字会作为自然段落排版显示。我把“零基础新手”用strong包了起来页面里它会加粗语义上则表示“这是重要内容”。ul无序列表每个li前面会自动生成一个圆点符号。它还自带缩进排版整体清晰整齐。如果你用的场景需要序号比如步骤讲解就把ul换成ol圆点会变成 1、2、3。table表格我用border1加了边框这是最原始的做法生产环境里表格样式会用 CSS 统一控制但入门阶段这样做能更直观地看清表格结构。th表头单元格默认加粗居中td是普通单元格。每一行内容包在一组tr里面。form表单区域有几个知识点。label的for属性要和input的id属性对应这样点击标签文字时焦点会自动跳到对应的输入框这个交互对用户非常友好。input typetext是单行文本输入框textarea是多行文本区域rows和cols指定行数和列数。button typesubmit是提交按钮点击后表单数据会提交到服务器——但这个阶段你还没配后端点了页面会刷新这是正常现象。a hrefhttps://example.com target_blank是超链接href指向跳转地址target_blank表示在新标签页打开。https://example.com是专门用于示例的域名你可以改成任意真实网址。还有一行很重要的内容!-- 这是页面的顶部区域 --。这是 HTML 注释浏览器不会渲染它人类开发者能看见。注释的作用是给代码做标注项目大了以后回头看自己几个月前写的代码有没有注释完全是两个体验。入门阶段就要养成写注释的习惯。3.3 通过浏览器开发者工具验证页面结构写完代码、浏览器打开页面之后一个特别值得做的动作是在页面上点击右键选择“检查”或直接按 F12打开浏览器开发者工具。查看“Elements”元素面板你会看到左边是 HTML 结构的树形展示右边是选中元素的样式信息。鼠标在开发者工具里高亮某个标签时页面上对应的内容也会高亮显示。利用这个工具你可以清楚地看到代码里写的h1在页面上是怎么被浏览器解析成一颗 DOM 树节点的ul下面的每个li在结构上是如何嵌套的。这一步的意义在于它帮你建立“源代码”和“渲染结果”之间的对应关系。很多新手学了标签之后以为自己会了一调试就懵根本原因就是脑子里没有这棵 DOM 树的模型。开发者工具是你最忠实的解剖台多拆多看对结构的理解会突飞猛进。3.4 一个完整小案例从零写一个新闻卡片如果你觉得上面的页面太简单我可以再演示一个更贴近实际场景的案例一个新闻卡片。这一类卡片在如今的主流网页中随处可见拆开来看它的 HTML 结构其实很简单。!DOCTYPE html html langzh-cn head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title新闻卡片/title /head body article h2前端开发岗位需求持续增长2026年就业市场热度不减/h2 p发布时间2026年3月15日 作者李雷/p p随着数字化转型加速strong前端开发/strong岗位在各行业中的需求持续走高。无论是互联网企业还是传统行业都急需能独立完成页面开发、交互实现的人才。/p p行业专家指出扎实的 a href#HTML/a、a href#CSS/a 基础是前端工程师的立身之本在此基础上掌握主流框架将具备更强的职场竞争力。/p img srchttps://picsum.photos/600/300 alt前端开发工作场景示意图 width600 /article /body /html这个例子里面有一个新标签article它是 HTML5 新增的语义化标签表示页面中独立完整的内容区块比如一篇文章、一条新闻、一条评论。搜索引擎和屏幕阅读器对它很友好能精准识别内容的边界。从标签的使用频率来看h2用于新闻标题而不是h1是因为在一个完整页面里页面主标题应该用h1下面是各个内容区块用h2来分层。标题层级的规范使用对 SEO 有明显影响这也是前端面试题中的高频考点。img标签我加了一个src属性指向一个提供随机图片服务的网址这样可以测试远程图片的加载。width600直接缩放了图片宽度。alt前端开发工作场景示意图是替代文本图片加载失败时会显示这段文字屏幕阅读器也会朗读它这对无障碍访问很重要。保存文件用 Live Server 刷新可以看到一个结构清晰的新闻卡片。试着把图片地址替换成一张不存在的网址马上就能看到alt文字的效果。3.5 让页面更深一步认识 div 和 span 两个布局基础标签上面案例中提到的标签都有语义含义现在要介绍两个在布局中极其常用但本身没有语义的标签div和span。div是全称是 Division意为分区。它是一个块级容器默认独占一行宽度填满父容器。它是 CSS 布局中最重要的“盒子”之一通常用来把页面上逻辑相关的内容分组包起来然后统一给这个组设置样式。span是行内容器不会换行宽度只占内容本身的宽度。常用于在段落内部单独标记一段文字来设置样式比如把某一句话变红、加大字号。举一个常见的组合例子div classcard h3卡片标题/h3 p这是一段内容描述。这里需要span classhighlight突出显示/span一部分文字。/p /div这段代码中div classcard把标题、段落、以及需要突出显示的span全部包成一个整体后续用 CSS 给.card加边框、背景色、圆角就能产出一个完整卡片。span则精准定位到段落内部的一小段文字。理解块级元素和行内元素是 Web 布局的第一课。块级元素div、h1、p、ul、table等默认从上到下排列就像排队站好行内元素span、a、strong、em、img等默认从左到右排列就像在句子里的文字一样流动。这个基本属性决定了元素在页面上的位置学 CSS 之后你会频繁跟它打交道。4. 常见问题与排查技巧实录4.1 中文全部变成了乱码怎么办这是入门阶段遇到概率最高的问题。现象很直观浏览器页面上全是“ä¸æ–‡”这种莫名其妙的符号。排查思路非常固定先检查index.html文件的head里有没有meta charsetUTF-8这一行。没有加上它刷新页面问题解决。如果这一行已经有了仍然乱码那就检查 VsCode 右下角的编码格式显示是否是 UTF-8。如果显示 GBK 或者其他编码点一下选择“通过编码重新打开”选择 UTF-8然后重新保存文件。乱码的本质是编码不一致文件的存储编码是 A浏览器解析时按照 B 去解码两者对不上就会乱码。UTF-8 是全世界的通用标准所以坚持一条原则所有 HTML 文件一律使用 UTF-8 编码且必须在 head 中声明charsetUTF-8。4.2 Live Server 打开后页面不刷新Live Server 最让人舒爽的特性是自动刷新偶尔它也会“罢工”。遇到不刷新按下面的顺序排查第一确认 Live Server 是以“文件夹”的形式打开的项目而不是单独打开一个文件。Live Server 对项目根目录的监听机制要求你必须打开一个文件夹否则它监听的文件范围不对改动可能无法触发刷新。建议初期养成习惯VsCode 左侧文件树能看得到你的文件并且顶部标签页显示的是文件名而不是“无标题”就说明目录打开正确。第二确认文件路径里没有中文和特殊字符。虽然大多数情况下中文路径也能工作但偶尔会触发 Live Server 的监听 bug。项目根目录直接命名为英文、数字、短横线组合最稳妥。第三硬刷新浏览器。有时候页面缓存导致看起来没刷新按CtrlShiftR强制刷新清除缓存。如果以上都无效关闭 Live Server 再重新启动基本都能解决。4.3alt属性到底该不该写不少初学者觉得alt只是图片加载失败才显示的占位文字写不写无所谓。这是错的原因有三个。第一无障碍访问需求。视障用户使用屏幕阅读器时阅读器会把alt的内容读出来帮助用户理解页面图片传达的信息。没有alt的图片屏幕阅读器会直接跳过或读出图片文件名体验极差。第二SEO 价值。搜索引擎的爬虫无法“看懂”图片内容它们依赖alt文本理解图片主题也因此影响图片搜索的排名。关键图片缺少alt等于放弃了这部分自然流量。第三异常降级。图片地址失效、网络被拦截时页面上会显示破碎的图片图标和alt文本用户至少还能知道这里原本应该是一张什么图。所以alt的正确写法是用一句简短、准确的话描述图片内容比如“一张前端开发者在双显示器前写代码的照片”而不是一句“图片”。4.4 为什么我的代码和示例一模一样页面却长得不同这是入门阶段最容易产生挫败感的问题。原因通常是以下两点之一。第一版本不同。HTML 有旧版HTML4 以下和新版HTML5之分某些标签和属性在新版本中已经废弃或者行为改变而某些极老的教程还在使用。比如font标签在 HTML5 中已经废弃现在全用 CSS 控制字体样式。所以学习的唯一标准是 HTML5 规范。第二浏览器默认样式不同。不同浏览器Chrome、Edge、Firefox、Safari对 HTML 标签有各自的默认样式比如h1的默认字号和边距在不同浏览器存在细微差异。这直接用 Normalize.css 这类工具解决入门阶段不需要深究但要知道不是你的代码错了是浏览器的锅。建议统一以 Chrome 或 Edge 为标准学习浏览器它们是当前市场占有率最高的两款而且对 HTML5 新特性的支持最为完备。4.5 VsCode 常见的几个“让人抓狂”的小问题问题一保存文件时没有自动格式化。检查是不是没装 Prettier 插件以及是否在设置里勾选了 “Format On Save”。装好并且开启之后如果仍然不生效检查 Prettier 默认使用的格式化器是否与当前文件类型匹配可以尝试在按键面板CtrlShiftP输入 “Format Document”手动触发一次。问题二文件树里看不到已经创建的文件。点击资源管理器右上角的“刷新”图标或者选择“文件 → 打开文件夹”重新打开目录。问题三代码提示不出现。HTML 文件几乎不需要额外配置就有基础提示如果按CtrlSpace都没有提示检查 VsCode 是否识别了文件类型确认文件后缀是.html而非.txt。问题四不小心关掉了活动栏整个文件树没了。按CtrlB切换侧边栏显隐如果侧边栏还在但活动栏图标不见了按CtrlShiftE重新打开资源管理器视图。这些问题是几乎每个新手都会遇到的高频障碍花费的时间往往不是技术问题而是“不知道按了什么键”。网上搜索时关键词建议直接搜索“VsCode 某些功能失效 英文报错内容”这样定位问题比中文搜更准。5. 日常练习路径与面试高频考点5.1 前端入门阶段每天练什么工具能用了、标签也认识了接下来最关键的环节就是保持每天的练习量和手感。我给零基础朋友的建议是把练习任务拆成三个台阶每天挑其中一组来做。第一组是模仿练习找几个你每天都会打开的真实网站比如新闻门户、电商首页、博客用浏览器开发者工具查看它们的 HTML 结构认得出header、nav、main、footer、article、section这些语义化标签是怎么组织的。然后尝试用纯 HTML 把你认为的页面骨架搭出来。不需要完美复刻只要结构清晰、标签用法正确即可。第二组是功能练习每天用当天学到的标签组合做一个具体功能模块比如进度条、注册表单、商品卡片、导航菜单、评论区布局。不要贪多一个模块一个模块吃透。第三组是整合练习每学完一个阶段把之前所有零散的模块拼成一个完整的个人主页。不断迭代它从纯 HTML 到加 CSS 样式再到引入 JavaScript 做简单交互。这个个人主页会成为你的第一个作品集项目直接出现在简历里。5.2 前端面试题中 HTML 部分的常客如果你目标是找工作可以提前了解面试中 HTML 部分考察的重点方向这样入门阶段的练习才更有针对性。我整理几个高频考点你在学习过程中务必留意。人力资源和技术面最常问的前几个问题通常是!DOCTYPE html的作用是什么说说语义化的理解以及为什么前端要重视语义化src和href属性有什么区别块级元素和行内元素的区别是什么alt属性的作用是什么什么是 HTML5 新增的语义化标签它们比div好在哪这些问题都不难但考察的是你是否真正理解“为什么”——为什么页面要有语义化标签为什么DOCTYPE不能省为什么img必须写alt。如果你把前面章节的内容都亲手实践过一遍这些问题基本不需要背都能用自己的话说出正确的答案。另一个值得提前了解的概念是 HTML 的文档流和 DOM 结构。面试官非常喜欢问一个实际页面的 DOM 树是怎么构建出来的标签之间如何嵌套才合法这就涉及到 HTML 的语法规则标签必须正确嵌套不能交叉所有标签必须正确闭合部分空标签如img、input、br除外它们在 HTML5 中不写结束标签也是合法的标签名和属性名小写书写属性值用双引号包裹。HTML 入门真的不算难但它的知识点极其琐碎这些细节恰恰是面试筛选的一道分水岭。耐心逐项攻克后面学 CSS 和 JavaScript 会顺畅得多。