大家好这里是你的HTML入门笔记。今天我们来拆解一下网页的骨架——HTML掌握最基础的结构和标签知识。一、HTML文档的基本骨架一个标准的HTML文档就像盖房子的地基和框架。在VS Code等编辑器中输入!后按Tab或Shift !可以快速生成这个基础结构。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body /body /html小技巧Shift !快速生成网页基本结构Emmet语法。Ctrl /快速生成/取消注释写代码的好帮手。二、网页开发“三剑客”如果把网页比作一套房子那这三者各司其职角色作用比喻HTML​搭建网页结构毛坯房 (承重墙、房间布局)CSS​修饰网页外观精装修 (墙纸、地板、灯光)JavaScript​实现页面交互智能家居 (开关灯、自动门)三、标签的分类与详解HTML的核心就是标签我们可以从两个维度来理解它们。1. 按形式分类双标签有开始和结束成对出现。语法标签名 内容 /标签名例子html/htmldiv/divp/p单标签 / 自结束标签没有内容自己就代表一个完整的元素。语法标签名 /或标签名例子metalinkbrhr2. 按显示特点分类这是前端布局中最关键的概念决定了元素在页面上的排列方式。类型特点常见标签块级元素​独占一行宽度默认占满父容器可以设置宽高可以包裹任何其他元素。divph1~h6ulli行内元素​不独占一行与其他行内元素排在一行无法直接设置宽高大小由内容撑开一般只包裹文字或其他行内元素。spanastrongem行内块元素​不独占一行可以排在一行可以设置宽高元素之间会有天然的间隙。imginputtd补充表格行内块标签不独占一行可设置宽高有间距四、标签之间的关系DOM树标签之间的嵌套形成了层级关系理解这些关系对后续学习CSS选择器和JavaScript DOM操作至关重要。父子关系一个标签直接包裹另一个标签。例html是head的父元素。祖先后代关系一个标签直接或间接包裹另一个标签。例html是title的祖先元素。兄弟关系两个标签拥有同一个直接的父元素。例meta和title是兄弟元素它们的共同父元素是head。五、结构嵌套规范重要虽然浏览器很宽容但遵循规范能避免很多奇怪的布局问题。块级元素可以包裹任意内容块、行内、行内块。这是最自由的容器。行内元素一般只包裹文字或其他行内元素尽量不要包裹块级元素。特殊规则p标签段落标签内部只能放文字、行内元素或行内块元素绝对不能包含块级元素如div。a标签超链接标签可以包裹块、行内、行内块元素让它变成一个可点击的“大按钮”。但是a标签不能嵌套另一个a标签。六、注释注释是写给开发者看的浏览器会完全忽略它。养成写注释的好习惯能让你的代码逻辑更清晰。!-- 这是一个单行注释 -- !-- 这是一个多行注释 可以写很多内容 注意不能在注释内部再嵌套另一个注释 --总结今天我们从HTML的骨架结构学到了标签的分类、关系和嵌套规范。记住“三剑客”的分工搞懂“块、行内、行内块”的区别你就已经迈出了网页开发的第一步。下次见