html复习

超文本标记语言：hyperText Markup Language

标签分类
块级：p\hr\ol\ul\dl\dt\dd\li\div\h1-h6\form
特点：宽度占满父级，占据一行，可设置宽高
行内：span\strong\i\b\em\a
特点：宽度由内容撑开，从左到右排列，不可以设置宽高
行内块级：img\input\select\textarea
特点：宽度由内容撑开，从左到右排列，可以设置宽高

链接a：
1<a href="相对路径"  target="_blank"></a>
2<a href="网址"  target="_blank"></a>
3<a href="#id"  target="_blank"></a>
图片img
src：引入图片的路径，路径开头的/表示根目录
alt：替换文字
title：提示文字

表格table:
border=‘1’可以给表格和表格中的单元添加1像素的边框；
border=‘2’只有表格的边框变宽
border-collapse:collapse
tr行 td 标准单元格 th表头单元格
colspan跨列   rowspan跨行

表单form:
action 规定提交地址
method 提交方式 get/post

input:text/password/radio/checkbox/file/submit/button/hidden/image/reset
select option
textarea
设置默认值：
1.text、password、hidden设置value属性
2.radio、checkbox    checked="checked"
3.option  selected="selected"
4.file不能设置默认值
5.textarea  设置标签之间的内容
禁用表单元素 disabled="disabled"


css:层叠样式表
引入方式：1、行内  2、内嵌  3.外链式<link href=''>
基础语法：选择器{属性：值；属性：值；}
选择器：*   tagName（权重 1） .class（10）  #id（100）  sel1,sel2,sel3   sel1sel2
sel1 sel2   sel1>sel2    a:hover（10）

属性：
文字： font-style font-variant font-weight  font-size line-height font-family
文本： text-align text-decoration(none underline overline line-through) text-indent
背景： background-color background-image：url()   background-repeat
           background-position:left/center/right top/center/bottom(第二个值默认center;);
           100px(left) 200px(top);
                                            
盒模型：
内容 width height
内填充 padding 100px 四个方向 100px 200px 上下 左右
           100px 200px 300px 上 左右 下 100px 200px 300px 400px 顺时针
边框 border:1px solid #333; border-top-width border-top-style  border-top-color border:none;border:0;
外边距 margin 可以是负值
           margin-top的传递问题
           解决：给父元素设置边框或padding 给父元素设置overflow:hidden
           overflow : hidden/auto/scroll/visible
           display:block/inline/inline-block/none

浮动float:
left; 从左到右，脱离文档流
right 从右往左，脱离文档流
none; 取消浮动
清除浮动：解决浮动的元素无法撑开父级高度的问题
1、给父级设置height
2、给父级设置overflow:hidden
3、在浮动的元素的父元素之后添加一个文档流内的元素，给其添加clear:both;
.clear:after{content:'';display:block;clear:both}
.clear{*zoom:1;}

定位postion:
left/right同时设置，left有效
top/bottom同时设置，top有效

relative;相对定位
参照物：元素本身的位置
不脱离文档流

absolute;绝对定位
参照物：离当前定位元素最近的一个带有position属性的祖先元素，如果没有就是body
脱离文档流

fixed;固定定位
参照物:浏览器可视窗口
脱离文档流

z-index:默认值是0，数值越大层级越高，层级相同的元素，后面的元素在上；

脱离文档流的元素：不区分块级和行内，宽度由内容撑开，可以设置宽
高及盒模型属性

overflow：hidden/auto/scroll

h5新增表单元素
placeholder: 表单元素的提示文字
pattern:  给表单元素添加正则验证
form:  规定表单元素属于哪个表单
required: 规定表单元素为必填项
formaction：给按钮规定表单数据提交的位置

圆角和阴影
box-shadow: 水平阴影位置   垂直阴影的位置   阴影的模糊半径
阴影的宽度    阴影的颜色   是否内阴影
box-shadow: 3px 3px 10px 5px gray inset;

transform:(和transition一起用)
位移  translate(x,y)    translateX(100px)   translateY(100px)
旋转  rotate(deg)
倾斜  skew()
缩放  scale() scaleX()

动画
animation-name    规定需要绑定到选择器的 keyframe 名称。。
animation-duration    规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function    规定动画的速度曲线。
animation-delay    规定在动画开始之前的延迟。
animation-iteration-count    规定动画应该播放的次数。
animation-direction    规定是否应该轮流反向播放动画。