HTML和CSS概述
- HTML
Hyper Text Markup Language的缩写,是一种用于创建网页的标准标记语言。通过HTML我们可以实现网页的内容结构和框架。
- CSS
Cascading Style Sheets的缩写,是一种用于渲染HTML元素样式的语言。通过CSS我们可以实现网页的视觉样式,如颜色、布局、字体等。
- HTML和CSS的区别在于
HTML定义网页的结构和内容,CSS负责定义网页的表现形式和布局。HTML和CSS是逐渐演进的两种标记语言,目的是使网页的内容与表现分离,更容易开发和维护。
浏览器是如何渲染网页的
当用户在浏览器中输入一个网页URL时,浏览器会向服务器发起请求,获取该网页的HTML内容。
①浏览器首先会解析HTML,构建DOM树(Document Object Model),DOM树定义了页面的节点结构。
②之后,浏览器会请求和获取与HTML相关的CSS文件和图片等其他资源。
③然后,浏览器会解析CSS,生成CSSOM(CSS Object Model),CSSOM定义了节点的布局和样式信息。
④最后,浏览器会把DOM和CSSOM合并生成一棵渲染树(Render Tree)。渲染树将DOM中结构信息和CSSOM中的样式信息结合,用于后续的布局和绘制。浏览器布局引擎将根据渲染树计算每个节点的位置和大小信息。绘制引擎则根据布局的结果,将每个节点绘制在屏幕上的正确位置。
整个过程就是:HTML→DOM→CSS→CSSOM→Render Tree→布局→绘制,最终将网页内容展示在用户屏幕上。
以下是一段简单的HTML代码和CSS代码。HTML定义了网页的结构,CSS定义了class为container的div的样式。浏览器会分别解析HTML和CSS,生成DOM和CSSOM,再生成渲染树进行布局和绘制,最终将整个页面展示给用户。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
<style>
.con {
width: 70%;
border: 1px solid gray;
margin: auto;
padding: 10px;
}
</style>
</head>
<body>
<div class="con">
<h1>第一个标题</h1>
<p>第一个段落。</p>
</div>
</body>
</html>
