HTML5 & CSS3 常用标签总结 适合小白

HTML常用标签总结

1.行内标签与块标签区别：

块标签：独占一行，可以设置宽度和高度 ；
行内标签：多个标签存在一行，对宽高属性值不生效。

2.常见块标签：

h1~h6、p、div、table、form、ul、li

3.常见行内标签：

a、img、span、input

4.常见标签用法：

<h1>标题标签</h1>
<p>段落标签</p> 
<a href="#">这是超链接</a>
<img src="图片地址" /> 
<div>div容器</div> 
<span>span容器</span>

表格用法

<table> 
	<tr>
		<td>第一行第一列</td>
		<td>第一行第二列</td> 
	</tr> 
	<tr>
		<td>第二行第一列</td>
		<td>第二行第二列</td>
	</tr>
	<tr>
		<td>第三行第一列</td> 
		<td>第三行第二列</td>
	</tr> 
</table>

列表用法

<ul>
	<li>第一项</li>
	<li>第二项</li> 
</ul>

表单用法

<form>
	<input type="text" />
	<input type="button" /> 
</form>

5.常用样式：

width: 1000px; /*设置标签宽度*/ 
height:600px; /*设置标签高度*/ 

color : #999999; /*文字颜色*/
font-family : 宋体; /*文字字体*/ 
font-size : 9px; /*文字大小*/ 

line-height : 50px; /*设置行高,一般配合height使用，设置文字垂直居中*/ 
font-weight:bold; /*文字粗体*/ 

text-decoration:underline; /*加下划线*/ 
text-decoration:none; /*删除下划线*/ 

text-align:center; /*文字居中对齐*/ 

margin-top:10px; /*上外边距*/ 
margin-right:10px; /*右外边距*/ 
margin-bottom:10px; /*下外边距*/ 
margin-left:10px; /*左外边距*/ 

padding-top:10px; /*上内边距*/ 
padding-right:10px; /*右内边距*/ 
padding-bottom:10px; /*下内边距*/ 
padding-left:10px; /*左内边距*/ 

list-style:none; /*隐藏ul前面的点*/ 

background-color:#F5E2EC; /*背景颜色*/ 
background-image : url(/image/bg.gif); /*背景图片*/ 
background-repeat : no-repeat; /*不重复排列*/ 
background-position : -10px -50px; /*背景图片向左移动10px，向上移动50px*/ 

border : 1px solid #6699cc; /*边框*/ 

float: left; /*左浮动*/ 

overflow:hidden; /*消除溢出，用于解决浮动塌陷、边距合并问题*/ 

display:none; /*隐藏标签*/ 
display:block; /*将行内标签转为块标签*/

6.常用固定样式写法：
去掉标签默认边距

*{
	padding:0px; 
	margin:0px; 
 }

让div水平居中

margin:0px auto;

让div中的内容水平垂直居中

text-align:center; 
height : 50px; /*height与line-height 值相同，根据实际情况设置*/ 
line-height : 50px;

7.水平导航菜单实现步骤：
1）搭建静态ul，如

<div id="nav"> 
	<ul>
		<li><a href="#">菜单1</a></li> 
		<li><a href="#">菜单2</a></li> 
		<li><a href="#">菜单3</a></li> 
		....... 
		....... 
	</ul> 
</div>

2）添加如下样式

/*去掉标签默认边距*/ 
*{ 
	margin:0px; 
	padding:0px; 
}
#nav ul{ 
	list-style:none; /*隐藏ul前面的点*/ 
	overflow:hidden; /*解决ul浮动塌陷*/ 
}
/*li效果*/ 
#nav ul li{ 
	width:100px; /*每个菜单的宽度，自己改动*/ 
	height:30px; /*每个菜单的高度，自己改动*/ 
	line-height:30px; /*垂直居中*/ 
	text-align:center; /*水平居中*/ 
	border:1px dashed #ccc; 
	float:left; /*水平菜单最关键的，使菜单水平排列*/ 
}
/*li中超链接效果*/ 
	#nav ul li a{ color:black; /*菜单字体颜色*/ 
	text-decoration: none; /*隐藏下划线*/ 
}
#nav ul li:hover{ 
	background-color: yellow; /*鼠标经过菜单背景颜色改变*/ 
}
#nav ul li:hover a{ 
	color:orange; /*鼠标经过菜单文字改变*/ 
}