从零开始学HTML：浏览器与服务器工作原理
在学习html之前，我们先来了解一下web浏览器和web服务器的工作原理
web浏览器和web服务器的工作原理
①用户输入网址（例如 `www.example.com`）
浏览器会先检查本地缓存（比如之前是否访问过这个网站），如果没有缓存，会向 DNS服务器** 查询该网址对应的真实IP地址（比如 `192.0.2.1`）。
②. 浏览器向服务器发送请求
浏览器通过IP地址找到对应的Web服务器，发送一个 HTTP请求（比如：“我要`/index.html` 这个页面”）。
③. 服务器处理请求
Web服务器（如Nginx、Apache）收到请求后，返回一个HTTP响应
④. 浏览器页面渲染
接收到响应后，对返回的响应进行画面的渲染
了解了浏览器和服务器的基本工作原理后，我们知道当用户在浏览器输入网址后，服务器会返回HTML文档。现在，让我们把注意力转向构成这些文档的基础——网页本身。网页主要分为静态网页和动态网页两大类型，作为前端开发的起点，我们先从静态网页开始探索。
静态网页的核心：HTML元素详解
静态网页是指内容固定不变的网页，它们由纯HTML代码构成，不依赖服务器端程序实时生成内容。这类网页就像印刷好的报纸，每次访问看到的内容都相同。要构建静态网页，我们需要深入理解HTML的核心元素，它们是构建网页的"砖块"和"水泥"。
HTML 核心元素详解与示例
1. 根元素
作用与重要性：
元素是整个 HTML 文档的容器，是所有其他元素的父元素，构成了 DOM 树的起点。
关键要点：
必须包含
和 两个主要部分建议添加 lang 属性声明文档语言，这对屏幕阅读器和搜索引擎都很重要
必须配合 文档类型声明使用
标准示例：
新手提示：lang="zh-CN" 表示文档使用简体中文，如果是英文网站则使用 lang="en"。
2. 文档头部
核心功能：包含文档的元信息(metadata)和资源引用，这部分内容不会直接显示在网页上。
必须包含的内容：
新手注意：
中的内容虽然不可见，但对网页的功能和SEO至关重要。
3. 页面标题</h4>
<p style="margin-left:.0001pt; margin-right:0; text-align:justify">重要性：</p>
<p style="margin-left:.0001pt; margin-right:0; text-align:justify"> 显示在浏览器标签页上</p>
<p style="margin-left:.0001pt; margin-right:0; text-align:justify"> 作为搜索引擎结果中的标题显示</p>
<p style="margin-left:.0001pt; margin-right:0; text-align:justify"> 用户收藏网页时的默认名称</p>
<p style="margin-left:.0001pt; margin-right:0; text-align:justify">最佳实践：</p>
<p style="margin-left:.0001pt; margin-right:0; text-align:justify"> 长度控制在50-60个字符之间</p>
<p style="margin-left:.0001pt; margin-right:0; text-align:justify"> 包含描述性关键词但避免堆砌</p>
<p style="margin-left:.0001pt; margin-right:0; text-align:justify"> 每个页面应该使用唯一标题</p>
<p style="margin-left:.0001pt; margin-right:0; text-align:justify"> 准确反映页面内容</p>
<p style="margin-left:.0001pt; margin-right:0; text-align:justify">好标题示例：</p>
<pre><code class="language-html"><title>HTML入门教程 - 从零开始学习网页开发
差标题示例：
HTML | 网页 | 教程 | 学习 | 开发
4. 文档主体
功能说明：包含所有用户可见的网页内容，是网页的"血肉"部分。
内容规则：
包含文本、图片、视频等所有可见内容
应该使用语义化标签合理组织内容
避免将 样式控制标签(如)放在body中
基础示例：
网站主标题
文章标题
这里是文章内容...
新手建议：合理使用
5. - 标题层级
标题层级
语义化使用指南：
作为主标题，通常一个页面只使用一次
按
到 顺序建立内容层级
不要为了样式效果跳级使用标题标签
SEO提示：标题层级帮助搜索引擎理解内容结构和重要性。
正确示例：
网页设计与开发
HTML基础
HTML元素概述
常用标签介绍
CSS入门
错误示例：
网页设计与开发
HTML基础
HTML元素概述
CSS入门
6.
段落文本
正确使用方式：
专用于文本段落内容
可以包含其他行内元素如 , , 等
避免使用空段落做间距控制
好示例：
HTML是构建网页的基础语言，由Tim Berners-Lee于1991年创建。
最新版本是HTML5，它引入了许多新的语义化元素如 <article> 和 <section>。
差示例：
这是一个有空格缩进的段落
错误地包含块级元素 
新手提示：段落间距应该用CSS控制，而不是添加多个
标签或空段落。
现在我们已经掌握了HTML的核心元素，能够构建出完整的网页结构了。但您可能已经注意到，单纯使用HTML创建的页面看起来有些"朴素"——就像一栋只有框架没有装修的房子。这时候，我们就需要引入CSS（层叠样式表）来为网页添加视觉美感。
为什么需要CSS？
HTML负责的是网页的结构和内容，而CSS则专门处理网页的表现和样式。通过CSS，我们可以轻松实现：
-
控制文字的颜色、大小和字体
-
设置元素的位置和布局
-
添加背景颜色或图片
-
创建响应式设计适应不同设备
如何从HTML连接到CSS？
在HTML中引入CSS主要有三种方式，其中最直接的就是使用
2.body{} 选择器核心属性详解
①. background-color 背景色控制
作用：设置整个页面的背景颜色
取值：颜色名称、十六进制值、RGB/RGBA值
示例：
body {
background-color: #f5f5f5; /* 浅灰色背景 */
/* 其他写法：
background-color: lightblue;
background-color: rgba(240, 240, 240, 0.9);
*/
}
背景变成了浅灰色，由于很接近白色看的不是很清晰。
②. margin-left 和 margin-right 边距控制
作用：控制页面内容与浏览器窗口左右边缘的距离
特殊值：auto（自动居中）
示例：
body {
margin-left: 20px; /* 左外边距20像素 */
margin-right: 5%; /* 右外边距为父元素宽度的5% */
/* 实现页面水平居中 */
margin-left: auto;
margin-right: auto;
max-width: 1200px; /* 通常需要配合最大宽度 */
}
这里可以仔细的看到文字和实际的网页边距有一定的距离了
③. border 边框设置
作用：为整个页面主体添加边框
复合属性：可同时设置宽度、样式和颜色
示例：
body {
border: 1px solid #ddd; /* 1像素灰色实线边框 */
/* 拆解写法：
border-width: 1px;
border-style: solid;
border-color: #ddd;
*/
/* 只设置某一边框 */
border-left: 2px dashed red;
}
可以隐约看到一点实线的边框，我们也可以更改px值让边框更加的明显
除此之外我们还发现其实边框和文字几乎是紧挨着的，那我们该如何处理呢？很简单，看下面就知道啦！
④. padding 内边距控制
作用：控制内容与边框之间的间距
特性：会影响元素的实际占用空间
示例：
body {
padding: 15px; /* 四边统一内边距 */
/* 分别设置各边距 */
padding: 10px 20px 10px 20px; /* 上 右 下 左 */
/* 简写形式 */
padding: 10px 20px; /* 上下10px 左右20px */
}
⑤. font-family 字体设置
作用：定义页面默认字体
最佳实践：指定字体族和备用字体
示例：
body {
font-family: "Helvetica Neue", Arial, "PingFang SC", sans-serif;
/* 中英文混合场景推荐 */
font-family:
"Microsoft YaHei",
"Segoe UI",
-apple-system,
sans-serif;
}
仔细看看其实你会发现字体是有一些差异的
完整应用示例
样式示例页面
欢迎学习CSS样式
这是一个演示body样式的示例页面，注意观察页面的边距、背景和字体变化。
新手建议：
1. 优先使用相对单位（如`%`、`rem`）而非绝对像素
2. 设置`body`样式时，考虑添加`line-height`改善可读性
3. 现代网页设计推荐使用`max-width`约束内容宽度
4. 字体设置时，英文字体应放在中文字体前面
那么最后，让我们期待一下下一节内容的知识点究竟是啥叭！
