抖音无水印下载怎么做：3 步用 douyin-downloader 把视频免费存到本地
2026/9/16 18:21:59
先说几句实在的：为什么人人都该从 HTML 学起
我做前端开发这些年，带过不少实习生，也面试过很多转行来的人。每次有人问我"前端到底先学什么"，我的答案永远只有一个：先把 HTML 吃透。别急着上 CSS，更别碰 JavaScript，HTML 都没写明白，后面全是空中楼阁。
很多新手有个误解，觉得 HTML 不就是一堆标签嘛，<div>、<p>、<h1>，背下来不就完了？说句不好听的，这种想法会在后面狠狠绊你一跤。HTML 确实是标签堆出来的，但它真正考你的不是"记住了几个标签"，而是"一个页面应该怎么搭骨架"。同一个页面，有人用五个<div>嵌套硬怼出来，有人用<header>、<main>、<section>、<footer>五分钟理清楚——这就是差距，从基础篇就开始拉开差距了。
这篇博文就是为真正的零基础准备的。不管你是刚进大学的学生、准备转行的社会人，还是被"前端面试题 2026"吓到想从头补课的老同学，只要你连 HTML 是什么都说不清楚，这篇都能带你从 0 走到 1：认识页面骨架、学会高频标签、写出第一个能看的页面，顺便把那些新手必踩的坑全部提前排掉。
1. 写网页前先搞懂：HTML 到底在做什么
1.1 浏览器是怎么"看"网页的
先打个比方。你去一家餐厅吃饭，菜单上写着"宫保鸡丁：鸡丁、花生米、干辣椒、葱段"。HTML 的角色就是这个菜单——它只负责"罗列有什么"。至于宫保鸡丁长什么样、摆盘好不好看，那是 CSS 的事；后厨怎么根据菜单做出菜，那是 JavaScript 的事。
更准确地说，HTML 是一门标记语言。它不写逻辑，不做计算，只用一对对尖括号把内容"框"起来，告诉浏览器：这一段是标题，那一段是段落，这个框是导航栏，那个框是页脚。
浏览器拿到一个 HTML 文件之后，会做三件事：
- 解析 HTML：从头到尾读一遍，把标签、文本、属性拆开，构建出一棵 DOM 树。
- 解析 CSS：如果引用了样式表，浏览器会把样式规则匹配到 DOM 节点上，决定每个元素的位置、大小、颜色。
- 执行 JavaScript：如果脚本要操作页面，浏览器就会执行它，改变 DOM 结构或者样式。
你写 HTML 时真正在做的，是给浏览器提供"这棵树长什么样"的原始数据。树的主干歪了，后面再美化也救不回来。
1.2 标签、元素、属性的关系
很多教材喜欢把这三个词混着讲，搞得新手一头雾水。我来用最直白的方式拆开：
- 元素是完整的一个"东西"：开始标签 + 内容 + 结束标签，比如
<p>你好</p>。 - 标签是元素的外壳：
<p>是开始标签，</p>是结束标签。 - 属性是写在开始标签里的附加信息，用来告诉浏览器"这个元素有什么额外配置"，比如
<a href="https://example.com">链接</a>里的href。
写 HTML 时有个原则：[HTML 里结尾没闭合的标签，浏览器可能会自己"脑补"补全，但脑补的结果往往不是你想的那样。] 在</p>缺失的情况下，后面的内容会被错误地吞进段落里，页面结构直接乱掉。所以从一开始就养成"写完开始标签立刻补结束标签"的习惯，比什么都重要。
2. 页面骨架必须记牢：从 doctype 到 body
你打开任何一个网页的源代码，前面几行几乎长一个样。很多人直接复制粘贴，根本不问为什么。我劝你搞清楚，因为面试官最爱从一个<!DOCTYPE html>开始问。
2.1 第一行 doctype 声明到底有什么用
标准页面第一行是这个：
<!DOCTYPE html> <html lang="zh-CN"><!DOCTYPE html>不是 HTML 标签，它是一条"文档类型声明"，作用是告诉浏览器："请用最新的标准模式来解析我这个页面。" 如果没有这一行，古老的浏览器会进入怪异模式，你会遇到各种扭曲的排版问题，比如盒模型计算方式不对、字体默认大小不一。
后面紧接着的<html lang="zh-CN">是整个页面的根元素，lang="zh-CN"声明页面语言是简体中文。这个属性不是摆设，它直接影响屏幕阅读器的发音、浏览器翻译插件的触发机制，还有搜索引擎对页面内容的理解。我见过不少新人把页面内容写成中文，lang却不写，或者乱写一个en，这在 SEO 上比较吃亏。
2.2 head 区域该放什么
<head>是页面的"大脑"，里面的内容不会直接显示在页面上，但它们决定了页面怎么被解析、被搜素引擎怎么看待。最常用的四样：
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的第一个网页</title> <meta name="description" content="这里是页面描述，会展示在搜索结果摘要中"> </head>charset="UTF-8"：字符编码，缺失会乱码，这个后面细讲。viewport：移动端适配必备，不写的话手机浏览器打开页面会默认渲染成桌面宽度，再缩小。title：浏览器标签页上显示的文字，也是搜索引擎结果里的标题，60 个字以内的效果最好。description：页面描述，虽然不直接参与排名，但做 SEO 时这段文字会直接影响用户的点击率。
标题和描述的关系，就像一本书的书名和腰封文案。书名起得好，别人愿意点进来看；腰封写得清楚，别人才知道内容是不是自己需要的。
2.3 body 才是真正的"舞台"
从<body>开始，里面的内容才会被用户看到。正文文字、图片、视频、按钮、表单，全都在这里。
新手最容易犯的一个错误，是把所有东西胡乱堆在 body 里，连个容器都不分。我刚入行的时候也这么干过，结果一个页面滚到底，结构完全没法看。正确做法是：先用语义化标签划分出"头部、主体、侧边栏、底部"，再往里面填充内容。
这一节我们先记住一个完整骨架长什么样：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的第一个网页</title> </head> <body> <header>这是网站头部</header> <main> <h1>这里是页面的主标题</h1> <p>这里是一段正文。</p> </main> <footer>这是页脚</footer> </body> </html>把这八行代码存成index.html，用浏览器打开，你就能看到最基本的网页了。别看简单，它已经包含了 HTML 最重要的三层信息：文档声明、元信息、内容结构。后面的所有学习，都是在这三层上做加法。
3. 高频标签逐个拆解：别背，用起来自然就记住了
有学生经常问我："老师，HTML 标签那么多，我是不是都要背下来？" 答案是：不用背。我在实际项目里常用的标签撑死了也就十几个，其他都是碰到了再查。把下面这一批用熟，你就能写 90% 的常规页面。
3.1 文字类标签：标题、段落、强调
标题标签是新手最先接触的一组：<h1>到<h6>，从大到小六级。一个页面原则上只能有一个<h1>，它是整个内容的主题，搜索引擎会重点看它，用多了不仅权重分散，在 SEO 上还会被视为作弊。
我第一次带团队做企业站的时候，有个同事把页面里的 logo、副标题、广告语全用成了<h1>，结果上线后关键词排名一直上不去。排查了一圈，问题就出在这里。记住：<h1>是主题，<h2>是章节，<h3>是章节下的小节，最多用到<h4>就该停了。
段落和换行是两个特别容易混淆的标签：
<p>这是第一段，结束之后会自动换行，并且有一段垂直间距。</p> <p>这是第二段。</p><p>是段落，自带上下间距；<br>是强制换行，没有间距。新手经常用一堆<br>来模拟段落间距，这是非常业余的做法。段间距应该交给 CSS 的margin去控制，而不是硬塞换行符。
强调有两个标签：<strong>表示重要，加粗显示；<em>表示语气强调，斜体显示。从语义上讲，<strong>比<em>更重一些，屏幕阅读器对两者的朗读语气也会有差异。别为了样式加粗而用<strong>，那应该用 CSS 的font-weight。
3.2 链接与图片：网页的"任督二脉"
互联网叫"网"，就是因为有链接把无数页面连在一起。链接的标签是<a>，核心属性是href：
<a href="https://developer.mozilla.org/zh-CN/" target="_blank" rel="noopener noreferrer">访问 MDN 文档</a>新手在这一步容易踩的坑有两个：
target="_blank"表示在新标签页打开，但如果缺了rel="noopener noreferrer"，新打开的页面可以通过window.opener反向操作你的原页面，这是一个安全漏洞。现在规范下，只要target="_blank"，必须带上这两个rel值。- 超链接不一定只能跳转网页。
href="mailto:xxx@xxx.com"可以唤起邮件客户端，href="tel:138xxxx"在手机上可以直接拨号。
图片标签也很常用：
<img src="images/avatar.png" alt="用户头像" width="100" height="100">这里最关键的属性是alt。它有两层作用：图片加载失败时，页面上会显示这段文字；屏幕阅读器会把这段文字读给视障用户听。很多人懒得写alt，从 SEO 和可访问性的角度看，这都是在欠债。
3.3 列表与表格：结构化内容的利器
列表分三种：无序列表<ul>+<li>，有序列表<ol>+<li>，自定义列表<dl>+<dt>+<dd>。
导航菜单、商品列表、文章分类，用的都是<ul>。操作步骤、排行榜、步骤说明，用<ol>更合适。新手注意一点：<li>必须是<ul>或<ol>的直接子元素，中间不要乱套<div>，否则列表语义就坏了。
表格是一个让新手又爱又恨的东西。基础结构是四层：
<table> <thead> <tr> <th>姓名</th> <th>成绩</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>95</td> </tr> </tbody> </table><thead>是表头区域，<tbody>是表格主体，<tr>是行，<th>是表头单元格，<td>是普通单元格。这种结构是给浏览器和搜索引擎看的，也是给辅助技术用的。新手最常犯的错，是把<td>直接写成<tr>的子元素，结构乱了，表格显示就会错位。
表格在移动端的适配一直是痛点，后面学到 CSS 时你会发现，表格改造成响应式是需要不少技巧的。但在 HTML 阶段，先把结构写正确就够了。
4. 用表单收集数据：input、textarea、select 实战
表单是 HTML 里和用户交互最密切的部分。所有注册页面、搜索框、留言板，底层都是表单在撑着。
4.1 表单的基本结构
<form action="/api/submit" method="post"> <!-- 表单控件写在这里 --> <button type="submit">提交</button> </form>action是数据提交到服务器的地址，method是提交方式。实际开发中，前端通常用 JavaScript 配合fetch或axios做异步提交，action和method偶尔反而不写了。但既然是基础篇，这两件事还是要知道：get会把数据拼在 URL 后面，适合搜索、翻页；post把数据放在请求体里，适合提交内容、密码、文件。
4.2 常用输入控件
最常用的控件是<input>，它靠type属性变换形态。我把新手最常遇到的几种列出来：
| type 属性 | 作用 | 常用场景 |
|---|---|---|
text | 单行文本输入 | 用户名、搜索框 |
password | 密码输入，字符会被掩盖 | 登录、注册 |
email | 邮箱输入，手机端会弹出相应键盘 | 注册、订阅 |
number | 数字输入 | 数量、价格 |
checkbox | 复选框，多选 | 兴趣爱好、协议勾选 |
radio | 单选框，多选一 | 性别、支付方式 |
date | 日期选择 | 生日、预约日期 |
file | 文件上传 | 头像上传、附件 |
密码框<input type="password">有个细节：它虽然把字符显示成圆点，但提交时依然发送明文。要想保证安全，必须在服务器端或者通过 HTTPS 加密传输。前端这边能做的只是遮挡显示，这个要跟用户讲清楚，别产生误解。
4.3 label 标签：提升表单可用性的关键
很多新手不知道，点击"用户名"这三个字能激活输入框，靠的是<label>标签的for属性与输入框的id关联：
<label for="username">用户名</label> <input type="text" id="username" name="username">没有这个关联时，用户想聚焦输入框只能精准点击输入框本身，点击范围太小，在小屏幕上操作体验很差。还有一个好处：屏幕阅读器读表单时，会把"用户名"读给用户听，无障碍体验会好很多。
我自己实际写表单时，还习惯给每个输入框加上placeholder（占位提示）和required（必填校验）：
<input type="email" id="email" name="email" placeholder="请输入邮箱" required>required的作用是：用户什么都不填直接点提交，浏览器会弹提示"请填写此字段"，而且不会真的发送请求。这是浏览器原生表单验证，不需要写一行 JavaScript 就能实现，学生党做课程设计时尤其好用。
下拉选择框和文本域也经常用：
<select name="city" id="city"> <option value="beijing">北京</option> <option value="shanghai" selected>上海</option> </select> <textarea name="message" id="message" rows="4" cols="30">默认内容</textarea>selected属性会让某个选项默认选中，textarea的rows和cols控制显示行数和列数。这些都是最基础也最实用的表单知识点。
5. 新手的语义化意识：div 不是万能筐
5.1 为什么不要到处用 div
我刚学 HTML 那会儿，老师教的是"页面布局全靠<div>"，于是我做出来的页面全是div套div，自己看都费劲。后来真正参与项目、读别人代码的时候，才意识到语义化多重要。
语义化标签就是"见名知义"的标签。看到<nav>，浏览器和开发者都知道这是导航；看到<footer>，都知道这是页脚。而<div>只是一个没有语义的"纯容器"，浏览器完全不知道它装的是什么内容。
看一个对比：
<!-- 语义化差的做法 --> <div class="header"> <div class="nav">首页 | 关于 | 联系</div> </div> <!-- 语义化好的做法 --> <header> <nav>首页 | 关于 | 联系</nav> </header>两种写法页面效果几乎一样，但第二种对搜索引擎友好得多，对阅读代码的人也友好得多。面试时聊到 HTML，语义化永远是大考点。
5.2 常用的语义化标签怎么用
HTML5 提供了非常清晰的一套语义化标签：
<header>：页面或者某个区块的头部，放 logo、导航、搜索框。<nav>：导航链接区域。<main>：页面主要内容，一个页面只能有一个。<section>：页面中的一个独立区块，通常带一个标题。<article>：独立成篇的内容，比如一篇博文、一条新闻、一条评论。<aside>：侧边栏，放广告、相关推荐、作者信息。<footer>：页脚，放版权信息、备案号、联系方式。
[经验] 页面结构可以当成一篇论文的提纲：<header>是封面，<nav>是目录，<main>是正文，<section>是章节，<article>是每篇独立的文章，<aside>是页边距上的注释，<footer>是结尾的参考文献。这样记，基本不会用错。
5.3 语义化对 SEO 的影响
搜索引擎的爬虫读 HTML 时，是按照标签语义来理解内容的。一个用<h1>写的标题，比一个用<span>设置成大号字体的标题，在搜索引擎眼里权重完全不同。
我朋友做过一个实验：同样的内容，一个页面用<div>+ CSS 模拟大标题，另一个页面用<h1>正常书写，发布三个月后，后者在搜索结果里的排名明显更好。这说明内容结构是 SEO 的地基，后面所有优化都建立在这个地基上。
另外，正确使用语义化标签也是 Web 可访问性的基础。视障用户依赖屏幕阅读器浏览网页，阅读器通过标签判断内容性质，比如<nav>会被识别为导航区域，用户可以直接跳转到那里。如果一个页面全是无意义的<div>，这个用户基本没法正常使用。
6. 完成一个完整页面：实操流程与核心细节
前面讲的都是知识，这一部分是动手。以"个人介绍页"为例，我带你从零写一个完整页面，每一步用到的东西都是前文讲过的。
6.1 准备工具
新手不用急着上复杂工具，一个浏览器和一个文本编辑器就够了。编辑器推荐 VS Code，免费、插件生态好。装好后加两个插件：
- Live Server：保存文件后浏览器自动刷新，不用手动按 F5。
- Prettier：自动格式化代码，统一标点、缩进。
写字时，在桌面建一个文件夹，命名my-page，然后在 VS Code 里直接打开这个文件夹，右键新建文件index.html。
还有一点要养成习惯：index.html是网站默认的首页文件名，访问一个目录时服务器默认找的就是它。课程设计、毕设项目里，首页就叫这个名字，别乱起。
6.2 从无到有搭建页面
打开index.html，第一件事就是敲出下面这个骨架。别复制！新手阶段我强烈建议你手动敲一遍，敲一遍比看十遍都管用：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>XiaoMing 的个人主页</title> </head> <body> <header> <h1>你好，我是 XiaoMing</h1> <nav> <a href="#about">关于我</a> | <a href="#skills">技能</a> | <a href="#contact">联系我</a> </nav> </header> <main> <section id="about"> <h2>关于我</h2> <p>一名热爱技术的大学生，目前正在学习前端开发。</p> </section> <section id="skills"> <h2>技能</h2> <ul> <li>HTML / CSS</li> <li>JavaScript（学习ing）</li> <li>Python 基础</li> </ul> </section> <section id="contact"> <h2>联系我</h2> <form action="#" method="get"> <label for="name">你的称呼：</label> <input type="text" id="name" name="name" required> <br><br> <label for="message">留言内容：</label> <textarea id="message" name="message" rows="4"></textarea> <br><br> <button type="submit">发送</button> </form> </section> </main> <footer> <p>© 2026 XiaoMing. 保留所有权利。</p> </footer> </body> </html>注意这里导航里用了href="#about"，它叫锚点链接。点击链接，页面会滚动到id="about"的元素位置，这是纯 HTML 实现页面内跳转的方式，做课程设计做个人主页特别常用。
6.3 打开浏览器调试页面
如果你装了 Live Server，在index.html上右键选择 "Open with Live Server"，浏览器会自动打开。如果没装，直接双击文件，浏览器也能打开，只是改代码后需要手动刷新。
打开页面后，按F12打开开发者工具，切换到Elements（元素）面板。你会在左侧看到渲染出来的 DOM 树，右侧看到元素的计算样式。这个面板对后续写 CSS、排查样式问题至关重要，我建议从今天开始，每天写页面时都开着它。
[实操心得] 初学者要学会一个快速自查的办法：在 Elements 面板里点击任意元素，然后用键盘的上下方向键移动，你能清楚地看到这个元素被蓝色高亮在页面上的覆盖区域。如果你发现自己写的某个标签"消失了"，大概率是标签没闭合或者嵌套错位，到面板里一查便知。
7. 新手高频问题速查与避坑实录
写 HTML 的地方没有不踩坑的。下面这几个问题，是我带过的学生、团队新人里最常犯的，整理成速查表，方便你对照排查。
7.1 页面中文乱码
页面内容全是"锟斤拷""烫烫烫"，这是经典的编码问题。原因几乎只有一个：<meta charset="UTF-8">没有写，或者写了但<meta>标签放到了<title>之后。
正确做法：<meta charset="UTF-8">必须是<head>区域里最靠前的那几行之一。浏览器的原则是"能尽早读到编码声明就尽早读"，如果它先用默认编码解析了一部分，再读到charset已经晚了。
7.2 图片不显示
图片叉掉了，先按顺序排查三件事：
- 路径写对没有？相对路径
images/a.png是相对于当前 HTML 文件的目录位置来说的，不是相对于桌面，也不是相对于磁盘根目录。 - 文件名大小写对不对？服务器通常是区分大小写的，
Avatar.png和avatar.png是不同文件。这是本机能显示、传服务器就挂的原因之一。 - 图片文件本身损坏没有？直接双击打开图片文件，能正常打开再考虑路径问题。
7.3 本地能打开，发给别人就打不开
这是新手最爱踩的坑。你把自己的index.html用微信发给同学，同学双击打开，发现图片全没了、样式全乱了。
原因是：通过file://协议直接打开本地文件时，浏览器出于安全限制，很多资源加载会被阻断（尤其涉及脚本和部分样式时）。而且你用的相对路径，在别人电脑上根本没有对应的文件结构。
正解：把整个文件夹压缩成 zip，发给对方后让对方先解压，并且所有资源文件必须和index.html放在一个文件夹里，保持相对路径一致。如果涉及服务器接口或动态数据，本地双击也拿不到数据，这种情况可以装一个 Live Server 插件，或者用 VS Code 里其他静态服务器工具启动一下。
7.4 表单提交后页面刷新了
写表单时，点了"提交"按钮，页面就刷新一下，刚填的内容全没了。
这是因为form的action没写时，默认会把数据提交到当前页面本身，并且刷新。开发阶段常用一个写法：
<form action="javascript:void(0);" method="get">这样点击提交不会刷新页面，也不会真的提交，适合先调试界面效果。到了真正对接接口的阶段，再改成后端接口地址，或者直接用 JavaScript 阻止默认行为：
document.querySelector('form').addEventListener('submit', function (e) { e.preventDefault(); // 用 fetch 或 axios 发请求 });这段代码现在看不懂没关系，等学到 JavaScript 自然会明白，先知道"表单本身有默认提交行为"这件事就够了。
7.5 页面元素"挤"在一起没法看
结构化到一半，发现页面元素一个挨一个，没有间距。这不是 HTML 的锅，是所有间距问题本质上都该由 CSS 解决。基础篇还没学 CSS 时，可以用<br>临时占位，但心里要有数：这只是临时方案，别养成依赖。
最后分享一点我的体会
带过这么多新人，我最深的感受是：HTML 入门不难，但它决定了一个前端开发者的"基本功"能不能打。把标签、属性、页面结构、语义化这些基础吃透的人，学 CSS 和 JavaScript 会顺畅很多；反过来，贪快跳过 HTML 的人，后面写出来的页面往往结构混乱，改起来极痛苦。
我给新手的建议是：把这篇里的代码全部手敲一遍，别复制。第二遍试着不看文章，从空文件开始写。等到能一口气把带表单、导航、锚点、语义化标签的完整页面写出来，你的 HTML 基础就已经算是过关了。
下一步就可以开始学 CSS 了，让页面从"能看"变成"好看"。真到了那一步，你回头看这个基础篇，会感激自己当初认真搭骨架的那几个小时。