-----------------siwuxie095
HTML5 列表
标签
描述
<ol>
有序列表
<ul>
无序列表
<li>
列表项
<dl>
列表
<dt>
列表项
<dd>
描述
1、无序列表
标签：<ul>、<li>
属性：disc、circle、square
2、有序列表
标签：<ol>、<li>
属性：A、a、I、i、start
3、嵌套列表
标签：<ul>、<ol>、<li>
4、自定义列表
标签：<dl>、<dt>、<dd>
HTML5 块
1、HTML 块元素
块元素在显示时，通常会以新行开始，如：<h1>、<p>、<ul>
2、HTML 内联元素
内联元素通常不会以新行开始，如：<b>、<a>、<img>
3、HTML <div> 元素
<div>元素也被称为块元素，其主要是组合（承载）HTML 元素的容器
4、HTML <span> 元素
<span>元素是内联元素，可作为文本的容器
HTML5 布局
1、使用<div>元素布局
2、使用<table>元素布局
如下：
（1）DIV 布局
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>div布局</title>
<style type="text/css">
body{
margin:0px;
}
#container{
width:100%;
height:950px;
background-color: darkgray;
}
#heading{
width:100%;
height:10%;
background-color: aqua;
}
#content_menu{
width:30%;
height:80%;
background-color: aquamarine;
float: left;
}
#content_body{
width:70%;
height:80%;
background-color: blueviolet;
float: left;
}
#footing{
width:100%;
height:10%;
background-color: brown;
clear: both;
}
</style>
</head>
<body>
<divid="container">
<divid="heading">头部</div>
<divid="content_menu">内容菜单</div>
<divid="content_body">内容主体</div>
<divid="footing">底部</div>
</div>
</body>
</html>
（2）TABLE 布局
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>table布局</title>
</head>
<bodymarginwidth="0px"marginheight="0px">
<tablewidth="100%"height="950px"style="background-color: darkgray">
<tr>
<tdcolspan="2"width="100%"height="10%"style="background-color: aqua">头部</td>
</tr>
<tr>
<tdwidth="30%"height="80%"style="background-color: aquamarine">内容菜单</td>
<tdwidth="70%"height="80%"style="background-color: blueviolet">内容主体</td>
</tr>
<tr>
<tdcolspan="2"width="100%"height="10%"style="background-color: brown">底部</td>
</tr>
</table>
</body>
</html>
【made by siwuxie095】
