WEB
WEB Basic :HTML + CSS + JavaScript
Django：
===========================================================================================
1.WEB
1. 什么是WEB
web就是互联网上的一种应用程序 -网页
典型的应用：
1. C/S
Client：客户端
Server：服务端
2.B/S
Browser：浏览器
Server：服务器
2.WEB的组成 & 运行流程
有服务器，浏览器 和 通信协议组成
服务器：处理用户的请求（request）和相应（response）
浏览器：代替用户向服务器发送请求（User Agent）
通信协议：规范了数据时如何打包以及传递的 - http
http：Hyper Text Transfer Protocal
超级 文本 传输 协议
3.WEB服务器
1.作用
接受用户的请求并给出相应
储存WEB信息
具备安全性功能
2.产品
1.APACHE
2.TOMCAT
3.IIS - Internet Information Service
4.Nginx
3.技术
1.JSP - Java Servre Page
2.Php
3.ASP.NET
4.Python Web
4.WEB浏览器
1.作用
1.代替用户向服务器发送请求
2.作为相应数据的解释引擎
3.浏览器计数
2.HTML概述
1.HTML介绍 和 基本语法
1.什么是HTML
HRML:Hyper Text Markup Language
超级 文本 标记 语言
编写网页的一款语言
超文本：具备特殊功能的文本就是超文本
普通文本 a：普通字符a
超文本a：表示的时超链接功夫能
普通文本 b：普通字符b
超文本 b：表示文字加粗功能
标记：超文本的组成形式
普通文本a：a
超文本a：<a></a>
语言：语言有自己的语法规范
W3C:World Wide Web Consortium 万维网联盟
2.HTML在计算机中的表现
所有的网页在计算机中都是以.html或.htm作为结尾的文件来进行表示的
3.HTML基础语法（重点）
1.标记的语法规范
在网页中，用于表示功能的符号成为“标记/标签/元素”
2.语法
所有的标记，在使用时必须用<>括起来
标记分为 双标记 和 单标记
1.双标记
由开始标记 和 结束标记组成
<标记>...</标记>
ex：
1.<a>...</a>
2.<b>...</b>
3.<div>...</div>
4.<p>..</p>
注意：双标记，又开始，必须要有结束，否则显示效果会出错
2.单标记
只有一个标记，既能表示开始，又能表示结束。单标记自己就是各独立的功能。没有文本或其他内容可以控制
<标记> 或 <标记/>
ex：
1.<br> 或 <br/>：换行
2.<hr> 或 <hr/>：表示一条水平线
2.标记的嵌套
在一对标记中，再出现另外一对标记，目的时为了实现功能的嵌套
超链接：<a></a>
加粗：<b></b>
加粗的超链接
1.<a><b>...</b></a>
2.<b><a>...</a></b>
为了良好的可读性，被嵌套的内容尽量独占一行，并添加缩进
<a>
<b>... ...</b>
</a>
<html> --父元素/父标记
<head></head> --子元素/子标记
<body></hody> --子元素/子标记
</html>
3.标记的属性和值
1.什么时属性
在标记中，用来修饰标记显示效果的东西就是属性
2.语法
1.属性的生命必须在开始标记中
<标记 属性的生命位置处></标记>
2.属性名 和 标记名 之间要用空格隔开
<标记 属性名称></标记>
3.属性名 和 属性值之间用=连接，属性值要用""或''引起来
<标记 属性名="值"></标记>
4.一个元素允许设置多个属性，多属性之间排名不分先后，单多属性之间要用空格隔开
<标记 属性1=”值1“ 属性2=”值2"></标记>
<p align="center" id="p1"></p>
4.HTML中的注释
<!-- 注释内容 -->
注意：
1.注释不能出现在<>中
<p<!-- -->>...</p> 这种写法是错误的
2.注释不能嵌套
5.HTML中不区分大小写
4.HTML 文档结构
1.文档类型声明
出现在网页最顶端的第一个标记
作用：告诉浏览器使用HTML的哪个版本
<!doctype html>
2.HTML页面
在文档类型声明之下，使用一堆html标记来表示网页的开始和结束
<html></html>
在html中，包含两队子元素
1.<head></head>
表示网页头部信息
2.<body></body>
表示网页主题信息
3.<head> 标记
作用：描述网页的头部信息，对于网页起到控制的作用
1.<title>标题内容</title>
2.指定网页编码
<mata charset='utf-8'>
告诉浏览器按照utf-8的编码方式进行网页解析
注意：必须要保证网页文件的编码方式也是utf-8
5.文本相关标记
1.HTML中特殊字符处理
1. 表示一个空格
2.< 表示一个<
3.> 表示一个>
4.© 表示?
5.¥ 表示￥
2.文本格式标记
1.作用
修改文本在网页中的表现形式
2.标记
1.<i></i>:斜体显示文本
2.<u></u>:下划线显示文本
3.<s></s>:删除线显示文本
4.<b></b>:加粗显示文本
5.<sup></sup>:上标方式显示文本
6.<sub></sub>:下标方式显示文本
特点：
该组标记能够与其他的标记或文本在一行内显示
3.标题标记
1.作用
以不同的文字大小以及加粗方式显示文本
2.语法
<h#></h#>
#:1-6
<h1></h1>:一级标题
<h2></h2>:二级标题
。。。。
特点：
1.会改变文字的大小以及加粗效果
2.每个标题都会具备垂直的空白距离
3.每个标题都独占一行
4.每个标题都会具备一个属性
属性：align
取值：
1.left: 左对齐
2.center: 居中对齐
3.right: 右对齐
4.段落元素
1.作用
突出显示一段文本，每段文本独占一行/快，并且每个段落都会具备一下段的垂直空白距离
2.语法
<p></p>
属性：align
取值：left/center/right
5.换行元素
<br> 或 <br/>
6.分区元素
1.块分区元素
标记：<div></div>
作用：布局（配合CSS）
特点：独占一行/一块
2.行内分区元素
标记：<span></span>
作用：设置同一行文本的不同样式（配合CSS）
特点：允许在一行内显示多个span元素，也能够与其他的文本在一行内显示
7.行内元素 与 块元素
1.块元素
只要在网页中能够独占一行/一块的元素都成为块级元素，简称为块元素
p,h1,h2,h3,h4,h5,h6,div
作用：都可以做布局
2.行内元素
多个元素能够在一行内显示的，就是行内元素
span,i,b,s,u,sub,sup
6.列表标记
1.作用
按照从上到下的方式来进行数据排列
并能够显示列表的表示在内容的前面
2.列表的组成
1.列表的类型
1.有序列表 - <ol></ol> (Order List)
2.无序列表 - <ul></ul> (Unorder List)
2.列表项
<li></li> (List Item)
3.列表的属性
1.有序列表 - ol
1.type
取值：
1.1：按数字方式排列显示，默认值
2.A：按大写英文字符显示
3.a：按小写英文字符显示
4.I：按大写罗马数字显示
5.i：按小写罗马数字显示
2.start
指定有序的字符是从 几 开始显示
2.无序列表 - ul
1.type
取值：
1.disc： 实心圆点 默认值
2.circle： 空心圆点
3.square： 实心圆快
4.none： 不显示任何标识
4.列表的嵌套
在一个列表中，又出现一个列表
二
1.图像 和 超链接
1.URL
Uniform Resource Locator
统一资源定位器，用于标识网络中资源的位置，俗称路径
URL分类：
1.绝对路径
访问网络资源时，使用绝对路径
ex:http//:www.bai.com/img/bd_logo1.png
2.相对路径
从当前文件所在位置处去开始查找资源文件所经过的路肩
3.根相对路径
从WEB程序所在的根目录处开始查找资源文件
注意：1.url中不能出现中文
2.url时严格区分大小写的
2.图像
1.标记
<img>
2.属性
1.src：指定要显示的图片的路径
2.width：宽度，以px为单位的数值（允许省略px）
px：pixel，像素
3.heigh：高度，以px为单位的数组（允许省略px）
注意：如果高度和宽度设定一个值的话，那么另外一个值也跟着等比缩放
3.超链接
1.什么时超链接
用户可以通过点击的操作来完成页面跳转的行为的
2.语法
标记：<a> 内容 </a>
属性
1.href：表示是链接地址
2.target：指定要打开的新网页的方式
取值：
1._self：默认值，在自身标签页中打开新网页
2._blank：在新标签页中打开新网页
2.表格
1.标记
表格：<table></table>
表行：<tr></tr> --- Table Row
单元格（列）：<td></td> --- Table Data
2.属性
1.table属性
1.width：指定表格的宽度，以px为单位的数值（px可以省略）
2.height：指定表格的高度，以px为单位的数值（px可以省略）
3.border：指定边框的宽度，以px为单位的数值（px可以省略）
4.align：指定表格在其父元素中的水平对齐方式
5.cellpadding:指定单元格内边距，指定单元格边框与内容之间的距离,上下左右距离都会改变
6.cellspacing：指定单元格外边距，指定单元格之间的距离（单元格）
2.tr属性
1.align
控制当前行内容的水平对其方式
取值：left / center / right
2.valign
控制当前行内容的垂直对齐方式
取值：top / middle / bottom
3.bgcolor
控制当前行内容的背景颜色
取值：表示颜色的英文单词
3.td属性
1.width
2.height
3.align
4.valign
5.bgcolor
6.colspan：跨列/合并列
7.rowspan：跨行/合并行
2.不规则表格的创建
1.单元格的跨列
从指定单元格的位置处开始，横向向右合并几个单元格（包含自己），并合并掉的单元格要删除出去
语法：colspan="n"
2.单元格的跨行
从指定单元格的位置处开始，纵向向下合并几个单元格（包含自己），被合并掉的单元格要删除
语法：rowspan
3.行分组
1.什么时行分组
允许将表中的若干行划分到一组中，方便管理
2.语法
1.表头行分组
允许将表格中最上方的若干行划分到一组中
<thead></thead>
2.表尾行分组
允许将表格中最下方的若干行划分到一组中
<tfoot><tfoot>
3.表主题行分组
表格中除了最上方和最下方之外的行们进行分组的话允许放在表主题行分组中
<tdody></tbody>
3.表单
1.作用
用于接收用户的数据并提交给服务器
表单二要素
1.form元素
表单，用与收集用户信息并提交给服务器
2.表单控件
提供了能够与用户交互的可视化组件
2.form元素
1.作用
用与收集用户信息并提交给服务器
form元素在网页中时不可见的，但功能不能忽略
2.语法
1.标记
<form></form>
2.属性
1.action
指定处理程序的地址，默认提交给本页
2.method
提交方式/方法
共提供了7-8个值，但时有用的只有两个
1.get（默认值）
通常是在向服务器要数据时使用
特点：
1.提交的数据会显示在地址栏上
2.安全性较低
3.提交数据最大为2KB
2.post
要将数据提交给服务器处理时使用
特点：
1.隐式提交，看不到提交数据
2.安全性较高
3.无提交数据的大小限制
3.表单空间（重难点）
1.作用&注意
作用：提供了能够与客户交互的可视化组件
注意：只有放在表单中的表单控件才允许被提交,表单控件都是”行内块“元素
2.表单控件详解（难点）
1.文本框 & 密码框
文本框：<input type="text">
密码框：<input type="password">
属性：
1.name：定义控件名称
提交给服务器使用，如果没有name的话则无法提交
2.value：值
要提交给服务器的值，同时也是默认能够显示在控件上的值
3.maxlength
限制输入的最大字符数
4.placeholder
占位符
用户在未输入任何数据时所显示的内容
2.按钮
1.提交按钮：<input type="submit">
将表单数据提交给服务器
2.重置按钮：<input type="rest">
将表单内容恢复到初始化的状态
3.普通按钮：<input type="button">
允许通过JS自定义功能
属性：
value：按钮上显示的文本
4.<button></button>
属性：type
取值：submit/ rest / button
3.单选按钮 和 复选框
单选按钮：<input type="radio">
复选框：<input type="checkbox">
属性：
1.name
定义控件名称，除了定义名称外，还起到分组的作用
一组中的单选按钮 或 复选框 名称必须一样
2.value
值，尽量提前声明
3.checked
设置预选中
4.隐藏域 和 文件选择框
1.隐藏域
作用：想提交给服务器但不想给用户看的数据可以放在隐藏域中
语法：<input type="hidden">
属性：
name：定义控件的名称
value：定义控件的值
2.文件选择框
作用：文件上传时使用
语法：<input type="file">
属性：name:定义空间的名称
5.多行文本域
标记：<textarea></textarea>
属性：
1.name：控件名称
2.cols：指定文本域默认显示的列数，一行能够显示的英文字符两，中文减半
3.rows：指定文本域默认显示的行数
6.下拉选择框（下拉列表）
<select name="xxx">
<option value>显示内容</option>
</select>
注意：p标记是不能嵌套块级元素的
1.CSS介绍
CSS：Cascading Style Shets
HTML:搭建网页结构
CSS：修饰和美化网页
2.CSS的使用方式
1.内联方式
又称为：行内方式，内联方式
特点：将CSS的内容定义在单独的HTML标签中
语法：
<标记 style="样式声明">
样式声明：就是要修饰的样式效果
1.样式声明是由样式属性和属性值来组成的
2.属性 和 值之间使用 ： 连接
<标记 style="属性:值">
3.在一个上style中允许出现多个样式声明，多个样式声明之间，用；隔开
<标记 style="属性:值;属性:值;属性:值">
常用的属性和值：
1.文字大小
属性：font-size
取值：以px为单位的数字
ex：设置某div的文字大小为18px
<div style="font-size:18ex;">xxx</div>
2.文本颜色
属性：color
取值：取值为表示颜色的英文单词
ex：设置某div的文本颜色为红色（red）
<div style="color:red;">xxx</div>
3.背景颜色
属性：background-color
取值：取值为表示颜色的英文单词
2.内部样式表
1.作用
让定义好的样式能够使用在当前页面的多个元素上
2.语法
<head>
<style>
样式规则1
样式规则2
....
样式规则3
<style>
<head>
样式规则：
由选择器 和 样式声明 组成的
目的：为了声明一组独立的样式
选择器：规范了页面中哪些元素能够使用声明好的样式
选择器{
属性1：值1；
属性2：值2；
...
}
ex：
p{
color:red;
} 所有的p元素都为红色字体
3.外部样式表
1.作用
将声明好的样式应用在多个网页中
将样式规则声明在独立的css文件中（***.css）
在使用的网页中对css文件进行引入即可
2.使用步骤
1.声明
创建css文件，并编写样式规则
2.引用
<head>
<link rel="stylesheet" href="css文件路径">
</head> rel解析方式
3.样式表的特征
1.继承性
大部分的css属性是可以由父元素继承给子元素的
2.层叠性
允许为一个元素定义多种的使用方式或多个样式规则
如果央视的声明之间不冲突的话，那么所有的样式声明都可以应用在元素上
3.优先级
允许为一个元素定义多种的使用方法或多个样式规则，如果样式声明冲突的话，会按照不同的方式的优先级来应用样式
浏览器缺省设置 低
内部或外部样式表 中
就近原则：后定义者优先
内联方式 高
4.简易挑错
1.Invalid property value
属性值写错了
2.Unknown property name
属性名称写错了
5.CSS选择器（重难点）
1.作用
规范了页面中哪些元素能够使用声明好的样式
母的：为了匹配页面的元素
2.选择器的详解
1.元素选择器
特点：由标记名称作为选择器，主要匹配页面中指定标记所对应的所有元素
语法：
标记{
样式声明;
}
2.类选择器
特点：允许被任意元素所引用的选择器
1.声明
.类名{ 样式声明 }
类名：
1.字母，数字，_，-组成
2.数字不能开头
ex：
div{...} 元素选择器
.div{...} 类选择器
2.引用
<标记 class="类名">（引用不加.）
特殊用法：
1.分类选择器的定义方式
允许将将元素选择器和类选择器结合到到一起使用，为了实现对某种元素不同样式的细分控制
语法：
元素选择器.类选择器{ ... }
ex:
.important{
类选择器，匹配所有class为important的元素
}
div{
元素选择器，匹配所有的div元素
}
div.important{
匹配class为important的div元素
}
2.多类选择器的引用方式
允许让一个元素同时引用多个类选择器，多个类选择器之间使用 空格 隔开
<标记 class="c1 c2 c3">
3.id选择器
1.ID的作用
在HTML中，每个元素都允许设置一个id属性，主要用于表示该元素在网页中独一无二的标识
<div id="main"></id>
2.ID选择器
为了匹配页面中指定ID值的元素
语法：
#ID值{...}
EX:
#main{
color:red;
} 将id为mian的元素颜色设置为红色
4.群组选择器
1.作用
定义多个选择器们的共有样式
定义方式是一个以，隔开的选择器列表
2.语法
选择器1，选择器2，选择器3....{
}
ex:
#main,p,div,span,.redcolor{
color:red
}
5.后代选择器
1.作用
依托于元素的后代关系来匹配元素（不限制层级）
2.语法
选择器1 选择器2{ ... }
ex:
#wang span{
匹配id为wang的元素中所有的span元素
}
6.子代选择器
1.作用
依托于元素的自带关系来匹配元素
（只有一层层级关系）
2.语法
选择器1>选择器2{ ... }
ex:
#wang>span{
id为wang的元素中的下一级span元素
}
7.伪类选择器
1.作用
匹配元素不同状态的选择器
ex：超链接 a 元素，具备四个状态
状态1：连接未被访问时的状态
文本为蓝色，并由下划线
状态2：鼠标悬停在元素上的状态
鼠标状态变成了“手”
状态3：当元素被激活时（鼠标点击时）
文本变为红色
状态4：当文本访问过后的时候
文本颜色变为紫色
2.语法
：伪类状态
通常会配合其他元素一起使用
选择器：味蕾状态{ ... }
选择器：匹配元素
：伪类状态：匹配状态
1.连接伪类
1.:link
匹配超链接未被访问时的状态
2.:visited
匹配超链接被访问后的状态
2.动态伪类
1.:hover
匹配当鼠标悬停在元素上面时的状态
2.:active
匹配元素被激活时的状态
3.:focus
匹配获取焦点时的状态，文本框和密码框使用居多
3.选择器的优先级
当多个选择器能够同时应用到一个元素上时，并且样式发生冲突的话，则要按照不同选择器的优先级来应用样式
选择器的优先级主要时看权值
选择器 权值
元素选择器 1
类/伪类选择器 10
id选择器 100
内联方式 1000
如果是复杂的选择器则叠加（后代，自带，分类）的计算方式时将选择器们的权值累加
6.尺寸 与 边框
1.单位
1.尺寸单位
1.px - 像素
2.% - 占据父元素对应属性的占比
3.in - 英寸
4.pt - 磅
在css中通常标识文字大小
计算机中通常设置PPI（Pixel Per Inch）为72
5.cm - 厘米
6.mm - 毫米
在css中，所有的尺寸单位时不能省略的
2.颜色单位（颜色取值）
1.rgb（r，g，b）
r：红色范围值，0-255
g：绿色范围值：0-255
b：蓝色范围值：0-255
2.rgba（r，g，b，alpha）
alpha：颜色透明度，取值0-1之间的数字
0：完全透明
1.完全不透明
ex：
background-color:rgba(128,36,72,0.5)
3.#rrggbb
由6为16禁止数字来组成的颜色
#ff0000:红色
4.#rgb
#rrggbb的缩写，当没两位数字相同时，可以使用缩写的方式
#ff0000 -> #f00
#11ff33 -> #1f3
#333 -> #333333
5.标识颜色的英文单词
1.尺寸 和 边框
1.尺寸的属性
1.作用
改变元素的宽度和高度
2.属性
1.宽度：
属性：width
取值：以px或%为单位的数值
2.高度
属性：height
取值：以px或%为单位的数值
所有块级元素的尺寸：
宽度：占父元素100%的款
高度：以内容为准
所有行内元素的尺寸：
宽度：以内容为准
高度：以内容为准
注意：
html 和 css 中，除了img意外的所有行内元素的尺寸是不允许修改的
3.溢出处理
1.什么是溢出
当使用尺寸属性限制元素尺寸时，如果内容所需要的空间大于元素的尺寸的话，则产生移除的效果
2.溢出处理的属性
属性：overflow
取值：
1.visible
可见的，默认值
2.hidden
溢出的内容会隐藏
3.scroll
显示滚动条，溢出时滚动条可用
4.auto
自动，溢出时产生滚动条并可用，不溢出无滚动条
2.边框属性
1.边框实现
1.边框的间歇方式
通过一个树丛完成四个方向变框的所有效果设置（宽度，样式，颜色
属性：border
取值：width style color
width：边框的宽度，以px为单位的数值
style：边框的样式
solid：实线
dotted：虚线（点）
dashed：虚线（线）
color：边框的颜色
取值为盒饭的颜色值
可以取值为 transparent（透明）
特殊用法：
border:none; 没边框，用来取消边框
2.单边定义
定义某一边框的宽度，样式，颜色
属性：border-方向:width style color;
方向：top / bottom / left / right
ex:
上边框3px 实线 蓝色
border-top:3px solid blue;
3.单属性定义
设置四个方向边框的某一个属性值
语法：border-属性:值;
属性：width / height / color
ex：
border-width:5px; 设置四个方向的边框尺寸为5px
border-color:pink; 设置四个方向的边框颜色为 pink 色；
4.单边单属性定义
设置某一方边框的某一属性值
属性：border-方向-属性:值；
ex：
border-bottom-style:dotted;
border-right-width:3px;
border-left-color:#f00;
2.轮廓
outline:none;取消轮廓
3.边框倒角
1.作用
将边框的四个直角变为圆角
2.语法
属性：border-radius
取值：
1.以px为单位的数值
2.以%为单位的数值
4.边框阴影
属性：
box-shadow:h-shadow v-shadow blur spread color;
h-shadow:阴影的水平偏移距离
取值为数字，取值为正，阴影向右偏移，取值为负，阴影向左偏移
v-shadow:阴影的垂直偏移距离
取值为数字 取值为正，阴影向下偏移，取值为负，阴影向上偏移
blur:阴影的模糊大小
取值为数字，狮子越大越模糊
spread:阴影的大小
取值为数字
color:阴影的颜色
2.框模型 - Box Model
1.什么是框模型
框：页面元素皆为框
框模型：定义元素的尺寸和距离的一种计算方式
Box Model：盒模型，方框属性
包含：尺寸，边框，外边距 和 内边距
当框模型介入到元素时，元素的整体占地尺寸会发生改变，计算方式如下：
占地宽度=左右外边距+左右边框+左右内边距+宽
占地高度=上下外边距+上下边框+上下内边框+高
2.外边距
1.什么是外边距
围绕在元素边缘之外的空白距离就是外边距
外边距是不允许被其他元素占据的
2.语法
1.margin
最多能够设置四个方向的外边距值
2.margin-top
上外边距的值
3.margin-right
外边距的值
4.margin-left
左边距的值
2.取值
1.以px为单位的数字
ex：做外边距的值为20px
margin-left:20px
2.以%为单位的数值
以父元素尺寸的占比作为外边距的值
3.取值为 负数
目的是为了移动元素 正数移动方向与名相反 负数移动方向与名相同
4.取值为 auto
自动：自动计算左右外边距的值
注意：
1.auto智能应用在左右外边距上，上下无效
2.只能为设置宽度的块级元素设置左右外边距为auto，目的是为了让块级元素水平居中
3.margin的简介写法
1.margin:value'
value标识的是上下左右四个方向的外边距值
2.margin:value1 value2;
value1：表示上下外边距的值
value2：表示左右外边距的值
3.margin:v1 v2 v3;
v1：表示上边距的值；
v2：表示左右边距的值；
v3：表示下外边距的值；
4.margin:v1 v2 v3 v4;
v1：表示上外边距的值；
v2：表示左外边距的值；
v3：表示下外边距的值；
v4：表示右外边距的值； 按顺时针的方向来排
3.页面中具备外边距的元素
body，p，h1-h6，ul，ol 以上元素都具有默尔维尼的外边距
CSS重写：通过元素选择器将标记的默认样式改掉
3.内边距
1.什么是内边距
内容与元素边框边缘之间的距离
注意：内边距会扩大元素边框的所占区域
2.语法
属性：
padding：四个方向的内边距值
padding-top/right/bottem/left:值;
取值：
1.以px为单位的数值
2.以%为单位的数值
简介写法：同margin
3.页面中具备默认内边距的元素
1.ul,ol
2.文本框，密码框，按钮
4.box-sizing
1.作用
指定框模型（尺寸，边框，内边距）的计算方式
2.语法
属性：box-sizing
取值：
1.content-box
默认值，元素的width和height，只规定到元素的内容区域的宽和高。内边距和边框的尺寸是需要额外计算再附加到当
前元素上的。
div{
width:300px;
height:40px;
border:1px solid #000;
padding:1px 12px;
box-sizing:content-box;
}
内容宽度：300px
内容高度：40px
左右边框：各1px
左右内边框：各12px
上下内边框：各1px
整体宽度：326px
整体高度：44px
2.border-box
元素的width 和 height，能够规定到元素边框，内边距 以及 内容尺寸的。
width=边框宽度+内边距+实际内容宽度
height=边框高度+内边距+实际内容高度
3.背景属性
1.背景颜色
属性：background-color
取值：合法的颜色值
注意：背景颜色是从边框的位置处就开始绘制
2.背景图像
属性：background-image
取值：url(图片路径)
3.背景平铺
属性：background-repeat
取值：
1.repeat
默认值，横纵都平铺
2.no-repeat
不平铺
3.repeat-x
横向平铺
4.repeat-y
纵向平铺
4.背景图片的尺寸
属性：background-size
取值：
1.width height
以px为单位的数值
2.width% height%
采用当前元素的尺寸占比作为背景图尺寸
5.背景图片的位置
1.作用
改变背景图在元素中的默认位置（左上）
2.属性
属性：background-position
取值：
1.x y
以px为单位的数值，用空格隔开
x：背景图像水平偏移距离
取值为正向右偏移，取值为负向左偏移
y：背景图像垂直偏移距离
取值为正向下偏移，取值为负向上偏移
2.x% y%
1.0% 0%
背景图在左上角
2.100% 100%
背景图在右下角
3.50% 50%
背景图在中间
4.95% 0%
偏右95%在上
3.关键字
x：left / center / right
y：top / center / bottom
6.背景属性 - 简写方式
属性：background
取值：color url() repeat position;
ex:
background:red;
1.文本格式化属性
1.字体属性
1.指定字体
属性：font-family
取值：由逗号（，）隔开的字体列表
注意：如果字体中包含中文或空格的话，要用引号引起来
ex:
font-family:"微软雅黑"；
font-family:"Microsoft Yahei";
2.指定文本字体大小
属性：font-size
取值：px 或 pt
3.字体加粗
属性：font-weight
取值：
1.normal：非加粗显示
2.bold：加粗显示
3.value
取值为无单位的数字
400：normal 正常
900：bold 加粗效果
4.字体样式
属性：font-style
取值：
1.normal：非斜体显示
2.italic：斜体显示
5.字体属性（简写）
属性：font
取值：style weight size family;
注意：
使用简写方式时，必须要设置family的值，否则无效
2.文本属性
1.文本颜色
属性：color
取值：合法的颜色值
2.文本的排列方式
作用：控制某元素内的文本，图片行内快元素的排列方式
属性：text-align
取值：left / center / right / justify
justify:两端对齐 最后一行不适用该选项
3.文字修饰
作用：指定线条修饰结果
属性：text-decoration
取值：
1.none：无任何线条显示
2.underline：下划线
3.overline：上划线
4.line-through：删除线
4.行高
作用：指定一行文本数据的所占高度
特点：如果行高的高度高于文本的高度的话，那么文本将在行高长度范围内垂直居中显示
使用场合：
1.文本垂直居中
2.行间距
属性：line-height
取值:
1.以px为单位的数字
2.无单位的数字，表示的是当前字体大小的倍数
2.表格属性
1.表格的常用属性
1.尺寸属性
2.边框属性
3.文本格式化
4.背景属性
5.框模型
margin不能用在td上
2.表格的特有属性
1.边框合并
属性：border-collapse
取值：
1.separate 默认值，分离边框（双线边框）模式
2.collapse 边框合并
2.边框边距
作用：设置每两个单元格之间的距离
属性：border-spacing
取值：
1.指定一个数值
水平和垂直间距相等
2.给定两个数值
第一个值：表示水平间距
第二个值：表示垂直间距
两个数值之间使用空格隔开
注意：必须要在分离边框模式下使用
即：border-collapse的值为separate的时候有效
3.过度效果 - transition
1.什么是过度
使得CSS的属性值在一段时间内平缓变化的一个效果
2.语法
1.指定过度属性
作用：指定哪个属性值在变化的时候使用过度效果
属性：transition-property
取值：
1.属性名称
2.all
但凡能使用过度效果的属性值在变化时一律都使用过度来体现
允许使用过度效果的属性
1.所有与颜色相关的属性
2.所有取值为数字的属性
ex:transition-property:background-color;
2.指定过渡时长
作用：指定在多长时间内完成过度效果
属性：transition-duration
取值：以s 或 ms 为单位的数字 一秒等于一千毫秒
ex：
transition-duration:0.3s;
3.指定过渡的速度时间曲线函数
作用：指定过度效果变化速率
属性：transition-timing-funcation
取值：
1.ease
默认值，慢速开始，快速变快，慢速结束
2.linear
匀速
3.ease-in
慢速开始，加速结束
4.ease-out
快速开始，减速结束
5.ease-in-out
慢速开始和结束，中间先加速后减速
4.指定过渡延迟
作用：当激发过渡效果后，等待多长时间再开始执行操作
属性：transition-delay
取值：以 s 或 ms 为单位的数字
5.过度属性
属性：transition
取值：property duration timing-funcation dalay
ex:
transition:color 5s linear,background 3s
4.定位（重难点）
1.什么时定位
表示的时元素在网页中的位置
2.定位的分类
在css中，定位照顾要分为一下积累：
1.普通流定位（默认定位方式）
2.浮动定位（重难点）
3.相对定位
4.绝对定位
5.固定定位
3.普通流定位
普通流定位，又称为“文档流定位”。是页面中默认的定位方式。典型的“流式布局”。
特点：
1.每个元素在页面中都有自己的位置，并占有一定的空间
2.每个元素都是从其父元素的左上角开始排列的
3.每个元素基本上都是按照从左到右，从上到下的方式排列的
块级元素：从上到下，每个独占一行
行内元素&行内块元素：从左到右，排列不下时换行
4.浮动定位
1.浮动元素的特点
将元素设置为浮动定位，元素将具备一下特点：
1.浮动元素会被排除在文档流之外 - 脱离文档流，那么元素将不再占据页面空间
2.剩余为浮动元素会上前占位
3.浮动定位的元素会停靠在父元素的左边或右边或其他已浮动元素的边缘上
4.浮动只能在当前行浮动
5.浮动解决的问题：让多个块级元素在一行内显示的问题
2.语法
属性：float
取值：
1.none
默认值，即无任何浮动效果
2.left
浮动到父元素的左边，或停靠在左边已有的浮动元素的边缘上
3.right
浮动到父元素的右边，或停靠在右边已有的浮动元素的边缘上
3.浮动引发的特殊效果
1.如果父元素显示不下所有已浮动子元素的话，那么最后一个将换行，但有可能被卡住
2.元素一旦浮动起来后，就将变成块级元素
行内元素一旦浮动，就允许修改尺寸
3.元素一旦浮动起来后，在未指定宽度的情况下，宽度将由内容来决定
主要针对块级元素
4.文字，图片，行内元素时采用环绕的方式来排列的，时不会被浮动元素压在底下的
1.浮动
1.清除浮动
元素一旦浮动起来之后，后面的元素要上前占位，有可能被浮动元素压在底下。如果元素不想被压在地下的话，则可以通过清楚浮动影响的方式
来解决问题
1.语法
属性：clear
取值：
1.none：默认值，不做任何清楚浮动的操作
2.left：清楚当前元素前面元素左浮动所带来的影响，即不会被前面元素左浮动而压在底下
3.right：清楚当前元素前面元素右浮动所带来的影响，即不会被前面元素右浮动而压在底下
4.both：清楚当前元素前面元素任何一种浮动方式所带来的影响
2.浮动元素对父元素高度的影响
由于浮动元素会脱离文档流，所以是不占据页面空间的，那么也就不占父元素的空间。那么父元素的高度是以为浮动的子元素的高度为准的
解决父元素的高度：
1.为父元素设置高度
弊端：不一定每次都清楚的知道父元素的高度
2.设置父元素也浮动
弊端：会对父元素后面的元素产生位置的影响
3.设置父元素的overflow 为 hidden 或 auto
弊端：如果又溢出要显示的元素，也一同被隐藏
4.在父元素中追加空快级元素，并设置其clear属性为both
2.其他定位
1.相关属性
1.定位方式
属性：position
取值：
1.static - 静态的，默认值
2.relative - 相对定位
3.absolute - 绝对定位
4.fixed - 固定定位
注意：将元素的position设置为relative/absolute/fixed任意一种的话，那么该元素就称为“已定位元素”
2.偏移属性（共4个）
作用：配合已定位元素实现位置的移动
属性：top / right / bottom / left
取值：以 px 为单位的数值
top：以元素的上边为基准边移动元素 取值为正，元素下移，取值为负，元素下移
right：以元素的右边为基准边移动元素
left：以元素的左边为基准边移动元素
bottom：以元素的下边为基准边移动元素 取值为正，元素上移
2.定位方式 - 相对定位
1.什么是相对定位
元素会相对于它原来的位置偏移某个距离
2.场合
元素位置微调时使用相对定位
3.语法
属性：position
取值：relative
配合着 偏移属性 实现位置的移动
3.定位方式 - 绝对定位（难点）
1.什么是绝对定位 & 特点
1.绝对定位的元素会脱离文档流-不占据页面空间
2.绝对定位的元素会相对于离他最近的，已定位的，祖先元素去实现位置的初始化
3.如果元素没有已定位的祖先元素，那么元素将相对于body去实现位置的初始化
2.语法
属性：position
取值：absolute
配合着 偏移属性 实现位置的定位
3.注意
绝对定位的元素会变为块级元素（任何元素变成绝对定位的话，就可以直接修改尺寸）
4.堆叠顺序
1.什么是堆叠顺序
已定位元素们堆叠在一起的排列顺序
2.语法
属性：z-index
取值：无单位的数字，数字越大元素越靠上
默认值为 0
3.注意
1.如果元素的堆叠顺序相同的话，则后来者居上
2. 只有已定位的元素才能使用z-index
relative / absolution / fixed
3.父子元素之间，永远都是子压在父上，是不受堆叠顺序影响的
5.定位方式 - 固定定位
1.什么是固定定位
让元素固定在浏览器窗口的某个位置处，不会睡着滚动条的滚动而发生位置的改变
2.语法
属性：position
取值：fixed
配合着 偏移属性 实现元素位置的固定
3.注意
1.固定定位的元素永远都是相对于body实现位置初始化的
2.固定定位元素会变成块级元素
3.显示
1.显示方式
1.什么是显示方式
决定了元素是以什么样的方式显示在网页中（块级/行内/行内块）
2.语法
属性：display
取值：
1.none
让元素不显示 - 隐藏
脱离文档流 - 不占据页面空间
2.block
将元素变为块级元素
3.inline
将元素变为行内元素
4.inline - block
将元素变为行内块元素
特点：
1.多个元素能够在一行内显示 - 行内
2.允许修改尺寸 - 块级
2.显示效果
1.可见性属性
属性：visibility
取值：
1.visible
默认值，可见的
2.hidden
隐藏的，未脱离文档流，所以还占据着页面空间
visibility:hidden 和 display:none的区别
visibility:hidden 未脱离文档流
2.透明度属性
属性：opacity
取值：0（完全透明）- 1（完全不透明）
3.垂直方向对齐方式
属性：vertical-align
取值：top / middle / bottom / baseline
1.放在td中
相对于是valign的作用
取值：top / middle / bottom,middle是默认值
2.图片 和 行内块元素中
设置元素两端的文本相对于元素的垂直对齐方式
取值：top / middle / bottom,middle是默认值
3.光标
作用：为了改变鼠标悬停在元素上时鼠标的样子
属性：cursor
取值：
1.default
2.pointer - 小手
3.text - I
4.crosshair - +
5.wait - 等待
6.help - 帮助 ？
不必一定要写在hover中
1.列表
1.表现特征
1.上下外边距
2.左内边距
3.列表标识项
2.列表属性
1.list-style-type
取值：
1.none（不显示任何标识）
2.disc（实心圆点）
3.circle（空心圆点）
4.square（实心方块）
2.list-style
作用：列表的简写属性
常用用法：
list-style:none;
2.转换属性 - transform
1.什么是转换
改变元素在页面中的位置，尺寸，角度的一种方式
2.属性
1.转换属性
属性：transform
取值：
1.none：默认值，无任何转换效果
2.转换函数
如果又多个转换函数的话，中间要用空格隔开
2.转换原点
1.什么时转换原点
转换原点就是转换操作所围绕的一个点
2.语法
属性：transform-origin
取值：使用空格隔开的两个值
1.以 px 为单位的数值
2.以 % 为单位的数值
3.关键字 top / bottom / center / left / right
注意：默认的转换远点市在元素的中心位置处
3.转换效果
1.位移
1.作用
改变元素在页面中的位置
2.语法
属性：transform
取值（函数）：
1.translatex(x)
x标识元素在x轴上的位移距离（横向）
x取值为正，元素右移；x取值为负，元素左移
2.translatey(y)
y表示元素在y轴上的位移距离（纵向） 正 上
3.translate(x)
等同于 translatex(x)
4.translate(x,y)
同时在x轴y轴上位移
2.缩放
1.作用
改变元素在页面中的大小
2.语法
属性：transform
取值（函数）：
1.scaleX(x)
x表示横向缩放比例
x默认值为1，原始大小
大余1的数字：放大的比例
大余0小于1的数字：缩小的比例
小于0：物极必反
2.scaleY(y)
y表示纵向缩放比例
效果等同于 x
3.scale(valu)
val表示x轴和y轴的缩放比例是相同的
3.旋转
1.作用
改变元素在网页中的角度
2.语法
属性：transform
取值：
1.rotate(ndeg)
n为旋转角度，deg为单位
n取值为正，顺时针旋转；n取值为负，逆时针旋转
3.注意
1.转换远点会影响转换效果
2.旋转操作时，会连同坐标轴也一同跟着旋转，会影响旋转之后的位移操作
web、css、HTML学习笔记
最新推荐文章于 2024-03-24 16:22:24 发布
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
