HTML5学习第四天
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实现布局