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>
欢迎大家提问和评论, 我尽我所能的为大家解答, 一起学习, 共同成长~
南心芭比: 热爱分享, 收获快乐~
HTML5学习笔记<四>: 列表, 块和布局的更多相关文章
- HTML5学习笔记四:html5结构
一.大纲:大纲即文档中各内容区块的结构编排 1. 显示编排内容区块:使用section等元素创建文档结构,每个内容区块使用标题(h1~h6,hgroup); 2. 隐式编排内容区块:根据页面所书写的各 ...
- HTML5学习笔记四 HTML文本格式化
HTML 格式化标签 HTML 使用标签<b> 与<i> 对输出的文本进行格式, 如:粗体 or 斜体 这些HTML标签被称为格式化标签 通常标签 <strong> ...
- HTML5学习第四天
HTML5学习第四天 一.HTML列表 HTML列表,有无序表,有序表以及自定义表,列表于列表之间可以实现嵌套 列表相关操作 <ul> <li>(多选)谁世界第二可爱?< ...
- Windows phone 8 学习笔记(5) 图块与通知
原文:Windows phone 8 学习笔记(5) 图块与通知 基于metro风格的Windows phone 8 应用提到了图块的概念,它就是指启动菜单中的快速启动图标.一般一个应用必须有一个默认 ...
- python3.4学习笔记(四) 3.x和2.x的区别,持续更新
python3.4学习笔记(四) 3.x和2.x的区别 在2.x中:print html,3.x中必须改成:print(html) import urllib2ImportError: No modu ...
- kvm虚拟化学习笔记(四)之kvm虚拟机日常管理与配置
KVM虚拟化学习笔记系列文章列表----------------------------------------kvm虚拟化学习笔记(一)之kvm虚拟化环境安装http://koumm.blog.51 ...
- go微服务框架kratos学习笔记四(kratos warden-quickstart warden-direct方式client调用)
目录 go微服务框架kratos学习笔记四(kratos warden-quickstart warden-direct方式client调用) warden direct demo-server gr ...
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
- C#可扩展编程之MEF学习笔记(四):见证奇迹的时刻
前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...
随机推荐
- Android开发系列之Context
相信大家对于Context应该非常熟悉,但是Context到底是什么意思呢?到底指的是什么东西呢?我们可以理解为当前对象在程序中所处的一个环境,一个与系统交互的过程.Android系统的上下文对象,即 ...
- es6笔记7^_^class
ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类. 部分来自JavaScript ES6 class指南.mozilla https: ...
- The type or namespace name '****' could not be found
偶尔会在编译时出现“The type or namespace name '****' could not be found (are you missing a using directive or ...
- java中File类的常用所有方法及其应用
创建:createNewFile()在指定位置创建一个空文件,成功就返回true,如果已存在就不创建,然后返回false.mkdir() 在指定位置创建一个单级文件夹.mkdirs() 在指定位置 ...
- matab plot指令和低通滤波器的响应图
一.plot额外的四个属性模板使用 代码 % 提示 disp ('该功能练习plot额外四个属性功能'); %初始化快捷式数组 figure(); x=:pi/:*pi; y=exp(*sin(x)) ...
- JS打开摄像头并截图上传
直入正题,JS打开摄像头并截图上传至后端的一个完整步骤 1. 打开摄像头主要用到getUserMedia方法,然后将获取到的媒体流置入video标签 2. 截取图片主要用到canvas绘图,使用dra ...
- 解决HTML导出Excel表数字变成科学计数法
- js 中导出excel 较长数字串会变成科学计数法 在做项目中,碰到如题的问题.比如要将居民的信息导出到excel中,居民的身份证号码因为长度过长(大于10位),excel会自动的将过长的数字串转 ...
- Android项目实战(三十一):异步下载apk文件并安装(非静默安装)
前言: 实现异步下载apk文件 并 安装.(进度条对话框显示下载进度的展现方式) 涉及技术点: 1.ProgressDialog 进度条对话框 用于显示下载进度 2.AsyncTask ...
- 关于 <textarea ></textarea >标签在苹果微信浏览器出现 内阴影
解决方法:(去除浏览器默认的样式元素) textarea { box-shadow:0px 0px 0px rgba(0,0,0,0); -webkit-appearance:none; }
- TJOI2015 day2解题报告
TJOI2015终于写完啦~~~ T1:[TJOI2015]旅游 描述:(BZ没题面只能口述了..)一个人在一棵树上走,每次从a->b会进行一次贸易(也就是在这条路径上买入物品然后在后面卖出)然 ...