HTML标签与CSS选择器详解

"这篇文档是关于HTML标签元素和CSS样式的单词释义及知识点的总结，适合初学者学习。" 在HTML中，标签是构建网页结构的基础，它们用于定义不同的内容区域和样式。块级元素如`div`, `p`, `dl`, `form`, `h1`至`h6`, `ol`, `ul`占据整个宽度，通常用作页面布局的容器。行内元素如`a`, `b`, `i`, `em`, `img`, `span`则只占据自身内容的宽度，可以在同一行内显示。`pre`虽然也是块级元素，但它主要用于展示预格式化的文本，只能包含文本或行内元素。 在CSS方面，选择器是用于选取网页元素的关键工具。后代选择器（空格）如`.main div`会选择`.main`类下的所有`div`元素。子元素选择器（>）如`.main>div`只会选择`.main`的直接子`div`。相邻元素选择器（+）如`.main>ul+div`会选中紧跟在`ul`之后的第一个`div`。兄弟选择器（~）如`.main>ul~div`会选取所有跟`ul`同级别的`div`。 复合选择器包括交集选择器和并集选择器。交集选择器如`div.gd.nav[title]`会选取同时具有`div`、`gd`类、`nav`类以及`title`属性的元素。并集选择器如`div, p, span`则会应用样式到所有`div`, `p`, `span`元素。 CSS盒模型是理解元素尺寸和布局的重要概念。它包括`width`（宽度）、`height`（高度）、`border`（边框）、`padding`（内边距）和`margin`（外边距）。边框可以设定为`dotted`（虚线）、`double`（双线）、`dashed`（虚线）或`solid`（实线）。盒模型有两种模式：标准盒模型（`content-box`），其中元素宽度不包括边框和内边距；以及怪异盒模型（`border-box`），元素的宽度包含了边框和内边距。理解这两种模式的区别对于精确控制元素尺寸至关重要。 总结来说，这个文档涵盖了HTML的基本标签分类和CSS的选择器及盒模型知识，是学习网页开发的入门资料。通过掌握这些基础，可以开始构建和美化静态网页。