大家好，我是你们的博主，今天我们就正式开启前端基础入门系列，先从最核心也最基础的HTML讲起，很多刚接触前端的新手都会被各种技术名词吓到，其实不用慌，前端学习就跟搭积木一样，HTML就是那些最基础的积木块，只要先把这些积木认全用熟，之后搭配上CSS和JavaScript，就能做出好看又好用的网页。
首先跟大家说清楚一个核心点：HTML不是编程的工具，它的全称是超文本标记语言，本质就是一套标记标签，用来确定网页的结构和内容。简单来讲，HTML负责给网页“搭骨架”，告诉浏览器页面上有标题、段落、图片、按钮这些东西，而后面要讲的CSS负责给网页“穿衣服”也就是美化样式，JavaScript负责让网页“动起来”实现交互效果，这三者分工明确，少了哪个都不行。
一、HTML 核心特性（新手必记）
在开始写代码前，大家先记住HTML的3个核心特性，这样能更快搞懂它的逻辑。
- 标记语言的核心就是“标签”，HTML所有操作都靠标签来完成，标签分为双标签和单标签两种，双标签有开始也有结束，单标签是自闭合的不用写结束标签，双标签的格式是“开始标签+内容+结束标签”比如段落标签，单标签直接写就行，像换行标签就不用闭合。
- 超文本特性指的是这里的“超文本”不只是普通文本，还包含图片、音频、视频和跳转关系等内容，这也是HTML能把不同内容连起来做成网页的关键能力。
- HTML只注重页面的结构和内容，比如哪里是标题、哪里是段落，至于标题的颜色、段落的间距这些，都不归HTML管，后面会用CSS来做，新手别把两者的作用弄混了。
二、HTML 标准文档结构（必背！）
任何一个规范的HTML文件都有固定的骨架结构，就像一本书肯定有封面、版权页和正文一样，HTML文件的骨架也不能少，新手一定要记熟默写，这是所有HTML开发的底子。
完整的HTML5标准结构如下，每一行的作用我都给大家说清楚了：
声明文档类型是告诉浏览器当前文档是HTML5版本，必须放在页面最上面而且没有结束标签；
根标签是页面的最外层容器，所有代码都要嵌套在这个标签里，一个页面只能有一个根标签；
头部标签用来存放页面的“元数据”，里面的内容用户在浏览器上看不到只有开发者能看，主要是用来设置网页的基础信息；
设置字符编码为UTF-8能保证页面正常显示中文不会出现乱码，这是前端开发一定要有的设置；
网页标题会显示在浏览器的标签页上，用来表明网页的用途，比如“我的第一个网页”；
主体标签用来存放网页所有能看到的内容，用户在浏览器上能看到的文字、图片、列表等，都要写在这个标签里。
这里跟大家说一句：HTML标签不区分大小写，比如和效果一样，但行业里都习惯用小写，这样写的代码更规范也更好读，新手从一开始就要养成这个好习惯。
三、HTML 常用核心标签（新手高频使用）
掌握了基础骨架之后，我们就来学最常用的标签，这些标签在日常开发中经常用到，只要先学会它们，就能做出简单的网页结构，所有标签按功能分类，方便大家记忆。
1. 文本排版标签（负责页面文本布局）
这类标签主要用来整理文本内容，让页面排版更整齐，是最基础也最常用的标签。
标题标签从h1到h6一共有6个级别，重要性和字号从h1到h6慢慢变小，文字默认是加粗的而且独占一行，其中h1是网页主标题，一个页面最好只设一个用来表明网页的核心主题，h2到h6可以作为副标题、小标题比如文章的章节标题，示例：主标题、二级标题。
段落标签用来包裹一段完整的文本，段落之间会自动留出空白间距，让文本排版更清晰，不会让所有文字挤在一起，比如这是一段普通的文本段落，HTML会自动给段落添加上下间距，让页面更好读。
换行标签是单标签，用来强制文本换行，需要换行的地方加这个标签就可以，比如一段文本中需要手动换行显示，用这个标签就行，示例：第一行文本第二行文本。
分割线标签也是单标签，用来生成一条水平的分割线，主要是用来分开不同的内容区块，让页面结构更清楚，比如在两个段落之间加分割线，就能区分不同的内容模块。
强调标签常用的有两个，分别是strong和em，strong表示内容很重要，显示出来是加粗的效果，em表示语气上的强调，显示出来是斜体的效果，示例：这是重要内容（加粗）、这是强调内容（斜体）。
2. 媒体标签（负责展示图片、音频、视频）
网页不只有文字，还需要图片、音频、视频来丰富内容，这类标签就是用来实现这些功能的。
图片标签是单标签，用来在页面中插入图片，它有三个必须填的核心属性：src表示图片的路径，告诉浏览器去哪里找图片；alt表示图片加载失败时显示的文字，能提升用户体验和兼容性；width和height用来设置图片的宽高，建议只设置其中一个，避免图片变形，示例：img src="图片路径" alt="图片加载失败时的提示文字" width="300"。
音频标签用来在页面中插入音频，支持播放、暂停等控制功能，需要配合source标签指定音频文件的路径和格式，这样能保证在不同浏览器中都能正常播放，示例：audio controls>source src="音频路径" type="audio/mpeg">audio>，其中controls属性是用来显示音频控制栏的。
视频标签用来在页面中插入视频，用法和音频标签差不多，也需要配合source标签，还支持设置宽高和显示控制栏，示例：video controls width="400">source src="视频路径" type="video/mp4">video>。
3. 列表标签（负责组织有序/无序内容）
当页面中有多个相关内容需要排列时，就可以用列表标签，这类标签分为无序列表和有序列表两种。
无序列表由ul标签和li标签组成，ul是无序列表的容器，li是列表项，默认用实心圆点标记，列表项之间没有顺序，像购物清单、标签列表都能用，示例：ul>li>牛奶/li>li>面包/li>li>鸡蛋/li>/ul>。
有序列表由ol标签和li标签组成，ol是有序列表的容器，li是列表项，默认用阿拉伯数字标记，列表项有明确的顺序，像步骤说明、排名等就适合用有序列表，示例：ol>li>准备食材/li>li>热锅倒油/li>li>翻炒食材/li>/ol>。
注意：ul和ol里面只能放li标签，li标签里面可以放任意其他标签，比如文本、图片等。
4. 容器标签（负责页面布局分区）
容器标签主要用来划分网页的不同区域，方便后面用CSS美化和布局，是网页布局的核心标签。
div标签是块级容器，会独占一行，就像万能的大盒子，可以装任意内容，用来划分网页的大板块，比如头部、导航栏、正文、页脚等，示例：div>这里是网页头部区域，包含logo和导航/div>。
span标签是行内容器，会和其他内容在同一行显示，不独占一行，就像万能的小盒子，用来装行内的一小部分内容，比如给一段文本中的某个词语设置特殊样式，示例：p>这是一段文本，span>这里是需要特殊样式的内容/span>，其余内容正常显示/p>。
5. 表单标签（负责收集用户输入）
表单标签用来收集用户的输入信息，比如登录页面的用户名、密码，留言板的留言内容等，是实现用户和网页互动的基础。
form标签是表单的总容器，所有和表单相关的标签都要放在form标签里，用来指定表单数据的提交地址等信息，示例：form action="提交地址">表单内容/form>。
input标签是单标签，是表单的核心输入控件，通过type属性实现不同的输入功能，常用的type值有：text（文本输入框，用来输用户名、手机号等）、password（密码输入框，输入的内容会隐藏）、button（普通按钮）、checkbox（复选框，可以选多个）、radio（单选框，只能选一个），示例：label>用户名：input type="text" required>/label>，其中required属性表示这个输入项必须填。
textarea标签是多行文本输入框，用来输入较长的文本，比如留言、备注等，可以通过rows和cols属性设置输入框的行数和列数，示例：textarea rows="4" placeholder="请输入留言...">/textarea>，placeholder属性是输入框的提示文字。
select和option标签用来做下拉选择菜单，select是下拉菜单的容器，option是下拉选项，用户可以从选项中选一个内容，示例：select>option value="bj">北京/option>option value="sh">上海/option>/select>。
button标签用来提交或触发相关操作，type属性可以设为submit（提交表单）、reset（重置表单）、button（普通按钮），示例：button type="submit">提交/button>。
四、HTML 语义化标签（提升代码可读性）
除了上面说的基础标签，HTML5还新增了一些语义化标签，它们的功能和div差不多，都是用来布局但语义更清楚，能让开发者和浏览器更容易看懂页面结构，还能帮着优化搜索引擎收录。
常用的语义化标签有：header（网页头部，用来放logo、导航等）、nav（导航区域，用来放导航链接）、section（内容区块，用来放文章章节、板块内容）、article（独立内容块，比如博客文章、新闻等）、footer（网页页脚，用来放版权信息、联系方式等）。
比如用语义化标签搭建网页结构，比全用div标签更清楚，代码也更好读，新手可以慢慢试着用。
五、新手常见误区（避坑指南）
最后，我给大家整理几个新手学HTML时最容易犯的错，提前避开这些错能让大家少走弯路。
- 忘记闭合双标签，比如写了h1却忘了写/h1，这样会让浏览器解析出错，页面显示不正常，大家一定要养成“写开始标签就写结束标签”的习惯。
- 标签嵌套混乱，比如把块级标签放在行内标签里，或者嵌套层级乱了，比如p标签里放div标签，这种写法不规范，要记住“块级标签可以放行内标签或其他块级标签，行内标签只能放行内标签”。
- 过度使用和样式相关的属性，比如用font标签设置文字颜色、大小，这些都属于样式，应该用CSS来做，HTML只负责页面结构，别把两者的作用弄混了。
- 忽略alt属性，图片标签的alt属性是必须填的，它不仅能提升用户体验，比如图片加载失败时显示提示，还能帮着优化搜索引擎收录，新手别忘记加。
六、总结与后续预告
今天的内容就到这里了，我们总结一下：HTML是前端的基础，核心是标签，主要负责给网页搭骨架，只要掌握了标准文档结构和常用标签，就能做出简单的网页结构，新手不用着急，先把今天讲的标签一个个练习，熟悉它们的用法，多写几行代码，慢慢就能上手。