Rumah > Artikel > hujung hadapan web > HTML5学习笔记（四）-列表, 块和布局代码实例
HTML5学习笔记（四）-列表, 块和布局代码实例
- 黄舟asal
- 2017-03-16 15:41:481277semak imbas
HTML列表
列表标签
| 标签 | 描述 |
|---|---|
| c34106e0b4e09414b63b2ea253ff83d6 | 定义有序列表。 |
| ff6d136ddc5fdfeffaf53ff6ee95f185 | 定义无序列表。 |
| 25edfb22a4f469ecb59f1190150159c6 | 定义列表项。 |
| def3eed00a09ea710a4bfa4b7fe74771 | 定义定义列表。 |
| 73de882deff7a050a357292d0a1fca94 | 定义定义项目。 |
| 67bc4f89d416b0b8236eaa5f43dee742 | 定义定义的描述。 |
| e844f12ad266097c5818f79a28478846 | 已废弃。使用 ff6d136ddc5fdfeffaf53ff6ee95f185 代替它。 |
| 5c0e96d12fc7501cef2ae2efde646ee0 | 已废弃。使用 ff6d136ddc5fdfeffaf53ff6ee95f185 代替它。 |
常用的列表
1. 无序列表
使用标签: ff6d136ddc5fdfeffaf53ff6ee95f185, 25edfb22a4f469ecb59f1190150159c6
属性: 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. 有序列表
使用标签c34106e0b4e09414b63b2ea253ff83d6, 25edfb22a4f469ecb59f1190150159c6
属性: 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. 嵌套列表(包含有序列表嵌套, 无序列表嵌套)
使用标签ff6d136ddc5fdfeffaf53ff6ee95f185, c34106e0b4e09414b63b2ea253ff83d6, 25edfb22a4f469ecb59f1190150159c6
<!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. 自定义列表
使用标签5c69336ffbc20d23018e48b396cdd57a, 73de882deff7a050a357292d0a1fca94, 67bc4f89d416b0b8236eaa5f43dee742
<!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块元素
块元素在显示时, 通常会以新行开始
如: 4a249f0d628e2318394fd9b75b4636b1, e388a4556c0f65e1904146cc1a846bee, ff6d136ddc5fdfeffaf53ff6ee95f185
2. HTML内联元素
内联元素通常不会以新行开始
如: a4b561c25d9afb9ac8dc4d70affff419, 3499910bf9dac5ae3c52d5ede7383485, a1f02c36ba31691bcfe87b2722de723b
3. HTML e388a4556c0f65e1904146cc1a846bee元素
e388a4556c0f65e1904146cc1a846bee元素也被称为块元素, 其主要是组合HTML的容器
4. HTML 45a2772a6b6107b401db3c9b82c049c2元素
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>
<!--p元素--><p id="wraper">
<p>prospective</p>
<a>1可能的,有望的 2未来的, 即将发生的</a></p><!--span元素: 文本的容器--><p id="span">
<p>respective: <span>分别的,</span> 各自的</p></p></body></html>
推荐两种方式:
1. 使用e388a4556c0f65e1904146cc1a846bee元素布局
例:css代码中其实p不用加, 通常也不用添加
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>p布局</title>
<style type="text/css">
body{margin: 0px}
p#container{
/*可以充满全屏*/
width: 100%;
height: 950px;
background-color: darkgray;
}
p#heading{
width: 100%;
height: 10%;
background-color: aqua;
}
p#menu{
width: 30%;
height: 80%;
background-color: darkorange;
float: left;
}
p#mainbody{
width: 70%;
height: 80%;
background-color: brown;
float: left;
}
p#footing{
width: 100%;
height: 10%;
background-color: cornflowerblue;
clear: both;
}
</style></head><body><p id="container">
<p id="heading">头部</p>
<p id="menu">内容菜单</p>
<p id="mainbody">内容主体</p>
<p id="footing">底部</p></p></body></html>2. 使用f5d188ed2c074f8b944552db028f98a1元素布局
例:
<!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>Atas ialah kandungan terperinci HTML5学习笔记（四）-列表, 块和布局代码实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!