HTML文件格式
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
标签
<b></b>粗标签
<strong></strong>粗标签
<mark></mark>高亮强调
<em></em>斜体强调
<i></i>斜体
<p></p>文本,删除空格
<pre></pre>保留原来的文本
<form></form>表单
文本框(可在尖括号里添加value对其进行初始化)
<input type="text"/> 普通文本框
<input type="password"/>密码框
<input type="textarea"/>文本域
<textarea ></textarea>文本域(属性:readonly(只读),disable(不可使用))
按钮
<input type="submit" value="按钮"/>(触发提交)
<button></button>普通按钮
<input type="reset" value="重置按钮">(重置按钮)
下拉框
<select>
<option value="">""</option>
......
</select>
单选框
<label>""</label><input type="radio" name=""/>
<label>""</label><input type="radio" name=""/>
复选框
<label>""</label>
<label></label><input type="checkbox"/>
......
<span></span>包含文本的标签
<fieldset></fieldset>定义一个框
<legend>""</legend>在框上添加文字
HTML框架
iframe内联框架,用来嵌入另一个文档
<iframe src="文件路径"></iframe>
表格
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
colspan单元格列合并
rowspan单元格行合并
<div></div>布局
<table></table>布局
<ol></ol>有序列表
<ul></ul>无序列表
<dl></dl>自定义列表
css样式 h{第一个样式;第二个样式}
背景
background
-color;颜色
-image:url(图片路径);背景图片
-repeat背景重复(no-repeat默认左上角,repeat-y纵坐标平铺,rapeat-x横坐标平铺)
-position图片位置(center,right bottom...)
文本
text-indent缩进文本
text-align水平对齐(left,right,center)
word-spacing英文字符间隔
letter-spacing单词或汉字间隔
text-transform字符转换(uppercase大写,lowercase小写,none不改变,captialize首字母大写)
text-decoration文本装饰(underline...)
white-space处理空白符
direction文本方向(rtl靠右显示)
字体
font-family字体样式
font-style字体风格(italic 斜体,oblique文本斜体,normal正常)
font-varaint字体变形(small-caps小型大写字母,normal,inherient继承)
font-weight加粗
font-size字体大小
超链接
a:link{}链接默认
a:visited{}点完之后
a:hover{}鼠标放上去
a:active{}点击时
CSS列表
无序列表前的标识
p{list-style-square}正方形
p{list-style-image:url("路径")}图片
p{list-style-position}(inside将形状放于文本内,outside右偏移)
CSS表格
border-collapse边框合并
text-align水平设置(center,left,right)
vertical-align上下设置(middle,bottom,top)
CSS样式表优先级
内联>内部样式表>外部样式表
CSS框模型
padding内边距
padding:x x x x(上)(右)(下)(左)
padding:x x;(上下)(左右)
padding:x x x(上)(左右)(下)
pdding:x(上下左右)
margin外边距(同内边距)
border边框(left,right,top,bottom)
min-width:""当品目缩放到""时,会产生滚动条
定位
position:relative相对定位
1.使用相对定位不会影响元素本身
2.不会脱离文档流,只是发生了偏移
3.如果没有设置偏移量,不会对元素造成影响
4.还会占据原来的空间
position:absolute绝对定位
1.脱离文档流
2.使用绝对定位会设置当前元素为inline-block(可以设置宽高)
3.可以使坐标进行移动(
1.绝对定位没有定位父级,默认以文档作为父级
2.如果有定位父级,就以定位父级移动
3.如果有多个定位父级,找最近的定位父级
4.相对定位一定配合绝对定位使用)
z-index:1/2/3...提升模块优先级,但其必须配合position使用
!important可将其他权重设置为0
position:static静态定位
按照正常的文档流排版(默认属性)
position:fixed固定定位(可做导航,不会随着滚动条运动而运动)
浮动
float:left/right/none
1.使块元素在一行显示,为每个元素设置了inline-block
2.使行元素支持高、宽
3.不设置高宽,高宽由内容决定
4.left从左往右开始,right从右往左开始
浮动按照一定顺序排列,碰到父元素的边界就停止或者前一个兄弟元素也停止下来
浮动会脱离文档流
clear:(both消除两边的浮动,left,right)