最全HTML5+CSS3
找一个网页练几遍会比只看会好很多。
1HTML
1.1HTML简要介绍
HTML（HyperText Markup Language）是一种用于创建网页结构的标记语言。它使用标签来定义网页中的元素和内容。HTML标签由尖括号包围，标签通常成对出现，包含一个开标签和一个闭标签。开标签指示元素的开始，闭标签指示元素的结束。
HTML提供了许多不同类型的元素，用于创建网页的各种内容，例如标题、段落、列表、图像、链接等。每个HTML元素都可以使用属性来定义其特定的属性和行为。属性为元素提供了更多的信息和功能，例如设置元素的样式、链接目标、图像路径等。
通过使用HTML标签和属性，可以创建具有结构、样式和交互功能的网页。HTML作为网页的基础语言，常常与CSS（层叠样式表）和JavaScript等其他技术结合使用，以实现更丰富和复杂的网页功能和效果。
总而言之，HTML是一种用于创建网页结构的标记语言，通过使用标签和属性来定义网页的各种元素和内容。它是构建互联网世界的重要基石之一。
1.2HTML标签类型
1.2.1常规标记/双标记
| 标签 | 作用 |
|---|---|
<div></div> | 一个文档中的分区或节 |
<span></span> | 一个行内元素，用于对文本或其他元素进行分组或设置样式 |
<a></a> | 超链接 |
<table></table> | 表格 |
<tr></tr> | 表中的行 |
<td></td> | 表中的单元格 |
<from></from> | 表单 |
<h1></h1> ... <h6></h6> | 标题 |
<p></p> | 一个段落 |
<b></b> | 字体加粗 |
<strong></strong> | 强调 |
<i></i> | 倾斜文本 |
<em><em> | 倾斜强调文本 |
<s></s> | 删除线 |
<del></del> | 删除线 |
<u></u> | 下划线 |
<sub></sub> | 下标 |
<sup></sup> | 上标 |
<ul></ul> | 无序列表 |
<ol></ol> | 有序列表 |
<di></di> | 自定义列表 |
<li></li> | 在无序/有序列表中 |
<dt></dt> | 可以是文字也可以图 |
<di></di> | 相关文字 |
<textarea></textarea> | 多行文本输入 |
<select></select> | 多行文本输入 |
这只是一小部分双标记的示例，HTML中还有许多其他的双标记标签可用于不同的目的。
1.2.2空标记/单标记
| 标签 | 作用 |
|---|---|
<br/> | 换行 |
<hr/> | 水平分割线 |
<img/> | 图像 |
<input/> | 输入框 |
<meta/> | 元数据（通常放在头部） |
<link/> | 外部资源的引用（通常放在头部） |
<base/> | 基准URL（通常放在头部） |
<col/> | 表格的列 |
<frame/> | 框架 |
<area/> | 图像映射的一个区域 |
<param/> | 嵌入对象的参数 |
<track/> | 媒体轨道） |
<wbr/> | 可能的位置进行换行（仅在必要时换行） |
<command/> | 命令按钮 |
<keygen/> | 密钥对生成器 |
<source/> | 媒体资源的来源 |
<track/> | 音视频元素的轨道 |
| 这些是常见的单标记，还有更多其他的单标记，具体使用时需根据需求选择合适的标记。 |
2CSS
2.1CSS简介
CSS，即层叠样式表（Cascading Style Sheets），是一种用于描述网页内容样式、布局和表现的标记语言。它与HTML（超文本标记语言）一起作为构建网页的基本技术之一。
CSS的主要功能是将样式应用于HTML文档中的元素，从而控制这些元素的外观和布局。它可以通过选择器定位特定的HTML元素，并为其应用样式规则，包括字体样式、颜色、背景、边框、间距和布局等。
CSS有多个版本，包括CSS1、CSS2、CSS3等。不同的版本在功能和语法上有一些区别。CSS3引入了许多新的功能和选择器，如媒体查询、动画、过渡、阴影和弹性布局等。它也更好地支持了响应式设计和移动设备。
虽然CSS3是最新的版本，但并不是所有浏览器都支持所有的CSS3功能。这意味着你可能需要根据目标浏览器的兼容性来选择使用哪些CSS3功能。为了确保在不同浏览器上获得一致的样式体验，开发者经常使用浏览器厂商前缀（如-webkit-、-moz-、-ms-等）来兼容不同浏览器。
除了不同浏览器之间的兼容性问题，一些旧版本的浏览器（如IE6）可能不支持某些CSS功能，或者支持的方式与标准不一致。为了解决这个问题，开发者可能需要使用垫片（polyfills）或其他替代解决方案来确保在低版本浏览器上的兼容性。
**总的来说，HTML主要是用来定框架，而CSS是布局和美化。**有些浏览器不兼容的原理，可以通过网站(https://caniuse.com/)来进行查询
2.2CSS代码全集
2.2.1一般共同具备的属性
一般共同具备属性的如下
color属性：可以接受颜色的属性值，如十六进制值（#000000），RGB值（rgb(0,0,0)），颜色关键字（red），或者HSL值（hsl(0, 100%, 50%)）。
background属性：可以接受背景颜色、图片地址或者渐变等属性值。font-family属性：可以接受字体名称或字体族名称的属性值，如Arial,Helvetica。
font-size属性：可以接受像素(px)、百分比(%)或其他长度单位（emrem）的属性值。
width和height属性：可以接受像素(px)、百分比(%)或其他长度单位（emrem）的属性值。
display属性：可以接受多种属性值，如block、inline、flex、grid等用于控制元素的布局和显示。
position属性：可以接受static、relative、absolute、fixed等用于控制元素的定位方式。
margin和padding属性：可以接受像素(px)、百分比(%)或其他长度单位（em，rem）的属性值，用于控制元素之间的间距。
border属性：可以接受
border-width、border-style、border-color的组合属性值，用于控制元素的边框。
text-align属性：可以接受left、right、center等值，用于控制文本的对齐方式。
2.2.2样式优先级和选择器
2.2.2.1样式优先级
- 总：一般是行内样式表>内部样式表>外部样式表(仅次于是同一个标签如果是有一个特别的标签会把它保留，也可以通过
!important来改变优先级） - 详：在HTML中，有三种方式来应用样式表：行内样式表、内部样式表和外部样式表。
行内样式表是直接应用于HTML元素的style属性中的样式。这种方式的优先级最高，会覆盖其他样式。例如：
<p style="color: red;">这是一个红色的段落。</p>
内部样式表是在HTML文档的标签中使用
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>这是一个蓝色的段落。</p>
</body>
外部样式表是在独立的CSS文件中定义的样式，并通过标签引入到HTML文档中。这种方式的优先级最低，会被内部样式表和行内样式表所覆盖。例如：
**<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>这是一个样式来自外部样式表的段落。</p>
</body>**
综上所述，行内样式表具有最高的优先级，其次是内部样式表，最低的优先级是外部样式表。如果存在多个样式定义，并且具有相同的优先级，则后定义的样式会覆盖先定义的样式。
2.2.2.2选择器
- 元素选择器：使用元素名称作为选择器，例如p选择所有段落元素。
- 类选择器：使用类名作为选择器，以点号开头，例如.class选择所有类名为class的元素。
- ID选择器：使用元素的ID属性作为选择器，以井号开头，例如#id选择具有特定ID的元素。
- 通配选择器：使用星号作为选择器，选择所有元素。
- 后代选择器：使用空格分隔多个选择器，选择指定元素的后代元素，例如div p选择所有在div内部的段落元素。
- 子元素选择器：使用大于号(>)分隔多个选择器，选择指定元素的直接子元素，例如div > p选择所有直接在div内部的段落元素。
- 伪类选择器：使用冒号(:)和关键字选择元素的特定状态或位置，例如:hover选择鼠标悬停在元素上时的样式。
- 属性选择器：使用方括号([])选择具有特定属性或属性值的元素，例如[type=“text”]选择所有type属性值为text的元素。
- 组合选择器：通过使用逗号分隔多个选择器，选择匹配任意一个选择器的元素，例如h1, h2选择所有h1和h2元素。
- 直接相邻选择器：使用加号(+)选择紧接在另一个元素之后的元素，例如h1 + p选择紧接在h1元素后的段落元素。
2.2.3常见应用
通用：
- 去除内外边距
* {
margin: 0;<!--外边距-->
padding: 0;<!--内边距-->
}
- 设置body属性值
body {
background-color: #f0f0f0;<!-- body的背景颜色 -->
font-size: 16px;<!-- 字体大小-->
color: #333;<!-- 字体颜色-->
font-family: SF Pro Display",Roboto,Noto,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;<!-- 字体家族 -->
}
（注意：在HTML中，注释是用<!-- -->包围的；在CSS中，注释是用/**/包围的。）
这里使用<!-- -->不好显示，所用改用了/**/
一般：
- 文本常见属性
font-family: Arial, sans-serif; /*（字体系列）：设置元素的字体系列。常用值有字体名称、引号包围的字体系列名称列表 */`
font-size: 16px;/* （字体大小）：设置元素的字体大小。常用值有绝对大小（像素、英寸等）和相对大小（em、rem等） */
font-weight: bold;/*（字体粗细）：设置元素的字体粗细。常用值有normal（标准）、bold（粗体）和数字（100 - 900）等 */
font-style: italic;/*（字体样式）：设置元素的字体样式。常用值有normal（正常）、italic（斜体）和oblique（倾斜）等*/
font-variant: small-caps;/*（小型大写字母）：设置元素的小型大写字母显示。常用值有normal（正常）和small-caps（小型大写字母）等 */
line-height: 1.5;/* （行高）：设置元素的行高。常用值有数字、百分比和normal（根据字体自动计算）等*/
letter-spacing: 2px;/*（字间距）：设置元素的字间距。常用值有正负像素值和normal（默认间距）等*/
word-spacing: 4px;/*（词间距）：设置元素的词间距。常用值有正负像素值和normal（默认间距）等*/
line-height: 1.5;/*（行高）*/
text-align: center;/*（文本对齐）*/
text-decoration: underline;/*（文本修饰）*/
text-transform: uppercase;/*文本大小写转换*/
text-shadow: 2px 2px 4px gray;/*文本阴影效果*/
white-space: nowrap;/*文本空白处理方式*/
图片相属性
background-image（背景图片）：用于设置元素的背景图像。可以使用相对或绝对路径指定图像的位置。
width（宽度）和 height（高度）：用于设置图片的宽度和高度。可以使用像素（px）、百分比（%）或其他单位进行指定。
object-fit（对象适应）：用于指定图像应如何填充其容器，并保持其宽高比。常见取值有：
fill：拉伸图片以填充容器的整个区域，不保持宽高比。
contain：将图像缩放至适合容器，并保持其原始宽高比，可能带有空白区域。
cover：将图像缩放至完全覆盖容器，可能会裁剪图像以适应容器。
none：图像保持其原始大小，不进行调整。
object-position（对象位置）：用于指定图像在其容器中的位置。可以使用关键字（如top、bottom、left、right）或百分比值进行指定。
display（显示方式）：用于设置图像的显示方式。常见取值有：
block：将图像显示为块级元素，使其在独占一行。
inline：将图像显示为内联元素，与其他文本或元素在同一行显示。
inline-block：将图像显示为内联块级元素，与其他文本或元素在同一行显示，并可以设置宽度与高度。
位置相关属性
CSS3中有几个常见的位置属性，包括：
position（定位属性）：用于指定元素的定位方式。
常见的取值有：
static（默认值）：元素正常出现在文档流中。
relative：相对于元素原本的位置进行定位，通过设置偏移量（top、right、bottom、left）来调整位置。
absolute：相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档进行定位。
fixed：相对于视口进行定位，元素的位置在滚动时不会改变。
sticky：在特定的滚动位置生效，相对于父容器或视口进行定位。
top、right、bottom、left（偏移属性）：用于相对定位（position: relative）或绝对定位（position: absolute）的元素，通过设置值来调整元素相对于其原始位置的偏移量。
float（浮动属性）：用于指定元素的浮动方式。
常见取值有：
left：元素向左浮动。
right：元素向右浮动。
none（默认值）：元素不浮动，正常出现在文档流中。
clear（清除属性）：用于指定元素的清除方式，以防止元素受到浮动元素的影响。常见取值有：
left：元素不允许左侧有浮动元素。
right：元素不允许右侧有浮动元素。
both：元素不允许两侧有浮动元素。
none（默认值）：元素不受限制，可以与浮动元素共存。
以上是一些常见的CSS3位置属性，通过它们可以实现对元素的定位、浮动和清除等效果
盒子
margin（外边距）：用于设置元素的外边距，可以使用简写形式同时设置上、右、下、左四个方向的外边距，也可以使用单独的属性进行设置（如margin-top、margin-right、margin-bottom、margin-left）。
padding（内边距）：用于设置元素的内边距，同样可以使用简写形式或单独的属性进行设置。
border（边框）：用于设置元素的边框，可以使用简写形式同时设置边框的样式、宽度和颜色，也可以使用单独的属性进行设置（如border-top、border-right、border-bottom、border-left）。
box-shadow（盒子阴影）：用于向元素添加阴影效果，可以使用简写形式同时设置阴影的偏移、模糊半径、扩展半径和颜色，也可以使用单独的属性进行设置（如box-shadow-offset、box-shadow-blur、box-shadow-spread、box-shadow-color）。
有关对齐的属性
一.水平对齐的方式
对于文本对齐：
**text-align：**用于控制文本在容器中的水平对齐方式，可以应用于块级元素和内联元素。常见的值包括：
left：左对齐文本。
right：右对齐文本。
center：居中对齐文本。
justify：两端对齐文本，即在容器内平均分布文本，并在行的结束处添加额外的空格（除了最后一行）。
内容对齐（容器内项目的对齐方式）：
对于弹性布局（Flexbox）：
**justify-content：**用于设置容器内项目的水平对齐方式。常见的值包括：
flex-start：项目紧靠容器的起始位置。
flex-end：项目紧靠容器的结束位置。
center：项目在容器内居中对齐。
space-between：项目均匀分布在容器内，两个项目之间的间隔相等。
space-around：项目均匀分布在容器内，项目周围的间隔相等。
space-evenly：项目均匀分布在容器内，项目之间和周围的间隔相等。
对于网格布局（Grid Layout）：
**justify-items：**用于设置网格项目在网格容器内的水平对齐方式。常见的值包括：
start：项目紧靠网格容器的起始位置。
end：项目紧靠网格容器的结束位置。
center：项目在网格容器内居中对齐。
stretch：项目拉伸以填充网格单元格。
justify-content：用于设置网格容器内网格轨道的对齐方式。常见的值与弹性布局相同。
二.垂直对齐
vertical-align: 该属性用于控制行内元素在垂直方向上的对齐方式。它可以应用于行内元素和表格单元格，并且适用于与基线对齐的其他行内元素。其中一些常用的取值包括：
baseline: 默认值，元素与基线对齐。
top: 元素与容器顶部对齐。
middle: 元素在容器中垂直居中对齐。
bottom: 元素与容器底部对齐。
text-top: 元素与文本顶部对齐。
text-bottom: 元素与文本底部对齐。
align-self: 如果你正在使用 Flexbox 布局，可以使用该属性控制单个项目在交叉轴上的对齐方式。它适用于 Flex 容器的子项目，并且可以与以下取值结合使用：
auto: 元素继承父元素的 align-items 属性。如果没有父元素设置 align-items，则为 stretch。
flex-start: 元素与交叉轴的起始位置对齐。
flex-end: 元素与交叉轴的结束位置对齐。
center: 元素在交叉轴上
总的来说，属性分为位置，大小，颜色，变化。先注意大的方向再关注小的细节。
1182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
