HTML，也就是超文本标记语言，是搭建网页的基础。它通过各种标签，像搭积木一样，把网页的结构给搭建起来。咱们日常上网看到的网页，背后都是由 HTML 代码构建，再由浏览器翻译成我们能看懂的页面。HTML 的发展历程，就像一部技术进化史。1993 年，HTML 1.0 草案诞生，那时它的功能比较简单，只能定义一些基础的网页元素，比如标题、段落。到了 1995 年，HTML 2.0 成为正式标准，加入了表单、图像这些新元素，网页一下子变得更有趣，交互性更强了。随着互联网的迅猛发展，1997 年的 HTML 3.2 又增加了对字体样式、表格的支持，让网页布局有了更多变化。1999 年的 HTML 4.01，进一步完善了多媒体、国际化方面的功能，在当时被广泛使用。2014 年，HTML5 成为 W3C 推荐标准，这可是一次重大变革。它新增了好多语义化标签，像<header>（页眉）、<footer>（页脚）、<section>（章节），让网页结构更加清晰，就像给网页每个部分都贴上了明确的标签。而且，HTML5 加强了多媒体支持，不用借助第三方插件就能播放音频和视频。还引入了离线存储、Canvas 绘图等功能，极大提升了网页性能和用户体验。- Notepad（Windows 系统自带）：这个工具简单易用，不用安装就能用，很适合刚接触 HTML，练习基础代码编写的人。不过它也有缺点，没有语法高亮功能，写代码的时候不能用颜色区分不同代码类型，也没有代码提示，编写复杂代码时效率不高。
- Sublime Text：这是个很轻巧但功能强大的文本编辑器，支持多种编程语言。它的代码搜索和替换功能速度很快，还有丰富的插件系统。通过安装插件，能实现语法高亮、自动补全代码、代码格式化等功能，大大提高开发效率。
- Visual Studio Code（简称 VS Code）：这是微软开发的开源代码编辑器，有强大的代码智能提示和调试功能，支持大量扩展插件。在做 HTML 开发时，安装 “Live Server” 插件，能实时预览网页效果；安装 “Prettier - Code formatter” 插件，能自动把代码格式整理得更规范。
- Google Chrome：它在浏览器市场占比最高，有非常厉害的开发者工具。按 F12 键就能打开，其中 “Elements” 面板可以查看和修改 HTML 结构；“Console” 面板用来调试 JavaScript 代码；“Network” 面板能监控网页资源加载情况，这对护网工程师分析网页安全性能很有帮助。
- Mozilla Firefox：以兼容性好和开发者工具丰富出名。它的开发者工具同样能查看和调试 HTML、CSS 和 JavaScript，“Web Console” 还有过滤功能，能更方便地筛选出关键调试信息。
- Microsoft Edge：基于 Chromium 内核开发，继承了 Chrome 的强大功能，和 Windows 系统集成得更好。它的开发者工具界面简洁，操作方便，Windows 用户用起来很顺手。
<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>网页标题</title></head><body><!-- 网页内容写在这里 --></body></html>
- <!DOCTYPE html>：这行代码是告诉浏览器，这个页面是按照 HTML5 标准来的，让浏览器按 HTML5 标准解析页面。
- <html>标签：它是整个 HTML 页面的 “老大”，根元素。lang="zh-CN"表示这个页面是中文的。
- <head>标签：这里面装的是页面的元数据，比如字符编码（<meta charset="UTF-8">，指定页面用 UTF-8 编码）、视口设置（<meta name="viewport" content="width=device-width, initial-scale=1.0">，让网页在不同设备上都能正常显示），还有网页标题（在<title>标签里设置）。
- <body>标签：网页上能看到的内容，像文字、图片、链接等，都放在这个标签里，它是网页的主体部分。
- 标签：HTML 是由一个个标签组成的。标签一般有开始标签，比如<p>，和结束标签</p>，结束标签比开始标签多了个斜杠。有些标签比较特殊，是自闭合的，像<img src="image.jpg" />，这类标签没有结束标签。
- 属性：标签可以有属性，属性是用来给标签提供更多信息的。属性都是以 “名称 / 值对” 的形式出现，比如<a href="https://www.example.com">链接文本</a>，这里href是属性名，https://www.example.com是属性值，属性得写在开始标签里面。
- 元素：元素就是标签加上它里面的内容。比如<p>这是一个段落。</p>，这一整个就是一个段落元素。
<h1> - <h6>是用来定义网页标题的。<h1>是最大、最重要的标题，<h2>其次，一直到<h6>，重要性依次降低。比如：<p>标签用来定义一个段落。浏览器会自动在段落前后空出一行，让段落区分更明显。比如：<img>是自闭合标签，专门用来在网页里插入图片。用的时候，必须用src属性指定图片的路径。比如：<imgsrc="image.jpg"alt="图片描述"width="300"height="200">
alt属性是在图片显示不出来的时候，显示一段替代文字，方便用户知道图片大概内容。width和height属性是设置图片的宽度和高度，单位是像素。<a>标签用来创建超链接。href属性指定链接要去的目标地址。比如：<ahref="https://www.example.com">访问示例网站</a>
target属性可以设置链接打开的方式，比如_blank表示在新窗口打开链接。<ul>标签用来创建无序列表，列表里的每一项用<li>标签表示。列表项前面会自动出现一个项目符号。比如：<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul>
<ol>标签用来创建有序列表，同样用<li>标签表示列表项，不过列表项前面显示的是数字序号。比如：<ol><li>第一项</li><li>第二项</li><li>第三项</li></ol>
<table>标签用来创建表格。表格由行（<tr>标签）、列（<td>标签，也就是数据单元格）和表头（<th>标签）组成。比如：<tableborder="1"><tr><th>姓名</th><th>年龄</th><th>性别</th></tr><tr><td>张三</td><td>25</td><td>男</td></tr><tr><td>李四</td><td>30</td><td>女</td></tr></table>
border="1"是让表格显示边框，不过在实际开发中，一般用 CSS 来设置表格样式，这样更灵活。<form>标签用来创建表单，主要是收集用户输入的数据。表单里一般有各种输入控件，像文本框（<input type="text">）、密码框（<input type="password">）、单选按钮（<input type="radio">）、复选框（<input type="checkbox">）和提交按钮（<input type="submit">）等。比如：<formaction="submit.php"method="post"><labelfor="username">用户名：</label><inputtype="text"id="username"name="username"required><br><labelfor="password">密码：</label><inputtype="password"id="password"name="password"required><br><inputtype="submit"value="提交"></form>
action属性指定表单数据提交到哪个地址，method属性指定提交方式，常用的是post和get。required属性表示这个输入字段是必须要填的。在 HTML 里，注释就是给代码加一些说明，浏览器不会显示注释内容。注释以<!--开头，-->结尾。比如：<!-- 这是一个段落注释 --><p>这是一个段落。</p>
实体字符是用来显示一些特殊字符的。因为有些字符在 HTML 里有特殊含义，不能直接输入。比如，要显示小于号（<），得用<；显示大于号（>），用>；显示版权符号（©），用©。十、HTML 布局常用标签 - div 和 span<div>标签是个通用的容器标签，主要用来划分网页区域，在网页布局里经常用到。它本身没有什么特别的语义，主要靠 CSS 来设置样式和布局。比如：<h1>主标题</h1><h2>副标题</h2>0
<span>标签也是通用容器标签，但它一般是用来设置文本中部分内容的样式，或者添加一些行为，而且它不会让文本换行。比如：<h1>主标题</h1><h2>副标题</h2>1
这份文档涵盖了 HTML 基础的核心知识，能帮你快速掌握网页结构搭建。 
还没有评论，来说两句吧...