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; /*鼠标经过菜单文字改变*/
}