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>

欢迎大家提问和评论, 我尽我所能的为大家解答, 一起学习, 共同成长~

南心芭比: 热爱分享, 收获快乐~ 　

转载于:https://www.cnblogs.com/winsoncheung/p/6559629.html

HTML5学习笔记四: 列表, 块和布局相关推荐

python学习笔记四-列表
list列表序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. 列表是最常用的Python数据类型,它可以作为一个 ...
小黑小波比.极客学院.HTML5学习笔记
第1阶段HTML开发前准备 1_开发前准备 1_开发前的准备为什么学习HTML5? 因为HTML5的时代要来了.跨平台运行.然后硬件要求低双核 2GB即可什么是HTML5? HTML5是一种描述网 ...
html5学习笔记--leon
html5学习笔记–leon ####什么是html5 1.H5并不是新的语言,而是html语言的第五次重大修改–版本 2.支持:所有的主流浏览器都支持h5.(chrome,firefox,safar ...
HTML5学习笔记 —— JavaScript基础知识
HTML5学习笔记 -- JavaScript基础知识标签: html5javascriptweb前端 2017-05-11 21:51 883人阅读评论(0) 收藏举报分类: JavaScr ...
HTML5 学习笔记
HTML5 学习笔记前言该学习笔记的相关学习视频:[狂神说Java]HTML5完整教学通俗易懂目前笔记只有简单的例子和框架,将来在实践中会进一步学习和补充内容目录 HTML5 学习笔记前言 ...
MySQL高级学习笔记(四)
文章目录 MySQL高级学习笔记(四) 1. MySql中常用工具 1.1 mysql 1.1.1 连接选项 1.1.2 执行选项 1.2 mysqladmin 1.3 mysqlbinlog 1.4 ...
学习笔记之列表的使用
学习笔记之列表的使用一.列表的通用操作 1.1.加号 1.2.乘号 1.3.in 和not in 1.4.len() 1.5.max()和min() 1.6.list.index() 1.7.lis ...
python列表和元组的应用_python学习笔记之列表(list)与元组(tuple)详解
前言最近重新再看python的基础知识,感觉自己还是对于这些知识很陌生,需要用的时候还是需要翻书查阅,还是先注重基础吧--我要重新把python的教程阅读一遍,把以前自己忽略的部分学习,加强练习和记 ...
HTML5学习笔记之音视频标签
HTML5学习笔记之音视频标签其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习 ...

HTML5学习笔记四: 列表, 块和布局

HTML5学习笔记四: 列表, 块和布局相关推荐

最新文章

热门文章