HTML学习笔记

文本格式：
b和strong标签设置文本粗体
i和em标签设置文本为斜体
big：字体放大
small：字体缩小
sub:下标
sup:上标
del:删除文本
ins:添加文本
图像：
img src：添加图片
height与width属性用于设置图像的高度和宽度
alt属性用来为图像定义一串预备可以替换的文本
src:图片路径
title：鼠标放到图片上，提示文本
width:图片宽度
height:图片高度
border:图片边框 solid 实体
链接：
href:添加链接
title:定义元素的替换文本
target:属性
_blank:在新窗口中打开链接文档
_parent:在父框架集中打开被链接文档
_top:在整个窗口中打开被链接文档
_self:默认值 在相同框架中打开被链接文档
锚链接：
锚链接:连接到当前页面地址
需起一个锚名称，可以是ID或者name
href=""值为要连接的锚链接名称，以#号开头
列表：
无序列表
ul标签表示无序列表
li标签表示列表项目

    	type取值：
    	disc:默认值，表示实体圆心
    	list-style:square:表示实体方心
    	list-style:circle:表示为空心圆
		float: left  列表上浮，

ol:标识有序列表
    	li:标识列表项目

    	type取值：
    	1.A:使用大写作为项目符号
    	2.a使用小写作为项目符号
    	3.1使用数字作为项目符号
    	4.I 使用大写I作为项目符号
    	5.i 使用小写i作为项目符号

表格：
HTML表结构:从语义结构上划分表格为：表头、表主体、表尾
table标签标识表格标签
tr标签标识行标签（设置行）
td标签标识单元格标签（下面）
th标签标识表格头部标签（最上层）
border标识表格边框属性
width属性设置表格宽度
bgcolor属性设置表格背景颜色
background属性设置表格的背景图片
caption：表格的标题
thead标签标识表格头部元素
tbody标签标识表格表体元素
tfoot标签标识表格表尾部分
cellpadding:表格中内容和单元格之间的距离
cellspacing:表格中单元格和单元格之间的距离
在默认情况下，如果不设置表格的边界，表格不显示边界的，可以用border属性设置表格边框
thead标签标识表格头部元素
tbody标签标识表格表体元素
tfoot标签标识表格表尾元素
colspan:跨列(合并列）
rowspan:跨行(合并行)
表单:
form表单标签 action (把信息提交给谁) method 提交方式 post（增删改） set（查）
input (type)?text ?password ? subimt? span跨度
语法：
↓↓↓↓↓↓↓
常用的元素类型type:
text:单行文本框 (用户名)
textarea:多行文本框 rows:设置文本框的行数 cols：设置文本框的宽度
password:密码文本框
submit:提交按钮
image:图片按钮
reset:重置按钮，重设表单内容。
button:普通按钮
hidden:隐藏元素
radio:单选按钮（checked="checked"默认选） 设置name相同 就不会多选了
checkbox:复选框
file:文件域
select:列表框
使用上传必须改一下表单的enctype=“multipart/form-data” →→！！！ type=“file” 上传
1.maxlength:type为text 或 password 时，输入的最大字符数
2.maxlength:限定输入最大字符数
3.value：元素初始值，type 为 radio时必须指定一个值（起名字）
4.name:标识表单元素的名称。
5.checked=“checked”：type为radio或checkbox时，指定按钮是否是被选中
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
使用上传必须改一下表单的enctype=“multipart/form-data”
1.maxlength:type为text 或 password 时，输入的最大字符数
2.maxlength:限定输入最大字符数
3.value：元素初始值，type 为 radio时必须指定一个值
4.name:标识表单元素的名称。
5.checked=“checked”：type为radio或checkbox时，指定按钮是否是被选中

		<span>颜色：</span>
		！<select name="color" id="color">！
			<option value="">请选择</option>
			<option value="red">红色</option>
			<option value="bake">黑色</option>
			<option value="green">绿色</option>
			<option value="bule">蓝色</option>
		！</select>！

字体：




文本：
1.text-align:设置文本水平对齐方式，常用值：
left right center
2.line-height:设置文本行高属性
3.text-indent：设置文本首行缩进
4.text-decoration:设置文本装饰
常用属性：none 默认值：标准 （常用在超链接设置，超链接默认属性是text-decoration：underline）
underline：设置文本下划线
overline:设置文本上划线
line-through：设置文本删除线
5.color：字体颜色
链接样式：
设置超链接顺序：爱恨原则LoVe HAte
最常用的就是a:link 和 a:hover 不要在超链接中添加过多的链接样式，兼容性太差
a:link{
/未访问前的样式：字体颜色为黑色/
}

		a:visited{
			color: blue;
			/*点击后的样式*/
			}

a:hover{
color: red;
/鼠标移到超链接上的颜色：/
}
/鼠标点击时的样式/
a:active{
color: yellow;
}
背景样式
h1{
background-color: red;

}
p{
	background-color: blueviolet;
}
div{
	width: 800px;
	height: 800px;
	background-image: url(../img/eg_smile.gif);
	background-repeat: no-repeat;设置背景不平铺

（Background： url(…/img/eg_smile.gif) no-repeat ）→简写，无顺序规定
}
background-position:背景图片的位置属性
有两种取值：水平方向 垂直方向
1.Xpos Ypos：使用具体像素表示指定背景图片出现的位置，第一个表示水平方向
第二个表示垂直方向 例如：0px 0px 默认，表示在左上角出现，无偏移
例如：30px 40px 表示向右偏移30px 向下偏移40px(正偏移)
例如：-30px -40px 表示向左偏移30px 向上偏移40px（负偏移）
2.X% Y% :使用百分比表示背景出现位置，第一个表示水平方向
第二个表示垂直方向 例如：10% 50% 表示背景图像右偏移10% 垂直方向居中
3.top上、center中、bottom下、left左和right右。
例如：right top ：右上角出现
top：上方水平方式出现（如果仅指定一个关键字，其他值将会是"center"）
外边距margin
margin 如果两个px 前面默认上下 后面默认左右 如果4个px是上右下左
如果是三个 3 5 2 就是 3 5 2 5
margin-top: 1 px 上外边距1像素
margin-right : 2 px 有外边距2像素
margin-bottom : 2 px 下外边距2像素
margin-left : 1 px 左外边距1像素
margin :3px 5px 7px 4px; 上边距3 右边距4 下边距7 左边距4
margin :3px 5px; 上下外边距3像素 左右外边距5像素
margin :3px 5px 7px; 上外边距3像素 左右外边距5像素 下外边距7像素
margin :8px; 上右下左外边距为8像素
注意：
设置四个属性时，按照顺时针方向，依次为上、右。下、左
页面居中对齐属性：margin： 0 auto;
内边距padding
尽量不要使用padding布局，因为padding可能会改变盒子的大小，尽量使用margin

标准文档流：按照标签的顺序正确执行排列
非标准文档流：比如一个标签加了浮动定位

块元素和行元素的区别

display行元素，块元素转换

浮动float: right;
浮动后将脱离标准文档流，向左或者向右浮动，直到它的外边距碰到父元素的边框或者另一个
浮动元素的边框。（对块元素和行内元素都生效）
块元素浮动后，将失去独占一行的特征，相当于变成了一个特殊的“行内元素了”
元素向左或者向右移动后就相当于让出了自己的左边或者右边，别的元素浮动后都会在它的
左边或者右边排列。
浮动元素将紧贴着 上一个浮动元素或者父元素的边框，如果宽度不够，将换行
–>
清除浮动
/overflow:hidden可以清除浮动，作用于父元素/√√
/clear:both 作用于子元素，清除浮动影响的是元素本身/
1.一个块元素如果没有浮动，父元素没有设置高度，那么高度就是由里面的子元素撑开的
2.如果子元素设置了浮动，脱离了标准文档流，那么父元素的高度将被其忽略（想下方例子只是显示padding的值）
3.如果不清楚浮动，父元素会出现高度不够，那样的话，background等属性将得不到正确的解析
4.清除浮动影响的是元素本身的浮动，对其他元素浮动没有影响，只能对块元素有效

内容溢出overflow：
visible：默认值。内容不会被修剪，会呈现在盒子之外
hidden：内容会被修剪，并且其余内容是不可见的
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

相对定位position：
position: relative;/相对定位/
top: 200px;/上侧坐标变大，向下移动/
left: 50px;/左侧左边变大，向右移动/