一、HTML5列表
1、无序列表
使用标签 ：<ul>、<li>
属性：
disc：默认黑色园
circle：空心园
square:黑色方块
2、有序列表
使用标签 :<ol>、<li>
属性：A、a、I、i、start
//如下图
3、嵌套列表
使用标签：<ul>、<ol>、<;i>
如下图：05
4、自定义列表
使用标签<dl>、<dt>、<dd>
如下图：06
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
//一、注意，这里面有三个属性，disc：默认黑色园， circle：空心园 ，square:黑色方块
<ul type="disc">
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
<li>第四列</li>
<li>第玩列</li>
</ul>
<ul type="circle">
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
<li>第四列</li>
<li>第玩列</li>
</ul>
<ul type="square">
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
<li>第四列</li>
<li>第玩列</li>
</ul>
//二、有序列表，注意，这里面有几个属性：A、a、I、i、start
<ol type="A">
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
</ol>
<ol type="a">
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
</ol>
<ol type="I">
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
</ol>
<ol type="i">
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
</ol>
<ol start="10">
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
</ol>
//三、嵌套列表
<ol >
<li>动物</li>
<ul >
<li>猫</li>
<li>马蓉</li>
<li>狗</li>
</ul>
</ol>
<ul >
<li>动物</li>
<ol>
<li>猫</li>
<li>马蓉</li>
<li>狗</li>
</ol>
</ul>
//四、自定义列表
<dl>
<dt>第一列</dt>
<dd>第一类介绍</dd>
<dt>第二列</dt>
<dd>第二类介绍</dd>
</dl>
</body>
</html>
二、HTML5块元素标签的使用
案例一（重新会换行）
<p>这是个例子</p>
<h1>这是个啥子</h1>
案例二：内联元素（不会重新换行）
<b>f我这个是内联元素</b>
<a>--------我这个是内联元素</a>
案例三：div和span元素
<div id="divid">
<p>你好啊，你好啊，你好啊</p>
<a>你不好，你不好，你不好</a>
</div>
<div>
<p> <span id="spanid">我这个怎么了，我怎么变色了</span>我也不知道为什么 </p>
</div>
- 样式：myyangshiss.css样式，使用外部样式引用，如有不懂，请看上一篇博客
#divid p{
color: red;
}
#divid a{
color: yellow;
}
#spanid{
color: red;
}
三、HTML5布局的使用，主要使用两种div和table
使用div布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用div布局</title>
<style type="text/css">
body{
margin: 0px;
}
div#container{
width: 100%;
height:600px;
color:white;
background-color: black;
}
div#headid{
width: 100%;
height: 10%;
color:white;
background-color: green;
}
div#content_menu{
width: 30%;
height: 80%;
color:white;
float: left;
background-color: blueviolet;
}
div#content{
width: 70%;
height: 80%;
color:white;
float: left;
background-color: darkgoldenrod;
}
div#footing{
width: 100%;
height: 10%;
color:white;
float: left;
clear: none;
background-color: black;
}
</style>
</head>
<body>
<div id="container">
<div id="headid" >标题</div>
<div id="content_menu">菜单</div>
<div id="content">内容</div>
<div id="footing">底部</div>
</div>
</body>
</html>
- 效果图
使用table布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table 简单布局效果</title>
<style type="text/css">
body {
margin: 0px;
}
</style>
</head>
<body>
<table width="100%" height="600px" style="background-color: burlywood">
<tr>
<td colspan="2" width="100%" height="10%" style="background-color: green" >这是个神</td>
</tr>
<tr >
<td width="30%" height="80%" style="background-color: yellow">这是个神</td>
<td width="70%" height="80%" style="background-color: brown">鬼</td>
</tr>
<tr >
<td colspan="2" width="100%" height="10%" style="background-color: hotpink">这是个神</td>
</tr>
</table>
</body>
</html>
- 效果图
