无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <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. 非常简单的oracle和mysql数据互传

    工具是navicat,我用的是Navicat Premium 10: 这个工具可以同时连接mysql和oracle,如图: 同时连接上这两个库之后 工具->数据传输 左边是数据源,右边是导入目标 ...

  2. Opencv基础知识-----视频的读取和操作

    Opencv读取视频代码 #include "stdafx.h" #include"highgui.h"   int main(int argc,char* a ...

  3. Hibernate 系列教程5-双向多对一

    主要讲解inverse和cascade的用法 cascade定义的是关系两端对象到对象的级联关系: 而inverse定义的是关系和对象的级联关系(管理外键的值). inverse 属性默认是false ...

  4. php moungoDB

    moungoDB 语法 SQL查询语句 Mongo查询语句 CREATE TABLE USERS (a Number, b Number) 隐式的创建,或 MongoDB::createCollect ...

  5. 灵感闪现 篇 （一） 2d场景 3d 效果

    中途打断一下 ,框架文档的 更新. 另开一篇主题为 灵感闪现的 板块. 在工作生活中,总有发现新事物或新东西 而让自己突然 灵感闪现的时候,那么这个时候,我必须要抓住,并尽快把 这份灵感实现下来. 之 ...

  6. haxe 配置

    安装所有类库: 命令提示符 haxelib install 类库名 如:haxelib install openfl 配置安卓: 命令提示符 haxelib run openfl setup andr ...

  7. 报错：“不是有效的Win32应用程序”的解决办法

    Win7.Win8下用VS2013编译完的程序,拿到32位WindowsXP虚拟机下运行有时候会报错:

  8. PAT1005

    水题,和中文没啥区别不说了. #include<cstdio> #include<cstdlib> #include<iostream> #include<a ...

  9. hdu_2159_FATE(完全背包)

    题目连接:hdu_2159_FATE 题意:完全背包的题意 题解:把杀敌数看成背包的容量,维护一个经验的最大值,我是多开一维来记录最大的忍耐度,当然你也可以直接开一位,并记录忍耐度,最后扫一遍 #in ...

  10. java-两个jre目录和三个lib目录-转

    lib目录下放置着jar包.程序中的import语句找的就是这些文件!例如:import javax.servlet.RequestDispatcher; 问题在于,在cmd模式下编译,系统会提示:C ...