前端web
一、HTML
标签
双标签、单标签
1.头标签
<head>
</head>
2.主体标签
<body>
</body>
3.换行标签
<br>
4.注释标签
<!--注释内容-->
5.横线标签
<hr>
6.段落标签
独占一行，上下各隔开一行
<p>
一段文字
</p>
7.标题标签
是父元素字体大小的两倍
<h1>
一级标签
</h1>
<h2>
二级标签
</h2>
8.图片标签
<body>
<!--图片标签 img
图片标签常用的标签属性
src="图片路径"
width="" 设置图片宽度
height="" 设置图片高度
实际开发中:width 和 height 只需要设置一个即可，会自动按比例缩放
title="鼠标放到图片上面显示的文字"
alt="" 图片占位文字，定义图像的简短描述
-->
<img src="图片路径" width=" " title="文字">
</body>
9.音频标签
10.超链接标签
<a href="链接地址" target="">名字</a>
<!-- a标签
超链接是当前标签关联一个链接地址，点击可以实现网页跳转
目标网页未访问过文字是蓝色，访问过之后文字变为紫色
href属性:负责存放链接地址
target属性:(跳转的目标网站 默认是在当前标签页打开)
_self(默认值，默认在当前页面打开)
_blank(在新标签页打开)
a标签的四大功能:
①跳转功能
href="目标网址"
②回到页面顶部
<a href="#">点我回到页面顶部</a>
③锚点功能
跳转到目标网页的指定位置(默认跳到目标网页的顶部)
目标网页在想要被跳转的位置的标签加上id
<a href="目标网页.html#id名">超链接名</a>
当前网页的指定位置:
<a href="#id名">超连接名</a>
④文件下载功能(不推荐使用 因为无法防盗链)
若href关联的地址是一个浏览器可预览的格式，那么会在线打开预览
可预览的格式:txt jpg png mp4 ...
若无法预览则提示下载
不可预览格式:zip 7z 等压缩包格式
-->
<!-- base标签
作用:对所有后来的a标签进行统一设置
href 表示基础路径的统一配置
a标签最终跳转地址 = base标签的href地址 + a标签本身的href
若a标签的href地址里没有协议开头，那么会找base标签的href进行拼接地址;若a标签没有协议开头，则不再找base标签
targrt属性:
若a标签未设置target属性，则按照base的target属性
若a标签设置了，则按照当前a标签的target属性
-->
<base href="" target="">
<a href="" target=""></a>
11.列表标签
<ul>
<li></li>
</ul>
<ol>
<li></li>
</ol>
<!-- 列表标签
无序列表:
ul标签常用属性:
type:序号的样式
disc(默认值):实心小圆圈
spuare:实心小方块
circle:空心圆圈
有序列表:
ol标签常用的属性:
type:修改序号的类型
1(默认值)、a、A、i、I
start="数字"
1(默认值)\表示从该数字开始排序
自定义标签:
dl标签 表示自定义列表标签
dl dt dd标签做图文混排操作
例如商品列表、商品描述
-->
12.表格标签
<table border="边框线的宽度" width="表格宽度" >
<tr>
<td></td>
<td></td>
</tr>
</table>
<!--
table：表格标签
table是最外层标签
tr表示一行
td表示一列
table的几个标签属性：
border="边框线的宽度" 默认没有边框线
width="表格宽度"
height="表格高度"
cellspacing 单元格之间的间距
cellpadding 单元格内的文字到格子的距离（填充）
border如果设置成50，意思是模拟阳光从左上角照射的效果
tr的常用属性:
align="" 当前行文本的横向对齐方式
center 表示表格在页面居中对齐
left 左对齐
right 右对齐
vlaign="" 当前行文本垂直对齐方式
center | left | right
-->
13.表单标签
form表单域
input表单
属性：placeholder:输入框占位提示文字
<!-- form标签 -->
属性action="" :表示填写服务器地址
method :表示提交方式
目前大概了解，常用的方式 get 和 post，目前只用get即可
默认是get
get提交方式：
默认就是在地址栏，通过？拼接，键值对的方式提交数据给服务器
地址?username=zs&password=123 键值对
<!-- type="text" 表示输入框 -->
输入框常用属性:
readonly:只读，表示输入框内容不可修改
value: 输入框的默认输入内容
placeholder:输入框占位提示文字
disabled: 禁用输入框，不会被提交
<!-- type="password" 密码框 -->
属性和上面一样
<!-- type="radio" 单选按钮 -->
多个单选按钮要事先单选功能 name属性的值是一样的
单选按钮必须要定义value属性 来定义选中的值 value不能中文
<!-- input type="checkbox" 多选按钮 -->
value属性是用来被提交的值
哪个被选中，提交哪个
<!-- select标签 下拉框-->
name属性写在select value属性写在option
select标签 里面嵌套 option标签
<!-- input type="button" 普通按钮 -->
<!-- input type="submit" 提交按钮 -->
表单提交的格式是：
name="自己起的名字 尽量有意义"
<!-- input type="reset" 重置按钮 -->
把表单的所有内容变成默认
<!-- button标签 -->
内部定义标签 默认是提交按钮的功能
属性：
type="submit" 默认值，提交按钮
type="reset" 重置按钮
type="button" 普通按钮
实际开发中使用button标签，符合语义化
<!-- textarea标签 多行文本框 -->
<!-- label 信息提交控制 -->
for属性 可以关联一个表单控件的id属性
表示跟控件之间联动
<!-- input type="file" 文件控件-->
可选取本地文件，进行文件上传
<!-- input type="image" src="图片地址" 图片提交按钮-->
src关联图片地址
<!-- 表单分组 -->
<fieldset>
<legend>组名</legend>
</fieldset>
<!-- 语义化标签 -->
<header>页头部分</header>
<nav>导航部分</nav>
<main>
<aside>侧边栏</aside>
<section>主题内容</section>
</main>
<footer>页脚部分</footer>
<form action="http://www.baidu.com">
<p>
<input type="text" placeholder="用户名" name="username">
</p>
<p>
<input type="password" placeholder="密码" name="password">
</p>
<p>
男<input type="radio" name="gender" value="m">
女<input type="radio" name="gender" value="f">
</p>
<p>
爱好：<br>
读书：<input type="checkbox" name="hobby" value="book">
画画：<input type="checkbox" name="hobby" value="huahua">
音乐：<input type="checkbox" name="hobby" value="music">
</p>
<p>
城市：<br>
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
<option value="sz">深圳</option>
</select>
</p>
<!-- type="textarea" 多行文本框
type="file" 文件域 -->
<p>
<textarea id="" cols="15" rows="10"></textarea>
</p>
<p>
<input type="file">
</p>
<p>
<input type="reset">
</p>
<p>
<input type="submit">
</p>
</form>
<form action="">
<!-- table>tr*8>td +tab -->
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</form>
14.文本标签
<b>加粗标签</b>
<strong>加粗标签(推荐使用)</strong>
<u>下划线标签</u>
<ins>下划线标签(推荐使用)</ins>
<i>倾斜标签</i>
<em>倾斜标签(推荐使用，符合网页的语义化)</em>
<s>删除线标签</s>
<del>删除线标签(推荐使用)</del>
一些问题
1.路径问题
<!-- 相对路径
跟当前网页躲在的文件夹为才考的路径，从当前html文件的路径
①图片在html当前文件夹: 直接图片名
②图片在html当前文件夹下一层或多层里: 文件夹名/文件
③图片在html当前文件夹的上一层或多层: ../
-->
<!-- 绝对路径
网络路径:
<img src="图片网址">
-->
2.特殊符号
作用:避免混淆而产生特殊符号
html中 表示的特殊符号
& &
&nbsop; 空格
> >
< <
3.meta标签
<meta>标签的作用:
1.声明当前网页编码
告诉浏览器用什么编码来解析代码
<meta charset="utf-8">
2.进行SEO优化，设置搜索引擎的关键字和描述
设置搜索引擎的关键字:
<meta name="keywords" content="关键字1，关键字2，...">
设置网站信息描述:
<meta name="description" content="文字描述......">
SEO:搜索引擎优化
常见编码表、字符集:
简体中文:
GBK
台湾省繁体中文:
BIGS
欧洲编码:
ISO8859-1
国际编码:
utf-8
4.头部标签里的标签
<!-- 收藏夹小图标 -->
<link rel="icon" href="路径">
5.图片的格式
图片的格式
JPEG(JPG)
- JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明
- 一般使用JPEG来保存照片等颜色丰富的图片
GIF
- GIF支持的颜色少，只支持简单的透明，支持动态图
- 图片颜色单一或者是动态图时可以使用gif
PNG
- PNG支持的颜色多，并且支持复杂的透明
- 可以用来显示颜色复杂的透明的图片
图片的使用原则：
效果不一致，使用效果好的
效果一致，使用小的
二、CSS
1.介绍
cascading statle sheet(层叠样式表)
- html：负责网页最基本的结构和内容
- css：负责网页的样式和布局
- JavaScript：负责网页的动态效果
<!--
每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部
外部样式表可以在任何文本编辑器进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存
-->
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<!-- css的三种引入方式：-->
内嵌和外链两种，谁在下面，谁生效
行内样式优先级最高
1.内嵌式
在html的head标签里，定义style标签
在style标签里写选择器和css代码
没有真正实现：结构与表现相分离
2.行内式
在标签的四大通用属性上面，style属性就是可以定义行内样式
在js中，通过js代码动态操作的样式都是行内样式
没有实现 结构与表现相分离
3.外链式(实际开发必须使用)
单独创建css文件
在css文件里面直接写选择器+css代码
在html里面head标签里面，直接通过link标签引入
<link rel="stylesheet" href="css文件路径">
<!-- css三大特性 -->
1.层叠性
元素的最终样式，很有可能由多个选择器
2.继承性
某些css属性，给父元素设置以后，所有的后代元素都会生效
但凡关于文本方面的设置都会被继承:
font开头的
color
text开头的
行高
Action:
①不要试图给h系列标签继承字体大小,否则大到离谱
因为h系列标签,系统默认的字体大小单位是em
h1默认是2em,表示是父元素大小的两倍,
解决方式:要么把h系列标签拿出去,要么给h标签单独设置文字大小
②a标签不会继承父元素文字颜色
解决办法:单独给a标签设置颜色 或者 伪类选择器单独进行a标签的各个状态设置
3.优先级
默认样式->通用选择器->标签选择器->类选择器->id选择器->行内样式->!important(不使用)
<!-- 复合选择器的权值累加问题 -->
为了方便计算复合选择器的优先级问题,所以给css选择器优先级定义了一个额外的权值 这个权值并不是真正存在,单单是为了方便计算优先级而定义的
标签选择器->类选择器->id选择器->行内样式
1 10 100 1000
/* 继承的权值为1,继承的权值没有本身的权值优先级高 */
/* 不同级之间比较,永远垮不了级
eg:权值累加的过程中,十个标签选择器也比不过一个id选择器*/
2.选择器
①基础选择器：
/* 通配符选择器 */
*{
css代码
}
/*id选择器*/
<!--在head标签里 写一个style标签-->
<!--选择器就是选择页面哪一个标签或者哪一堆标签-->
<!--格式是：
<style>
#标签id值{
键值对
}
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#baidu{
color: red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" id="baidu">百度</a>
</body>
</html>
/*标签选择器*/
<!--在head标签里 写一个style标签-->
<!--选择器就是选择页面哪一个标签或者哪一堆标签-->
<!--格式是：
<style>
标签名{
键值对
}
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1{
color:saddlebrown;
}
</style>
</head>
<body>
<h1>大标题</h1>
</body>
</html>
/*类选择器*/
.class名{
css代码
}
<div class="类名1 类名2 类名3 ...">内容</div>
一个标签可以有多个class
多个标签可以用一个class
②复合选择器：
把一堆基本选择器组合在一起，就是复合选择器
/*复合选择器*/
<!-- 交集选择器 -->
标签名.class名{
css代码
}
必须符合标签名和类名同时满足的所有标签，才被选择
注：标签名#id名{}（无意义）
<!-- 并集选择器 -->
选择器1 ， 选择器2 ， ... ， 选择器n{
css代码
}
表示多个选择器选择的所有元素共同生效当前css代码
<!--后代选择器-->
选择器1 选择器2{
css代码
}
在选择器1的所有后代里面，找到复合选择器2的所有元素
无限制隔代
<!--子代选择器-->
选择器1 > 选择器2{
css代码
}
只能是子代，不能隔代
选择器1和选择器2，可以是任意选择器
<head>
<meta charset="UTF-8">
<title>复合选择器</title>
<style>
div>p{
color: red;
}
div p{
color: red;
}
div>ul{
color: blue;
}
</style>
</head>
<body>
<div>
<p>
<span>小张</span>
<span>小张</span>
<span>小张</span>
</p>
</div>
<div>
<span>小李</span>
<span>小李</span>
<span>小李</span>
</div>
<div>
<ul>
<li>小方</li>
<li>小方</li>
</ul>
</div>
<span>
<div>xiaoli</div>
<div></div>
</span>
</body>
3.模式转换
<!--在css中，把元素分为三种模式：-->
/*块级元素 独占一行，可以设置宽高 */
默认有宽没高，宽占满所在的父元素
高按照内容撑开
div p h1~h6
/*行内元素 在一行显示，不可以设置宽高*/
默认是一个字的高度，没宽度
span a 文字标签
/*行内块元素 在一行显示，可以设置宽高*/
没有默认宽高
img input
<!-- -->
块级标签可以嵌套一切标签
块级里面：可以有行内、行内块、块级都行
ul、ol标签里只能出现li标签，dl标签里只能出现dt、dd
li标签里可以嵌套一切
行内和行内块之间可以互相嵌套，但是不能嵌套块级
p标签不能嵌套其他任何块级元素，甚至包括自己
会完全避开，会截断，产生两对p标签
哪怕块级元素通过display
<!--元素的模式之间相互转换-->
display:block;转换为块级元素
display:inline;转换为行内元素
display:inline-block;转换为行内块元素
4.伪类选择器
/*普通链接状态*/
选择器:link{
}
/*链接访问过后状态*/
选择器:visited{
}
/*鼠标悬停状态*/
选择器:hover{
鼠标放的地方，所展示的效果
}
/*鼠标按住状态*/
选择器:active{
鼠标按住的地方所展示的效果
}
/*获取焦点状态*/ 主要针对表单
选择器:focus{
}
/*超链接下划线*/
取消下划线:text-decoration:none
增加下划线:text-decoration:underline
<style>
#box{
width: 200px;
height: 200px;
background-color: #f00;
}
#box:hover{
background-color: #0f0;
font-size: 100px;
color:#fff;
width:400px;
height: 400px;
}
#box:active{
background-color: #00f;
}
</style>
5.盒模型
介绍:
盒子模型包括:
内边距padding 外边距margin 边框border
具有内边距的盒子,最终盒子的宽度:
盒子本身设置的宽度 + 左右内边距 + 左右边框
width + padding + border
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
盒子模型
如果因为 padding会撑大盒子的问题 导致反复计算盒子应该设置的宽高
这样开发非常累
所以可以使用box-sizing 属性 转换盒子模型
盒子模型一般分为两大类:
谷歌盒子模型:
盒子最终的宽高=盒子自身的宽高+padding+border
属性值:
box-sizing:content-box;
IE盒子模型:
盒子最终的宽高就是设置的 width和height的值
padding和border浏览器自动计算并减去
属性值:
box-sizing:border-box;
border边框
/*边框*/ 盒子本身的外框线
单个方向,三个属性连写:
border-方向:边框宽度 边框类型 边框颜色;
solid(实现)
dashed(虚线)
dotted(点线)
double(双实线)
四个方向,三个属性连写:
border:边框宽度 边框类型 边框颜色;
单个方向,三个属性连写:
border-方向:width style color;
关于table标签的边框样式:
必须给table\th\td全部都设置边框
table表格有一个VIP属性:边框合并属性(细线表格)
border-collapse:coll;
margin外边距
/*外边距*/
margin-top
-left
-bottom
-right
margin: 纵向 横向；
eg: margin: 50px auto;
纵向auto不生效,因为浏览器高度不确定,元素高度一般也不太确定,因为内容很有可能超出
auto表示自动分配的意思,
表示当前横向剩余空余自动分配
前提:
当前元素必须是块级,
块级元素必须设置宽度,宽度小于父容器的宽度
一个块级元素在另一个块级元素里面横向居中:
给里面的块级设置: margin:上下px值 auto;
文字/行内/行内块,在块级里面横向居中:
给块级元素设置: text-align:center;
padding内边距
/*内边距 会撑大盒子*/
padding-top
-left
-bottom
-right
内边距连写:
四个值连写:
padding:上 右 下 左;
三个值连写:
padding:上 左右 下;
两个值连写:
padding:上下 左右;
一个值:
padding:四个方向一致;
padding会撑大盒子,只要设置padding,就会在原本的大小基础上增大padding设置的内边距大小
块级元素未设置宽度,宽度默认占满父元素
一定意义上,占满父元素的宽度可以理解为width继承,但不是真正的继承
一旦当前块级元素未设置宽度时,默认占满父元素的宽度,此时再设置左右padding,则不会撑大盒子
前提:如果设置padding左右的总和加起来超过继承的宽度,则依然会撑大
边框塌陷
/* 边框塌陷 */
指的是:子元素设置margin-top会带着父元素一起下沉
根本原因:父元素没有上边框,导致子元素的margin-top作用到了浏览器的上边,导致父子元素一起下沉
解决:
1.给父元素设置一个上边框
同时设置box-sizing:border-box;
边框颜色:transparent透明色
2.BFC(块级格式上下文)
overflow:hidden;
该属性可以清除一些异常显示效果
字体居中
/* 字体居中 */
横向：text-align:center;
纵向：line-height:50px;
边框合并
/* 边框合并 */
行内和行内块之间 横向是有间距的
用margin-方向词:负值;
航捏和行内块之间,有间距
相邻元素之间如果都有边框 那么有可能产生
相邻位置边框比较宽
需要进行边框合并
利用margin负数进行盒子的重叠 从而实现盒子边框合并
行内元素上下margin不生效问题
/* 行内元素上下margin不生效问题 */
块级元素margin\padding四个方向都可以任意设置
行内元素设置padding依然会撑大盒子,但是撑大的部分不占位
元素自带margin和padding问题
/* 元素自带margin和padding的问题 */
body默认带的margin:8px
很多元素会自带margin或padding,所以实际开发中最一开始css会取消默认样式,也叫样式初始化
把自带margin或padding的标签作为选择器进行取消
h1,h2,h3,h4,h5,h6,dt,dl,dd,ul,ol,p,body,html{
margin:0;
padding:0;
}
/* ul li里默认自带修改 */
有序无序列表默认自带的数字或圆圈：
list-style:none;
自带的margin、padding：
使用页面初始化来设置(实际开发不建议使用)
*{
margin:0;
padding:0;
}
基线对齐问题
/* 基线对齐问题 */
行内块元素跟蚊子同处在同一行时,默认的文字是以文本基线对齐的,所以出现了行内块对齐了文本偏下的位置的问题,所以我们可以通过给行内块设置
vertical-align:px值来调整上下的位置,负数往下走,整数往上走
eg:vertical-align:3px;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T7WVUIbA-1667287103419)(C:\Users\张浩远\AppData\Roaming\Typora\typora-user-images\image-20221005120507780.png)]
6.定位
/*定位=定位模式+边偏移 分四个方向left right bottom top*/
relative(相对定位)
absolute(绝对定位)
fixed(固定)
static(静态定位)默认值,没有定位
position(定位的属性)
相对定位relative 元素没有脱标
按照自己原本所在的位置进行偏移
同一个元素不要设置 left和right 或者 top和bottom同时存在
绝对定位absolute 使元素脱标
按照最近的有定位的父级的位置进行偏移
如果父级没有定位就按照body偏移
横向或者纵向同时只能设置一边
固定定位fixed 元素脱标
按照浏览器可视区域窗口定位(简称:视口)
不会随着浏览器的页面滚动而滚动
/* 子绝父相: */
子元素绝对定位 父元素相对定位
为了能限值子元素,父元素必须加一个定位,目的是让子元素的绝对定位按照父元素的位置确定,但是父元素如果设置绝对定位或者固定定位,那么父元素也会脱标导致更多的定位,所以父元素设置相对定位的上海会比较小,因为相对定位不脱标
/* z-index层级属性 */
浮动能够让元素"飘到二楼"
定位能够让元素"飘到无数楼"
设置定义的元素默认自带层级效果
同为定位元素,后面的会在前面的元素之上
也可以手动改变已经定位的盒子的层级
z-index: 数值;
只能针对已经定位的元素,哪一个元素的index值大,哪一个元素层级高
最大值就是数值的最大值,基本相当于无限大
注意:
永远只有子压父,
实现盒子绝对居中:
1.子绝父相的前提下:
给子元素设置left:50% top:50%
margin-left:自身宽度的一半
margin-top:自身高的一半
2.子绝父相的前提下:
给子元素设置:
left:0;
right:0;
bottom:0;
top:0;
margin:auto;
7.float浮动
/* 标准文档流 */
文档指的是页面的每块内容就是页面的每个文档
文档的流向就是:页面内容(页面元素)排列方向
块级元素:
从上到下
行内和行内块:
从左向右
<!-- 浮动 -->
就是让元素脱离标准文档流(简称:脱标)
元素一旦脱标,就可以使得元素在一行内显示,并且可以设置宽高,无论行内 行内块还是块级,一旦设置成功就会成为脱标元素
元素一旦脱标,则不再占位
浮动找浮动,不浮动找不浮动
让块级元素在一行内显示,块级元素实现了脱标
浮动可以实现模式转换(行内元素设置浮动可以宽高)
显示模式转换了,但是比行内块好用(只是单单具有行内块特点)
浮动以父元素顶部为基准对齐
浮动只能让当前元素浮动到父元素的最上边
浮动只影响后面的元素
浮动会对后面的元素产生影响,因为浮动元素不再占位
那么后来元素会自动补齐之前的位置
后面的后面元素会依次补齐,有可能导致补齐元素位置带来的页面布局混乱情况
总结:
元素设置浮动,就是能够让元素在一行内显示,并且可以设置宽高,还没有行内块基线对齐问题,不管这个元素原来是是什么模式(块级 行内等等)
优点:
能够让块级元素在一行内显示
缺点:
会对后面的元素带来影响
浮动对元素的直接影响:
对后面元素带来的影响
1.当前浮动元素不再占位,后面元素自动补齐位置,对后面布局产生影响
2.出现文字环绕效果
对父元素产生的影响
当子元素全部浮动时,父元素如果未设置高度,则父元素将没有高度
解决方式:
①.清除浮动带来的影响有一个专门的属性:
clear:left | right | both;
限制:
只能是块级元素,才能使用该属性
②.针对父元素带来的影响解决方式
1.给父元素设置高度
2.BFC(块级格式上下文)
给父元素设置overflow:hidden;
3.给当前浮动元素加一个伪元素选择器 :after
浮动元素选择器:
选择器:after{
context:"";
width:0;
height:0;
opacity:0;
line-height:0;
display:block;
clear:both;
}
③.针对给后面元素/文字带来的影响:
4.定义一个class类,写上以下属性:
.clear{
width:0;
height:0;
opacity:0;
line-height:0;
display:block;
clear:both;
}
在浮动元素跟后面元素之间,插入一个新元素,设置该类名
8.背景属性
background-attachment:背景图像是否固定或者随着页面的其余部分滚动
可能的值:scroll:默认值。背景图像会随着滚动而移动
fixed:当前页面的其余部分滚动式，背景图像不会移动
设置fixed之后,表示当前图片的position是按照当前浏览器窗口来进行计算的,浏览器窗口的左上角是(0,0)点
background-color:设置背景颜色
可能的值:color:颜色值可以使颜色名称、rgb值、十六进制数
transparent:默认。背景颜色为透明
background-image:url(图片路径);
把图像设置为背景
背景图片默认按照图片原大小进行平铺
jpg:背景不透明
png:可以透明(但文件会更大一些)
background-position:设置背景图像的起始位置
主要针对:no-repeat
可能的值:top left bottom right center
x% y%(第一个是水平位置，第二个是垂直位置)
xpx ypx (左上角是(0,0)点)
注:如果只写一个方向,那么另一个默认是center;
background-repeat:设置背景图像是否及如何重复
可能的值:repeat:默认，背景图像将在垂直方向和水平方向重复
repeat-x:在水平重复
repeat-y:在垂直重复
no-repeat:背景图像不重复，仅显示一次
当尺寸为 0 像素时，0 之后不需要使用 px 单位
/*背景大小 w500+tab,h500+tab */
width:500px;
height:500px;
/*背景颜色 bgc*+tab/
background-color:red;
/*背景图片 bgi+tab*/
background-image:url(图片路径);
/*背景重复模式 默认是平铺(repeat) 不平铺(no-repeat)*/
backhround-repeat:no-repeat;
/*背景图片大小 bgs+tab*/
background-size:横向尺寸 纵向尺寸;
/*背景图片位置 bgp+tab*/
background-position:横向位置 纵向位置；
background-position:50px 50px;
<!--还可以设置方位名词：left right bottom top center-->
background-position:center;
background属性连写:
background: color image repeat attachment position/size
position/size顺序不能乱,其他没要求
9.文本属性
color:设置文本颜色
颜色值可以是颜色名称、rgb值或十六进制数
direction:设置文本方向
可能的值:ltr:默认，从左到右
rtl:从右到左
/* 字体居中 */
横向：text-aline:center;
纵向：line-height:50px;
line-height:设置行高
行高 = 当前元素高度 单行文字纵向居中
可能的值:normal:默认，设置合理的行间距
number:设置数字，此数字会与当前字体尺寸相乘来市值行间距
length:设置固定的行间距
%:基于当前字体尺寸的百分比行间距
letter-spacing:设置字符间距
可能的值:normal:默认，定义字符间的标准空间
length:定义字符间的固定空间
text-align:对齐元素中的文本
可能的值:left:把文本排列到左边，默认由浏览器决定
right:把文本排列到右边
center:把文本排列到中间
text-decoration:向文本添加修饰
可能的值:none:默认，定义标准的文本
underline:定义文本下的一条线
overline:定义文本上的一条线
line-through:定义穿过文本下的一条线
blink:定义闪烁文本
text-indent:缩进元素中文本的首行
可能的值:length:定义固定的缩进，默认值：0
%:定义基于父元素宽度的百分比的缩进
text-shadow:设置文本阴影
css2包含该属性，但是css2.1没有保留该属性
text-transform:控制元素中的字母
可能的值:none:默认，定义带有小写字母和大写字母的标签的文本
capitalize:文本中的每个单词以大写字母开头
uppercase:定义仅有大写字母
lowercase:定义无大写字母，仅有小写字母
white-space:设置元素中空白的处理方式
可能的值:normal:默认，空白会被浏览器忽略
pre:空白会被浏览器保留
nowrap:文本不会换行，文本会在同一行上继续，知道遇到<br>为止
word-spacing:设置字间距
可能的值:normal:默认，定义单词间的标准空间
length:定义单词间的固定空间
10.字体属性
font连写：
font:weight style size family;
<!--文字大小-->
font-size:100px;
浏览器一般默认字体大小:16px
<!--文字加粗 100-500不加粗，600-900加粗-->
font-weight:900;
<!--文字倾斜 italic倾斜 normal不倾斜-->
font-style:italic;
<!--文字字体-->
font-family:字体名称；
若字体名称带特殊符号，例横线、空格等，字体名称必须加双引号
若是正常中文或者英文，那不需要加双引号
一般要写多个字体，用逗号隔开
表示首选字体失效的情况下，往后选择
font-family:"Times New Roman", Times, serif
11.色值问题
/*颜色色值*/
1.颜色单词
2.三原色rgb(0~255,0~255,0~255)
红 绿 蓝
3.十六进制颜色
#000000 两个为一组 各代表一种三元素的颜色
eg:#ff0000 ff=15*16+15*1=255
补充:带透明度的色值
rgba(0~255,0~255,0~255,0~1)
0表示透明,1表示不透明
12.列表属性
list-style-image:将图像设置为列表项标志
url:图像路径
none:默认，无图形被显示
list-style-position:设置列表项标志的位置
inside:列表项目标记放置在文本以内
outside:默认，保持标记位于文本的左侧
list-style-type:设置列表项标志的类型
即:序列号的样式，罗马数字、实心方块、空心圆、实心圆、英语字母等
/* ul li里默认自带修改 */
有序无序列表默认自带的数字或圆圈：
list-style:none;
13.表格属性
14.after伪元素选择器
选择器1:after{
context:"内容"
}
效果:会在该元素后添加context属性里的内容
15.透明度问题
<!-- opacity -->
让元素变成半透明,值是0-1
是让当前整个盒子变成半透明,连带着内容一起半透明甚至透明
<!-- rgba -->
是针对颜色的透明度设置,只是颜色
16.圆角属性
border-radius: 百分比或者px值;
50%时,对于正方形的元素来说会变成圆形
17.overflow属性
针对元素内容部分超出当前元素时的处理:
overflow:visible(默认值) 显示
overflow:scroll 超出时滚动,超不超出都会显示滚动块(滚动条)
overflow:auto 超出时可滚动,不超出时没效果
overflow:hidden 溢出部分隐藏(还有BFC的作用)
18.精灵图(雪碧图)
Css Sprites
作用:
把多张小图片放到一张大图片上
通过background背景属性,进行指定图片的显示
从而减少网络请求的次数
也是网页性能优化的手段之一
实现原理:
把当前盒子设置成 跟要截取的雪碧图里面小图片一样的大小
然后通过background-position 挪动图片位置
把小图片所在的位置跟当前盒子大小所在的位置重合
把图片要显示的那个小图片正好放在当前盒子大小区域视口内
从而显示指定图片
19.总结所有居中布局
横向居中
行内、行内块、文本在一个块级元素里面居中:
给当前块级元素设置:text-align:center;
行内、行内块、文本在一个行内块元素里面居中:
给当前行内块元素设置text-align:center;
块级元素在另一个块级元素里横向居中:
margin:0 auto;
前提:内部可以有宽度
纵向居中
行内,文本在一个块级元素中纵向居中:
给当前块级设置line-height:当前元素高度
前提:行内或者文本必须是单行
如果行内块非要在一个块级里面纵向居中,那么前提条件:
给当前行内块设置:verti-align:middle;
给外面的块级设置line-height:当前块级高度
行内,文本在一个行内块里面纵向居中
给当前行内块设置line-height:当前元素高度
块级元素在另一个块级元素里面纵向居中:
1.margin-top:(父级元素高度 - 当前元素高度)/2 px;
2.使用绝对定位 top:50%;
margin-top:自身高度的一半
绝对居中
1. 子绝父相的前提下:
给子元素设置 left:50% top:50%
margin-left:自身宽的一半
margin-top:自身高的一半
2. 子绝父相的前提下:
给子元素设置:
left:0;
right:0;
bottom:0;
top:0;
margin:auto;
20.关于行内块基线问题
情况一:
当前图片跟文本在一行内显示时,就会有文本基线对齐的问题
需要给大年img标签设置vertical-align属性
vertical-align : top | middle | bottom | baseline(默认值 基线) | px值
只要设置任意一个值 (非baseline) 就可以解决基线对齐问题
如果是px值,那么负数文本上移,正数文本下移
情况二:
当前元素未设置高度,高度按照内部的img高度撑开时,底部会有缝隙
只要给img设置vertical-align的任意一个值 (非baseline)就可以解决基线问题
三、JavaScript
1.JS基本知识
2.基础语法（部分）
①输出语句
弹出内容
alert('hello world')
控制台输出
console.log('hello world')
输出内容
console.dir('')
输出所有内容属性
选择弹窗
confirm('请选择')
输入框
prompt('请输入')
获取的值都是字符串类型，无论输入的是数字或者是字符串
②注释语句
单行注释
//
多行注释
/* */
③书写位置
/*HTML页面书写JavaScript*/
<script>
代码
</script>
/*引入外部JavaScript文件*/
<script src="main.js"></script>
④变量
值可以变化的量，作为一个数据的容器
js代码运行过程中会产生大量的临时变量
/*创建变量的步骤：
变量声明;
变量赋值；*/
//格式：
var num;
num = 1;
/*变量命名规则
必须遵守：
由字母、数字、下划线、$组成
区分大小写
不能是关键字和保留字
不能以数字开头
长度无限度
建议遵守：
变量的名称要有意义
变量的命名遵守驼峰命名法，首字母小写，第二个单词首字母大写
eg：userName
*/
//js变量数据类型
基本数据类型：
number 数值型（数字类型 整数 小数）
string 字符串类型（双引号 单引号包起来）
任何类型与字符串相加都得到字符串
boolean 布尔类型（true false）
true和数字相加相当于1；false和数字相加相当于0
undefined 未定义数据类型
null 空值数据类型
使用console.log(typeof 变量名)可以输出变量类型。
typeof null --> Object
//数据类型转换
转换成number:
Number()//只能解析纯数字的字符串
parseInt()//可以解析小数，能解析出整数，从字符串第一个开始解析，如果第一个是非数字，直接返回NaN
parseFloat()//能解析出小数，但只能解析到第一个小数点
eg:console.log(parseFloat(3.1415.1414))//3.1415
转换成String:
String();
变量.toString();//
⑤运算符
//算数运算符
+ - * / %
//比较运算符
>= <= > < == !=
//赋值运算符
var a = 10;
var b = a++ + ++a;
console.log(b);//10 + 12 = 22
// == 相等 : 首先看数据类型是否相同，若不相同则会隐式转换成相同的数据类型再去比较，如果值相同则返回true;如果不同，则返回false
// === 全等 : 首先看数据类型是否相同，如果数据类型不同，直接返回false;如果相同再去比较值是否相同
⑥程序执行流程
顺序结构
//if选择结构 从上往下执行
if(表达式){
语句1
}else if{
语句2
}else{
语句3
}
//switch-case选择结构
switch-case(变量或等式){
case 1:
语句1;
break;
...
case n:
语句n;
break;
default:
语句;
}
//switch-case 里面的判断相当于===(全等)
//for循环
for(var i = 0;i < 10;i++){
循环体语句;
}
3.DOM
1.DOM简介
/*事件三要素*/
事件源
事件类型
事件处理函数
事件语法:
事件源.on事件类型 = 事件处理函数
2.DOM获取元素
/*通过ID选择器获取元素*/
var x = getElementById("id名称");
javascript
//js变量数据类型
基本数据类型：
number 数值型（数字类型 整数 小数）
string 字符串类型（双引号 单引号包起来）
任何类型与字符串相加都得到字符串
boolean 布尔类型（true false）
true和数字相加相当于1；false和数字相加相当于0
undefined 未定义数据类型
null 空值数据类型
使用console.log(typeof 变量名)可以输出变量类型。
typeof null --> Object
//数据类型转换
转换成number:
Number()//只能解析纯数字的字符串
parseInt()//可以解析小数，能解析出整数，从字符串第一个开始解析，如果第一个是非数字，直接返回NaN
parseFloat()//能解析出小数，但只能解析到第一个小数点
eg:console.log(parseFloat(3.1415.1414))//3.1415
转换成String:
String();
变量.toString();//
⑤运算符
//算数运算符
+ - * / %
//比较运算符
>= <= > < == !=
//赋值运算符
var a = 10;
var b = a++ + ++a;
console.log(b);//10 + 12 = 22
// == 相等 : 首先看数据类型是否相同，若不相同则会隐式转换成相同的数据类型再去比较，如果值相同则返回true;如果不同，则返回false
// === 全等 : 首先看数据类型是否相同，如果数据类型不同，直接返回false;如果相同再去比较值是否相同
⑥程序执行流程
顺序结构
//if选择结构 从上往下执行
if(表达式){
语句1
}else if{
语句2
}else{
语句3
}
//switch-case选择结构
switch-case(变量或等式){
case 1:
语句1;
break;
...
case n:
语句n;
break;
default:
语句;
}
//switch-case 里面的判断相当于===(全等)
//for循环
for(var i = 0;i < 10;i++){
循环体语句;
}
3.DOM
1.DOM简介
/*事件三要素*/
事件源
事件类型
事件处理函数
事件语法:
事件源.on事件类型 = 事件处理函数
2.DOM获取元素
/*通过ID选择器获取元素*/
var x = getElementById("id名称");
3348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
