一.HTML
1.HTML是什么？
HTML（超文本标记语言） 是一种用于创建网页结构和内容的标记语言。它是构建互联网世界的基础，被用于描述网页的结构和语义。HTML使用 标签（tag） 来定义文档中的各个元素，比如标题、段落、链接、图像等。通过使用不同的HTML标签和属性，可以指定文本的样式、布局和交互行为。
HTML文档 由一系列的标签组成，这些标签可以嵌套在彼此之中形成层次结构。每个标签都有一个开始标签和结束标签，开始标签用于标识元素的开始，结束标签用于标识元素的结束。
HTML还支持添加超链接、图像、表格、表单等交互元素，以及通过CSS（层叠样式表）来定义网页的外观和样式。最终，浏览器会根据HTML代码解析网页并呈现出可视化的内容。
HTML是一种用于创建网页结构和内容的标记语言，它定义了网页的结构、样式和交互元素，是构建网页的基础。
2.html的基础框架
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
- <h1> 元素定义一个大标题
- <p> 元素定义一个段落
3.HTML的基础知识
3.1 HTML的标签介绍
1.标签的格式：标签分为单标签或者双标签。
2.标签可以拥有自己的属性
(1) 基本属性：可以修改简单的样式效果
(2) 事件属性：可以设置事件响应后的代码
3.2 HTML的常用标签介绍
1.font字体标签：可以用来修改文本的字体、颜色、大小等，常用的属性
(1) color属性：修改字体颜色
(2) face属性：修改字体
(3) size属性：修改字体大小
但是不建议在HTML里面设置字体的样式，可以在css文件里面设置字体的样式。
2.字符实体
(1).如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格。
(2).在网页中展示特殊符号效果时，需要使用字符实体替代
3.标签标题
标题（Heading）是通过 <h1> -到<h6> 标签进行定义的。<h1> 定义最大的标题。 <h6> 定义最小的标题。（浏览器会自动地在标题的前后添加空行。）
运行结果：
4.超链接：网页中点击之后可以跳转的内容（<a>信息</a>)
href属性设置链接的地址
target属性可以定义被链接的内容在何处显示：
(1) _self 属性值表示链接在当前页面中打开(默认)
(2) _blank属性值表示链接在新页面中打开
代码示例：演示超链接的使用：
运行结果：
5.列表标签
1.无序列表：在网页中表示一组无顺序之分的列表
显示特点：列表的每一项前默认显示圆点标识。
注意点：1.ul标签中只允许包含li标签；2.li标签可以包含任何人内容。
2.有序列表：在网页中表示一组有顺序之分的列表
显示特点： 列表的每一项前默认显示序号标识
注意点：1.ol标签中只允许包含li标签；2.li标签可以包含任意内容
3.自定义列表：在网页的底部导航中通常会使用自定义列表实现
显示特点： dd前会默认显示缩进效果
注意点：1.dl标签中只允许包含dt/dd标签；2.dt/dd标签可以包含任意内容
代码示例：
运行结果：
6.img标签：单标签，可以在html页面上显示图片
(1) src属性可以设置图片的路径：
相对路径：
. 表示当前文件所在的目录
… 表示当前文件所在的上一级目录
/ 表示进入目录或打开文件
绝对路径：
http://ip:端口号/工程名/资源路径
(2) width属性可以设置图片的宽度
(3) height属性可以设置图片的高度
(4) border属性可以设置图片边框大小
(5) alt属性可以设置当指定路径找不到图片时，用来代替图片显示的文本内容
7.表格标签：在网页中以行+列的单元格的方式整齐展示和数据
1.表格的基本标签
注意点： 标签的嵌套关系：table > tr > td
2.表格相关属性
建议实际开发时针对样式效果利用CSS设置。
3. 表格标题和表头单元格标签
注意点：1. caption标签书写在table标签内部；2.th标签书写在tr标签内部（用于替换td标签）
4.表格的结构标签
注意点：1.表格结构标签内部用于包裹tr标签；2.表格的结构标签可以省略
5.合并表格：将水平或垂直多个单元格合并成一个单元格
合并单元格步骤：
1. 明确合并哪几个单元格
2. 通过左上原则，确定保留谁删除谁
• 上下合并→只保留最上的，删除其他
• 左右合并→只保留最左的，删除其他
3. 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
注意点： •只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）
8.表单标签
1.input系列标签
1.1. 标签名：input
input标签可以通过type属性值的不同，展示不同效果
1.2 input系列标签-文本框：在网页中显示输入单行文本的表单控件
1.3 input系列标签-密码： 在网页中显示输入密码的表单控件
1.4 input系列标签-单选框：在网页中显示多选一的单选表单控件
注意点：1. name属性对于单选框有分组功能；
2.有相同name属性值的单选框为一组，一组中只能同时有一个被选中
1.5 input系列标签-复选框：在网页中显示多选多的多选表单控件
1.6 input系列标签-文件选择：在网页中显示文件选择的表单控件
1.7 input系列标签-按钮：在网页中显示不同功能的按钮表单控件
注意点：1.如果需要实现以上按钮功能，需要配合form标签使用；2.form使用方法：用form标签把表单标签一起包裹起来即可
2.button按钮标签
2.1 button按钮标签：在网页中显示用户点击的按钮
注意点：1.谷歌浏览器中button默认是提交按钮；2.button标签是双标签，更便于包裹其他内容：文字、图片等
3. select下拉菜单标签
3.1 select下拉菜单标签：在网页中提供多个选择项的下拉菜单表单控件
4.textarea文本域标签：在网页中提供可输入多行文本的表单控件
5.label标签：常用于绑定内容与表单标签的关系
9.语义化标签：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
9.1 div标签：一行只显示一个（独占一行）
9.2 span标签：一行可以显示多个
二、CSS
1.CSS是什么
CSS（层叠样式表，Cascading Style Sheets） 是一种用于描述网页上元素外观和样式的标记语言。它被用于控制网页的布局、字体、颜色、背景、边框和其他视觉效果，使得网页能够呈现出丰富多样的样式。
CSS通过选择器和属性来定义元素的样式。选择器用于选择要应用样式的HTML元素，而属性用于指定元素的样式规则。通过将CSS样式应用于HTML文档，可以使得所有使用相同样式的元素具有一致的外观。
CSS的主要优势是将样式和内容分离。这意味着可以单独编辑和管理样式，而不需要修改HTML标记。这样可以提高开发效率并实现网页样式的重用。此外，CSS还支持层叠和继承机制，使得样式可以按照一定的优先级和继承规则进行组合和应用。
CSS是Web开发中的核心技术之一，与HTML和JavaScript一起构成了现代网页的基础。它为网页设计者和开发者提供了强大的控制和灵活性，使得他们能够创建出各种各样的精美和交互式的网页界面。
2.CSS语法规则
- 浏览器根据选择器决定受CSS样式影响的HTML元素(标签)
- 属性是需要更改的样式名，每个属性都有一个值。属性和值使用冒号分开，并被大括号包围
- 如果要定义多个属性的声明，需要使用分号将每个声明分开
- 一般每行只描述一个属性
- CSS注释：/注释的内容/
2.1 CSS引入方式
内嵌式：CSS 写在style标签中
• 提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中
外联式：CSS 写在一个单独的.css文件中
• 提示：需要通过link标签在网页中引入
3.CSS选择器
3.1 标签选择器
结构：标签名 { css属性名：属性值； }
作用：通过标签名，找到页面中所有这类标签，设置样式
注意点： 1. 标签选择器选择的是一类标签，而不是单独某一个
2. 标签选择器无论嵌套关系有多深，都能找到对应的标签
3.2 类选择器
结构：.类名 { css属性名：属性值； }
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点： 1. 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3. 一个标签可以同时有多个类名，类名之间以空格隔开
4. 类名可以重复，一个类选择器可以同时选中多个标签
3.3 id选择器
结构：#id属性值 { css属性名：属性值； }
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点： 1. 所有标签上都有id属性
2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
3. 一个标签上只能有一个id属性值
4. 一个id选择器只能选中一个标签
补充：类与id的区别
1. class类名与id属性值的区别
• class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
• id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值
2. 类选择器与id选择器的区别
• 类选择器以 . 开头
• id选择器以 # 开头
3. 实际开发的情况
• 类选择器用的最多
• id一般配合js使用，除非特殊情况，否则不要使用id设置样式
3.4 hover伪类选择器
选择器语法：选择器:hover { css }
作用：选中鼠标悬停在元素上的状态，设置样式
注意点： 1. 伪类选择器选中的元素的某种状态
4.布局
4.1 flex 布局
Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。
4.2 flexbox的两根轴线
当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。主轴由 flex-direction 定义，另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关。
4.2.1 主轴
主轴由 flex-direction 定义，可以取 4 个值：
rowrow-reversecolumncolumn-reverse
1.如果选择了row或者row-reverse,那么主轴将沿着inline方向延展。
2.选择column 或者 column-reverse 时，主轴会沿着上下方向延伸 ,也就是 block 排列的方向。
4.2.2 交叉轴
交叉轴垂直于主轴，所以如果你的flex-direction (主轴) 设成了 row 或者 row-reverse 的话，交叉轴的方向就是沿着列向下的。
如果主轴方向设成了 column 或者 column-reverse，交叉轴就是水平方向。
4.3 flex容器
为了创建 flex 容器，我们把一个容器display属性值改为 flex 或者 inline-flex。完成这一步之后，容器中的直系子元素就会变为 flex 元素。所有 CSS 属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为：
- 元素排列为一行 (
flex-direction属性的初始值是row)。 - 元素从主轴的起始线开始。
- 元素不会在主维度方向拉伸，但是可以缩小。
- 元素被拉伸来填充交叉轴大小
- flex-basis属性为
auto。 - flex-wrap 属性为
nowrap。
这会让元素呈线形排列，并且把自己的大小作为主轴上的大小。如果有太多元素超出容器，它们会溢出而不会换行。如果一些元素比其他元素高，那么元素会沿交叉轴被拉伸来填满它的大小。
358
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
