HTML前端布局元素与CSS基础教程

"HTML前端系列教程中的CSS第一课，主要涉及网页布局结构元素和常见的中文字体，以及CSS选择器的应用。" 在HTML5中，网页的基本布局结构通常由以下几个部分组成： 1. **头（Header）**：页面顶部，通常包含网站的logo、导航链接等。 2. **内容（Content/Container）**：页面的主要内容区域，可以包含多个板块或模块。 3. **尾（Footer）**：页面底部，通常包括版权信息、联系方式等。 4. **导航（Nav）**：用于引导用户在网站内进行导航的元素。 5. **侧栏（Sidebar）**：常用于放置辅助信息，如侧边菜单、广告或最新文章列表。 6. **栏目（Column）**：内容区域的细分，可以是多列布局的一部分。 7. **页面外围控制整体布局宽度（Wrapper）**：包裹整个页面，用于设定页面宽度和居中显示。 8. **左右中（LeftRightCenter）**：常见于三栏布局，左栏、右栏和中间主要内容区。 9. **登录条（Loginbar）**：提供用户登录功能的小型表单。 10. **标志（Logo）**：网站的品牌标识。 11. **广告（Banner）**：通常出现在页面的显著位置，用于展示广告信息。 12. **页面主体（Main）**：主要内容的核心部分，一般包含文章、产品介绍等。 13. **热点（Hot）**：显示当前热门或流行的内容。 14. **新闻（News）**：发布新闻或更新信息的区域。 此外，HTML5中定义了一些中文字体的英文名称及其Unicode编码，便于在CSS中使用： - **宋体（SimSun）**：\5B8B\4F53 - **新宋体（NSimSun）**：\65B0\5B8B\4F53 - **黑体（SimHei）**：\9ED1\4F53 - **微软雅黑（Microsoft YaHei）**：\5FAE\8F6F\96C5\9ED1 - **楷体_GB2312（KaiTi_GB2312）**：\6977\4F53_GB2312 - **隶书（LiS）**：\96B6\4E66 在CSS中，我们可以利用不同的选择器来更精确地定位和设置元素样式。这里提到了两种常用的选择器： 1. **子代选择器（Child Selector）**：用`>`分隔，如`div > p`，它只会选择`div`元素的直接子元素`p`，并应用相应的CSS规则。在这个例子中，所有直接位于`div`内的`p`元素文字颜色将被设为红色。 2. **属性选择器（Attribute Selector）**：通过元素的属性来设置样式，例如`p[class][id]`会选择所有具有`class`和`id`属性的`p`元素，并将文字颜色设为红色。这意味着`p`元素必须同时具有`class`和`id`属性，无论其值为何，才会应用该样式。 通过这些基础知识，开发者可以更好地理解和构建符合标准的HTML5网页，同时利用CSS有效地控制页面的布局和视觉效果。