一、HTML 和 CSS 在 Web 内容渲染中的底层作用
1、HTML （HyperText Markup Language）
超文本标记语音，提供一套标签（组件），用于定义网页上的内容结构和意义。例如<p>标签表示一个段落，<h1> 到 <h6> 表示不同级别的标题。
2、CSS（Cascading Style Sheets）
层叠样式表，提供一套规则，用于设置HTML 组件的样式和布局。CSS可以定义文本的颜色、大小、间距、对齐方式、元素的宽度、高度、边框、背景等视觉表现。
3、样式应用方式
- 内联样式（Inline styles）： 通过 HTML 元素的 style 属性直接应用样式。这种方式直接在 HTML 标签内指定样式规则，如**<div style="color: blue;">Hello World</div>**。
- 内部样式（Internal styles）： 通过 <style> 标签在 HTML 文档的**<head>**部分定义样式。这些样式规则将应用于整个文档。
- 外部样式（External styles）： 通过 CSS 文件定义样式，并使用 HTML 的**<link>**标签引入。这种方式允许多个 HTML 文档共享同一个 CSS 文件，便于维护和统一样式。
4、className 属性
在 HTML 中，class 属性用于指定一个或多个样式类别，这些类别在 CSS 中定义。这样，可以将多个 HTML 元素应用相同的样式规则。例如，在 HTML 中使用**<div class="my-class">Hello World</div>** ，然后在 CSS 中定义**.my-class**的样式。
5、样式的层叠性（Cascading）
CSS 的名称来源于样式规则的层叠性，即多个样式规则可能应用于同一个元素，它们的优先级和来源（如内联样式、内部样式、外部样式）将决定最终的样式表现。
二、HTML 和 CSS 在 Web 中各自扮演什么角色？
HTML 好比是网页的骨架和肌肉，提供了内容和结构；而 CSS 则是网页的皮肤和服装，负责外观和风格。两者共同工作，创造出既实用又美观的网页。
1、HTML的角色
- 结构与内容 ：HTML 负责定义网页的结构和内容。它使用一系列的标签（如**<html>, <head>, <body>, <div>, <span>, <p>, <a>** 等）来创建网页的骨架，并组织文本、图片、链接和其他媒体元素。
- 意义的赋予 ：HTML 标签还为内容赋予了意义。例如，使用**<h1>** 到 <h6>标签定义标题的重要性，使用<em> 标签强调文本，或使用**<strong>**标签表示强烈的重要性。
- 交互性 ：HTML 允许创建交互元素，如表单（<form> ）、按钮（<button> ）、下拉菜单（<select>）等，这些元素可以与用户进行交互。
- 语义化 ：HTML 的语义化标签（如**<article>, <section>, <header>, <footer>**等）帮助定义网页的不同部分和它们的作用，这对于搜索引擎优化（SEO）和无障碍访问（Accessibility）非常重要。
2、CSS的角色
- 样式和布局：CSS 负责设置网页的视觉样式和布局。它控制着网页的颜色、字体、间距、对齐方式、背景和其他视觉表现。
- 响应式设计：特别是媒体查询（Media Queries），允许设计师创建响应式网页，这些网页能够适应不同的屏幕尺寸和设备。
- 层叠和继承：CSS 的层叠性质允许开发者在不同的地方定义样式，这些样式将根据特定的规则层叠应用到 HTML 元素上。继承允许子元素继承父元素的样式属性。
- 动画和过渡：CSS 提供了动画和过渡效果，可以使网页元素的交互更加生动和动态。
- 可维护性：将样式与结构分离，使得维护和更新网页的样式变得更加容易，而不需要修改 HTML 结构。