HTML5学习笔记<四>: 列表, 块和布局
HTML列表
列表标签
| 标签 | 描述 |
|---|---|
| <ol> | 定义有序列表。 |
| <ul> | 定义无序列表。 |
| <li> | 定义列表项。 |
| <dl> | 定义定义列表。 |
| <dt> | 定义定义项目。 |
| <dd> | 定义定义的描述。 |
| <dir> | 已废弃。使用 <ul> 代替它。 |
| <menu> | 已废弃。使用 <ul> 代替它。 |
常用的列表
1. 无序列表
使用标签: <ul>, <li>
属性: disc, circle, square
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>聊表</title> </head> <body> <!--无序列表, 列表项为li--> <!--disc 实心圆, circle 空心圆, square 实行正方形, 依次更改运行看下--> <ul type="disc"> <li>apple</li> <li>orange</li> <li>bananer</li> <li>Berry</li> </ul> </body> </html>
2. 有序列表
使用标签<ol>, <li>
属性: A, a, I, i, start
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> </head> <body> <!--有序列表, 列表项为li--> <!--A: 以A,B,C...排序 a: 以a,b,c...排序 I: 以I, II, III...排序 i: 以i,ii,iii...排序 start: 自己定义排序的第一个--> <ol type="i"> <li>iOS</li> <li>Android</li> <li>Java</li> <li>Swift</li> <li>Objective-C</li> </ol> </body> </html>
3. 嵌套列表(包含有序列表嵌套, 无序列表嵌套)
使用标签<ul>, <ol>, <li>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> </head> <body> <!----> <ul type="square"> <li>iOS</li> <ul> <li>iPhone</li> <li>iWatch</li> <li>iPod</li> <li>iPad</li> </ul> <li>Android</li> <ul> <li>Any Call</li> <li>Oppo</li> <li>Vivio</li> <li>Huawei</li> </ul> <li>Objective-C</li> </ul> </body> </html>
4. 自定义列表
使用标签<dl>, <dt>, <dd>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义列表</title> </head> <body> <!--定义自定义列表--> <dl> <!--定义自定义项目--> <dt>cast:</dt> <!--定义自定义描述--> <dd>vi. 1投掷扔抛, 2丢弃, 抛弃 3把...投向, 抛射, 4分派..., 扮演角色 5铸造, 浇铸 n. 全体演员</dd> <dt>forecast:</dt> <dd>v. 预测, 预报, /dd> <dd>n. 预测, 预报<</dd> <dt>insight:</dt> <dd>n. 洞察力, 领悟 v. 洞悉, 了解</dd> </dl> </body> </html>
HTML块
1. HTML块元素
块元素在显示时, 通常会以新行开始
如: <h1>, <p>, <ul>
2. HTML内联元素
内联元素通常不会以新行开始
如: <b>, <a>, <img>
3. HTML <div>元素
<div>元素也被称为块元素, 其主要是组合HTML的容器
4. HTML <span>元素
span元素是内联元素, 可作为文本的容器
例:可粘贴运行一下查看效果(开发工具IntelliJ IDEA)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>块元素</title> <!--样式--> <style type="text/css"> #wraper p{ color: blueviolet; } #span span{ color: indianred; } </style> </head> <body> <!--块元素--> <h1>visual:</h1> <p>视力的, 视觉的</p> <!--内联元素--> <b>vision:</b> <a>1视力, 2眼光,远见, 洞察力 3幻想 4设想, 念头</a> <!--div元素--> <div id="wraper"> <p>prospective</p> <a>1可能的,有望的 2未来的, 即将发生的</a> </div> <!--span元素: 文本的容器--> <div id="span"> <p>respective: <span>分别的,</span> 各自的</p> </div> </body> </html>
HTML布局
推荐两种方式:
1. 使用<div>元素布局
例:css代码中其实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: darkgray; } div#heading{ width: 100%; height: 10%; background-color: aqua; } div#menu{ width: 30%; height: 80%; background-color: darkorange; float: left; } div#mainbody{ width: 70%; height: 80%; background-color: brown; float: left; } div#footing{ width: 100%; height: 10%; background-color: cornflowerblue; clear: both; } </style> </head> <body> <div id="container"> <div id="heading">头部</div> <div id="menu">内容菜单</div> <div id="mainbody">内容主体</div> <div id="footing">底部</div> </div> </body> </html>
2. 使用<table>元素布局
例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table布局</title> </head> <body marginheight="0px" marginwidth="0px"> <table width="100%" height="950" style="background-color: darkgray"> <tr> <td colspan="3" width="100%" height="10%" style="background-color: aqua"> 头部 </td> </tr> <tr> <td width="20%" height="80%" style="background-color: cornflowerblue"> <ul> <li>diktatet</li> <li>diktator</li> <li>diktation</li> </ul> </td> <td width="60%" height="80%" style="background-color: cadetblue">中间部分</td> <td width="20%" height="80%" style="background-color: crimson">右菜单</td> </tr> <tr> <td width="100%" height="10%" colspan="3" style="background-color: coral">底部</td> </tr> </table> </body> </html>
欢迎大家提问和评论, 我尽我所能的为大家解答, 一起学习, 共同成长~
南心芭比: 热爱分享, 收获快乐~
