head： 头部
title： 标题
meta： 简介
body： 身体
W3C： 即万维网联盟
strong： 字体加粗
target： 目标
href： 超链接
table： 表格
video： 视频
audio： 音频
section： 区段
article： 艺术
aside： 旁白
iframe： 框架
form： 表单
potion： 选型
Test： 文本
button： 按钮
submit： 提交
label： 标签
placeholder： 占位符
required： 必须
CSS： 叠加样式表
selector： 选择器
link： 外链接
font—size： 字体大小
color： 颜色
stylesheet： 样式表
first—child： 第一个子元素
nth—child： 第n个子元素
odd： 奇数
even： 偶数
font—family： 字形
font—size： 字形大小
font—weight： 字体粗细
test—align： 文本对齐
test—indent： 单词间隔
line—height： 行高度
test—shadow： 文字阴影
background—color： 背景颜色
background—image： 背景图形
background—position： 背景位置
background—repeat： 重复
list—style： 列表类型
linear—gradient： 线性渐变
radial—gradient： 静像渐变
border： 边框
margin： 外边距
padding： 内边距
box—sizing： 盒模型
border—box： 边境框
border—radius： 边框圆角
box—shadow： 边框阴影
display： 显示
block： 块
inline： 行块
inline—block： 行内块
float： 浮动
left： 左
right： 右
clear： 清除
both： 两者
overflow： 溢出
hidden： 影藏
position： 位置
static： 静态
relative： 相对
absolute： 绝对的
fixed： 固定的
z—index： z指数
opacity： 不透明度
filter： 过滤器
alpha： 透明度
transform： 变换
translate： 翻译
scale： 缩放
rotate： 旋转
skew： 偏斜
transition： 过滤度
animation： 动画
keyframes： 关键帧
header： 标题
section： 断面
footer： 页脚
center： 居中
auto： 自动
* 视频、图片
<video src="..."controls="controls>stc-----视频路经 插入视频
<autoplay="autoplay"loop="-1" width="800px">-自动播放循坏播放
<cotrols=cotrols" >----------插入插件
<width="300px">-----------设置视频宽度
<height="300px">--------设置视频高度
<center> </center>----居中标签
<marquee> </marquee>----自动移动
<img src="...">---------图片复制必备网站
</style>--------转跳网址的必备品
---------------《*表格》
<table>-------------表格属性
<tr></tr>-------------表格行
<td></td>-----------表格例
color="#"----------------------颜色
face="1-7"--------------------字体
 :-------------空格
width="300px"-------设置表格宽度
height="300px"------------设置表格高度
border="1px"-------------设置表格边框
cellspacing="0"------设置单元格与单元格之间间距
cellpadding="20px"------设置单元格与内容之间间距
bgcolor="red"-----设置行的背景色
，影响整行单元格
<font color="#..."></font>---单元格中的字体改变颜色
<colspan="..">----------合并行单元格的标签
<rowspan="..">---------合并列单元格的标签
align="left/center/right"------水平对齐方式分别为左、中、右
valign="top/middle/bottom"------垂直方向对齐方式分别为上、中 、下
<font></font>---------------修饰文字
size="1-7"------------修饰文字大小
color="#...."------------修饰文字颜色
face="----------什么样子的字体 就打什么汉字"
-------------表示一个空格
<br/>------换行的标签
<a></a>------------打字带低线
<../>-------------浏览器向上能一次
*浏览器小部件
href=""---------跳转网页
<html> </head> ---告诉浏览器要做一个网页
<head> -----用来做声明 链接
<meta charset="utf-8"> ------------声明编码格式
charset="utf-8" 国际编码格式
<title>无标题文档</title> ----------声明页面标题 （如果不写标题 显示页面文件名称）
<body> ------------书写页面的内容
行级标签
<font></font>
属性
size="7"-------------------修饰文字大小（1-7）
color="#993300"---------------修饰文字颜色
face="微软雅黑"-----------修饰文字样式
<b></b>-------加粗
<i></i>--------------------倾斜
<u></u>------------------下划线
<del></del>--------------删除线
<br/>--------------换行
<span></span>----------修饰文字
<img/>-------------图片
--------------属性：
src="图片相对路径"
title="这是一张图片"------------说明
alt="图片加载中……" ---------路径错误时显示
width="100"---------设置宽度
height="500"-------------------设置高度
<p>段落</p>-------自带上下边距
<ul type="disc"> -------------列表标签（无序列表）
属性：
type="square"-------------实心方块
type="disc"-----实心圆
type="circle"--------------空心圆
<ol type="I">
<li>li标签23214级APP2班</li>
属性：
type="1" --------默认以数字排列
type="a" ---------------------- 以小写字母排列
type="A" -------------------- 以大写字母排列
type="I" --------------- 以大写罗马字母排列
type="i" -------------------- 以小写罗马字母排列
<marquee></marquee> -----------滚动标签
----------------《 、选项 下面纤细》
属性cols="50px" 设置宽度
rows="20px" 设置高度
<br/>-------------换行
<colspan="..">-------------合并行单元格的标签
<rowspan="..">----------------合并列单元格的标签
<font color="#00CCFF">
<form action="个人质料表1.html" method="get">
账号：<input type="text" name="账号" placeholder="请输入账号" /><br/>----账号
密码：<input type="password" name="pwd" value="请输入账号" /><br/>---密码
性别：<input type="radio" name="sex" value="男"/>男------性别
爱好：<input type="checkbox" name="ail" value="篮球"/>篮球----多选
下拉菜单:
<select name="add">
<option value="邯郸">邯郸</optgroup>-----买菜单
</select>
上传：<input type="file" name="sc" value="上传"/></br>-------发传
留言：<textarea name="ly" cols="50px" role="20px"/></textarea>-----留言
提交：<input type="submit" value="提交"/>-------------提交
重设置<input type="reset" value="重设置"/>------------重设置
-----《介绍、选项↑上面都是》
action="......html" 要提交到的页面
method="get" 明文传输
method="post" 密文传输
<input /> 输入框
name="" 输入框名
type="text" 文本类型
type="password" 输入框类型密码
type="submit" 提交
typr="resrt" 重置[ 或刷新]
value =".." 输入框的默认内容
placehlder="请输入用户名" 输入框的默认内容
type="radio" 单选 （name值要相同）
type="checkbox" 多选
type="file" 上传
框架
<iframe></iframe>
<iframe name="kj" width="800px" height="500px"></iframe>
-----《属性》
name="kj" 名称
width="800px" 宽度
height="500px" 高度
<a href="2.html" target="kj">链接</a>
属性
target="kj"
当a标签的target值=iframe标签的name值
a标签跳转的网页在iframe标签中打开
框架集
target="_blank"
框架集
target="_blank"
<frameset></frameset>
属性：
cols="" 水平分割
rows="" 垂直分割
noresize="noresize" 固定边框
注意：<frameset></frameset> 标签不能与<body></body> 同时存在
<frame src=""/> 展示页面
===================================================================
修复修改代码---<style> </style>
-------------------------------------------------------------------
属性：
src="" 页面链接地址
css 层叠样式表
作用： css用来修饰html页面中的内容 （包括样式 位置 大小 颜色 背景……）
使用：
1.书写位置
① 行内样式（书写在 标签内部）
关键词：style="属性名:属性值;"
② 内部（书写在 html标签内）
<div style="clear:both">
</div>
修改代码---<style>
选择器{
属性名:属性值;}
</style>
优先写在<head></head>标签内
<div>属性</div>
③ 外部
1）建立以后缀名为.css的文件
2）使html文件 与 css文件 使用<link href="10.11实例作
业/css文件的相对路径" rel="stylesheet" />链接
3）选择器{属性名:属性值;}
书写位置优先级 行内样式>内部=外部
内部和外部修饰 执行最后出现的相同修饰
2.选择器
①基础选择器
通配选择器 *{} 修饰的是所有标签
标签选择器 标签名{} 修饰的是 和选择器具有相同名称的标签
类选择器 关键词 class="类名" .类名{} 修饰的是 具有相同类名的标签
id选择器 关键词 id="id名" #id名{} 修饰的是 具有相同id名的标签
排列选择器优先级
3.注释符 /*注释内容*/
注意：html注释符 和 css注释符 不能通用
关于文字属性：
color:orange; 修饰的是文字颜色
font-weight:bold; 文字字体加粗
font-family:"黑体"; 文字样式
//修饰的是类名叫做div的标签里面的 所有类名叫做b的标签，将其颜色修饰为红色
2)伪类选择器
:li: last-child：hover{} 修饰的是鼠标放在内容上所显示的样式
例：span:hover{color:#03F;} //鼠标滑过span标签 span标签内文字颜色改变
:nth-of-type(n) 设置某一个子标签的具体样式
例：.ul li:nth-of-type(3){color:#933;} 将类名叫做ul的标签内的第3个li标签文字修改颜色
:last-child 修饰的是最后一个子标签
例：.ul li:last-child{color:#ccc; } 将类名叫做ul的标签内的最后一个li标签修饰为灰色
属性选择器：
name=""
3.注释符 /*注释内容*/
注意：html注释符 和 css注释符 不能通用
关于文字属性：
:hover 鼠标稚嫩变色
color:#FFFtext-decoration:none;
color:#fff; 修饰的是文字颜色
font-size:50px; 修饰大小字
font-weight:100; 文字字体加粗
font-family:"黑体"; 文字样式
font-style:normal; 字体样式 正常
font-style:italic; 字体样式 倾斜
letter-spacing:20px; 设置字间距（单位为像素）
letter-spacing:20cm; 设置字间距（单位为厘米）
letter-spacing:1em; 设置字间距（单位为字符）
text-align:right; 文字水平居右
text-align:left ; 文字水平居左
text-align:center; 文字水平居中
line-height:800px; 行高
text-decoration:underline; 设置文字下划线
text-decoration:line-through; 中划线
text-decoration:overline; 上划线
text-decoration:none; 取消默认下划线
text-indent:2em; 首行缩进
width:600px; 网页墙纸宽
height:500px; 网页墙纸高
background:#3CF; 网页墙纸颜色
text-shadow:-5px 5px 10px red; 文字阴影
水平方向 垂直方向 模糊程度 阴影颜色
box-shadow:3px 6px 10px #000;盒子阴影
注意：正值表示 向右 或 向下
负值表示 向上 或 向左
white-space:nowrap; 取消汉字在块级标签中的自动换行
宽度/高度
width:50px; 宽度
height:50px; 高度
width:50%; 宽度 //宽度为父标签的50%;
height:50%; 高度 //高度为父标签的50%;
min-width:500px; 最小宽度
max-width:1000px; 最大宽度
min-height:100px; 最小高度
max-height:100px; 最大高度
关于背景
background:blue; 背景颜色
background:rgba(248,46,31,0.1); 带有透明度的背景颜色 //透明度0~1之间
background:linear-gradient(to left top,red,yellow); 渐变背景色
background:adial-gradient(red,biue,#0FF,#FCF,#969,#6F3);镜像渐变背景色
background-image:url(10.jpg); 背景图片
background-size:100% 100%; 背景图片大小
宽度 高度
background-repeat:no-repeat; 设置背景图片的平铺方式为不平铺
background-repeat:repeat-y; 平铺方式为纵向平铺
background-repeat:repeat-x; 平铺方式为横向平铺
说明：url src href
说明：url src href
相同点：表示连接路径
不同点：
1.url表示css文件中的路径链接 src和href表示html文件中的路径连接
2.url和src 表示本标签要显示的文件路径 href表示链接要跳转的页面
列表属性
list-style:square; 序标为实心方块
list-style:circle; 序标为空心圆
list-style:disc; 序标为实心圆
list-style:upper-alpha; 大写英文排序
list-style:lower-alpha; 小写英文排序
list-style:upper-roman; 大写罗马文排序
list-style:lower-roman; 小写罗马文排序
list-style:none; 取消序标
list-style-position:inside; 序标在li标签里
list-style-position:outside; 序标在ul标签里
list-style-image:url(../1.jpg); 序标为图片
其他
opacity:0~1; 透明度（标签内的所有内容都有透明度效果）
cursor:pointer; 鼠标滑过变为手型
overflow:hidden; 超出部分隐藏
overflow:scroll; 超出部分隐藏（带滚轮）
显示与隐藏
display:none; 隐藏（不占空间）
display:block; 显示
visibility:visible; 显示
isibility:hidden; 隐藏（占空间）
浮动
float:left; 左浮动
float:right; 右浮动
clear:both; 清除浮动
浮动过的盒子称为非标准流盒子
没有浮动过的盒子称为标准流盒子
标准流盒子不认识非标准流盒子会向上找原点
非标准流盒子认识标准流盒子会在本行找原点
外边距
margin：
bottom:
margin-left:30px 左外边距
margin-rignt:30px 右外边距
margin-top:30px 上外边距
margin-bottom:30px下外边距
margin：100px 上下左右各100px外边距
margin：100px 50px；上外边距100px左右外边距300px下外边距50px
margin：100px 300px 50px 10px 上100px 右300px 下50px 左10px
margin：0px auto； 上下边距0px 左右自动居中
margin：0px 50px； 居中向上左边距
内边距
padding：100px; 上下左右边距为100px
padding：100px;200px 上下100px左右边距为200px
padding：100px;10px 50px 上100px左右10px下内边距为50px
padding：10px;20px 30px 40px 上10px右20下30px
padding-left:100px；左内边距100px
padding-right;100px；右内边距100px
padding-top；100px；上内边距100px
padding-bottom;100px；下内边距100px
外框
border:10px solid red; 边框2px宽 实线 黑色
boredr-left；100pxsolid red 左边框
border-top：100pxsolid green；上边框
border-right：100pxsolid blue；右边框
border-bottom；100pxsolid pink；下边边框
边角弧度
border-radius：50px 四个角弧度都为50px
border-bottom-right-radius：50px；右下弧度为50px
border-top-left-radius100% 坐上弧度为100%
定位
position:fixed; 固定定位
position:absolute;绝对定位
position:relative;相对定位
z-index:-1; 调整层关系
缩放
transform:scale(1.2);
定义：：指定标签2d缩放 1.2表示 横向 和 纵向同时放大1.2倍
transform:scale(0.7); 0.7表示横向 和 纵向同时缩小为原来的0.7倍
transform:scale(1.2,1.5); 1.2表示横向放大1.2倍 纵向放大1.5倍
transform:scale(0.2,0.5);
形变
transform:skew(30deg,40deg)
定义：：指定标签2d形变
注意：
当子盒子z-index属性为负值时，同时父盒子没有z-index属性，父盒子在子盒子上方
其余任何情况 都是子盒子在父盒子上方
right:10px; 距离右边10px
top:100px; 距离上边100px
left:50px; 距离左边50px
css过渡效果
定义：使标签从一种状态转换为另一种状态，并且赋予时间
transition:all 5s ease 2s; all(全部)5s（时间）ease（运动状态）2s(延迟时间)
transition-property:width /all; 执行过度的属性（可以单独修饰其中一个属性名）
transition-duration:3s; 过度时间
transition-timing-function:ease/ease-in-out;（开始和结束慢中间部分匀速）/ease-in;（开始慢）/ease-out（结束慢）/linear（匀速）; 运动状态
transition-delay:2s; 延迟时间
位移
transform:translate(300px,100px);
定义： 指标签的2d平移 （300px表示水平方向的移动，100px表示垂直方向的移动）
旋转x
transform:rotate(-3600deg); 旋转
transform:rotateZ(-3600deg); //z轴旋转
transform:rotateX(360deg); //x轴旋转
transform:rotateY(360deg); //y轴旋转
定义：指定标签2d旋转 -360deg表示逆时针旋转360° 单位deg
css 动画
@keyframes 关键词
定义：使标签从一种状态转换为另一种状态，并且赋予时间，同时不需要鼠标触发（页面加载完成自动执行）
属性：
animation-duration:3s; 动画时间
animation-:name a; 动画名称
animation-timing-function:linear; 运动状态
animation-delay:3s; 延迟
animation-direction:alternate-reverse; 逆向播放
animation-direction:alternate 正向播放
animation-iteration-count:2; 播放次数
animation-iteration-count:infinite; 无限循环播放
transform-origin:left左/right右/top上/bottom下; 旋转焦点移动上下左右
例1：
@keyframes a{
from{background:red;}
to{background:green;}
}
例2：
@keyframes a{
0%{
background:red;
transform:scale(1)}
30%{
background:yellow;
transform:scale(1.2)}
60%{
background:blue;
transform:scale(1.5)}
90%{
background:green;
transform:scale(1.2)}
100%{ background:red;
transform:scale(1)}
}
媒体查询
body {
background:red;
}
// 表示宽度在600-1000px之间 背景颜色为红色
@media screen and (max-width: 600px) {
body {
background:blue;
}
//表示宽度小于600px 页面背景色为蓝色 }
@media screen and (min-width: 1000px) {
body {
background:yellow;
} }
//表示宽度大于1000px 页面背景色为黄色
3d
perspective:800px; 盒子与屏幕之间距离
transform-style:preserve-3d; 3d效果
201
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
