HTML5学习笔记（四）-列表, 块和布局代码实例
HTML列表
列表标签
| 标签 | 描述 |
|---|---|
| 定义有序列表。 | |
| 定义无序列表。 | |
| 定义列表项。 | |
| <dl> | 定义定义列表。 |
| 定义定义项目。 | |
| 定义定义的描述。 | |
| <dir> | 已废弃。使用
|
已废弃。使用
|
常用的列表
1. 无序列表
使用标签:
- ,
-
属性: 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. 有序列表
使用标签
- ,
属性: 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. 嵌套列表(包含有序列表嵌套, 无序列表嵌套)
使用标签
- ,
<!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. 自定义列表
使用标签
- ,
- ,
<!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块元素
块元素在显示时, 通常会以新行开始
如:
,
,
2. HTML内联元素
内联元素通常不会以新行开始
如: , ,
3. HTML
元素
元素也被称为块元素, 其主要是组合HTML的容器
4. HTML 元素
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. 使用
元素布局
例: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. 使用
元素布局
例:
<!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>登录后复制以上是HTML5学习笔记（四）-列表, 块和布局代码实例的详细内容。更多信息请关注PHP中文网其他相关文章！
本站声明本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
刺客信条阴影：贝壳谜语解决方案3 周前 By DDDWindows 11 KB5054979中的新功能以及如何解决更新问题2 周前 By DDD在哪里可以找到原子中的起重机控制钥匙卡3 周前 By DDD<🎜>：死铁路 - 如何完成所有挑战4 周前 By DDDAtomfall指南：项目位置，任务指南和技巧4 周前 By DDD
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
gmail邮箱登陆入口在哪里
7652
15
CakePHP 教程
1393
52
steam的账户名称是什么格式
91
11
win11激活密钥永久
73
19
NYT迷你填字游戏答案
37
110
- ,
