一、HTML页面标签
<!DOCTYPE>：声明必须是HTML文档的第一行，用来指示浏览器关于页面使用哪个HTML版本进行编译的指令。
<html></html>：用来声明是一个HTML文档。 <head></head>：用于定义文档的头部，它是所有头部元素的容器。
<meta></meta>：定义关于 HTML 文档的元信息。
<title></title> ：定义文档的标题，在所有 HTML 文档中是必需的。
<body></body>：body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。
二、HTML基本标签
<h1>~<h6>：标题标签，是标明文章、作品等内容主题的简短语句。
<p></p>：段落标签，在网页中描述一段相对完整的内容。
<em></em>：斜体标签，用于实现倾斜的字体样式。
<strong></strong>：粗体标签，实现加粗的字体样式。
<hr>：水平线标签，在网页中加入平行线用来区分上下文。
<br>：换行标签，用于跳到下一个新行。
<img>：图像标签，用于在网页中添加图片。
<a></a>：超链接标签，HTML 使用超级链接与网络上的另一个文档相连。点击链接可以从一个页面跳转到另一个页面。 <div></div>：块标签，定义 HTML 文档中的一个分隔区块或者一个区域部分。常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。
<span></span>： 用于对文档中的行内元素进行组合，提供了一种将文本的一部分或者文档的一部分独立出来的方式。当对它应用样式时，它才会产生视觉上的变化。
<link>：定义文档与外部资源的关系，可用来导入外部CSS文件。
<style></style> ：定义 HTML 文档的样式信息。
<audio></audio>：定义音频内容。
<video></video>：定义视频内容。
拓展：
① b标签和strong标签 相同点：都是文字加粗标签。二者区别是：strong标签是为了突出重点。 ② p标签和span标签都是包裹文字的标签。二者区别是：p标签会自动换行，而span标签不会自动换行。一般短的语句可以用span标签包裹，长点的用p标签包裹。 ③ br换行标签和hr分隔符标签 二者区别是：br用于跳到下一个新行；hr是在网页中加入平行线用来区分上下文。 ④ i标签和em标签。相同点：都是斜体标签，使文字呈现倾斜效果；二者区别：em标签更容易被浏览器识别到。
⑤ a标签（链接、超链接、锚点标签）
⑤.1 超链接标签 如：<a href="https://www.baidu.com/" name="baidu" target="_blank" title="百度首页" accesskey="s">百度一下</a>
其中， a:a签（超链接标签） href属性:超链接需要跳转的地址路径 name属性：链接名称（一般用于锚点链接捆绑跳转的链接） title属性：链接的提示文字（鼠标悬停时的提示） target属性：链接目标窗口，链接在什么地方打开，网页位置 _self属性值:连接在当前页面打开（这是默认值，在没有指定属性值的情况下，默认是_self在当前页面打开）
_blank属性值：在新窗口打开（点几下打开几个新窗口）
_new属性值：在新窗口打开（无论点几下只打开一个，除特殊商品网站如某东页面强制要求，点几下会开几个页面，为了增加访问量）
accesskey属性：链接热键（accesskey属性的值设置为哪个字母，就用Alt+这个值的字母可以自动跳转链接）
⑤.2 锚点链接 创建锚点链接，基本格式：<a name="锚点名称">链接对象名称</a>
建立链接，基本格式：<a href="#跳转的锚点名称" name="锚点名称">链接对象名称</a>
注1：<a href="#跳转的锚点名称" name="锚点名称">链接对象名称</a> ； 注2：锚点链接不仅可以在同一个页面中互跳，也可跨页面互跳。
⑤.3 空链接： 空连接：指目标链接为空，用“#”表示。 特点：点击空连接后，页面仍然会停留在当前页面。
格式：<a href="#">我是空连接</a> 。 注：空连接中，href属性值就只写个#，空连接不跳转。
⑥ 图片标签：
格式：<img src="./img/1.jpg" alt="图片加载失败" title="这是漂亮的小姐姐" width="200px" height="200px">
img： 指图片标签
src： 指图片地址属性：用于放图片地址
alt：当图片路径出错时，alt文字提示就会显现出来
title：图片的描述，鼠标放在图片上描述图片的文字就会显现出来
width、height宽度和高度属性，属性值是数字，单位一般用px像素。（可在img图片标签中控制图片大小）
⑦ 引入图片的路径
1.相对路径：【./在相同文件夹下找目录文件。】【…/上一级文件夹里找目录文件】。
2.绝对路径：从电脑里C/D/F盘开始的路径。不怎么常用，因为图片在自己电脑里，这样不利于别人使用
3.网络地址：直接找一个网上的图片链接地址。局限性是在有网，以及图片在网上未删除时查看
三、HTML列表和表格标签
<ul></ul>：用来声明无序列表，表示一个无序列表的开始和结束。必须和<li>标签配合使用，不能单独使用。
<ol></ol>：用来声明有序列表，表示一个有序列表的开始和结束。必须和<li>标签配合使用，不能单独使用。
<li></li>：用来表示列表项，在一个列表中可以包含多个列表项。
<dl></dl>：用来声明自定义列表。<dl>标签和<dt>、<dd>标签必须配合使用，不能单独使用。 注：<dl>标签内部不能存在任何其他标签。
<dt></dt>：用来表示列表标题。
<dd></dd>：用来表示列表内容。
<table></table>：表格标签，用来定义表格。
<tr></tr>：用来定义表格由若干行组成。
<th></th>：用来定义表格中的表头单元格。
<td></td>：用来定义每行被分割为若干单元格。
拓展：
无序列表标签<ul>
1.无序列表标签用<ul>标记，子元素是<li>标签列表项
2.可用快捷方式生成多个<li>子元素列表标签。如：ul>li*3；li*6。等就会生成几个li子列表项。
3.在<ul>标签里面，可用type属性修改子列表项<li>前面的黑点类型<ul type="disC">
-默认值：disc（实心圆） 空心点：circle
实心方块 ：square
不显示符号：none
有序列表标签<ol>
1.有序列表标签用<ol>标记，子元素是<li>标签列表项
2.通过type属性修改排序类型：默认是阿拉伯数字1开始排序
<ol type="a"><!--用小写字母a开始排序-->- type属性值可为：列举几种
- a用小写字母开始排序
- A用大写字母开始排序
- i/I 用罗马字母开始排序
3.使有序列表前面无符号显示
注意，有序列表顾名思义就是要有顺序，如果非要有序列表没有顺序的话，它是不支持type属性的值为none的。那么如果硬要让有序列表前面不显示符号，可以给它加一个list-style的样式，属性值
为noe。
四、HTML表单标签
<form></form>：表单标签，用于创建供用户输入的 HTML 表单。
<input></input>：规定了用户可以在其中输入数据的输入字段，type类型可包括text、number、tel、range、radio、checkbox、email、password、search等。<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。
<label></label> ：为 <input>元素定义标注（标记），<label> 元素不会向用户呈现任何特殊效果，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<select></select>：下拉列表标签，用来创建下拉列表。
<option></option>：选项标签，用来定义列表中的可用选项。
<textarea></textarea>：文本域标签，定义一个多行的文本输入控件。
<filedset></filedset>：用来对表单中的相关元素进行分组。需要和<legend>标签配合使用。
<legend></legend>：为 <fieldset> 元素定义标题。
<button></button> ：定义一个按钮，在 <button> 元素内部可以放置内容，比如文本或图像，这是该元素与使用 <input> 元素创建的按钮之间的不同之处。
CSS常用样式
css的三大特性
继承性 ：文本样式和字体样式的继承。 （注：大多数文本样式可被继承，但a标签不会继承字体颜色）
堆叠性：如果样式属性不冲突，则都会作用到这个鼠标上
优先级
高 内联样式
中 内部样式，外部样式-------就近原则
低 浏览器默认样式
在 html 中使用 css 有三种方式：
1. 行内样式（内联样式） 在 HTML 元素中直接使用 "style" 属性
<p style="color:red;background-color:yellow;font-size: 50px;">只对当前元素生效，代码没有可重用性，内联样式默认优先级最高
2. 内部样式
在head标签中，编写style标签，在style标签内部，编写属性
选择器{样式声明;样式声明…}
选择器：定义页面中使用这个样式的元素条件
<head>
<style>
p {
color:purple;
background-color: pink;
}
</style>
</head>
3. 外部样式
使用单独的 .CSS 文件定义，然后在页面中使用 link标签 或 @import指令 引入
- 使用
link标签链接
<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">
@import指令导入外部样式文件<style> @import "CSS样式文件路径"; @import url(CSS样式文件路径); </style>
1 字体样式
| 分类 | 描述 |
|---|---|
| font | 缩写。字体属性，包含字体风格、字体粗细、字体大小、字体类型，属性值之间有先后顺序 |
| font-family | 字体类型 |
| font-size | 字体大小 |
| font-style | 字体风格 |
| font-weight | 字体粗细 |
2 文本样式
| 属性 | 含义 | 说明 |
|---|---|---|
| color | 设置文本颜色 | |
| text-align | 设置元素水平对齐方式 | 取值：left、center、right |
| vertical-align | 垂直对齐方式 | 取值：top、middle、bottom可以用于图片和文字的对齐方式 |
| text-indent | 设置首行文本的缩进 | |
| line-height | 设置文本的行高 | 行之间的高度 |
| text-decoration | 设置文本的修饰 | 取值：underline、overline、line-through |
| text-transform | 字母大小写转换 | 取值：lowercase、uppercase、capitalize |
| letter-spacing | 字符间距 | |
| word-spacing | 单词间距 | 只对英文有效 |
| white-space | 空白的处理方式 | 文本超出后是否换行，取值：nowrap |
2.1 text-decoration 文本装饰
| 分类 | 描述 |
|---|---|
| none | 默认，标准文本 |
| underline | 定义文本下划线 |
| overline | 定义文本上划线 |
| line-through | 定义穿过文本的一条线 |
3 鼠标样式（cursor）
| 分类 | 描述 |
|---|---|
| default | 默认光标 |
| help | 提示可用的帮助 |
| text | 指示文档 |
| pointer | 超链接指针 |
| wait | 等待状态 |
| crosshair | 鼠标呈现十字状 |
4 背景样式
4.1 background-repeat 背景重复方式
| 分类 | 描述 |
|---|---|
| no-repeat | 不重复 |
| repeat-x | 水平重复 |
| repeat-y | 垂直重复 |
| repeat | 默认重复 |
4.2 background-position 背景定位
| 分类 | 描述 |
|---|---|
| 水平方向 | left、center、right |
| 垂直方向 | top、center、bottom |
5 列表样式
| 分类 | 描述 |
|---|---|
| list-style | 列表属性，包含列表类型、自定义列表标记图片、列表定位 |
| list-style-type | 列表类型 |
| list-style-image | 自定义列表标记图片 |
| list-style-position | 列表定位 |
6 list-style-type 列表类型
| 分类 | 描述 |
|---|---|
| disc | 实体圆心（默认） |
| circle | 空心圆 |
| square | 实体方心 |
| none | 无列表标记 |
6.1 list-style-position 列表定位
| 分类 | 描述 |
|---|---|
| outside | 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐 |
| inside | 列表项目标记放置在文本以内，且环绕文本根据标记对齐 |
7 CSS伪类
| 分类 | 描述 |
|---|---|
| link | 单击访问前 |
| visited | 单击访问后 |
| hover | 鼠标悬浮其上 |
| active | 单击未释放 |
二、盒子模型
1 边框（border）
1.1 边框样式
| 分类 | 描述 |
|---|---|
| border-top-style | 上边框样式 |
| border-right-style | 右边框样式 |
| border-bottom-style | 下边框样式 |
| border-left-style | 左边框样式 |
| border-style | 同时设置四个边框样式 |
1.1.1 边框样式值
| 分类 | 描述 |
|---|---|
| none | 无边框 |
| solid | 实线边框 |
| dashed | 虚线边框 |
| dotted | 点状边框 |
| double | 双线边框 |
| hidden | 与none相同，应用于解决边框冲突 |
1.2 边框颜色
| 分类 | 描述 |
|---|---|
| border-top-color | 上边框颜色 |
| border-right-color | 右边框颜色 |
| border-bottom-color | 下边框颜色 |
| border-left-color | 左边框颜色 |
| border-color | 同时设置四个边框颜色 |
1.3 边框粗细
| 分类 | 描述 |
|---|---|
| border-top-width | 上边框粗细 |
| border-right-width | 右边框粗细 |
| border-bottom-width | 下边框粗细 |
| border-left-width | 左边框粗细 |
| border-width | 同时设置四个边框粗细 |
1.4 边框简写
2 内边距（padding）
| 分类 | 描述 |
|---|---|
| padding-top | 顶部内边距 |
| padding-right | 右侧内边距 |
| padding-bottom | 底部内边距 |
| padding-left | 左侧内边距 |
| padding | 同时设置顶部、右侧、底部、左侧内边距 |
3 外边距 (margin)
| 分类 | 描述 |
|---|---|
| margin-top | 顶部外边距 |
| margin-bottom | 底部外边距 |
| margin-right | 右侧外边距 |
| margin-left | 左侧外边距 |
| margin | 同时设置顶部、右侧、底部、左侧外边距 |
4 box-sizing属性
5 display属性
作用：控制元素的显示和隐藏，块级元素和内联（行内）元素的转变。
三、 CSS浮动
1 float属性
作用：css样式中的定位属性，用于设置标签对象的浮动布局。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
| 属性值 | 描述 |
|---|---|
| none | 默认值，元素不浮动 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
2 clear属性
作用：clear属性规定了在元素的哪一侧不允许有浮动
| 属性值 | 描述 |
|---|---|
| none | 默认值，允许浮动元素出现在两侧 |
| left | 在左侧不允许浮动元素 |
| right | 在右侧不允许浮动元素 |
| both | 在左右两侧均不允许浮动元素 |
3 overflow属性
作用：设置当div容器中的内容超出div高度时的布局，使用overflow属性扩展盒子高度减少代码量，也减少了空的HTML标签，使代码更加简洁，清晰，从而提高了代码的可读性和网页性能。
| 属性值 | 描述 |
|---|---|
| auto | 自适应，如果内容被修剪，则浏览器会显示滚动条来查看超出内容 |
| scroll | 超出内容会被修剪，但是浏览器会显示滚动条以便查看超出内容 |
| hidden | 超出内容会被修剪，并且超出内容是不可见的，隐藏的 |
| visible | 超出内容不会被修剪，会正常显示在容器外部 |
四、CSS中的定位Positioning CSS中的定位用于控制页面元素的布局，通过position属性实现对元素的定位，五种定位方式：
| 取值 | 含义 | 说明 |
|---|---|---|
| static | 默认值 | 这是默认定位方式，按照常规文档流进行显示 |
| relative | 相对定位 | 相对于标签原来的位置(正常位置)进行的定位 |
| absolute | 绝对定位 | 相对于最近的非静态定位的父元素进行定位。 |
| fixed | 固定定位 | 相对于浏览器窗品进行定位，无论滚动条如何滚动都会固定在屏幕的指定位置。 |
| Sticky | 粘性定位 | 根据用户的滚动位置在相对和固定定位之间切换。 |
1.1 相对定位
/* 相对定位 */
.relative {
position: relative;
top: 10px;
left: 20px;
}| 分类 | 描述 |
|---|---|
| top | 相对自身原来位置向顶部进行偏移 |
| right | 相对自身原来位置向右侧进行偏移 |
| left | 相对自身原来位置向左侧进行偏移 |
| bottom | 相对自身原来位置向底部进行偏移 |
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
1.2 绝对定位
/* 绝对定位 */
.absolute {
position: absolute;
top: 50px;
right: 30px;
}
1.3 固定定位
/* 固定定位 */
.fixed {
position: fixed;
bottom: 0;
left: 0;
}
1.4 粘性定位
/* 粘性定位 */
.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0; /* 当向下滚动超过此元素时，它将固定在位置 */
}
2 z-index属性
z-index属性：默认值为0。 作用：调整元素定位时重叠层的上下位置。
设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系。
z-index值大的层位于其值小的层上方。
总结：
position 属性规定应用于元素的定位方法的类型。
五、 其他属性
1 transition属性
作用：设置元素的过渡效果。
2 transform属性
作用：应用于元素的2D或3D转换。可将元素旋转、缩放、移动、倾斜等。
3 border-radius属性
作用：设置元素的外边框圆角。
1140
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
