Web基础理论
一、Web基本概念与结构
Web定义
万维网（World Wide Web）：通过浏览器访问的全球性网站集合（如电商平台淘宝、京东，企业内部管理系统CRM、OA、ERP等）。
Web核心组成
前端程序：负责数据展示与用户交互，通过浏览器解析渲染页面。
后端程序：处理业务逻辑，响应前端请求并操作数据库。
数据库：存储和管理数据（如用户信息、商品数据等）。
请求处理流程
用户请求 → 前端程序 → 后端程序 → 数据库 → 返回数据 → 前端渲染展示。
二、前后端分离开发模式
核心特点
前端与后端独立开发，通过API接口交互数据。
优势：
职责分离：前端专注UI/交互，后端专注业务逻辑与数据管理。
灵活性：支持多端（Web/移动）共用同一后端服务。
HTML理论知识点
HTML定义和基础
HTML:HyperText Markup Language,超文本标记语言。（p-40）
超文本:超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。（p-41）
标记语言:由标签"<标签>"构成的语言。（p-42）
HTML标签都是预定义好的。例如:使用
标签展示标题，使用
HTML代码直接在浏览器中运行，HTML标签由浏览器解析。（p-44）
HTML结构标签
其中是根标签，和是子标签。（p-60）
:定义网页的头部，用来存放给浏览器看的信息，如:CSS样式、网页的标题。（p-61） [1](@context-ref?id=6)
:定义网页的主体部分，存放给用户看的信息，也是网页的主体内容，如:文字、图片、视频、音频、表格等。（p-62） [1](@context-ref?id=7)
<title>中定义标题显示在浏览器的标题位置，中定义的内容会呈现在浏览器的内容区域。（p-72） [1](@context-ref?id=8)
HTML标签特性
HTML标签不区分大小写，建议小写。（p-74）
HTML标签的属性值，采用单引号、双引号都可以，一般写双引号。（p-75）
HTML语法相对比较松散(建议大家编写HTML标签的时候尽量严谨一些)。（p-76）
超链接标签
标签:。（p-107）
属性: href:指定资源访问的url。（p-109）
target:指定在何处打开资源链接。（p-110）
_self:默认值，在当前页面打开。（p-111）
_blank:在空白页面打开。（p-112）
路径表示
在引入图片、视频、音频、css等内容时，我们需要指定文件的路径，而在前端开发中，路径的书写形式分为两类:（p-174）
绝对路径:（p-175）
相对路径:（p-178）
./:当前目录,./可以省略的。（p-179）
../:上一级目录。（p-180）
表单标签
表单场景:表单就是在网页中负责数据采集功能的，如:注册、登录的表单。（p-288）
表单标签:。（p-289）
表单属性:（p-290）
action:规定表单提交时，向何处发送表单数据，表单提交的URL。（p-291）
method:规定用于发送表单数据的方式，常见为:GET、POST。（p-292）
GET:表单数据是拼接在url后面的，如: xxxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。（p-293）
POST:表单数据是在请求本(消息体)中携带的，大小没有限制。（p-294）
表单项标签:不同类型的input元素、下拉列表、文本域等。（p-295）
input:定义表单项，通过type属性控制输入形式。（p-296）
select:定义下拉列表。（p-297）
textarea:定义文本域。（p-298）
表格标签
定义表格整体。（表格描述）
用于定义表格头部(可选)。（表格描述）
定义表格中的主体部分(可选)。（表格描述）
表格的行,可以包裹多个。（表格描述）
表格单元格(普通),可以包裹内容;如果是表头单元。（表格描述）
字符实体
在HTML页面中，我们在代码中录入空格、<、>这些符号的时候，是没有对应的效果的，因为浏览器并不能准确的识别，此时，我们就需要通过字符实体来表示空格，<,>。常见符号的字符实体如下:（p-171）
:空格。（表格）
< :<。（表格）
> :>。（表格）
CSS理论知识点
CSS定义和基础
CSS: Cascading Style Sheet，层叠样式表，用于控制页面的样式(表现)。（p-48）
CSS引入方式
那在HTML的文件中，我们如何来编写CSS样式呢，此时就涉及到CSS的三种引入方式。（p-126）
具体有3种引入方式:（p-127）
行内样式:在标签内使用style属性,属性值是css属性键值对。（表格）
内部样式:定义<style>标签,通过选择器作用于当前页面。（表格）
外部样式:定义标签,通过href属性引入外部css文件。（表格）
对于上述3种引入方式，企业开发的使用情况如下:（p-129）
行内样式:会出现大量的代码冗余，不方便后期的维护，所以不常用(常配合JS使用)。（p-130）
内部样式:通过定义css选择器，让样式作用于当前页面的指定的标签上。(可以写在页面任何位置，但通常约定写在head标签中)。（p-131）
外部样式:html和css实现了完全的分离，企业开发常用方式。（p-132）
颜色表示方式
在前端程序开发中，颜色的表示方式常见的有如下三种:（p-134）
关键字:颜色英文单词，如red、green、blue。（表格）
rgb表示法:rgb(r,g,b)，红绿蓝三原色,每项取值范围:0-255。（表格）
rgba表示法:rgba(r,g,b,a)，红绿蓝三原色,a表示透明度,取值:0-1。（表格）
十六进制表示法:#rrggbb，#开头,将数字转换成十六进制表示。（表格）
CSS选择器
顾名思义:选择器是选取需设置样式的元素(标签)，但是我们根据业务场景不同，选择的标签的需求也是多种多样的，所以选择器有很多种。（p-141）
选择器通用语法如下:（p-142）
常见选择器:（表格）
元素选择器:元素名称 {...}，如h1{...}，选择页面上所有的标签。（表格）
类选择器:.class属性值{...}，如.cls {...}，选择页面上所有class属性为cls的。（表格）
id选择器:#id属性值{...}，如#hid{...}，选择页面上id属性为hid的标签。（表格）
分组选择器:选择器1,选择器2{...}，如h1,h2{...}，选择页面上所有的h1和h2标签。（表格）
属性选择器:元素名称[属性]{...}，如input[type]{...}，选择页面上有type属性的input标签。（表格）
后代选择器:元素1元素2{...}，如form input{...}，选择form标签内的所有input标签。（表格）
盒子模型
盒子:页面中所有的元素(标签)，都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。（p-203）
盒子模型组成:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)。（p-204）
布局标签
布局标签:实际开发网页中，会大量频繁的使用 div和 span这两个没有语义的布局标签。（p-210）
标签:一行只显示一个(独占一行)，宽度默认是父元素的宽度，高度默认由内容撑开，可以设置宽高(width、height)。（p-213, p-214, p-215, p-216） [1](@context-ref?id=67)
标签:一行可以显示多个，宽度和高度默认由内容撑开，不可以设置宽高(width、height)。（p-217, p-218, p-219, p-220）
Flex布局
flex是flexible Box的缩写，意为"弹性布局"。采用flex布局的元素，称为Flex项目(item)。它的所有子元素自动成为容器成员，称为Flex项目(item)。（p-263）
通过给父容器添加flex属性,来控制子元素的位置和排列方式。（p-264）
flex布局相关的CSS样式:（表格）
display:模式，取值flex。（表格）
flex-direction:设置主轴，取值row(主轴方向为x轴)、column(主轴方向为y轴)。（表格）
justify-content:子元素在主轴上的对齐方式，取值flex-start(从头开始排列)、flex-end(从尾部开始排列)、center(在主轴居中对齐)、space-around(平分剩余空间)、space-between(先两边贴边,再平分)。（表格）