HTML学习(八)列表和块
无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
<ul type=“”> type : (disc,circle,square)
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表
同样,有序列表也是一列项目,列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol type=“”> type : (A,a,i)
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
<html> <body> <h2>一个定义列表:</h2> <dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl> </body>
</html>
<ol> 定义有序列表。
<ul> 定义无序列表。
<li> 定义列表项。
<dl> 定义定义列表。
<dt> 定义定义项目。
<dd> 定义定义的描述。
HTML<div>和<span> 块
可以通过 <div> 和 <span> 将 HTML 元素组合起来。
HTML 块元素
大多数 HTML 元素被定义为块级元素或内联元素。
编者注:“块级元素”译为 block level element,“内联元素”译为 inline element。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
例子:<h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
例子:<b>, <td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
定义和用法
<div> 可定义文档中的分区或节(division/section)。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。
用法
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
实例
文档中的一个部分会显示为绿色:
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div> 案例分析
<body> <h1>NEWS WEBSITE</h1>
<p>some text. some text. some text...</p>
... <div class="news">
<h2>News headline 1</h2>
<p>some text. some text. some text...</p>
...
</div> <div class="news">
<h2>News headline 2</h2>
<p>some text. some text. some text...</p>
...
</div> ...
</body>
HTML <span> 元素
HTML <span> 元素是内联元素,可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。
定义和用法
<span> 标签被用来组合文档中的行内元素。
提示和注释:
提示:请使用 <span> 来组合行内元素,以便通过样式来格式化它们。
注释:span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。
例子
<p><span>some text.</span>some other text.</p>
例子解释
如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此,上例中的 span 元素仍然为 p 元素增加了额外的结构。
可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。
可以对同一个 <span> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
提示:事实上,您也许已经注意到了,W3School 站点上有一些文本的样式与其他文本是不同的。比如“提示”使用了粗体的橘红色。尽管实现这种效果的方法非常多,但是我们的做法是:使用“提示”使用 span 元素,然后对这个 span 元素的父元素,即 p 元素应用 class,这样就可以对这个类的子元素 span 应用相应的样式了。
HTML:
<p class="tip"><span>提示:</span>... ... ...</p>
CSS:
p.tip span {
font-weight:bold;
color:#ff9955;
}
HTML学习(八)列表和块的更多相关文章
- Bootstrap <基础二十八>列表组
列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...
- Python学习02 列表 List
Python学习02 列表 List Python列表 List Python中的列表(List)用逗号分隔,方括号包围(comma-separated values (items) between ...
- Python Tutorial 学习(八)--Errors and Exceptions
Python Tutorial 学习(八)--Errors and Exceptions恢复 Errors and Exceptions 错误与异常 此前,我们还没有开始着眼于错误信息.不过如果你是一 ...
- Windows phone 8 学习笔记(5) 图块与通知
原文:Windows phone 8 学习笔记(5) 图块与通知 基于metro风格的Windows phone 8 应用提到了图块的概念,它就是指启动菜单中的快速启动图标.一般一个应用必须有一个默认 ...
- redis学习-散列表常用命令(hash)
redis学习-散列表常用命令(hash) hset,hmset:给指定散列表插入一个或者多个键值对 hget,hmget:获取指定散列表一个或者多个键值对的值 hgetall:获取所欲哦键值以及 ...
- SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- 《python基础教程(第二版)》学习笔记 列表/元组(第2章)
<python基础教程(第二版)>学习笔记 列表/元组(第2章)序列中的下标从0开始x='ABC' ==> x[0]='A', x[1]='B', x[2]='C'负数索引从右边开始 ...
- Python学习06——列表的操作(2)
笨办法学Python第39节 之前用的第三版的书,昨天发现内容不对,八块腹肌又给我下了第四版,这次的内容才对上.本节的代码如下: ten_things = "Apples Oranges C ...
- IOS学习4——block代码块
本文转载自:iOS开发-由浅至深学习block 一.关于block 在iOS 4.0之后,block横空出世,它本身封装了一段代码并将这段代码当做变量,通过block()的方式进行回调.这不免让我们想 ...
随机推荐
- spring多个数据源配置
sys.properties中的内容 jdbc.driverClassName=oracle.jdbc.driver.OracleDriver DB.url=jdbc\:oracle\:thin\:@ ...
- 最短路<dijk>
题意: 有n个城市,有m条路,给出每条路的出发和结束的城市及长度,求从第一个城市到最后一个城市的最短路.按格式输出. power oj 2443 题解: 标准dijk算法. #include<c ...
- 使用Java的BlockingQueue实现生产者-消费者
http://tonl.iteye.com/blog/1936391 使用Java的BlockingQueue实现生产者-消费者 博客分类: Java JavaBlockingQueue阻塞队列 B ...
- 项目中常用js方法整理common.js
抽空把项目中常用js方法整理成了common.js,都是网上搜集而来的,大家一起分享吧. var h = {}; h.get = function (url, data, ok, error) { $ ...
- DataBinding注意事项Error parsing XML: duplicate attribute以及如何在listview中使用DataBinding
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- 关于MyEclipse不停报错multiple problems have occurred 或者是内存不足 的解决办法
这是因为 worksapace与svn代码不一样,要更新! 一更新就好了,困扰死我了,卧槽,搞了2个小时,难怪svn一提交就卡死人,原来还就是svn的问题,更新一下就行.
- DataSet和List<T> 泛型之间互相转换 (转载, 作者写的很好)
/DataSet与泛型集合间的互相转换 //利用反射机制将DataTable的字段与自定义类型的公开属性互相赋值. //注意:从DataSet到IList<T>的转换,自定义类型的公开属性 ...
- UIView你知道多少
转载自:http://www.cnblogs.com/likwo/archive/2011/06/18/2084192.html 曾经有人这么说过,在iphone里你看到的,摸到的,都是UIVie ...
- PKI 笔记
PKI – Public Key Infrastructure , 通常翻译为公钥基础设施. PKI 安全平台提供的4个服务,来保证安全的数据,分别是: l 身份识别 l 数据保密 l 数据完整 ...
- OCMOD代码调整系统(Modification System)
OCMOD 是一个允许用户上传压缩文件的系统,该压缩文件包含了XML, SQL和PHP文件,从而修改网站相关地方. OCMOD是opencart系统的代码调整系统,遵循GPL3协议免费使用. 如果OC ...