无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <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学习（八）列表和块的更多相关文章

  1. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  2. Python学习02 列表 List

    Python学习02 列表 List Python列表 List Python中的列表(List)用逗号分隔,方括号包围(comma-separated values (items) between ...

  3. Python Tutorial 学习(八)--Errors and Exceptions

    Python Tutorial 学习(八)--Errors and Exceptions恢复 Errors and Exceptions 错误与异常 此前,我们还没有开始着眼于错误信息.不过如果你是一 ...

  4. Windows phone 8 学习笔记(5) 图块与通知

    原文:Windows phone 8 学习笔记(5) 图块与通知 基于metro风格的Windows phone 8 应用提到了图块的概念,它就是指启动菜单中的快速启动图标.一般一个应用必须有一个默认 ...

  5. redis学习-散列表常用命令（hash）

    redis学习-散列表常用命令(hash)   hset,hmset:给指定散列表插入一个或者多个键值对 hget,hmget:获取指定散列表一个或者多个键值对的值 hgetall:获取所欲哦键值以及 ...

  6. SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  7. 《python基础教程（第二版）》学习笔记 列表/元组（第2章）

    <python基础教程(第二版)>学习笔记 列表/元组(第2章)序列中的下标从0开始x='ABC' ==> x[0]='A', x[1]='B', x[2]='C'负数索引从右边开始 ...

  8. Python学习06——列表的操作（2）

    笨办法学Python第39节 之前用的第三版的书,昨天发现内容不对,八块腹肌又给我下了第四版,这次的内容才对上.本节的代码如下: ten_things = "Apples Oranges C ...

  9. IOS学习4——block代码块

    本文转载自:iOS开发-由浅至深学习block 一.关于block 在iOS 4.0之后,block横空出世,它本身封装了一段代码并将这段代码当做变量,通过block()的方式进行回调.这不免让我们想 ...

随机推荐

  1. OpenGL ES着色器语言之语句和结构体（官方文档第六章）内建变量（官方文档第七、八章）

    OpenGL ES着色器语言之语句和结构体(官方文档第六章) OpenGL ES着色器语言的程序块基本构成如下: 语句和声明 函数定义 选择(if-else) 迭代(for, while, do-wh ...

  2. selenium和pythond的区别

    selenium和pythond的区别 天宇6169 | 浏览 137 次 2016-03-18 10:25 2016-03-18 12:24 最佳答案   selenium ide是用来录制的!大概 ...

  3. 深入解析FileInputStream和FileOutputStream

    http://swiftlet.net/archives/1363 FileInputStream和FileOutputStream类属于字节类,可以操作任意类型的文件.在数据流的处理过程中,有两种情 ...

  4. 数据格式处理（数字，日期），java处理，jsp的fmt处理

    java 格式处理  public static String formatTosepara(float data) {DecimalFormat df = new DecimalFormat(&qu ...

  5. TweenMax说明

    TweenMax 采用了与它的兄弟相似的易于学习的语法结构.实事上,因为它扩展自它们,TweenMax 可以做任何 TweenLite 和/或者 TweenFilterLite 能做的事,还加上了更多 ...

  6. 线关节(Line Joint)

    package{ import Box2D.Common.Math.b2Vec2; import Box2D.Dynamics.b2Body; import Box2D.Dynamics.Joints ...

  7. linux下的vim使用笔记

    环境:window下可以使用gvim编辑软件 学习主要是在ubuntu15敲击命令学习的视频来自于智普教育vim使用视频1. sudo apt show vi 查看安装的vi版本,当然了我的ubunt ...

  8. SlidingMenu的使用，结合Fragment（eclipse环境）

    首先下载SlidingMenu,有Library和Sample,然后在自己的项目中引入类库(引入智慧北京工作空间的Library),然后V4包会发生冲突,删掉自己项目Libs目录下的V4包即可 侧滑布 ...

  9. (二)、Struts第二天

    (二).Struts第二天 回顾: 问题: 1. Struts2的Action类是单例还是多例? Filter? Servlet? Listener? 2. 介绍struts2框架引入的相关jar包及 ...

  10. AdminLTE的使用

    1.AdminLTE的必要配置文件<!-- Tell the browser to be responsive to screen width --> <meta content=& ...