-
列表
HTML列表
<ol> 有序列表
<ul> 无序列表
<li> 列表项
<dl> 列表
<dt> 列表项
<dd> 描述
- 无序列表
- 使用标签:<ul>、<li>
- 属性:disc、circle、square
- 有序列表
- 使用标签:<ol>、<li>
- 属性:A、a、l、i、start
- 嵌套列表
- 使用标签:<ul>、<ol>、<li>
- 自定义列表
- 使用标签:<dl>、<dt>、<dd>
-
块(注释:<!-- -- >)
- HTML块元素
- 块元素在显示时,通常会以新行开始
如:<h1>、<p>、<ul>
- HTML内联元素
- 内联元素通常不会以新行开始
如:<b>、<a>、<img>
3.HTML<div>元素
<div>元素也被称为块元素,其主要是组合HTML元素的容器
4.HTML<span>元素
<span>元素是内联元素,可作为文本的容器
-
布局
- <div>布局
<!DOCTYPE html>
<html>
<.head lang =”en”>
<meta charset=”UTF-8”>
<title>div布局<title>
<style type=”text/css”>
body{ <!--去除白边-->
margin:0px
}
#container{
width:100%;
height:950px;
}
#heading{
width:100%;
height:10%;
}
#content_menu{
width:30%;
height:80%;
float:left;
}
#content_body{
width:70%;
height:80%;
float:left;
}
#footing{
width:100%;
height:10%;
clear:both;
}
</style>
</head>
<body>
<div id=”container”>
<div id=”heading”>头部</div>
<div id=”content”>内容菜单</div>
<div id=”content_menu”>内容主体</div>
<div id=”footing”>底部</div>
</div>
</body>
</html>
2.<table>布局
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8”>
<title>table布局</title>
</head>
<body marginheight=”0px” marginweight=”0px”>
<table width=”100%” height=”950px” style=”background-color:darkgray”>
<tr>
<td colspan=”3” width=”100% height=10%” style=”background-color:aqu”>这是头部
</td>
</tr>
<tr>
<td width=”20%” height=”80% style=”background-color:blue””>
<ul>
<li>ios</li>
<li>android</li>
<li>html5</li>
</ul>
</td>
<td width=”60%” height=”80% style=”background-color:blueviolet””>内容主体 </td>
<td width=”20%” height=”80% style=”background-color:deeppink””>右菜单</td>
</tr>
<tr>
<td width=”100%” height=”10% colspan=”3” style=”background-color:deeppink””>底部菜单</td>
</table>
</body>
</html>