-----------------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】