
本章定位上一章我们先建立了前端学习的整体地图知道了网页、浏览器、服务器和前端开发之间的关系也理解了 HTML、CSS、JavaScript 的基本分工。从这一章开始我们正式进入编码环节。这一章的目标很明确你要亲手写出自己的第一个 HTML 页面。这个页面不需要好看也不需要复杂它的价值在于帮你理解一个网页文件最基本的结构。对纯小白来说第一次写代码时最容易紧张。其实不用怕HTML 是非常适合入门的起点因为它更像是在描述页面内容而不是一上来就写复杂逻辑。本章学习目标学完这一章后你应该能做到创建一个最基础的 HTML 文件。理解 HTML 文档的基本结构。认识!DOCTYPE html、html、head、body的作用。使用标题、段落、换行、水平线等基础标签组织内容。理解标签、元素、属性这三个基础概念。独立写出一个简单的“自我介绍”页面。一、HTML 是什么HTML 的全称是HyperText Markup Language中文通常叫“超文本标记语言”。这个名字听起来有点绕但你现在可以先把它理解成HTML 是用来描述网页结构和内容的语言。它主要回答一个问题页面上有什么比如页面标题是什么页面里有哪些段落哪些内容是列表哪些地方是图片哪些文字可以点击跳转HTML 不负责让页面变漂亮也不负责复杂交互。它最核心的任务是把内容组织成有意义的结构。二、先准备一个 HTML 文件我们先创建一个最简单的 HTML 文件。1. 创建文件在你的学习目录里新建一个文件文件名可以叫index.html这里有两个点要注意文件名建议先用英文小写。文件后缀必须是.html。很多新手会不小心创建成index.html.txt这样浏览器就不会把它当成真正的 HTML 文件。创建后可以确认一下文件名是不是准确显示为index.html。2. 写入最基础的 HTML 结构把下面这段代码写进index.html!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8/title我的第一个网页/title/headbodyh1你好前端世界/h1p这是我写的第一个 HTML 页面。/p/body/html保存文件后用浏览器打开它。你应该能看到一个标题和一段文字。如果页面能正常显示说明你已经完成了第一个网页。三、理解 HTML 文档的基本结构刚才那段代码就是一个最小可用的 HTML 页面。我们现在逐行拆开理解。1.!DOCTYPE html告诉浏览器这是 HTML5 文档!DOCTYPE html放在文件最开头。它的作用是告诉浏览器请按照现代 HTML 标准来解析这个页面。你暂时不需要记住它背后的历史只要先记住它通常写在 HTML 文件第一行。它不是普通标签。新建 HTML 页面时建议保留它。2.html整个页面的根元素html标签包住了整个网页内容htmllangzh-CN.../html它表示这里面是一整个 HTML 页面。其中langzh-CN是一个属性用来说明页面主要语言是简体中文。这个属性不会直接改变页面显示效果但它对浏览器、搜索引擎、翻译工具和辅助阅读工具都有帮助。3.head放页面的元信息head里通常放的是给浏览器和搜索引擎看的信息而不是直接显示给用户看的正文内容。例如headmetacharsetUTF-8/title我的第一个网页/title/head这里有两个常见内容meta charsetUTF-8告诉浏览器用 UTF-8 编码解析页面避免中文乱码。title设置浏览器标签页上显示的标题。注意title不是页面正文里的大标题它显示在浏览器标签页上。4.body放用户真正看到的页面内容body里放的是页面主体内容。例如bodyh1你好前端世界/h1p这是我写的第一个 HTML 页面。/p/body你在浏览器页面里看到的标题、文字、图片、按钮等大多数都写在body里。可以先记成一句话head主要给浏览器看body主要给用户看。四、认识标签、元素和属性HTML 里有三个非常基础的概念标签、元素、属性。这三个词后面会不断出现所以这一章先把它们分清楚。1. 什么是标签标签是 HTML 用来标记内容含义的语法。例如p这是一段文字。/p这里的p和/p就是标签。大多数标签都有开始标签和结束标签标签名内容/标签名其中p是开始标签。/p是结束标签。中间是这个标签包裹的内容。2. 什么是元素元素通常指从开始标签到结束标签之间的整体。例如h1我的标题/h1这一整段就是一个h1元素。简单理解标签更强调语法标记。元素更强调页面中的一个完整结构。初学阶段不需要纠结得太细但要知道它们不是完全同一个概念。3. 什么是属性属性是写在开始标签上的补充信息用来描述这个元素的额外特征。例如htmllangzh-CN这里的langzh-CN就是属性。再比如ptitle这是一段提示文字把鼠标放到这段文字上试试看。/p这里的title属性会在鼠标悬停时显示提示。属性通常由属性名和属性值组成属性名属性值要注意属性写在开始标签中。属性值建议用英文双引号包起来。一个标签可以有多个属性。五、常见基础标签接下来我们认识几个最常见、最适合新手先掌握的基础标签。1. 标题标签h1到h6HTML 提供了六级标题h1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6一般来说h1是页面最重要的标题。h2是一级小节标题。h3是更细一层的小标题。后面的层级依次递减。标题标签不是单纯为了让文字变大而是用来表达内容层级。所以不要因为想让字变大就随便使用h1。后面学习 CSS 后文字大小应该交给 CSS 控制。2. 段落标签p段落标签用于表示一段正文。p我正在学习前端开发。/pp这是我的第一个 HTML 页面。/p每个p元素通常表示一段完整文字。如果有两段意思不同的文字建议写成两个p而不是全部塞到一个段落里。3. 换行标签brbr用来在文本中强制换行。p第一行文字。br/第二行文字。/p它是一个空元素通常不需要结束标签。不过要注意不要用很多个br来制造大块间距。页面间距后面应该主要用 CSS 控制。初学阶段可以知道它的存在但不要过度依赖。4. 水平线标签hrhr用来表示内容之间的主题分隔。h2个人介绍/h2p我正在学习前端。/phr/h2学习目标/h2p我希望能独立做出一个网页。/p它通常会在页面上显示一条横线。和br类似hr也不需要结束标签。5. 注释!-- --注释是写给开发者看的说明浏览器不会把它显示到页面上。!-- 这里是页面主标题 --h1我的自我介绍/h1注释适合用来说明代码意图但不要把每一行都注释一遍。好的注释应该解释“为什么这样写”而不是重复“这行代码做了什么”。六、动手写一个自我介绍页面现在我们用这一章学到的内容写一个简单的“自我介绍”页面。你可以把index.html改成下面这样!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8/title我的自我介绍/title/headbodyh1我的自我介绍/h1h2基本信息/h2p大家好我是一名前端初学者。/pptitle这是我的学习状态我正在学习 HTML希望能做出自己的第一个网页。/phr/h2学习目标/h2p我的第一个目标是理解网页结构并能独立写出简单页面。/pp接下来我会继续学习 CSS。br/等掌握基础样式后我会尝试美化这个页面。/p/body/html这段代码覆盖了本章的主要内容HTML 基本结构页面标题一级标题和二级标题段落title属性换行水平线现在你可以保存文件并用浏览器打开它。七、如何在浏览器中观察你的页面写完页面后不要只看“有没有显示出来”还要学会简单观察。1. 检查浏览器标签页标题看一下浏览器顶部标签页是否显示为我的自我介绍如果显示正确说明title生效了。2. 检查页面正文内容页面中应该能看到一个一级标题两个二级标题多段文字一条水平线如果某些内容没有显示优先检查标签有没有写完整保存文件后有没有刷新浏览器文件是不是正确的.html后缀3. 尝试鼠标悬停提示把鼠标移动到这段文字上ptitle这是我的学习状态我正在学习 HTML希望能做出自己的第一个网页。/p你应该能看到浏览器显示一段提示文字。这说明属性可以为元素补充额外信息。八、新手常见问题1. 为什么我写的中文变成乱码通常是因为缺少下面这一行metacharsetUTF-8/它告诉浏览器用 UTF-8 编码解析页面。建议新建 HTML 文件时都保留它。2. 为什么我的页面标题没有显示在正文里如果你写的是title我的网页/title它只会显示在浏览器标签页上不会显示在页面正文中。如果你想在页面里显示标题需要写在body里例如h1我的网页/h13. 为什么有的标签没有结束标签像br、hr、meta这类标签通常不包裹正文内容所以它们属于空元素。你可以先接受这个规则包裹内容的标签通常有开始和结束。不包裹内容的标签可能没有单独结束标签。后面你见得多了自然会越来越熟悉。4. 标签大小写有要求吗HTML 标签名不严格区分大小写但实际开发中推荐全部使用小写。推荐p这是一段文字。/p不推荐P这是一段文字。/P统一小写更符合现代前端开发习惯也更容易阅读。5. 空格和换行会不会影响页面HTML 会把很多连续空格和换行合并显示。例如你在代码里写很多空格页面中通常不会原样显示很多空格。所以代码里的缩进和换行更多是为了让开发者阅读方便。这也是为什么我们推荐写清晰缩进。九、写 HTML 时的基础习惯从第一天写 HTML 开始就建议养成几个好习惯。1. 保持结构完整一个基础 HTML 页面建议包含!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8/title页面标题/title/headbody页面内容/body/html不要为了省事只写一小段正文内容。2. 使用清晰缩进缩进不会直接影响页面显示但会极大影响代码可读性。推荐使用两个空格或四个空格缩进关键是保持一致。例如bodyh1标题/h1p正文内容。/p/body比下面这样更容易阅读bodyh1标题/h1p正文内容。/p/body3. 标题层级不要乱跳标题标签是表达内容结构的不只是控制字号。推荐顺序h1页面主标题/h1h2第一部分/h2h3第一部分里的小节/h3h2第二部分/h2不推荐一上来就乱用h4页面主标题/h4h1小节标题/h14. 属性值使用双引号推荐ptitle提示文字这是一段文字。/p不推荐ptitle提示文字这是一段文字。/p统一使用双引号后面写复杂属性时更稳妥。十、本章实践练习这一章的练习目标是让你真正写出页面而不是只看懂示例。练习 1手写一个自我介绍页面请新建一个index.html文件内容至少包含浏览器标签页标题一个页面主标题至少两个二级标题至少三段正文一个title属性一条水平线建议主题我的自我介绍我的学习计划我的兴趣爱好练习 2修改页面标题和正文层级在练习 1 的基础上尝试修改title中的内容h1的内容h2的数量段落顺序观察浏览器中哪些地方发生了变化。重点感受title影响浏览器标签页。h1、h2、p影响页面正文结构。练习 3练习添加属性给页面中的不同元素添加title属性。例如h1title这是页面最重要的标题我的自我介绍/h1ptitle这是第一段介绍我正在学习前端开发。/p然后把鼠标移动到这些文字上观察提示效果。练习 4故意制造一个小错误请故意删掉一个结束标签例如p这是一段没有结束标签的文字。然后刷新浏览器观察页面是否还能显示。做这个练习的目的不是鼓励写错而是让你知道浏览器有一定容错能力。但不能因为浏览器能显示就认为代码结构是正确的。练习结束后请把错误修回来。十一、学习重点提示这一章最重要的不是背下所有标签而是理解 HTML 的基本结构。请重点记住一个 HTML 页面通常包含DOCTYPE、html、head、body。head主要放页面元信息body主要放用户看到的内容。标签用来标记内容含义元素是一个完整结构属性是补充信息。标题标签要表达内容层级不要只当成“放大文字”的工具。HTML 的目标不是随便让内容显示出来而是让页面结构清晰。如果你现在只记一句话可以记住HTML 是网页的结构骨架写 HTML 时要先考虑内容层级。十二、本章小结这一章我们正式写出了第一个 HTML 页面。你已经学习了如何创建index.htmlHTML 文档的基础结构DOCTYPE、html、head、body的作用标题、段落、换行、水平线等常见基础标签标签、元素、属性的区别如何完成一个简单的自我介绍页面这一步看起来简单但它是后面所有网页开发的起点。之后你写的任何复杂页面本质上都是从这些基础结构一步步扩展出来的。十三、课后思考题请你思考下面几个问题为什么title标签里的内容不会显示在网页正文中h1和p的区别是什么它们只是字号不同吗如果一个页面没有meta charsetUTF-8可能会出现什么问题为什么我们不建议用很多个br来控制页面间距建议你把答案写进学习笔记里。写不完整没关系重要的是开始用自己的语言解释概念。十四、下一章预告下一章我们会继续学习从零开始学前端 | 第三章常用 HTML 内容标签你会认识更多常见标签比如列表、链接、图片、表格和表单并开始写出内容更丰富的网页。