HTML5学习第四天
一、HTML列表
HTML列表，有无序表，有序表以及自定义表，列表于列表之间可以实现嵌套
列表相关操作
<ul>
<li>（多选）谁世界第二可爱？</li>
<ol type="A">
<li>荔枝</li>
<li>荔枝</li>
<li>荔枝</li>
<li>荔枝</li>
<li>荔枝</li>
</ol>
<li>（多选）谁世界第一可爱？</li>
<ol type="A">
<li>不是荔枝</li>
<li>就不是荔枝</li>
<li>还是不是荔枝</li>
<li>怎么都不是荔枝</li>
<li>别看了，和上面一样</li>
</ol>
</ul>
二、HTML5块标签的使用
HTML块元素在显示时，通常会换行，HTML内联元素通常不会新行开始
HTML<div>元素主要作为HTML其他元素组合的容器，便于CSS文件对其进行样式表定义，一般会带有ID
HTML<span>元素也是一种内联元素，可以作为文本的容器，小说网站里的文字基本以<span>作为标签
HTML块
<!-- 块 -->
<p>荔枝</p>
<h1>标题荔枝</h1>
<b>加化荔枝</b>
<a href="index01.html">转跳荔枝</a>
<div id="divID">
<!-- div元素一般u用于搭配css样式搭配-->
<p>div荔枝</p>
<h1>DIV里的标题荔枝</h1>
</div> <div id="divspan">
<p><span>这是一个span荔枝测试</span>这个荔枝长什么样</p>
</div>
三、HTML5布局的使用
布局方式有<div>元素布局和<table>元素布局两种方式
<div>比较常用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div布局</title>
<link rel="stylesheet" type="text/css" href="MyCSSstyle.css">
</head>
<body>
<div id="container">
<div id="heading">头部</div>
<div id="content_menu">菜单</div>
<div id="content_body">主体</div>
<div id="footing">底部</div>
</div>
</body>
</html>
CSS文件：
body{
margin: 0px;
}
#container{
width: 100%;
height: 1080px;
}
#container{
background-image: url("img/16.jpg");
}
#heading{
width: 100%;
height: 10%;
background-color: #ffffffbf;
}
#content_menu{
width: 30%;
height: 80%;
background-color: #ffffffbf;
float: left;
}
#content_body{
width: 70%;
height: 80%;
background-color: #ffffffbf;
float: left;
}
#footing{
width: 100%;
height: 10%;
background-color: #ffffffbf;
clear: both;
}
div实现布局
table布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table布局</title>
</head>
<body marginheight="0px" marginwidth="0px">
<table cellspacing="15px" width="100%" height="1080px" style="background-image: url(img/16.jpg)">
<tr>
<td colspan="3" width="100%" height="10%" style="background: #ffffffbf" align="center">我不管</td>
</tr>
<tr>
<td width="25%" height="80%" style="background: #ffffffbf" align="center"><ul>荔枝世界第二可爱</ul></td>
<td width="50%" height="80%" style="background: #ffffffbf" align="center" style="font-size: xx-large;"><ul>祖张依世界第一可爱</ul></td>
<td width="25%" height="80%" style="background: #ffffffbf" align="center"><ul>荔枝世界第二可爱</ul></td>
</tr>
<tr>
<td colspan="3" width="100%" height="10%" align="center" style="background: #ffffffbf">嘿嘿嘿</td>
</tr>
</table>
</body>
</html>
table实现布局