1.1 Web简介
什么是 Web
Web（World Wide Web，万维网）是建立在互联网基础上的超文本信息系统， 用户可以通过浏览器访问网页、图片、视频、表单等各种资源。
Web应用程序的工作原理
- 用户在浏览器中输入网址（URL）；
- 浏览器通过 DNS 解析域名，找到服务器对应的 IP 地址；
- 浏览器向服务器发送 HTTP 请求；
- 服务器返回 HTML、CSS、图片等资源；
- 浏览器解析这些资源，并把页面显示给用户。
Web访问流程（文字版示意）
1.2 HTML基础
前端主要负责网页的结构、样式和交互表现。HTML负责“搭骨架”，CSS负责“做样式”。
HTML简介
HTML 是 HyperText Markup Language（超文本标记语言）的缩写， 用来描述网页的结构，例如标题、段落、表格、列表、表单等。
HTML标签和元素
一个 HTML 元素通常由开始标签、内容和结束标签组成。例如：
<h1>这是一级标题</h1>
下面这个按钮演示了 HTML 常见属性：
id、class、title、
style。
大多数 HTML 元素都支持的属性
| 属性 | 描述 |
|---|---|
| class | 为 HTML 元素定义一个或多个类名，通常配合 CSS 使用 |
| id | 定义元素的唯一标识 |
| style | 定义元素的行内样式 |
| title | 定义额外提示信息，鼠标悬停时通常可见 |
HTML表格
下面的表格演示了 table、thead、tbody、tr、th、td 等标签。
| 节次 | 内容 | 重点 | 练习 |
|---|---|---|---|
| 第1次课 | Web简介 | Web工作原理 | 理解访问流程 |
| 第2次课 | HTML基础 | 标签、表格、列表、表单 | 编写页面结构 |
| 第3次课 | CSS基础 | 选择器、盒子模型 | 美化页面样式 |
HTML列表
有序列表
- 打开编辑器
- 新建 HTML 文件
- 编写页面结构
- 在浏览器中运行
无序列表
- 标题标签
- 段落标签
- 表格标签
- 表单标签
自定义列表
- HTML
- 负责网页结构
- CSS
- 负责网页样式
- 浏览器
- 负责解析并显示网页内容
HTML区块
div 是块级元素，通常独占一行；
span 是行内元素，通常只包裹局部内容。
HTML表单
下面的表单演示了 form、input、select、textarea、button 等标签。
<form> 标签常见属性说明
| 属性 | 说明 |
|---|---|
| name | 表单名称 |
| method | 提交方式，常见为 GET 或 POST |
| action | 表单提交的目标地址 |
| enctype | 表单内容编码方式 |
| target | 返回结果的显示方式，如 _self、_blank |
1.3 CSS基础
CSS（Cascading Style Sheets，层叠样式表）用于控制 HTML 页面外观， 如颜色、字体、边框、间距、布局等。
CSS基础知识
- HTML负责结构，CSS负责样式；
- 一个页面可以不写CSS，但通常会比较朴素；
- 加入CSS后，页面会更美观、更清晰。
嵌入CSS样式的3种方式
- 行内样式：直接写在标签的
style属性中； - 内部样式表：写在当前页面的
<style>标签中； - 外部样式表：写在单独的
.css文件中，通过<link>引入。
行内样式
这段文字使用了行内样式。
内部样式表
这个区块使用了 head 中的 style 样式。
外部样式表
这段文字使用了 styles.css 中定义的样式。
CSS语法结构
选择器 {
属性: 值;
属性: 值;
}
例如：
h1 {
color: blue;
text-align: center;
}
盒子模型
盒子模型包括：Content（内容）、 Padding（内边距）、 Border（边框）、 Margin（外边距）。
| 部分 | 说明 |
|---|---|
| Content | 盒子的实际内容，如文字、图片 |
| Padding | 内容与边框之间的空白区域 |
| Border | 包裹内容和内边距的边框 |
| Margin | 盒子与外部其他元素之间的距离 |
1.4 小结
- 了解了 Web 的基本概念和访问流程；
- 掌握了 HTML 的基本结构、标签、表格、列表、区块、表单；
- 掌握了 CSS 的作用、三种引入方式和语法结构；
- 理解了盒子模型的基本概念。