目录
一、HTML学习总结
1 概念
HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。它是一种标记语言，其中包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
2 快速入门
2.1 html文档后缀名
html文档后缀名分为两种，一种是.html，另一种是html，这两者没有区别。
2.2 标签的分类
标签一共分为两类，第一类是围堵标签，它有开始标签和结束标签，比如<p></p>；第二类是自闭和标签，它的开始标签和结束标签都在一个标签中，比如<br/>
2.3 标签嵌套
html的标签可以嵌套，但是格式一定要正确
正确案例：<p><a></a><p>
错误案例：<p><a></p></a>2.4 标签的属性
您可以自定义标签内部的属性，属性由键值对组成，值需要使用双引号引进来，多个属性可以用空格隔开。
<标签名称 属性名1="属性值" 属性名2="属性值"></标签名称>
<p id="p1" name="p1"></p>2.5 html标签的大小写
html标签不区分大小写，但是建议全小写
3 HTML文档的基本结构
3.1 基本结构
您可以在IDEA创建一个html文件，并且可以设置该文件的标题和内容，以下是简单的例子，仅供参考
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>这是我的第一个HTML页面</title>
</head>
<body>
hello html 这是我的第一个HTML页面
</body>
</html>
3.2 HTML的注释
注释是HTML中不可或缺的一部分，该部分可以帮助您和其他人更好地了解自己所写的代码
语法：<!--(中间部分是您需要插入的注释信息)-->
4 HTML常用标签
4.1 文章标题标签
在 HTML 中，文章标题可以使用 <h1> 到 <h6> 标签进行定义，分别表示从最高级标题到最低级标题。一般情况下，建议使用 <h1> 标签作为文章的主标题，其余的标题标签则用于表示文章中的各级标题。
4.2 段落标签
段落标签用来定义段落，您可以使用<p>进行段落分割
<p>这是一个段落。</p>
4.3 换行标签
您可以使用换行标签<br>进行强制换行
<p>这是一行文字。<br>这是另一行文字。</p>
4.4 水平线标签
水平线标签用于定义水平线
这是我的水平线<hr>
4.5 列表定义标签
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
<ol>
<li>列表项1</li>
<li>列表项2</li>
</ol>
4.6 链接定义标签
当您想使用链接时，您可以使用<a>进行定义
<a href="https://www.Bilibili.com">这是一个链接</a>
4.7 图片定义标签
当您想引用图片时，您可以使用<img>标签
<img src="https://www.example.com/image.jpg" alt="我的图片描述">
4.8 表格定义标签
您可以使用<table>标签创建表格，并定义表格形式
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
以上是一些常用的标签，其余标签请自行网上查阅。
5 表单
5.1 表单介绍
表单是网页中用于收集用户输入数据的一种交互元素。通过表单，用户可以输入文本、选择选项、上传文件等。表单通常由多个输入字段、标签和按钮组成，用于向服务器提交数据。常见的表单元素包括文本框、密码框、单选按钮、复选框、下拉列表、提交按钮等。在HTML中，表单通过`<form>`标签来定义，并使用各种输入字段和按钮元素作为子元素来构建。通过指定表单的`action`属性和`method`属性，可以指定表单数据提交的目标和方式。表单是构建交互性网页的重要组成部分，常用于用户注册、登录、搜索等场景。
5.2 常用表单项元素属性
id：唯一标识符，用于在JavaScript中引用元素。
name：表单项的名称，用于在提交表单时标识该项数据的键名。
value：表单项的初始值或用户输入的值。
placeholder：在用户未输入内容时显示的占位文本。
disabled：禁用表单项，使其不可编辑或选中。
required：标记表单项为必填项。
readonly：只读模式，使表单项只可查看但不可编辑。
maxlength：限制用户输入的最大字符数。
min和max：限制用户输入的最小值和最大值（仅适用于数值类型的表单项）。
pattern：使用正则表达式验证用户输入的模式。
autofocus：自动获取焦点，使用户可以直接输入数据。
multiple：允许用户选择多个选项（仅适用于下拉列表和文件上传）。
accept：限制用户可以上传的文件类型（仅适用于文件上传）。
5.3 文本框
<!-- 文本框 -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username">5.4 密码框
<!-- 密码框 -->
<label for="password">密码：</label>
<input type="password" id="password" name="password">5.5 单选按钮
<!-- 单选按钮 -->
<label for="gender">性别：</label>
<input type="radio" id="gender-male" name="gender" value="male">
<label for="gender-male">男</label>
<input type="radio" id="gender-female" name="gender" value="female">
<label for="gender-female">女</label>5.6 复选框
<!-- 复选框 -->
<label for="hobbies">兴趣爱好：</label>
<input type="checkbox" id="hobby1" name="hobbies" value="reading">
<label for="hobby1">阅读</label>
<input type="checkbox" id="hobby2" name="hobbies" value="sports">
<label for="hobby2">运动</label>5.7 文件域
<!-- 文件域 -->
<label for="avatar">头像：</label>
<input type="file" id="avatar" name="avatar">5.8 日期
<!-- 日期 -->
<label for="dob">出生日期：</label>
<input type="date" id="dob" name="dob">5.9 隐藏域
<!-- 隐藏域 -->
<input type="hidden" name="secret" value="123456">5.10 下拉选择框
<!-- 下拉选择框 -->
<label for="country">国家：</label>
<select id="country" name="country">
<option value="china">中国</option>
<option value="us">美国</option>
<option value="uk">英国</option>
</select>5.11 文本域
<!-- 文本域 -->
<label for="message">留言：</label>
<textarea id="message" name="message"></textarea>5.12 按钮
<!-- 按钮 -->
<button type="submit">提交</button>5.13 标签
<!-- 标签 -->
<label for="newsletter">订阅电子报：</label>
<input type="checkbox" id="newsletter" name="newsletter">可使用 <input> 标签来定义表单中的输入元素，可以通过设置不同的 type 属性值来定义不同的文本框、密码框、单选按钮等，上述为示例代码。
二、CSS学习总结
1 概念
CSS（层叠样式表）是一种用于定义网页外观和布局的样式语言。它与HTML（超文本标记语言）一起使用，用于描述网页中各个元素的样式，如字体、颜色、大小、间距、背景等。
2 优势
CSS具有许多优势，以下是一些主要的优势：
1. 分离内容和样式：CSS可以将网页的内容和样式分离，使得网页结构更清晰，易于维护和更新。通过将样式定义在CSS文件中，可以轻松地对整个网站进行统一的样式调整，而不需要修改每个HTML文件。
2. 可重用性：通过使用CSS，可以将样式应用于多个页面，并且可以轻松地更改样式，而无需修改每个页面。这使得样式的重用和维护变得更加简单和高效。
3. 灵活性：CSS提供了丰富的样式属性和选择器，使我们能够更精确地控制网页的外观和布局。我们可以轻松地更改字体、颜色、大小、间距等样式属性，以及应用动画和过渡效果。
4. 浏览器兼容性：CSS是一种标准化的样式语言，几乎所有的现代浏览器都支持CSS。这意味着我们可以在各种不同的浏览器和设备上实现一致的样式效果。
5. 页面加载速度：使用CSS可以减少页面的加载时间。由于CSS文件可以在HTML文件之外加载，因此可以并行下载，从而提高页面加载速度。此外，通过将样式集中定义在CSS文件中，可以减少HTML文件的大小，进一步加快页面加载速度。
3 CSS的基本使用
根据定义CSS的位置不同，分为行内样式、内部样式和外部样式。
3.1 行内样式
行内样式（Inline Styles）：行内样式是直接在HTML元素的标签内部使用style属性来定义样式。这种方式是将CSS样式直接应用于单个元素。
<p style="color: red; font-size: 20px;">这是一个行内样式的段落</p>
3.2 内部样式
内部样式（Internal Styles）：内部样式是在HTML文档的<head>标签中使用<style>标签来定义样式。这种方式可以在同一个HTML文档中应用于多个元素。
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>这是一个内部样式的段落</p>
</body>
3.3 外部样式
外部样式（External Styles）：外部样式是将样式定义在一个独立的CSS文件中，并通过<link>标签将该文件链接到HTML文档中。这种方式可以在多个HTML文档中重用相同的样式。
在style.css中定义样式
p {
color: green;
font-size: 16px;
}
在HTML文档中引用外部样式：
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>这是一个外部样式的段落</p>
</body>
作用域的范围:外部样式表>内部样式表>行内样式表
**优先级：外部样式表<内部样式表<行内样式表; **
同样的样式作用在同一个标签身上：就近原则；不同样式作用在同一个标签身上:叠加生效
4 CSS语法
CSS的基本语法由选择器和声明块组成。选择器用于选择要应用样式的HTML元素，而声明块包含一组属性和值，用于定义该元素的样式。
基本语法结构如下：
selector {
property: value;
/* 注释：用于注解样式信息 */
}- 选择器（Selector）：用于选择要应用样式的HTML元素。可以使用元素名称、类名、ID、属性等进行选择。多个选择器之间用逗号分隔，表示同时选择多个元素。
- 声明块（Declaration Block）：包含在大括号内，包含一组属性和值。每个属性和值用冒号分隔，每个声明用分号结束。
- 属性（Property）：用于指定要修改的样式属性，例如颜色、字体大小、边框等。
- 值（Value）：用于指定属性的具体取值，例如红色、16像素、实线等。
示例代码：
/* 选择器为类名为"my-class"的所有元素 */
.my-class {
color: red;
font-size: 20px;
}
/* 选择器为ID为"my-id"的元素 */
#my-id {
background-color: blue;
}
/* 选择器为元素名称为"h1"和类名为"title"的元素 */
h1.title {
text-align: center;
}在上述示例中，`.my-class`选择器将应用样式于所有类名为"my-class"的元素，设置它们的文本颜色为红色，字体大小为20像素。`#my-id`选择器将应用样式于ID为"my-id"的元素，设置其背景颜色为蓝色。`h1.title`选择器将应用样式于所有类名为"title"的h1元素，将文字居中对齐。
5 CSS注释
CSS注释以 /* 开始, 以 */ 结束
/*这是CSS的注释*/
div {
color: blue; /*文字颜色是蓝色*/
}6 基本选择器
基本选择器可以用来筛选具有相似特征的元素
6.1 id选择器
CSS id选择器用于选择具有特定id属性的元素。id属性是在HTML中为元素指定的唯一标识符。id选择器使用"#"符号后跟id名称来定义选择器。
例如，如果HTML中有一个具有id属性为"my-element"的元素，可以使用以下CSS代码来选择该元素：
#my-element {
/* CSS样式规则 */
}在上面的示例中，所有具有id属性为"my-element"的元素都将应用CSS样式规则。
请注意，id选择器只能选择一个元素，因为id在HTML文档中应该是唯一的。因此，应该谨慎使用id选择器，以避免重复的id值。
以下是一个id选择器的示例：
HTML代码：
<div id="my-element">这是一个具有id属性的元素</div>CSS代码：
#my-element {
color: blue;
font-size: 18px;
}在上面的示例中，具有id属性为"my-element"的div元素将应用蓝色文本颜色和18像素的字体大小。
6.2 class选择器
CSS class选择器用于选择具有特定class属性的元素。class属性是在HTML中为元素指定的一个或多个类名，用空格分隔。class选择器使用"."符号后跟class名称来定义选择器。
例如，如果HTML中有一个具有class属性为"my-class"的元素，可以使用以下CSS代码来选择该元素：
.my-class {
/* CSS样式规则 */
}在上面的示例中，所有具有class属性为"my-class"的元素都将应用CSS样式规则。
与id选择器不同，class选择器可以同时应用于多个元素。这使得class选择器非常适用于同时应用相同样式的多个元素。
以下是一个class选择器的示例：
HTML代码：
<div class="my-class">这是一个具有class属性的元素</div>
<p class="my-class">这是另一个具有class属性的元素</p>CSS代码：
.my-class {
color: blue;
font-size: 18px;
}在上面的示例中，具有class属性为"my-class"的div和p元素都将应用蓝色文本颜色和18像素的字体大小。
6.3 元素选择器/标签选择器
CSS元素选择器（也称为标签选择器）用于选择指定的HTML元素。它们是最基本的选择器类型，通过元素的标签名称来选择元素。
例如，如果你想选择所有的段落元素（`<p>`），你可以使用以下CSS代码：
p {
/* CSS样式 */
}这将选择文档中的所有段落元素，并且你可以在大括号中设置所需的CSS样式。
你也可以结合使用元素选择器和其他选择器来选择特定条件下的元素。例如，如果你只想选择在`<div>`元素内的段落元素，你可以使用以下CSS代码：
div p {
/* CSS样式 */
}这将只选择在`<div>`元素内的段落元素。
元素选择器/标签选择器是CSS中最常用的选择器之一，因为它可以选择HTML文档中的任何元素，从而实现对元素的样式控制。
7 优先级
7.1 选择器的优先级
ID选择器 > 类选择器 > 标签选择器
当多个选择器作用在同一个标签上的时候，如果属性冲突，看优先级；如果不冲突，样式叠加生效。
7.2 样式表的优先级
行内样式 > 内部样式 >外部样式
同样，三个样式表中都有内容作用在同一个html标签的时候，如果属性冲突，看优先级；如果不冲突，
样式叠加生效。
8 CSS常用样式
8.1 color：字体颜色
CSS中的颜色属性用于设置文本或元素的颜色。在CSS中，有多种方式可以指定颜色。
1. 预定义颜色名称：CSS提供了一些预定义的颜色名称，例如红色（red）、蓝色（blue）、绿色（green）等。你可以直接使用这些名称来设置文本或元素的颜色。
2. 十六进制值：颜色可以使用六位十六进制值来表示，例如`#FF0000`代表红色，`#0000FF`代表蓝色。十六进制值由三个字节构成，每个字节表示红、绿、蓝三个颜色通道的强度。
3. RGB值：RGB代表红、绿、蓝三个颜色通道，可以通过指定每个颜色通道的强度值来创建颜色。例如，`rgb(255, 0, 0)`代表红色，`rgb(0, 0, 255)`代表蓝色。每个颜色通道的强度值取值范围为0到255。
4. RGBA值：RGBA与RGB类似，只是添加了一个透明度通道。透明度值可以从0到1之间的任意值，0表示完全透明，1表示完全不透明。例如，`rgba(255, 0, 0, 0.5)`代表半透明的红色。
5. HSL值：HSL代表色相、饱和度和亮度。色相值从0到360度表示颜色的类型，饱和度值从0%到100%表示颜色的纯度，亮度值从0%到100%表示颜色的亮度。例如，`hsl(0, 100%, 50%)`代表红色。
6. HSLA值：与HSL类似，只是添加了一个透明度通道。透明度值可以从0到1之间的任意值。例如，`hsla(0, 100%, 50%, 0.5)`代表半透明的红色。
以上是一些常用的CSS颜色表示方式。你可以根据需要选择适合的颜色表示方式来设置文本或元素的颜色。
8.2 width height:宽高
CSS中的宽度和高度属性用于定义HTML元素的尺寸。宽度属性（width）用于设置元素的宽度，可以使用像素（px）、百分比（%）、视窗宽度（vw）等单位来表示。宽度属性可以设置固定宽度或自动宽度。
高度属性（height）用于设置元素的高度，同样可以使用像素、百分比、视窗高度等单位来表示。高度属性也可以设置固定高度或自动高度。
通过设置元素的宽度和高度属性，可以控制元素在页面中的大小。这对于创建响应式布局和确保页面元素的一致性非常重要。可以在CSS中使用这些属性来设置元素的宽度和高度，以满足设计和布局需求。
8.3 背景样式
当设置元素的背景样式时，可以使用以下属性来定义：
1. 背景颜色（background-color）：设置元素的背景颜色。
2. 背景图片（background-image）：设置元素的背景图片。
3. 背景重复（background-repeat）：设置背景图片是否重复显示。
4. 背景位置（background-position）：设置背景图片的起始位置。
5. 背景大小（background-size）：设置背景图片的大小。
6. 背景附着（background-attachment）：设置背景图片是否固定或随滚动而移动。
以下是一个包含所有情况的CSS代码示例：
/* 设置元素的背景颜色 */
.background-color {
background-color: #ff0000; /* 使用十六进制颜色值设置背景颜色 */
}
/* 设置元素的背景图片 */
.background-image {
background-image: url('example.jpg'); /* 设置背景图片的URL */
}
/* 设置背景图片是否重复显示 */
.background-repeat {
background-repeat: no-repeat; /* 背景图片不重复显示 */
}
/* 设置背景图片的起始位置 */
.background-position {
background-position: center top; /* 背景图片在元素中垂直居中，水平居中对齐 */
}
/* 设置背景图片的大小 */
.background-size {
background-size: cover; /* 背景图片按比例缩放以填充整个元素 */
}
/* 设置背景图片是否固定或随滚动而移动 */
.background-attachment {
background-attachment: fixed; /* 背景图片固定，不随滚动而移动 */
}8.4 文本样式
当涉及到CSS文本样式时，有许多属性可以使用来改变文本的外观。以下是一些常见的文本样式属性：
1. `color`：用于设置文本的颜色。
2. `font-family`：用于设置文本的字体。
3. `font-size`：用于设置文本的大小。
4. `font-weight`：用于设置文本的粗细。
5. `text-decoration`：用于设置文本的装饰效果，如下划线、删除线等。
6. `text-transform`：用于设置文本的大小写转换，如大写、小写、首字母大写等。
7. `text-align`：用于设置文本的对齐方式，如左对齐、居中对齐、右对齐等。
8. `line-height`：用于设置文本行的高度。
下面是一个包含所有情况的CSS代码示例，以及相应的注释：
/* 设置文本颜色为红色 */
.color {
color: red;
}
/* 设置文本字体为Arial */
.font-family {
font-family: Arial, sans-serif;
}
/* 设置文本大小为20像素 */
.font-size {
font-size: 20px;
}
/* 设置文本粗细为粗体 */
.font-weight {
font-weight: bold;
}
/* 设置文本下划线效果 */
.text-decoration {
text-decoration: underline;
}
/* 设置文本转换为大写 */
.text-transform {
text-transform: uppercase;
}
/* 设置文本居中对齐 */
.text-align {
text-align: center;
}
/* 设置文本行高为1.5倍 */
.line-height {
line-height: 1.5;
}8.5 列表样式
当涉及到CSS列表样式时，可以使用`list-style`属性来改变列表的样式。该属性可以设置三个值：`list-style-type`、`list-style-image`和`list-style-position`。
1. `list-style-type`：用于设置列表项标记的类型，如实心圆点、数字、字母等。
2. `list-style-image`：用于设置列表项标记的图片。
3. `list-style-position`：用于设置列表项标记的位置，如内部、外部等。
下面是一个包含所有情况的CSS代码示例，以及相应的注释：
/* 设置列表项标记为实心圆点 */
.list-style-type {
list-style-type: disc;
}
/* 设置列表项标记为实心方块 */
.list-style-type {
list-style-type: square;
}
/* 设置列表项标记为实心数字 */
.list-style-type {
list-style-type: decimal;
}
/* 设置列表项标记为字母小写 */
.list-style-type {
list-style-type: lower-alpha;
}
/* 设置列表项标记为字母大写 */
.list-style-type {
list-style-type: upper-alpha;
}
/* 设置列表项标记为图片 */
.list-style-image {
list-style-image: url("image.png");
}
/* 设置列表项标记位置为内部 */
.list-style-position {
list-style-position: inside;
}
/* 设置列表项标记位置为外部 */
.list-style-position {
list-style-position: outside;
}8.6 边框样式
边框样式是用来定义元素的边框外观的CSS属性。可以设置边框的样式、宽度和颜色。以下是包含所有情况的CSS代码示例，并附带必要的注释说明：
/* 设置元素的边框样式为实线 */
border-style: solid;
/* 设置元素的边框样式为虚线 */
border-style: dashed;
/* 设置元素的边框样式为点线 */
border-style: dotted;
/* 设置元素的边框样式为双线 */
border-style: double;
/* 设置元素的边框样式为无边框 */
border-style: none;
/* 设置元素的边框样式为隐藏（隐藏边框，但仍占据空间） */
border-style: hidden;
/* 设置元素的边框样式为脊线（类似于3D凸起效果） */
border-style: ridge;
/* 设置元素的边框样式为嵌入线（类似于3D凹陷效果） */
border-style: inset;
/* 设置元素的边框样式为突出线（类似于3D突出效果） */
border-style: outset;
/* 设置元素的边框样式为自定义样式（需要使用border-image属性） */
border-style: solid;
border-image: url(border.png) 30 round;
/* 设置元素的边框宽度为1像素 */
border-width: 1px;
/* 设置元素的边框颜色为红色 */
border-color: red;
/* 设置元素的边框样式为虚线、宽度为2像素、颜色为蓝色 */
border: 2px dashed blue;9 复合选择器
复合选择器是由多个简单选择器组合而成的选择器，用于选择满足多个条件的元素。以下是一些常见的复合选择器：
1. 后代选择器（Descendant Selector）：使用空格分隔的两个或多个简单选择器，选择满足条件的后代元素。
div p {
/* 选择div元素内的所有p元素 */
}2. 子元素选择器（Child Selector）：使用大于号（>）分隔的两个简单选择器，选择满足条件的直接子元素。
div > p {
/* 选择div元素的直接子元素p */
}3. 相邻兄弟选择器（Adjacent Sibling Selector）：使用加号（+）分隔的两个简单选择器，选择满足条件的紧邻在一起的兄弟元素。
h1 + p {
/* 选择紧跟在h1元素后的p元素 */
}4. 通用兄弟选择器（General Sibling Selector）：使用波浪号（~）分隔的两个简单选择器，选择满足条件的所有兄弟元素。
h1 ~ p {
/* 选择h1元素后的所有p元素 */
}5. 直接相邻选择器（Adjacent Selector）：使用加号（+）分隔的两个简单选择器，选择满足条件的紧邻在一起且前一个元素是指定元素的元素。
input[type="checkbox"] + label {
/* 选择紧跟在type为checkbox的input元素后的label元素 */
}三、学习心得
本人认为学习HTML和CSS是非常有趣和有用的。通过学习这两个技术，本人可以创建精美的网页，并为其添加各种样式和效果。
在学习HTML时，本人学习了标记语言的基本概念，包括标签、元素、属性和值。除此之外，本人还学习如何使用这些标记来创建标题、段落、链接、图像等常见的网页元素。此外，本人还学习了如何组织网页结构，包括使用列表、表格和div等元素。
学习CSS时，本人学习了如何使用样式规则来定义网页的外观。并学习了如何选择元素并为其应用样式，包括颜色、字体、大小、背景和边框等。此外，本人还学习如何使用布局技术来控制元素在网页中的位置和大小，包括浮动、定位和弹性布局等。
在学习的过程中，本人发现练习非常重要。通过编写实际的网页代码并应用样式，能更好地理解和掌握这些技术。同时，阅读相关的文档和教程也是很有帮助的，可以帮助自己深入了解这些技术的特性和用法。
总的来说，学习HTML和CSS是一个很好的开始，无论是为了搭建个人网站，还是为了进一步学习更高级的前端开发技术，这些基础知识都是必不可少的。本人相信通过不断练习和实践，会逐渐掌握这些技术，并能够创建出令人惊叹的网页作品。
1505
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
