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;
    }
时间: 2024-11-01 16:13:31

HTML学习(八)列表和块的相关文章

java学习教程之代码块

学编程吧java学习教程之代码块发布了,欢迎通过xuebiancheng8.com来访问 java中的代码块包括下面几种: 1.普通代码块 2.构造代码块 3.静态代码块 1.普通代码块很简单看下面这个例子: public class Test{ public static void main(String args[]){ { //此处就是普通代码块,普通代码块中的代码按顺序执行 System.out.println("hello"); } } } 2.构造代码块 public cl

Oracle学习(八):处理数据

1.知识点:能够对比以下的录屏进行阅读 SQL> --SQL语句 SQL> --1. DML语句(Data Manipulation Language 数据操作语言): insert update delete select SQL> --2. DDL语句(Data Definition Language 数据定义语言): create/alter/drop/truncate table SQL> -- create/drop view,create/drop index(sequ

springMVC3学习(八)--全局的异常处理

在springMVC的配置文件中: <bean id="exceptionResolver" class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver"> <property name="defaultErrorView"> <value>/error</value><!-- 表示当抛出异常但没有

Python学习_列表解析和Lambda表达式

1.根据要求创建列表threes_and_fives(列表值包括1到15中能够被3或者5正常的数) threes_and_fives=[x for x in range(1,16) if x%3==0 or x%5==0] 2.lambda表达式实例(剔除掉列表中的"X") garbled = "IXXX aXXmX aXXXnXoXXXXXtXhXeXXXXrX sXXXXeXcXXXrXeXt mXXeXsXXXsXaXXXXXXgXeX!XX" message

python学习第六天 - 列表(数组)

python当中的数组与java,c不太一样,数组相当于一个列表,一个列表中可以有,整型,字符串,浮点型等等. 定义格式如下: >>> list = [123,'小甲鱼',3.14] >>> list [123, '小甲鱼', 3.14] 介绍几种向列表中添加元素的方法 1.append() :向列表中增加新的元素,一次只能添加一个元素,默认添加到列表的末尾 >>> list.append('黑夜') >>> list [123, '

Spark学习八:spark streaming与flume和kafka集成

Spark学习八:spark streaming与flume和kafka集成 标签(空格分隔): Spark Spark学习八spark streaming与flume和kafka集成 一Kafka 二flume和kafka的集成 三kafka和spark streaming的集成方式一kafka推送 四kafka和spark streaming的集成方式一spark streaam主动获取 五spark stream的高级应用updateStateByKey实现累加功能 六spark stre

android学习--视图列表(ListView和ListActivity)

说明: 视图列表(ListView和ListActivity)与AutoComplete.Spinner类似,它们都需要一个供显示的列表项,可以需要借助于内容Adapter提供显示列表项 创建ListView有两种方式: (1)直接使用ListView进行创建 (2)Activity继承ListActivity ListView的常用XML属性 下面分别用两种方式创建ListView 方式一:直接使用ListView进行创建 (1)   main_activity.xml 下面布局两个listV

Bootstrap &lt;基础二十八&gt;列表组

列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 class .list-group-item. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的列表组</title> <link href="/boo

学习网站列表

Math: https://projecteuler.net/about Pygame: http://nullege.com/ Python: https://www.python.org/ 学习网站列表

python学习---数据类型---列表

Python学习 1.列表 [] 1.1)列表是处理一组有序项目的数据结构,即你可以在一个列表中存储一个序列的项目. 1.2)列表时可变数据类型 1.3)列表的组成:用[]标示列表,包含多个用逗号隔开的数字或者字符串 举例:    list[1,2,3]        list1['aaa',123,'"qwsx"] 空列表 list[] 注意:在定义时,元祖只有一个值时,要在其后面加逗号:而列表只有一个值时不用加任何符号 2. 列表的操作 2.1)列表的重新赋值   (以list1[