HTML & CSS 学习总结

最新推荐文章于 2024-08-01 09:59:14 发布

长安430

最新推荐文章于 2024-08-01 09:59:14 发布

阅读量525

点赞数

文章标签： html 学习前端

本文链接： https://blog.csdn.net/weixin_63050560/article/details/131393221

版权

一.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 个值：