一. 结构_HTML
1. Web 标准
结构（摆放内容）：HTML样式（美化内容）：CSS行为（动作）：JavaScript
2. HTML概念
HTML：超文本标记语言，HTML是用作描述Web网页内容语言，使用HTML描述的文件需要通过web浏览器显示出效果。文件后缀为 .html
开发工具：VS Code
下载地址: Download Visual Studio Code - Mac, Linux, Windows
常用插件:
预览效果：浏览器
下载地址: Google Chrome 网络浏览器
3. 谷歌浏览器
打开浏览器 → 右键检查（F12）→ 显示/隐藏设备工具栏 → 刷新
4. VS Code 工具使用
4.1. 打开文件夹
为了方便统一管理项目文件，通常将文件放到一个文件夹，直接在 VS Code 中打开
方法一： 文件 → 打开文件夹 → 浏览 → 选择文件夹
方法二：选中目标文件夹，拖拽至 VS Code
4.2. 安装插件
扩展 → 搜索 → 安装(install) → 重启 VS Code
4.3. 新建HTML文件
新建文件 → 输入文件名称及后缀 → 回车 → 空白 HTML 文件 → ! 生成HTML模板代码（HTML骨架结构）
4.4. 默认代码
html： 整个网页head：网页头部，放给浏览器看的信息，例如：CSStitle：网页标题body：网页主体，放给用户看的信息，例如：图片、文字等等meta-viewport：网页视口，移动端网页适配，规定网页宽度等于当前手机分辨率宽度meta-charset：网页字符编码，UTF8为国际编码
网页内容，给用户看的信息
5. 文本相关标签
标题： h1-h6段落：p加粗：strong
6. 布局通用标签
div：换行显示span：一行显示
span标签
span标签
7. 超链接标签
作用：页面跳转
标签名：a（双标签）
属性：
设置跳转地址：href="跳转地址"新窗口跳转：target="_blank"
8. 图片标签
标签名：img（单标签）
属性如下：
属性
作用
src
图像路径
alt
替换文本
9. 表单标签
input：表单button：按钮
标签名：input（单标签）
属性：
type=""，属性值不同，表单功能不同placeholder： 提示文本name：表单名称
type属性值如下：
type 属性值
说明
text
文本框
password
密码框
radio
单选框
checkbox
复选框（多选框）
二. 样式_CSS
CSS：层叠样式表，是一种样式表语言，用来描述html文档的呈现方式。
1. 引入方式
常用引入方式有两种：行内样式表、内部样式表和外部样式表。
1.1. 行内样式表
作用：书写少量CSS代码，学习测试时使用
书写位置：标签内部的style属性中
CSS写法：style="属性名1: 属性值; 属性名2: 属性值;"
1.2. 内部样式表
作用：书写少量CSS代码，学习测试时使用
书写位置：title 标签下方添加 style 双标签，style标签里面写CSS代码
CSS写法：选择器 {属性名: 属性值;}
测试内部样式表
1.3. 外部样式表
作用：书写大量CSS代码，开发时使用
使用步骤：
1.新建CSS文件（后缀.css）书写CSS代码
div {
color: blue;
}
2.HTML使用link标签引入CSS文件
2. 文本属性
属性名
描述
属性值
font-size
字体大小
单位px或vw
color
文字颜色
line-height
行高
单位px或vw
font-style
是否倾斜
none：不倾斜
Italic：倾斜
text-indent
文本缩进
em（当前字号大小）
text-decoration
文本修饰线
none：无
underline：下划线
line-through：删除线
font-weight
是否加粗
100~900
高山流水觅知音，以心相交，方成其久远。从合作修复巴黎圣母院，到共同保护西安秦始皇陵兵马俑，从互设文化中心到互办文化年、语言年，中法人文交流为世界文明互鉴作出表率。
这是strong标签
3. 选择器
作用：查找标签
3.1. 标签选择器
作用：已标签名命名的选择器
特点：为同名标签设置相同样式
p {}
3.2. 类选择器
作用：选中一个或多个目标标签设置样式
特点：差异化设置标签样式
使用步骤：
定义类选择器 .类名 {}使用类选择器 class="类名"
第一个段落标签
第二个段落标签
第三个段落标签
3.3. 后代选择器
作用：选中某个元素的后代元素
写法：父选择器 子选择器 {CSS 属性}，父子选择器之间用空格隔开。
span 标签
这是 div 的儿子 span
4. 布局相关属性
4.1. 盒子模型
4.1.1. 尺寸范围
属性
描述
值
width
宽度
单位：px/vw/百分比
height
高度
单位：px/vw/百分比
background-color
背景色
4.1.2. 背景图
属性
描述
值
background-image
背景图
url(图片路径)
background-repeat
背景图平铺方式
默认平铺
不平铺：no-repeat
background-size
背景图缩放
px/vw/百分比/关键词（cover、contain）
background-position
背景图位置
px/vw/百分比/方向英文单词
（left、top、right、bottom、center）
4.1.3. 内外边距
内边距： padding
单值：四个方向相同多值：从上开始顺时针赋值，无值的一侧与对面取值相同单方向：padding-方向英文单词（left、top、right、bottom）默认撑大盒子尺寸，需要配合box-sizing: border-box;进行内减
外边距：与padding设置方式相同（不需要内减）
4.1.4. 边框线
四个方向相同边框： border: 尺寸 线条样式 线条颜色;
某个方向边框：border-方向英文单词: 尺寸 线条样式 线条颜色;
4.1.5. 圆角
属性：border-radius
取值：
单值：四个角圆角效果相同多值：从左上角开始顺时针赋值，无值的一角与对角取值相同正圆：50%（正方形）胶囊：短边尺寸的一半（长方形）
4.2. Flex 布局
Flex 布局： 浏览器推荐的布局方式，适合结构化布局，提供强大的空间分布和对齐能力。
属性
描述
display: flex;
设置Flex布局（父元素）
justify-content
主轴对齐方式
align-items
交叉轴对齐方式
align-self
单个子元素交叉轴对齐方式
flex
伸缩比
flex-wrap
换行
4.2.1. 布局
4.2.2. 多元素换行
4.3. 定位
作用：实现元素层叠显示效果。
步骤：
设置定位模式设置边偏移（元素位置：left、right、top、bottom）
属性及值
描述
特点
position: relative;
相对定位
占位；相对自身原有位置偏移
position: absolute;
绝对定位
不占位；相对已经定位的父元素偏移；没有定位的父元素则相对浏览器可视区进行偏移
z-index: 数字;
显示层级
取值为整数数字，取值越大显示层级越高
定位原则：子绝父相