- 1CMake系列（十） CMake include的使用_utils.cmake
- 2关于QGraphicsPixmapItem背景透明和无法拖曳问题_qgraphicspixmapitem 透明度
- 3蓝桥杯刷题--python-12
- 4Linux网络配置_linux /etc/sysconfig/network-scripts/ifcfg-ens32 d
- 5SE-Net网络详解
- 6无法从“3.11.3 (全局)”环境源解析导入“PIL”_无法从源解析导入
- 7动态规划之解码方法【LeetCode】
- 8AI 大模型面试指南（含答案）大放送！
- 9机器学习实战：带你进入AI世界！
- 10AIGC启示录：深度解析AIGC技术的现代性与系统性的奇幻旅程_通往aigc之路
html与css 知识总结_csdnhtmlcss
赞
踩
HTML
html结构
HTML结构由<html>、<head>、<body>等几部分组成
html>:定义整个html文档
head>:包含所有头部标签
在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
body>:定义html主体
html标签
html标签都是成对出现的，分为单标签和双标签
开始标签被称为开放标签，结束标签被称为闭合标签
标题标签
标题标签通过<h1>-<h6>、<title>标签定义
<title>标题</title><h1>标题一</h1><h2>标题二</h2><h3>标题三</h3>....meta标签
页面的元信息通过<meta/>标签定义，可重复出现在<head>标签中
使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。
段落标签
段落标签通过<p>标签定义
<p>这是一段文字</p><p>这还是一段文字</p>hr 标签
创建水平分隔线通过<hr/>标签定义，hr元素可用于分隔内容
<p>这是一段文字</p><hr/><p>这还是一段文字</p>br 标签
html 换行通过 br/>标签定义
<p>这是<br/>一段<br/>文字</p>div标签
文档中的分区或节通过<div>标签定义，div>标签是块级元素，可以把3文档分割成独立、不同的部分
<div class="news"> <h2>标题3</h2> <p>这是一段文字</p> ...</div>mark标签
使文本中高亮显示某些字符通过<mark>标签定义
这是<mark>一段</mark>文字cite标签
引用文档参考文献的说明通过<cite>标签定义，被定义的文档内容将以斜体的方式显示在页面中
<p>这是<cite>一段文字</cite></p>超链接标签
链接标签通过<a>标签定义 href
<a href="https://www.w3school.com.cn/html/html_basic.asp">这是一条链接</a>link标签
链接文档与外部资源之间的关系通过<link>标签定义，通常用于CSS链接样式表
<link rel="stylesheet" type="text/css" href="mystyle.css">type类型
表格标签
html创建表格通过<table>标签定义，每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。
<tr>标签：表格中的一行 <td>标签：表格中的一列 <td>标签：表格中的第一行和第一列 即数据单元格的内容。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等
<table border="1"> <tr> <td> </td> </tr></table> 空单元格由“&”号开始，然后是空字符nbsp，并以分号结尾“；”
表单标签
html表单通过<form>标签定义，表单用于收集用户输入
<form> 我是个大聪明</form>表单包含的表单元素是指：不同类型的input元素、复选框、单选按钮、提交按钮等等。
input元素：1、text：定义常规的文本输入的单行输入字段
2、radio：定义单选按钮输入（选择多个选择之一）
3、submit：定义提交按钮（提交表单）
<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。
注释：表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。
图像标签
图像标签通过<img>标签定义 支持的格式有：jpg、gif、bmp、和png
<img src="daima.jpg" width="100" height="140" />预留格式
文本预格式化文本通过<pre>标签定义 ，文本中的空格或换行会被保留
<pre> 文本中的 空格或 换行 都会保留</pre>特殊字符标签
| 特殊字符 | 描述 | 字符代码 | 特殊字符 | 描述 | 字符代码 |
|---|---|---|---|---|---|
| 空格符 |  ； | º | 摄氏度 | °； | |
| < | 小于号 | <； | ± | 正负号 | ±； |
| > | 大于号 | >； | x | 乘号 | ×； |
| & | 和号 | &； | ÷ | 除号 | ÷； |
| ￥ | 人民币 | ¥； | ² | 平方² | ²； |
| © | 版权 | ©； | ³ | 立方³ | ³； |
| ® | 注册商标 | ®； |
文本格式化标签
粗体
文字以粗体方式显示 通过<b>、<strong>标签定义
<b>我爱你</b>、<strong>我也爱你</strong>斜体
文字以斜体方式显示 通过<i>、<em>标签定义
<i>你是个傻子</i> 、<em>你也是个傻子</em>删除线
文字以加删除线的方式显示 通过<s>、<del>标签定义
下划线
文字以下划线的方式显示 通过<u>、<ins>标签定义
<u>男神任嘉伦</u>、<ins>我爱任嘉伦</ins>上标
文本以上标方式显示 通过<sub>标签定义
<sup>上标</sup>下标
文本以下标方式显示 通过<sub>标签定义
<sub>下标</sub>字体放大
文档内容放大显示 通过<big>标签定义
<big>字体放大</big>字体缩小
文档内容缩小显示 通过<small>标签定义
<small>字体放大</small>bdo标签
文字方向 通过<bdo>标签定义
<bdo dir="rtl">文本从左到右显示</bdo>html属性
对齐方式
文本的对齐方式通过 align属性定义 对齐方式：靠左、靠右、居中
靠左：<p align="left">这是一段文字</p>靠右：<p align="right">这是一段文字</p>居中：<p align="center">这是一段文字</p>超链接属性
描述链接的目标
<a href="#" target="打开方式" name="页面锚点名称">这是一条链接</a>一、href属性：链接的地址、链接的地址可以是一个网页，也可以是一个视频、图片、音乐等等
二、target属性：作用：定义超链接的打开方式
属性值：1、blank：在一个新窗口中打开链接2、seif（默认值）：在当前新窗口中打开链接
3、_parent：在父窗口中打开页面（框架中使用较多）
4、_top：在顶层窗口中打开文件（框架中使用较多）
三、name属性：指定页面的锚点名称
字体属性
size：字体大小 <font size="14px">color:字体颜色 <font color="red">face:字体 <font face="微软雅黑">表格属性
<table > 属性1="属性值1" 属性2="属性值2"……>表格内容</table>表格属性： 1、width属性：表格的宽度，值可以是像素（px）也可以是父级元素的百分百（%）
2、height属性：表格的高度，值可以是像素（px）也可以是父级元素的百分百（%）
3、border属性：表格的边框
4、align属性：
表格标题属性 位于<table>属性之后，<tr>表格行之前
<caption> 表格标题</caption>表格align属性：1、top：标题放在表格上方
2、bottom：标题放在表格的下方
3、left：标题放在表格的左方
4、right：标题放在表格的右方
横跨两列的单元格：colspan (合并单元格)
<table> <tr> <th colspan="2"></th> </tr></table>横跨两行的单元格：rowspan (合并单元格)
<table> <tr> <th rowspan="2"></th> </tr></table>单元格边距：cell padding
创建单元格内容与其边框之间的空白
<table cell padding="10"> <tr> <th></th> </tr></table>单元格间距：cell spacing
增加单元格之间的距离
<table cell spacing="10"> <tr> <th></th> </tr></table>单元格背景颜色
<table background="red"> <tr> <th></th> </tr></table>单元格单个添加背景颜色
<table ><tr> <td bgcolor="red">First</td> <td>Row</td></tr> <tr> <td bgcolor="pink">Second</td> <td>Row</td></tr></table><tr>属性：每一行<tr>标签内可嵌套多个<td>、<th>
1、bgcolor属性： bgcolor="颜色值"
2、align属性：bottom：靠顶端对齐
top：靠底部对齐
middle：居中对齐
3、valign属性： left：靠左对齐
right：靠右对齐
center：居中对齐
<td>和<th>属性
1、bgcolor：设置单元格背景
2、align：设置单元格对齐方式
3、valign：设置单元格垂直对齐方式
4、width：设置单元格宽度
5、height：设置单元格高度
6、rowspan：设置单元格所占行数
7、colspan：设置单元格所占列数
表单input属性
表单标记<form>
常用属性：一、name：表单名称
二、method：传送数据的方式分为 post 和 get两种方式
1.get方式：会将表单里的内容附加在URL地址后边，所以限制了提交的内容的长度，不超过8192个字符，且不具备保密性
2.post方式：将表单中的数据一并包含在表单主体中，一起传送到服务器中处理，没有数据大小限制
三、action：表单数据的处理程序的URL地址，如果为空则使用当前文档的URL地址，如果表单中不需要使用action属性也要指定3其属性为“no"
四、enctype：设置表单的资料的编码方式
五、target：和超链接的属于类似，用来指定目标窗口
文本输入
<input type="text">大聪明</input>单选按钮输入
<input type="radio" name="大聪明" value="女">大聪明是男的还是女的</input><input type="radio" name="大聪明" value="男">>大聪明是男的还是女的</input>提交按钮
<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。注释
html注释用 <! --注释语句-->
<!--注释语句 -->
C S S
第三章 初始css3
一、结构与分离
是指在网页设计中，HTML标签只用于搭建网页的基本结构，不使用标签属性设置显示样式，所有的样式交由CSS来设置
二、CSS样式规则
选择器{属性1：属性值1；属性2：属性值2；……}
注释：选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式，属性和属性值以“键值对”的形式出现，用英文“:”连接。对个“键值对”之间用英文“;”进行区分 如：h1{color：red；font-size：14px；……}三、引入CSS样式表的方式
css样式表的方式有：行内式、内嵌式、链入式、导入式
1.行内式
也称内联样式，通过标签的 style 属性来设置元素的样式
格式：<标签名 style="属性1：属性值1；属性2：属性值2；……">内容</标签名>2.内嵌式
将CSS代码集中写在HTML文档的<head>头部标签中，并且使用<style>标签 定义
语法： <head> <style type="text/css"> 选择器{属性1：属性值1；属性2：属性值2；……} </style> </head>3.链入式
也叫外链式，是将所有的样式放在一个或多个 以 .CSS 为扩展名的外部样式表文件中，通过<link>标签将外部样式表文件链接到html文档中
语法：<head> <link href="css文件的路径" type="text/css" rel="stylesheet"/> </head> href：定义所链接外部样式表文件的URL，可以是相对路径也可以是绝对路径
type：定义所链接文档的类型
rel：定义当前文档与被链接文档之间的关系，”stylesheet“表示被链接的文档是一个样式表文件
4.导入式
针对外部样式表文件，对html头部文档应用style标签，并在style标签内的开头使用@import 语句，即可导入外部样式表文件
语法：<style type="text/css"> @import url(css文件路径)；或 @import "css文件路径"； /*在此还可以存放其他css样式*/ </style>四、css基础选择器
想将css样式应用于特定的HTML元素中，首先要找到该目标元素，在css中，执行这一任务的样式规则被称为选择器。选择器分为：标签选择器、类选择器、id选择器、通配符选择器
1.标签选择器
是指用html标签名作为选择器，按标签名称分类为页面中某一类标签指定统一的 css样式
语法：标签名{属性1：属性值1；属性2：属性值2；……}2.类选择器
使用 . (英文点号)]()进行标识，后面紧跟类名
语法：.类名{属性1：属性值1；属性2：属性值2；……}3.id选择器
使用”#“进行标识，后面紧跟id名
语法：#id名{属性1：属性值1；属性2：属性值2；……}4.通配符选择器
用”*“号表示，它是所有选择器中作用范围最广的
语法：*{属性1：属性值1；属性2：属性值2；……}五、设置文本样式
css字体样式属性有：font-size、font-family、font-weight、font-style、font、@font-face
1.font-size
设置文档字号，该属性的值可以使用相对长度单位也可使用绝对长度单位
语法：p{font-size：12px；}属性：
#####
2.font-family
用于设置字体，即微软雅黑、宋体、黑体等等
语法：p{fontfamily："微软雅黑"；}注：1、各种字体之间必须使用英文状态下的逗号隔开
2、中文字体需要加英文状态下的引号“，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名称必须位于中文字体名称之前
例如：body{font-family：Arial，"微软雅黑"，"宋体"；/*正确书写*/} body{font-family："微软雅黑"，"宋体"，Arial；/*错误书写*/}3、如果字体中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号
3.font-weight
用以定义字体的粗细
语法：p{font-weight：bold；}| 值 | 描述 |
|---|---|
| normal | 默认值，定义标准的字符 |
| bold | 定义粗体字符 |
| bolder | 定义更粗的字符 |
| lighter | 定义更细的字符 |
| 100~900（100的整数倍） | 定义由粗到细的字符，400等同于normal，700等同于bold， |
#####
4.font-style
用于定义字体风格，如斜体、倾斜或正常字体
语法：p{font-style：italic；}| 值 | 描述 |
|---|---|
| normal | 默认值，浏览器会显示标准的字体样式 |
| italic | 斜体，浏览器会显示斜体的字体样式 |
| oblique | 倾斜，浏览器会显示倾斜的字体样式 |
5.font
用于对字体样式进行综合设置
语法：选择器{font：font-style font-weight font-size/line-height font-family；}使用font属性时必须按照上面的顺序书写，各个属性用空格隔开
6.@font-face
用于定义服务器字体，开发者可以在用户计算机未安装的字体时，使用任意的字体
语法：@font-face{ font-family：字体名称； src：字体路径； }六、文本外观属性
css文本外观属性有：color、letter-spacing、word-spacing、line-height、text-transform、text-decoration、text-align、text-indent、white-space、text-shadow、text-overflow、word-wrap
1.color
用于定义文本颜色
语法：p{color：red；}取值方式：1、预定义颜色值，如red、green、blue
2、十六进制，如#FF0000、#FF6600、#29D794等
3、RGB代码，如红色可以表示为 rgb（255，0，0）或rgb（255%，0%，0%）
2.letter-spacing
用于定义字间距，指字符与字符之间的空白
语法：p{letter-spacing：20px；}3.word-spacing
用于定义英文单词之间的间距，letter-spacing都可设置间距。letter-spacing定义的为字母之间的间距，word-spacing定义的时单词之间的间距
语法：p{word-spacing：20px；}4.line-height
用于设置行间距，即行与行之间的间距
语法：p{line-height：12px；}5.text-transform
用于控制英文字符的大小写
| 值 | 描述 |
|---|---|
| none | 不转换（默认值） |
| capitalize | 首字母大写 |
| uppercase | 全部字符转换为大写 |
| lowercase | 全部字符转换为小写 |
6.text-decoration
用于设置文本的下画线、上画线、删除线等
| 值 | 描述 |
|---|---|
| none | 没有装饰（正常文本默认值） |
| underline | 下画线 |
| overline | 上画线 |
| line-through | 删除线 |
7.text-align
用于设置文本内容的水平对齐
| 值 | 属性 |
|---|---|
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 每一行被展开为宽度相等，左、右外边距是对齐 |
8.text-indent
用于设置首行文本的缩进
属性值可分为不同单位的数值，em字符宽度的倍数或相对于浏览器窗口宽度的百分比%，允许用负值
9.white-space
空白符的处理方式
| 值 | 描述 |
|---|---|
| normal | 常规（默认值）文本中的空格、空行无效，满行（到达区域边界）后自动换行 |
| pre | 预格式化，将文档中的书写格式保留空格、空行，原样显示 |
| nowrap | 空格空行无效，强制文本不能换行，内容超出边界也不会换行，若超出浏览器页面自动增加滚动条 |
10.text-shadow
为页面中的文字添加阴影效果
语法：选择器{text-shadow：h-shadow v-shadow blur color；}h-shadow：用于设置水平阴影的距离v-shadow：用于设置垂直阴影的距离blur：用于设置模糊半径color：用于设置阴影颜色11.text-overflow
用于处理溢出的文本
语法：选择器{text-overflow：属性值；}clip：修建溢出的文本，不显示省略标签“……”ellipsis：用省略标签“……”代替被修建的文本，省略标签插入的位置是最后一个字符12.word-wrap
用于实现长单词和URL地址的自动转换
语法：选择器{word-wrap：属性值；}| 值 | 描述 |
|---|---|
| normal | 只在允许的断字点换行（浏览器保持默认处理） |
| break-word | 在长单词或URL地址内部进行换行 |
第四章 CSS3选择器
一、属性选择器
1、E[att^=value]
E[att^=value]属性选择器：是指选择名称为E的标签，且该标签定义了att属性，att属性值包含前缀为 value的子字符串
如：div[id^=section]表示匹配包含id属性，且id属性值是以“section”字符串开头的div元素2、E[att$=value]
E[att$=value]属性选择器：是指选择名称为E的标签，且该标签定义了att属性，att属性值包含后缀为 value的子字符串
如：div[id$=section]表示匹配包含id属性，且id属性值是以“section”字符串结尾的div元素3、E[att*=value]
E[att*=value]属性选择器：是指选择名称为E的标签，且该标签定义了att属性，att属性值包含value的子字符串
如：div[id*=section]表示匹配包含id属性，且id属性值包含“section”字符串的div元素二、关系选择器
三、兄弟选择器
四、格式化伪类选择器
五、伪元素选择器
第五章 盒子模型
盒子模型就是把HTML页面中的元素看作是一个方形的盒子，每个元素都由元素的内容、内边距（padding）、边框（border）、和外边距（margin）组成
一、盒子模型的相关属性
边框属性包括：边框样式属性、边框宽度属性、边框颜色属性、单侧边框属性、边框的综合属性
1、边框样式属性
border-style 用于设置边框样式属性，单边框样式border-top-style……
| 属性值 | 描述 |
|---|---|
| none | 没有边框，即忽略所有边框的宽度（默认值） |
| solid | 边框为单实线 |
| dashed | 边框为虚线 |
| dotted | 边框为点线 |
| double | 边框为双实线 |
综合边框样式：border-style：上边框样式、右边框样式、下边框样式、左边框样式border-style：上边框样式、左右边框样式、下边框样式border-style：上下边框样式、左右边框样式border-style：上下左右边框样式2、边框宽度属性
border-width 用于设置边框的宽度，取值单位为像素
border-width：上边框宽度、右边框宽度、下边框宽度、左边框宽度border-width：上边框宽度、左右边框宽度、下边框宽度border-width：上下边框宽度、左右边框宽度border-width：上下左右边框宽度3、边框颜色属性
border-color 用于设置边框的颜色
border-color：上边框颜色、右边框颜色、下边框颜色、左边框颜色border-color：上边框颜色、左右边框颜色、下边框颜色border-color：上下边框颜色、左右边框颜色border-color：上下左右边框颜色如果需要将已有的边框设置为暂时不可见，可以使用“border-color：transparent”，
注：设置边框颜色时同样必须设置边框样式，如果未设置样式或设置为none，则其他边框属性无效
使用RGB模式设置颜色时，如果括号里面的数值为百分比，必须把“0”也加上百分比
4、单侧边框属性
border-left、border-right……用于设置单侧边框属性
border-top：2px 上边框 border-left：2px 左边框border-bottom：2px 下边框 border-right：2px 右边框5、综合设置边框
border-style、border-width、border-color 可以实现综合边框样式
如：p{border-style：solid； border-width：2px； border-color：green；}6、内边距属性
padding 属性用于设置内边距（复合属性）
内边距也称内填充，指的是 元素内容与边框之间的距离
padding-top：上内边距； padding-left：左内边距；padding-bottom：下内边距； padding-right：右内边距；padding：上下左右内边距；padding相关属性的取值可以为auto（自动），常用单位是像素px，不允许使用负值
7、外边距属性
margin 属性用于设置外边距（复合属性）
外边距指的是 标签边框与相邻标签之间的距离
margin-top：上外边距 margin-left：左外边距margin-bottom：下外边距 margin-right：右外边距margin：上下左右外边距margin取值遵循值复制的原则，margin外边距可以使用负值，使相邻标签发生重叠
对块级元素应用宽度属性width， 并将左右的外边距都设置为auto，可以使块级元素水平居中
二、背景属性
背景属性有：背景颜色、背景图像、背景图像平铺、背景图像位置、背景图像固定、综合设置元素背景
1、背景颜色属性
background-color 属性用于设置网页元素的背景颜色，默认值为 transparent，背景透明
可以使用预定义颜色、十六进制#1122dd或RGB代码（r，g，b）
如： h2{background-color：#CCC；} 标题的背景颜色 body{background-color：#36C；} 主体的背景颜色2、背景图像属性
background-image 属性用于设置背景图像
如：body{background-image：url（bg.jpg）；} 设置网页的背景图像3、背景图像平铺
background-repeat属性用于设置 背景图像平铺，背景图像会自动沿着水平和竖直两个方向平铺
| 属性 | 描述 |
|---|---|
| repeat | 沿水平和竖直两个方向平铺（默认值） |
| no-repeat | 不平铺（图像位于元素的左上角，只显示一次） |
| repeat-x | 只沿水平方向平铺 |
| repeat-y | 只沿垂直方向平铺 |
4、背景图像位置
background-position 属性用于设置背景图像的位置
background-position属性的值通常为两个，中间用空格隔开，用于定义背景图像在元素的水平和垂直方向的坐标
1、使用不同单位（最常用的是像素px）的数值
如：background-position：20px 20px 直接设置图像左上角在元素中的坐标2、使用预定义的关键字：指定背景图像在元素中的对齐方式
| 水平方向值 | left、center、right |
|---|---|
| 垂直方向值 | top、center、bottom |
3、使用百分比：按背景图像和元素的指定点对齐
| 0% 0% | 表示图像左上角与元素的左上角对齐 |
|---|---|
| 50% 50% | 表示图像50% 50% 中心点与元素50P%的中心点对齐 |
| 20% 30% | 表示图像200%的点与元素200%的点对齐 |
| 100% 100% | 表示图像右下角与元素的右下角对齐 |
5、背景图像固定
background-attachment 属性设置背景图像的固定 图像会随着页面滚动条的移动而移动
| scroll | 图像随着页面一起滚动（默认） |
|---|---|
| fixed | 图像固定在屏幕上，不随页面滚动 |
6、综合设置元素的背景
可以将背景相关的样式综合定义在一个复合属性background中
语法：background： 背景色 url（“图像”） 平铺 定位 固定 background：url（“he.png”） no-repeat 50px 50px fixed;7、背景图像占满全屏
width：100% height:100%
覆盖 background-size：cover（占满全屏）
三、颜色透明度
1、rgba模式
rgba模式是在红、绿、蓝三颜色的基础上添加了不透明度参数
语法：rgba{r，g，b，alpha}alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的数字
如：p{background-color：rgba（255，0，0，0.5）；}2、opacity属性
opacity属性能使任何元素呈现出透明效果，用于定义标签的不透明度
语法：opacity：参数；参数表示不透明度的值 ，它是介于0~1之间的浮点数值
四、圆角边框
border-radius 属性用于设置圆角边框，包含两个参数，即水平半径参数和垂直半径参数
参数之间用“/”隔开，参数的取值单位可以是像素（px）或半分比（%）
border-radius（左上角、右上角、右下角、左下角）
语法：border-radius：水平半径参数1 水平半径参数2 水平半径参数3 水平半径参数4/垂直半径参数1 垂直半径参数2 垂直半径参数3 垂直半径参数4；设置显示效果为圆形：
语法：img{border-radius：150px；} 或 img{border-radius：50%；}五、图片边框
border-image 属性 可以使用图片作为元素的边框（复合属性）
内部包含：border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat
| 属性 | 描述 |
|---|---|
| border-image-source | 指定图片的路径 |
| border-image-slice | 指定边框图像顶部、右侧、底部、左侧向内偏移量（可以简单地理解为图片的裁切位置） |
| border-image-width | 指定边框宽度 |
| border-image-outset | 指定边框背景向盒子外部延伸的距离 |
| border-image-repeat | 指定背景图片的平铺方式 |
六、阴影
box-shadow 属性可以对盒子添加阴影效果
语法：box-shadow：h-shadow v-shadow blur spread color outset| 属性 | 描述 |
|---|---|
| h-shadow | 表示水平阴影的位置，可以为负值（必选属性） |
| v-shadow | 表示垂直阴影的位置，可以为负值（必选属性） |
| blur | 阴影模糊半径（可选属性） |
| spread | 阴影扩展半径，不能为负值（可选属性） |
| color | 阴影颜色（可选属性） |
| outset/inset | 默认为外阴影/内阴影（可选属性） |
七、渐变
渐变包括 线性渐变、径向渐变 和 重复渐变
1、线性渐变
起始颜色会沿着一条直线按顺序过渡到结束颜色
background-image：linear-gradient（参数值）；可以实现线性渐变的效果
语法：background-image：linear-gradient（渐变角度，颜色值1，颜色值2……，颜色值n）；linear-gradient用于定义渐变方式为线性渐变，括号内用于设定渐变角度和颜色值
（1）渐变角度：
渐变角度 是指水平线与渐变先之间的夹角，以deg为单位的角度数值或“to”加 left、right、top、 bottom等关键词，在使用角度设定渐变起点的时候，0deg对应“to top”，90deg对应“to right”，180deg对应“to bottom”，270deg对应“to left”，整个过程以bottom为起点顺时针旋转当未设置渐变角度时，会默认为“180deg”等同于“to bottom”
（2）颜色值：
颜色值 用于设置渐变颜色，"颜色值1" 代表起始颜色，”颜色值n“代表结束颜色，起始颜色和结束颜色之间可以添加多个颜色值。颜色值之间用“逗号，”隔开
2、径向渐变
起始颜色会从一个中心点开始，按照椭圆或圆形形状进行扩张渐变
background-image：radial-gradient（参数值）；可以实现径向渐变的效果
语法：background-image：radial-gradient（渐变形状 圆心位置，颜色值1，颜色值2……，颜色值n）；radial-gradient 用于定义渐变方式为径向渐变，括号内的参数值用于设定见渐变形状、圆心位置和颜色值
（1）渐变形状
渐变形状 用来定义径向渐变的形状，其取值可以是定义水平和垂直半径的像素值或百分比，也可以是相应的关键词，关键词主要包括两个值“circle”和“ellipse”。
属性值：
像素值/百分比：用于定义圆心的水平和垂直坐标，可以为负值
如：“80px 50px”表示一个水平半径为80，垂直半径为50px的椭圆形circle：指定圆形的径向渐变
ellipse：指定椭圆形的径向渐变
（2）圆心位置
圆心位置 用于确定元素渐变的中心位置，用“at”加上关键词或参数值来定义径向渐变的中心位置该属性类似于“background-position”属性值。
属性值：
像素值/百分比：用于定义圆心的水平和垂直坐标，可以为负值
left：设置左边为径向渐变圆心的横坐标值
center：设置中间为径向渐变圆心的横坐标值或纵坐标
right：设置右边为径向渐变圆心的横坐标值
top：设置顶部为径向渐变圆心的纵坐标值
bottom：设置底部为径向渐变圆心的纵坐标值
（3）颜色值
颜色值 用于设置渐变颜色，"颜色值1" 代表起始颜色，”颜色值n“代表结束颜色，起始颜色和结束颜色之间可以添加多个颜色值。颜色值之间用“逗号，”隔开
3、重复渐变
重复渐变包括：重复线性渐变和重复径向渐变
（1）重复线性渐变
background-image：repeating-linear-gradient（参数值）；样式可以实现重复线性渐变的效果
语法：background-image：repeating-linear-gradient（渐变角度，颜色值1，颜色值2…，颜色值n）；repeating-linear-gradient（参数值） 用于定义渐变方式为重复线性渐变，分别用于定义渐变角度和颜色值，颜色值同样也可以使用百分比定义。括号内的参数与线性渐变的参数值一样
（2）重复径向渐变
background-image：repeating-radial-gradient（参数值）；样式可以实现重复径向渐变的效果
语法：background-image：repeating-radial-gradient（渐变形状 圆心位置，颜色值1，颜色值2……，颜色值n）；repeating-radial-gradient（参数值） 用于定义渐变方式为重复径向渐变，分别用于定义渐变形状、圆心位置和颜色值。括号内的参数与径向渐变的参数值一样
八、多背景图像
通过background-image、background-repeat、background-position和background-size等属性实现多重背景图像，各属性之间用逗号隔开
1、修建背景图像
1、设置背景图像的大小
background-size 属性用于控制背景图像的大小
语法：backgroung-size： 属性值1 属性值2；可以设置一个或两个值定义背景图像的宽度，属性值1是必选属性值，属性2是可选属性值
属性值可以是：像素值、百分比或“cover”和“contain” 关键字
background-size属性：
| 属性值 | 描述 |
|---|---|
| 像素值 | 设置背景图像的高度和宽度，第一个值设置宽度，第二个值设置高度，如果只设置第一个值，第二个值会默认为auto |
| 百分比 | 以父标签的百分比来设置背景图像的宽度和高度，第一个值设置宽度，第二个值设置高度，如果只设置第一个值，第二个值会默认为auto |
| cover | 把背景图像扩展足够大，使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中 |
| contain | 把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域 |
2、设置背景图像的显示区域
background-origin 属性 自行定义背景图像的相对位置
<span style="background-color:#f8f8f8"><span style="color:#333333">语法：background-origin：属性值；</span></span>| 属性 | 描述 |
|---|---|
| border-box | 背景图像相对于边框来定位 |
| contect-box | 背景图像相对于内容框来定位 |
| padding-box | 背景图像相对于内边框区域来定位 |
3、设置背景图像的裁剪区域
background-clip 属性 用于定义背景图像的裁剪区域
语法：background-clip：属性值；| 属性 | 描述 |
|---|---|
| border-box | 默认值，从边框区域向外裁剪背景 |
| content-box | 从内容区域向外裁剪区域 |
| padding-box | 从内边距区域向外裁剪区域 |
九、元素的类型和转换
1、元素的类型
一般分为 块元素和 行内元素
1、块元素
块元素以区域块的形式出现，每个块元素通常会独自占一行或多行，可以设置高度、宽度、对齐等属性
常用于网页布局和网页结构的搭建
常见的块元素有：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等
2、行内元素
行内元素也称内联元素或内嵌元素，不会占据一行，也不强迫其他标签在新的一行显示。一个行内标签通常会和其他行内标签显示在同一行，他们不占有独立的区域，仅靠本身的文本内容大小和图像尺寸来支撑结构
一般不可以设置高度、宽度、对齐等属性 常用于控制页面中文本的样式
常用的行内元素有：<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>等
2、< div>和 < span>标签
（1）div标签
div标签是一个块标签，可以实现网页的规划和布局，页面会被划分成很多区域，不同的区域显示不同的内容。
div标签可以设置外边距、内边距、宽和高，内部还可以容纳段落、标题、表格、图像等各种网页元素，大多数html标签都是嵌套在div标签中
（2）span标签
span标签是一个行内标签，只能包含文本和各种行内标签的容器。如加粗标签<strong>、倾斜标签<em>等。<span>标签可以嵌套多个<span>标签。
<span>标签用于定义网页中某些特殊显示的文本，
3、设置滚动条
over-y 属性用于设置纵向滚动条
over-x 属性用于设置横向滚动条
cursor：pointer 属性 设置鼠标小手
十、弹性布局
1、元素类型的转换
display 属性 对元素类型的转换
| 属性 | 描述 |
|---|---|
| inline | 设为行内元素 |
| block | 设为块元素 |
| inline-block | 设行内块元素，可以设置宽高和对齐等属性，该元素不会单独占据一行 |
| none | 此元素将被隐藏，不显示，也不占用空间，相当于该元素不存在 |
行内元素只可以定义左右边距
2、弹性布局
display：flex 属性用于设置弹性布局
| 属性 | 描述 |
|---|---|
| flex | 设为块级元素 |
| inline-flex | 设为行级元素 |
设flex布局后：子元素的float、clear和vertical-align属性 将失效，但position依然生效
横向排列：flex-direction：row
纵向排列：flex-direction：column
设置弹性盒子元素在侧轴（纵轴）方向的对齐方式 垂直对齐
只有一行： align-items：flex-start、flex-end、center
多行：align-content：flex-start、flex-end、center、space-around、space-between
设置弹性盒子在主轴（横轴）方向的对齐方式 水平对齐
| 属性 | 描述 |
|---|---|
| flex-start | 左对齐 |
| flex-end | 右对齐 |
| center | 居中对齐 |
| space-around | 平均对齐，两侧有空隙 |
| space-between | 平均对齐，两侧无缝隙 |
height：50px；line-height：50px；
vertical-align：middle；
flex-wrap：wrap（自动换行）
flex-grow:数字；
若排列方式为行，占比为宽
若排列方式为列，占比为高
左右设置： width：200px；
中间设置： flex-grow：1； flex-direction：row；
左右设置： height：200px； width：100%；
中间设置： flex-grow：1； flex-direction：column；
8、垂直居中 水平居中
align-items:center;
justify-content:center;
第六章 列表和超链接
一、列表标签
列表通常分为三种：无序列表<ul>、有序列表<ol>、和定义列表<dl>
1、无序列表
<ul>标签用于定义无序列表，内部可以嵌套多个<li>标签 <li>是列表项每对<ul>标签中至少包含一对<li>标签
< ul>标签和< li>标签都有type属性，type属性用于指定列表项目符号
| type属性 | 显示效果 |
|---|---|
| disc（默认） | ● |
| circle | ○ |
| spuare | ■ |
2、有序列表
<ol>标签用于定义有序列表，内部可以嵌套多个<li>标签 <li>是列表项有序列表除了有type属性，还有start属性、value属性
| 属性 | 属性值/类型 | 描述 |
|---|---|---|
| type | 1（默认） | 项目符号为1，2，3…… |
| type | a或A | 项目符号为abcd或ABCD |
| type | i或I | 项目符号为i、ii、iii 或 I、II、III |
| start | 数字 | 规定项目符号的起始值 |
| value | 数字 | 规定项目符号的数字 |
3、定义列表
<dl>标签用于定义 定义列表，包含3个标签，即dl、dt、dddl 标签 用于指定定义列表
dt 标签 用于指定术语名词
dd 标签 用于对名词进行解释和描述
注：1. dl、dt、dd3个标签之间不允许出现其他标签
2. dt 标签必须与 dt 标签相邻
二、列表样式
列表样式用来单独控制列表项目符号
1、list-style-type
list-style-type 属性用于控制列表项 显示符号的类型
| 属性值 | 描述 | 属性值 | 描述 |
|---|---|---|---|
| disc | 实心圆（无序列表） | none | 不使用项目符号（无序列表和有序列表） |
| circle | 空心圆（无序列表） | cjk-ideographic | 简单的表意数字 |
| square | 实心方块（无序列表） | georgian | 传统的乔治亚编号方式 |
| decimal | 阿拉伯数字 | decimal-leading-zero | 以0开头的阿拉伯数字 |
| lower-roman | 小写罗马数字 | upper-roman | 大写罗马数字 |
| lower-alpha | 小写英文字母 | upper-alpha | 大写英文字母 |
| lower-latin | 小写拉丁字母 | upper-latin | 大写拉丁字母 |
| hebrew | 传统的希伯来编号方式 | armenian | 传统的亚美尼亚编号方式 |
2、list-style-image
list-style-image 属性用于对各个列表项设置项目图像 取值为 图像的url
3、list-style-position
list-style-position 属性用于控制列表项目符号的位置 取值有两种：inside 和 outside
inside： 列表项目符号位于列表文本以内
outside： 列表项目符号位于列表文本以外（默认值）
4、list-style
list-style 属性是复合属性 综合设置列表样式
语法：list-style：列表项目符号 列表项目符号的位置 列表项目符号的图像；三、超链接
每个网页都是通过超链接关联在一起，构成一个完整的网站，超链接定义可以是图片，也可以是文本或者是网页中的任何内容元素
1、创建超链接
<a>标签 用于定义超链接
语法：<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>href: 用于指定链接目标的url地址 href="#" 表示空链接
网页中的各种网页元素，如图像、表格、音频、视频等都可以添加超链接
target： 用于指定链接页面的打开方式，取值有 _ self （默认，在原窗口打开）和 _blank（在新窗口中打开）
2、锚点链接
当页面内容太多，页面过长，浏览网页时需要不停的拖到滚动条来查看内容，则可以使用锚点链接，使用户能直接跳到指定的位置
创建锚点链接的步骤：
1、使用 a 标签应用 href属性（href 属性 = "id名"，id名 不能重复）创建链接文本
2、使用相应的 id 名标注跳转的位置
3、链接伪类控制超链接
超链接标签 a 的伪类
| 超链接 a 的伪类 | 描述 |
|---|---|
| a：link {css样式规则；} | 正常，未访问过的链接（默认） |
| a：visited {css样式规则；} | 被访问过的链接 |
| a：hover {css样式规则；} | 鼠标指针经过、悬停时超链接的样式 |
| a：active {css样式规则；} | 鼠标点击不放时超链接的样式 |
当设置为若干链路状态的样式，也有一些顺序规则：- a:hover 必须跟在 a:link 和 a:visited后面- a:active 必须跟在 a:hover后面注：1、超链接顺序有要求，必须按照a：link、a：visited、a：hover 、a：active 的顺序书写
2、超链接并不一定用四种伪类，一般设置三种，如：link、hover 、active
3、除了文本样式外，链接伪类还常常用于控制超链接的背景、边框等样式
第七章 表格与表单
一、表格
生活中为清晰的显示数据或信息，我们会使用表格对数据或信息进行统计，在制作网页时也可以使用表格对网页进行规划
1、表格
1.创建表格
语法：<table><tr><td>单元格内的文字</td></tr></table>table 标签：用于定义一个表格的开头与结束，在 table 标签内部 可以放置表格的标题、表格行和单元格等
tr 标签： 用于定义表格中的一行，必须嵌套在 table 标签中，table 标签中有几对 tr，就表示有几行
td 标签： 用于定义表格中的单元格，必须嵌套在 tr 标签中，tr 标签中有几对 td，就表示有几列（单元格）
2.table 标签的属性
| 属性 | 描述 | 常用属性值 |
|---|---|---|
| border | 设置表格的边框 默认为 0，无边框 | 像素 |
| cellspacing | 设置单元格于单元格之间的空间 | 像素（默认为2） |
| cellpadding | 设置单元格内容与单元格边缘之间的空间 | 像素（默认为1） |
| width | 设置表格宽度 | 像素 |
| height‘ | 设置变革高度 | 像素 |
| align | 设置表格在网页中的水平对齐方式 | left、right、center |
| bgcolor | 设置表格的背景颜色 | 预定义的颜色值，十六进制#RGB，rgb（r，g，b） |
| background | 设置表格的背景图像 | url地址 |
3.tr 标签的属性
tr 标签用于 控制表格的整体显示样式
| 属性 | 描述 | 常用属性值 |
|---|---|---|
| height | 设置行高 | 像素 |
| align | 设置一行内容的水平对齐方式 | left、right、center |
| valign | 设置一行内容的垂直对齐方式 | top、middle、bottom |
| bgcolor | 设置行背景颜色 | 预定义的颜色、十六进制RGB、rgb（r，g，b） |
| background | 设置行背景图像 | url地址 |
tr 标签没有 width属性，宽度取决于表格标签 table
4.td 标签的属性
| 属性 | 描述 | 常用属性值 |
|---|---|---|
| width | 设置单元格的宽度 | |
| height | 设置单元格的高度 | 像素 |
| align | 设置单元格内容的水平对齐方式 | left、right、center |
| valign | 设置单元格内容的垂直对齐方式 | top、middle、bottom |
| bgcolor | 设置单元格的背景颜色 | 预定义的颜色、十六进制RGB、rgb（r，g，b） |
| background | 设置单元格的背景图像 | url地址 |
| colspan | 设置单元格横跨的列数（用于合并水平方向的单元格） | 正整数 |
| nowspan | 设置单元格竖跨的列数（用于合并竖直方向的单元格） | 正整数 |
5.th 标签的属性
th 标签用于设置表格的表头，表头一般位于表格的第一行和第一列，且文本加粗并居中。
th 标签的属性与 td 标签的属性一致
th 标签用于定义表头单元格，其文本默认加粗并居中，td 标签定义的是普通单元格
2、表格的结构
1.thead 标签
thead 标签用于定义表格的头部，必须位于 table标签中，一般包含网页的logo和导航等头部信息。
2.tfoot 标签
tfoot 标签用于定义表格的页脚，位于 table标签中 thead标签之后，一般包含网页底部的 企业信息等。
3.tbody 标签
tbody 标签用于定义表格的主体，位于 table标签中 tfoot标签之后，一般包含网页中除头部和底部之外的其他内容。
一个表格中只能定义一对 thead 标签和一对 tfoot 标签，可以定义多对 tbody标签
必须按照 thead 、 tfoot 、tbody的顺序使用
4.caption 标签
caption 标签用于定义表格的标题
3、表格的边框属性
border 属性用于设置表格的边框，但不实用。
border-collapse 属性用于合并单元格边框
collapse 将单元格边框合并
separate 单元格边框分离（默认）
当表格的border-collapse属性设为 collapse，HTML中的cellspacing属性值无效
行标签 tr 无border样式
4、CSS控制单元格边距
table标签 可以使用 cellpadding 和 cellspacing 来实现单元格之间的距离
CSS 中使用 padding 和 margin属性
设置单元格之间的距离，可以对 th 和 td 标签应用边距样式属性 padding ，th 和 td 标签无外边距属性 margin
或者对table 标签应用HTML标签属性cellpadding
5、CSS控制单元格宽高
width 属性用于设置单元格的宽
height 属性用于设置单元格的高
二、表单
表单是可以通过网络接受其他用户数据的平台，例如注册页面的账号密码输入、网上订货页等都是用表单形式手机信息
1、表单的构成
表单控件：包含具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、搜索框等
提示信息：包含一些说明性的文字，提示用户进行填写和操作
表单域：相当于一个容器，用来容纳所有的表单控件和提示信息， 可以通过它处理表单数据所用程序的url地址，定义数据提交到服务器的方法。 如果不定义表单域，表单中的数据无法传送到后台服务器。
2、创建表单
form 标签用于定义表单域 ,即创建一个表单，以实现用户信息的收集和传递，form 中的所有内容都会被提交给服务器。
语法：<form action = "url地址" method ="提交方式" name = "表单名称"> 各种表单控件 </form>1.action 属性
action 属性用于指定接受并处理表单数据的服务器程序的url地址
语法：<form action = "form_action.asp">表示当提交表单时，表单数据会传送到名为 form_action.asp 的页面处理
action 属性可以是相对路径也可以是绝对路径，还可以为接收数据的E-mail 邮箱地址
语法：<form action = "mailto：htmlcss@163.com">表示当提交表单时，表单数据会以电子邮件的形式传递出去
2.method 属性
method 属性用于设置表单数据的提交方式，取值为 get （默认）或 post
采用get方法，浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据
采用get方法 提交的数据将显示在浏览器的地址栏中，保密性差，且具有流量限制
采用post方法，浏览器会按照两步发送数据，首先，浏览器将与action 属性中指定的表单处理服务器建立联系，然后浏览器按分段传输的方法将数据发送给服务器。
采用post方法，保密性好，并且无数据流量限制。使用 method = "post" 可以大量的提交数据
3.name 属性
name 属性用于指定表单的名称，表单控件中具有 name 属性的元素会将用户填写的内容提交给服务器
三、表单控件
表单控件用于定义不同的表单功能，如：密码输入框、文本框、下拉列表、复选框等
1、input 控件
input 标签为单标签，用于定义表单控件，type属性 用于指定不同的控件类型，input标签具有的属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| type | text | 单行文本输入框 |
| password | 密码输入框 | |
| radio | 单选按钮 | |
| checkbox | 复选框 | |
| button | 普通按钮 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| image | 以图像形式的提交按钮 | |
| hidden | 隐藏域 | |
| file | 文件域 | |
| name | 由用户自定义 | 控件的名称 |
| value | 由用户自定义 | input 控件中的默认文本值 |
| size | 正整数 | input 控件在页面中的显示宽度 |
| readonly | readonly | 该控件内容为只读（不能编辑修改） |
| disabled | disabled | 第一次加载页面时禁用该控件（显示为灰色） |
| checked | checked | 定义选择控件默认被选中的项 |
| maxlength | 正整数 | 控件允许输入的最多字符数 |
2、textarea 控件
textarea 控件可以创建多行文本输入框
语法：<textarea cols="每行中的字符数" rows = "显示的行数" >文本内容 </textarea>textarea 控件的可选属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| col | 定义多行文本输入框每行中的字符数 | |
| rows | 定义多行文本输入框显示的行数 | |
| name | 由用户自定义 | 控件的名称 |
| readonly | readonly | 该控件内容为只读(不能编辑修改) |
| disabled | disabled | 第一次加载页面时禁用该控件(显示为灰色） |
3、select 控件
select 控件用于在表单中添加下拉菜单
语法：<select><option>选项1</option><option>选项2</option></select>select控件 和 option标签的常用属性
| 标签名 | 常用属性 | 描述 |
|---|---|---|
| select | size | 指定下拉菜单的可见选项数（取值为正整数) |
| select | multiple | 定义multiple="multiple"时，下拉菜单将具有多项选择的功能，方法为按住 CTRL键的同时选择多项 |
| option | selected | 定义selected = "selected"时，当前选项为默认选中项 |
optgroup 标签用于定义选项组，必须嵌套在select 标签中（可包含多对optgroup），optgroup标签之间为 option 标签定义的具体选项。
optgroup标签有一个必需属性lable，用于定义具体的组名。
四、html5表单新属性
1、全新的 form 属性
1.autocomplete属性
autocomplete 属性用于指定表单是否有自动完成功能。“自动完成”是指将表单控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一个下拉列表里，以实现自动完成输入
| 属性值 | 描述 |
|---|---|
| on | 表单有自动完成功能 |
| off | 表单无自动完成功能 |
语法：<span style="color:#117700"><</span><span style="color:#117700">form</span> <span style="color:#0000cc">id</span>=<span style="color:#aa1111">"formbox"</span> <span style="color:#0000cc">autocomplete</span>=<span style="color:#aa1111">"on"</span><span style="color:#117700">></span>autocomplete 属性不仅可以用于form标签，还可以用于所有输入类型的 input 标签。
2.novalidate属性
novalidate 属性