html声明方法:
<html>
<head>
<title>这里写网页标题title>
<style>
/*这里写css样式 */
style>
<script>
// 这里写javascript代码
script>
head>
<body>
body>
html>
一个完整的html介绍:
<head>
DOCTYPE html>
<html lang="en">
<meta http-equiv="X-UA-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
head>
一个SEO的声明:
<head>
<title>我是标题title>
<meta name="description" content="我是网页的描述信息">
<meta name="keywords" content="这是网页的搜索关键词">
head>
更改网站的图标:
<head>
head>
标题标签有6级:
<h1>1级标题h1>
<h2>2级标题h2>
<h3>3级标题h3>
<h4>4级标题h4>
<h5>5级标题h5>
<h6>6级标题h6>
段落标签:
1. <p>这是段落标签pp>
换行标签:
1. <br> <!--单标签,强制换行->
水平线标签:
1. <hr>
独占一行(块级) | 网页头部 | 一行多个(行内) | 网页导航 |
---|---|---|---|
div | header | span | nav |
网页底部 | 网页侧边栏 | 网页区块 | 网页文章 |
footer | aside | aection | article |
说明 | 标签 | 标签 |
---|---|---|
加粗 | b | strong |
下划线 | u | ins |
倾斜 | i | em |
删除线 | s | del |
图片标签:(记得设置 宽 width 高 height)
<img src="路径" alt="图片加载失败显示我的内容" title="鼠标移动到图片上显示我的内容">
音频标签: audio
<audio src="路径" controls autoplay loop> audio>
显示播放控件 | controls |
---|---|
自动播放 | autoplay |
循环播放 | loop |
视频标签: video
<video src="路径" controls autoplay muted widht="宽" height="高">video>
显示播放控件 | controls |
---|---|
自动播放(静音) | autoplay muted |
链接标签: a
<a href="要跳转的链接地址" target="_self">点我就能跳转了a>
覆盖原网页跳转 | target = “ _self ” |
---|---|
保留原网页跳转 | target = “ _blank ” |
去除链接标签的方法(css去除):
text-decoration:none;
<1>无序列表
无序列表
<ul>这是无序列表
<li>本行前面显示 黑点li>
<li>本行前面显示 黑点li>
ul>
<2>有序列表
有序列表:
<ol>这是有序列表
<li>本行前面显示 1li>
<li>本行前面显示 2li>
ol>
<3>自定义列表
自定义列表:
<dl>
<dt>自定义列表dt>
<dd>本行前面是 空白dd>
<dd>本行前面是 空白dd>
dl>
去除li前面的样式:(css去除)
list-style: none;
表格整体 | 表格每一行 (横的) | 表格每一项内容 (加粗) | 表格每一项内容 | 表格大标题 (居中) |
---|---|---|---|---|
table | tr | th | td | caption |
表格头部 | 表格主体 | 表格底部 |
---|---|---|
thead | tbody | tfoot |
合并单元格 (上下) | 合并单元格 (左右) |
---|---|
rowspan=“这里写要合并的个数” | colspan=“这里写要合并的个数” |
创建一个 宽400 高 300的表格
<table border="1" width="400" height="300">
<caption>我是表格大标题caption>
<thead>
<tr>
<th>姓名th>
<th>性别th>
<th>年龄th>
tr>
thead>
<tbody>
<tr>
<td>张三td>
<td>男td>
<td>17td>
tr>
tbody>
<ftooy>
<tr>
<td>评价:td>
<td colspan="2">非常努力td>
tr>
ftooy>
table>
文本框 | 密码框 | 单选框 | 多选框 | 提交按钮 | 重置按钮 |
---|---|---|---|---|---|
text | password | radio | checkbox | submit | reset |
分组 (参数) | 分组默认选中项 | 文件选择 | 多文件选择(参数) | 提示信息(参数) | 聚焦(css) |
name | checked | file | file multiple | placeholder | outline:none; |
input标签:
1. 文本框
<input type="text" placeholder="这是提示信息" style="outline:none;">
2. 密码框
<input type="password" placeholder="这是提示信息" style="outline:none;">
3. 单选框
<input type="radio">
4. 多选框
<input type="checkbox">
5. 提交按钮
<input type="submit">
6. 重置按钮
<input type="reset">
7. 文件选择
<input type="file">
8. 多文件选择
<input type="file" multiple>
9. 分组
<input type="radio" name="1" checked> 男
<input type="radio" name="1"> 女
10. 提示信息 和 聚焦(选中后的黑边框)
<input type="text" placeholder="这是提示信息" style="outline:none;">
提交按钮 | 重置按钮 | 普通按钮 |
---|---|---|
submit | reset | button |
button标签:
1. 提交按钮
<button type="submit">提交button>
2. 重置按钮
<button type="reset">重置button>
3. 普通按钮
<button type="button">普通按钮button>
下拉菜单整体 | 下拉菜单每一项 | 下拉菜单默认选项(参数) |
---|---|---|
select | option | selected |
下拉菜单:
<select>
<option>北京option>
<option>上海option>
<option selected>深圳option>
<option>山西option>
select>
文本域 | 规定文本域的可见宽度 (参数) | 规定文本域的课件行数 (参数) |
---|---|---|
textarea | cols | rows |
文本域: 宽度 3 个字符 行数 5个字符
<textarea cols="3" rows="5">textarea>
与单选框绑定后,点击绑定过的单选框旁边的元素,能够自动选中单选框
lable绑定:
<lable> <input type="radio" name="1"> 男 lable>
<lable> <input type="radio" name="1"> 女 lable>
<div>我是标签选择器div>
------------------------
div {
}
类选择器: 以div为例子
<div class="one">我是类选择器<div>
------------------------
.one{
}
<3>id选择器
id选择器: 以div为例子
<div id="one">我是id选择器div>
------------------------
#one{
}
<4>通配符选择器
通配符选择器: 所有元素
*{
}
<1>并集选择器
并集选择器: (用来选择多个标签)
<p>我是p标签p>
<span>我是span标签span>
------------------------
p,span{
}
<2>后代选择器:
后代选择器: 某标签的下一个标签
<div>我是div
<span>我是spanspan>
div>
------------------------
div span{
}
子代选择器: (要满足父子关系)
<div>我是div
<p>我是pp>
div>
------------------------
div>p{
}
<4>交集选择器
交集选择器: 同时满足多个条件
<p class="one">我是第一个pp>
<p id="one">我是第二个pp>
------------------------
p#one{
}
<5>伪类选择器
伪类选择器: ( :hover )
<p>我是pp>
------------------------
p:hover{
}
<6>结构伪类选择器
匹配父元素的第一个子元素 | 匹配父元素的最后一个子元素 | 匹配父元素的第n个子元素 |
---|---|---|
父元素 : first-child{ } | 父元素 :last-child{ } | 父元素 : nth-child (n) |
找到前3个元素 | 找到5的倍数 | 找到 奇数 / 偶数 |
父元素 : net-child (-n +3) { } | 父元素 : net-child(5n){ } | 父元素: net-child( odd / even) { } |
<7>伪元素
在父元素前添加一个伪元素 | 在父元素后添加一个伪元素 |
---|---|
::before | ::after |
伪元素:
<span> 敏 span>
------------------------
span::before{
content:"张";
}
span::after{
content:"学";
}
箭头光标 | 小手光标 | 工字光标 | 十字光标 |
---|---|---|---|
default | pointer | text | move |
光标类型:
1. 箭头光标
cursor="default";
2. 小手光标
cursor="pointer";
3. 工字光标
cursor="text"
4. 十字光标
cursor="move"
<1>块级元素 block
块级元素独占一行默认宽度就是父级的100%添加宽高也生效
块级元素代表:
div p ul li header nav footer等
<2>行内元素 inline
行内元素一行多个默认宽高由内容撑大不能设置宽高
行内元素代表:
a span b i u s strong
<3>行内块元素 inline-block
行内块一行多个能够设置宽高
行内块元素代表:
<4>元素显示模式转换: display
转换成块级元素 | 转换成行内元素 | 转换行内块元素 |
---|---|---|
display : block | display :inline | display : inline-block |
字体大小 | 字体颜色 | 文字缩进2字符 |
---|---|---|
font-size : 大小px | color :颜色 | text-indent:2em |
文字粗细 | 字体样式 | 标签水平居中 |
font-weight:正常400/加粗700 | font-style:正常normal / 倾斜 italic | margin : 0 auto |
行高 | 水平对其方式(居中) | 字体类型 |
line-height | text-align:居中center / 左 left / 右right | font-family: 微软雅黑; |
<1>.文字样式
文字样式:
<div>我是divdiv>
------------------------
div{
font-size:30px;
color:red;
text-algin:center;
}
溢出部分可见 (默认) | 溢出部分隐藏 | 显示滚动条(都显示) | 根据溢出决定是否显示滚动条 |
---|---|---|---|
overflow :visble | overflow :hidden | overflow : scroll | overflow :auto |
溢出处理:
<div>11111111111111111111div>
------------------------
div{
overflow : hidden;
}
<1>背景颜色
背景颜色:
background-color:颜色值
<2>背景图片
背景图片:
background-image:url(图片路径)
<3>背景图片大小
背景图片大小:
background-size: 大小值
contain 等比例缩放,可能会留空白
cover 等比例缩放,直到不留空白
<4>背景平铺
背景平铺:
background-repeat : 平铺值
repeat x轴y轴全部平铺
no-repeat 不平铺
repeat-x/y 沿着x或者y轴平铺
<5>背景所在位置
背景位置: (可以设置百分比)
background-position : 水平值(横) 垂直值(竖) /* 左移动 或 上移动 的值为负数 */
左 left 右 right | 上 top 下 bottom
精灵图要用 标签(行内)
<6>元素 / 背景 透明
元素透明: 取值在0~1之间。值越小 透明度越高
opacity:0.1
上 | 左 | 内边距 | 边框 | 虚线 |
---|---|---|---|---|
top | left | padding | border | dashed |
下 | 右 | 外边距 | 实线 | 点线 |
bottom | right | margin | solid | dotted |
<1>元素版心居中
元素版心居中:
margin : 0 auto
<2>边框设置
边框设置:
边框粗细 border-width: 数字px
边框样式 border-style: 实线 solid / 虚线 dashed / 点线 dotted
边框颜色 border-color: 颜色值
边框设置复合属性 (不区分先后顺序)
盒子边框设置:
border : 粗细px 边框样式 颜色值;
对边框中的 某一边 进行设置
border-left: 粗细px 实线 solid 颜色值 ;
<3>盒子模型4个角的度数
盒子模型4个角的度数:
border-radius: 左上px 右上px 右下px 左下px
简写教程:
如果俩个角相等 且俩叫向对 就可以只写一个 (左上--右下) (右上--左下)
如果所有角的值都一样 可以只写一个值
胶囊按钮: (胶囊按钮的大小为高度的一半)
border-radius:高度的一半
元素为圆形: (值为高 宽的一半)
border-radius: 高的一半 宽的一半
<4>盒子大小自动内减
盒子大小自动内减:
box-sizing:border-box
<5>盒子阴影
盒子阴影:
box-shadow: 水平偏移(横)px 垂直偏移(竖)px 模糊度px 阴影大小px 颜色值;
向左移动填写负数,向上移动填写负数
<6>内边距 / 外边距
内边距:
padding: 上 右 下 左
上 左右一样 下
上下一样 左右一样
外边距:
margin: 上 右 下 左
上 左右一样 下
上下一样 左右一样
<7>清除默认的内外边距
清除默认内外边距:
*{
margin : 0 ;
padding: 0 ;
}
<8>元素显示/隐藏
元素隐藏:
display : none
元素显示:
display : 元素是块级就写 block 元素是行内就写 inline
(指设置内外边距不生效)
父子级标签,都是块级子级设置内外边距就会影响父级位置
内外边距塌陷解决办法:
overflow:hidden /* 要放到不生效元素的上一级 */
双伪解决塌陷办法:
父级元素::before{
content:"";
display:table;
}
绝对定位 | 相对定位 | 固定定位 | 粘贴定位 |
---|---|---|---|
absolute | relative | fixed | sticky |
定位的值同时写 left和right,只有left生效。同时写 top和bottom时,只有top生效
<1>绝对定位居中
绝对定位的盒子不能使用 居中
绝对定位居中:
position : absolute; /* 绝对定位 */
left : 50%; /* 设置定位为水平的一半 */
top : 50%; /* 设置定位为垂直的一半 */
transform : translate(-50%,-50%); /* 位移居中 */
元素显示模式:
z-index:值 /* 值越大,元素显示越靠上 */
浮动: (float)
左浮动 : float : left
右浮动 : float : right
父子级标签,父级没有高度子级浮动就会产生显示影响
<1>清除浮动影响 (属性清除)
清除浮动影响,使用css属性清除 ( clear:both )
在添加浮动的元素的html后面写一个相同的标签,然后增加一个css属性
<div style="clear:both">div>
<2>单伪清除浮动的影响
单伪清除浮动:
设置浮动的上一级::after{
content: ""; /* 使用伪元素必须写这一个,意思时在 */
display: block; /*伪元素默认时行内,要改为块级*/
clear:both; /*清除浮动的css属性*/
height:0; /*处理兼容性问题*/
visibilility:hidden;
}
<3>最简单的清除浮动
最简单的清除浮动: (在浮动元素的父级设置)
overflow:hidden
过渡效果: (过渡一般和 :hover 配合使用,:hover的内容为元素过度后的样式)
transition: 要过度的属性(如高,宽等,全部属性为all) 时间s;
渐变效果:
background-image: liner-gradient(位置,颜色值1,颜色值2, ...)
渐变颜色 粉色 到 浅蓝色(渐变颜色从左上到右下)
background-image: liner-gradient(to right bottom,pink,skyblue)
透明效果:(配合hover伪元素使用)
background-image: liner-gradient(transpatent,rgba(0,0,0,0.5)) /*css效果*/
透明元素.hover{ opacity:1 } /*设置透明度 值在0~1之间,值越小颜色越透明*/
定义动画:
方法一:(定义俩种动画形态)
@keyframes 动画名称 {
from{
}
to{
}
}
方法二: (定义多种动画形态)
@keyframes 动画名称 {
0%{
}
10%{
}
可以设置到100%
}
动画无限循环 | 动画匀速进行 | 动画延迟 |
---|---|---|
infinite | linear | delay |
动画实现收缩效果 | 动画结束恢复原始状态 | 动画结束停留当前状态 |
alternate | backwards | forwards |
使用动画:
animation : 动画名称 动画所用的时间 延迟时间 速度曲线 重复次数 动画方向 执行完毕后的样子
动画匀速进行,实现动画收缩效果
animation : 动画名称 动画所用的时间 linear alternate ;
图片走马灯效果
图片走马灯效果:
准备5张相同宽和高的图片,然后设置一个盒子能同时放3张图片,然后图片从右到左循环播放,总盒子宽度必须为所有图片宽度+同时显示的图片的宽度(这里的总宽度为8张图片的宽),才能实现走马灯效果
逐帧动画
逐帧动画:
使用from和to的方式定义动画
逐帧动画是从左到右实现动画,那么在from里面写入的背景位图的宽为 负数总宽度
逐帧动画是从右到左实现动画,那么在to里面写入的背景位图的宽为 负数总宽度
@keyframes 动画名{
from{
background-position: 0 0 (若逐帧动画精灵图从左到右,那么第一个0为负数的总宽度)
}
to{
background-position: 0 0 (若逐帧动画精灵图从右到左,那么第一个0为负数的总宽度)
}
}
使用逐帧动画:
animation: 动画名称 所用时间 step(数量)---数量的值为精灵图动画的个数
使用弹性布局:
组成部分: 弹性容器 /盒子 主轴 侧轴
使用弹性布局: (默认是主轴对齐)
display:fiex; /*创建弹性布局,给父级添加*/
改变主轴对齐方式:
主轴对齐方式: (父级修改)
justify-content:对齐方式
flex-start 从开头处开始依次排列(默认值)
flex-end 从结尾处开始一次排列
center 居中依次排列
space-around 沿主轴均匀排列,空白间距平均分派在盒子俩测
space-between 沿主轴均匀排列,空白间距平均分派在相邻盒子直接按
space-evenly 沿主轴均匀排列,弹性盒子和容器之间间距相等
改变侧轴对齐方式:
侧轴对齐方式:(父级修改)
align-items:对齐方式
flex-start 从开头处依次排列(默认值)
flex-end 从结尾处依次排列
center 沿侧轴居中排列
stretch 弹性盒子的高铺满容器,前提是子元素不能设置高
align-self:对齐方式 (可以针对某一个元素单独设置对齐方式)
使用滚动贴合: (在父级添加)
scroll-spap-type: 滚动方向 滚动样式
滚动方向 y表示上下滚动 x表示左右滚动
滚动样式 mandatory表示强制滚动 proximity 表示智能滚动,靠近哪里向哪里滚动
设置滚动贴合的对齐方式:
scroll-snap-align: 对齐方式
start 下一块元素贴到顶部
end 下一块元素贴到底部
center 下一块元素贴到屏幕中间
平面缩放:
1. 使用img插入图片
2. transform:scale(x轴缩放倍数;y轴缩放倍数) /* 只写一个值就是等比例缩放,值大于1放大*/
平面位移:
transform:translate(水平位移距离,垂直位移距离)
/* 往左移动写负数,往上移动写负数 */
单独设置某个位置移动
左右移动 transform:translatex()
上下移动 transform:reanslatey()
平面旋转:
transform:rotate(旋转角度 单位deg) /*顺时针旋转取正数,默认以中心旋转 */
通过某个位置旋转
transform-orgin:要改变的位置 /* 上top 下bottm 左left 右right 居中center */