一、HTML列表
1、无序列表
使用标签：<ul>、<li>
2、有序列表
使用标签：<ol>、<li>
属性：A、a、l、i、start
3、嵌套列表
使用标签：<ul>、<ol>、<li>
4、自定义列表
使用标签：<dl>、<dt>、<dd>
例：
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>列表</title> </head> <body> <!--无序列表--> <ul type="square"> <!--type可选disc、circle、square--> <li>苹果</li> <li>橘子</li> <li>香蕉</li> <li>西瓜</li> </ul> <!--有序列表--> <ol type="A"> <!--type可选A、a、l、i--> <li>苹果</li> <li>橘子</li> <li>香蕉</li> <li>西瓜</li> </ol> <!--嵌套列表--> <ul> <li>宠物</li> <ol> <li>小猫</li> <li>小狗</li> </ol> <li>人类</li> <ol> <li>中国人</li> <li>美国人</li> </ol> <li>植物</li> </ul> <ol> <li>宠物</li> <ul> <li>小猫</li> <li>小狗</li> </ul> <li>人类</li> <ul> <li>中国人</li> <li>美国人</li> </ul> <li>植物</li> </ol> <!--自定义标签--> <dl> <dt>helloWorld</dt> <dd>111111111111</dd> <dt>helloWorld</dt> <dd>222222222222</dd> <dt>helloWorld</dt> <dd>333333333333</dd> </dl> </body> </html>
二、HTML块
1、HTML块元素
块元素在显示时，通常会以新行开始
如：<h1> <p> <ul>
2、HTML内联元素
内联元素通常不会以新行开始
如：<b> <a> <img>
3、HTML<div>元素
<div>元素也被称为块元素，其主要是组合HTML元素的容器
4、HTML<span>元素
<span>元素是内联元素，可作为文本的容器
例：
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>块元素</title> <link rel="stylesheet" type="text/css" href="mycss.css"> <style> span{ color: red; } </style> </head> <body> <!--块--> <p>大家好！</p> <h1>大家好！</h1> <b>这是一个加重标签</b> <a href="http://www.baidu.com">这是一个超链接标签</a> <!--div元素--> <div id = "divID"> <p>百度一下</p> <a href="http://www.baidu.com">百度一下</a> </div> <!--span元素--> <div id="divSpan"> <p><span>这是一个测试</span>span的代码</p> </div> </body> </html>
其中mycss.css的代码如下：
#divID p /*加p表示只更改p标签的属性*/ { color: aqua; }
三、HTML布局
1、使用<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: 950px; background-color: gray; } #heading{ width: 100%; height: 10%; background-color: chartreuse; } #content_menu{ width: 30%; height: 80%; background-color: aquamarine; float: left; } #content_body{ width: 70%; height: 80%; background-color: aqua; float: left; } #footing{ width: 100%; height: 10%; background-color: deeppink; clear: both; } </style> </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>
2、使用<table>元素布局
例：
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>table布局</title> <style> ul{ color: red; } </style> </head> <body marginheight="0px" marginwidth="0px"> <table width="100%" height = "950px" style="background-color: darkgray"> <tr> <td colspan="3" width="100%" height="10%" style="background-color: chartreuse">这是头部</td> </tr> <tr> <td width="20%" height="80%" style="background-color: aqua">左菜单</td> <td width="60%" height="80%" style="background-color: aquamarine"> <ul> <li><h1>苹果</h1></li> <li><h1>橘子</h1></li> <li><h1>香蕉</h1></li> </ul> </td> <td width="20%" height="80%" style="background-color: blueviolet">右菜单</td> </tr> <tr> <td colspan="3" width="100%" height="20%" style="background-color: coral">尾部</td> </tr> </table> </body> </html>
