HTML 基本语法别再死记硬背了：标签、属性、嵌套、空白折叠，一次讲透

HTML 基本语法别再死记硬背了：标签、属性、嵌套、空白折叠，一次讲透很多人学 HTML，第一关就容易卡住。表面上看，HTML 很简单：不就是一堆标签加个尖括号吗？可真到自己动手写的时候，问题就全来了：为什么有的标签要成对写，有的不用？属性到底写在哪？为什么a标签加了href能跳转，p标签加了却没反应？明明代码里打了很多空格，浏览器里怎么只显示一个？为什么有些标签能互相嵌套，有些一套进去页面就开始“抽风”？如果你正在学前端基础，或者准备往 Web 安全方向走，这些内容必须搞清楚。因为你后面无论是看源码、改页面、分析表单，还是做 XSS、钓鱼页、漏洞复现，本质上都绕不开 HTML 的基本语法。今天这篇文章，就把 HTML 最基础但也最容易混淆的 4 个点讲明白：标签怎么写属性怎么加标签嵌套要注意什么为什么空格和换行在浏览器里“不听话”一、HTML 标签到底是什么？先把最基础的规则搞明白HTML 是超文本标记语言。它不是编程语言，更多是在告诉浏览器：哪一段是标题，哪一段是正文，哪一部分是链接，哪一块是图片。而完成这件事的最核心单位，就是：标签。1）标签必须写在尖括号里最基本的形式是这样：h1我是标题/h1你会发现，标签名h1被写在一对尖括号 里面。这就是 HTML 标签最基本的书写方式。2）标签分为单标签和双标签这是新手第一天就必须分清的东西。双标签双标签有开始和结束两部分，例如：p这是一段文字/pdiv这是一个容器/divspan这是一段行内文本/span特点：有开始标签有结束标签结束标签前面要有/比如：p.../p这里的/p就是结束标签。单标签单标签只有一个，不需要包裹内容，例如：brhrimgsrc="1.jpg"alt="图片"这些标签本身就表示一个独立元素，不像p、div那样需要前后成对包裹内容。图 1：单标签和双标签示意类型示例说明双标签p文字/p有开始和结束双标签div内容/div可包裹内容单标签br换行单标签hr分隔线单标签img图片二、常见标签不只是分单、双标签，还能分“容器级”和“文本级”这个知识点很多教程一笔带过，但在实际写页面和看源码时特别有用。你可以把 HTML 标签简单理解成两类：容器级标签文本级标签1）什么是容器级标签？容器级标签，顾名思义，就是“能装东西”的。它不仅可以放文本，还能继续嵌套其他标签。比如：divh1标题/h1p正文/p/div这里div就是典型容器。常见容器级标签有：divulollidldtddh1 ~ h6这些标签内部通常不只是文字，还能继续放别的元素。2）什么是文本级标签？文本级标签更偏向“修饰文字本身”或者“围绕文字的小范围元素”。例如：spanbiuimg这些标签一般用于文字局部样式、局部内容、行内元素处理。比如：p我是一段span重点内容/span/p这里span就是典型文本级标签。为什么要区分这两类？因为它直接影响：标签能不能嵌套页面解析会不会异常布局表现是否符合预期源码结构是否规范尤其是学 Web 安全的人，后面看页面源码时，如果连“哪些标签适合当容器，哪些标签只是文字级元素”都没概念，页面结构会越看越乱。三、标签属性是什么？说白了就是给标签“加功能”这一步特别关键。很多新手刚学 HTML 时，最大困惑就是：标签我认识了，那后面的href、src、title、alt这些又是什么？答案很简单：属性，就是给标签补充额外信息和功能。1）属性写在哪？属性写在开始标签内部，标签名后面，前面要留空格。例如：ahref="https://www.baidu.com"访问百度/a这里：a是标签名/