HTML5+CSS3网页设计实例教程课件ch04
合集下载
html5+css3课件-4
➢ CSS2.1。2004年2月，CSS2.1正式推出，它在CSS2的 基础上略微做了改动，删除了许多诸如text-shadow等 不被浏览器所支持的属性。现在使用的CSS基本上都是 在1998年推出的CSS2的基础上发展而来的。
➢ 2010年开始，CSS3逐步发布。2011年6月成为W3C推荐。
第3章 CSS基础
第3章 CSS基础
返 回
语法：
<head>
<style type="text/css">
选择符{属性:属性值;…}
</style>
</head>
<body>…</body>
第3章 CSS基础
返 回
3.3.3 外部样式
使用外部样式文件时，可以利用<link>元素将其链接到 HTML文档中。
语法： <link rel=”stylesheet” href=”*.css” type=”text/css”> 描述：
*{property:value} 描述：
“*”在CSS中代表所有，是用来选择所有的HTML标记。 例如：
*{font-size:16px;} 表示将网页中所有元素的字体定义为16像素。
第3章 CSS基础
返 回
3.2.2 选择符的分类
（2）标记选择符 标 记 选 择 符 是 CSS 选 择 符 中 最 常 见 且 最 基 本 的 选 择 符 ， HTML页面中的所有标记都可以作为标记选择符。
（1）-webkit：webkit核心浏览器，包括Chrome、Safari 等。 （2）-moz：火狐（Firefox）浏览器。 （3）-ms：IE浏览器。 （4）-o：Opera浏览器。
➢ 2010年开始，CSS3逐步发布。2011年6月成为W3C推荐。
第3章 CSS基础
第3章 CSS基础
返 回
语法：
<head>
<style type="text/css">
选择符{属性:属性值;…}
</style>
</head>
<body>…</body>
第3章 CSS基础
返 回
3.3.3 外部样式
使用外部样式文件时，可以利用<link>元素将其链接到 HTML文档中。
语法： <link rel=”stylesheet” href=”*.css” type=”text/css”> 描述：
*{property:value} 描述：
“*”在CSS中代表所有，是用来选择所有的HTML标记。 例如：
*{font-size:16px;} 表示将网页中所有元素的字体定义为16像素。
第3章 CSS基础
返 回
3.2.2 选择符的分类
（2）标记选择符 标 记 选 择 符 是 CSS 选 择 符 中 最 常 见 且 最 基 本 的 选 择 符 ， HTML页面中的所有标记都可以作为标记选择符。
（1）-webkit：webkit核心浏览器，包括Chrome、Safari 等。 （2）-moz：火狐（Firefox）浏览器。 （3）-ms：IE浏览器。 （4）-o：Opera浏览器。
HTML5+CSS3 Web前端设计基础教程PPT-HTML 5页面的构建与简单控制
HTML5+CSS3Web前端设计基础教程Chapter/02HTML 5页面的构建与简单控制【本章导读】本章除了介绍Dreamweaver的基本使用方法以外，还着重介绍HTML 5的文档结构和常见标签等内容。
2.1.1 界面介绍2.1.2 常用工具栏和面板1．工具栏图2-2 工具栏新版Dreamweaver的工具栏在整个操作界面的左侧，如图2-2所示，单击 按钮可以在弹出的“自定义工具栏”对话框中，增加或减少按钮的显示。
2．属性检查器图2-3 属性检查器（选定对象为文本）图2-4 属性检查器（选定对象为图像）3．插入面板图2-5 HTML类别图2-6 表单类别图2-7 Bootstrap类别5．CSS面板6．设置主、次浏览器图2-9 CSS面板 图2-10 设置主、次浏览器2.2.1 创建站点进行网页制作的第一步就是创建本地站点，站点管理会让用户的工作变得简单而富有成效，况且许多功能必须在站点中才能实现。
总之，如果不是仅编辑需要的单个页面，那么就必须创建站点。
图2-12 站点设置对象图2-13 创建“My Site”站点2.2.2 “文件”面板的使用方法1．新建文件夹和文件图2-14 右键菜单图2-15 新建文件夹图2-16 嵌套文件夹2.2.2 “文件”面板的使用方法图2-18 站点内的基本操作图2-19 更新文件2．站点内的基本操作2.2 创建和管理站点2.2.3 管理站点图2-20 “管理站点”对话框2.3.1 使用Dreamweaver构建“H5标准页面”图2-21 结构示意图1．标签的含义图2-22 标签2．元素的含义3．属性和值2.3.2 DOCTYPE文档类型与基本结构元素<!DOCTYPE html><html><head><meta charset="UTF-8"><title>凤凰网</title><meta content="凤凰,凤凰网,凤凰新媒体,凤凰卫视,凤凰卫视中文台,phoenix" name="keywords"/><meta name="description" content="凤凰网是中国领先的综合门户网站，提供含文图音视频的全方位综合新闻资讯、深度访谈、观点评论、财经产品等服务。
第3章 HTML5的基本页面元素HTML5与CSS3 Web前端开发技术-PPT课件
HTML5+CSS3 Web 前端开发技术
图像例如
3.4 图像元素和多媒体元素
HTML5+CSS3 Web 前端开发技术
3.4 图像元素和多媒体元素
2. 多媒体文件标记<embed> ▪ 网页中的多媒体文件除了图像文件以外，还包括 音频和视频文件以及Flash文件等。要在网页中插 入这些文件就要使用<embed>标记，<embed> 标记用来定义嵌入的内容，利用<embed>标记可 直接调用多媒体文件。 ▪ <embed>标记的语法格式如下：
▪ title属性
title属性用于添加图像的替代文字。
▪ width/height属性
用来设置图像的宽度和高度，默认情况下，网页中显 示的图像保持原图的尺寸。
HTML5+CSS3 Web 前端开发技术
图像例如
3.4 图像元素和多媒体元素
图像例如
HTML5+CSS3 Web 前端开发技术
3.4 图像元素和多媒体元素
HTML5+CSS3 Web 前端开发技术
3.2 列表元素
2.无序列表标记<ul>
默认情况下，无序列表的每个列表工程前显示黑色实 心圆点。可以使用type属性修改无序列表符号的样 式，type属性的具体取值及说明如表3-2所示，其 中，type属性值必须小写。
表3-2
属性值 disc circle square
<embed src="url" autostart="" loop=""></embed>
HTML5+CSS3 Web 前端开发技术
《HTML5+CSS3》课件——第四章 CSS3选择器
✎ 4.1 属性选择器
4.1.3 E[att*=value]属性选择器
概念 E[att*=value]选择器用于选择名称为E的标记，且该标记定义了att属性，att属性值 包含value子字符串。该选择器与前两个选择器一样，E元素也可以省略，如果省略 则表示可以匹配满足条件的任意元素。
例如： div[id*=section]
概念 E[att^=value] 属性选择器是指选择名称为E的标记，且该标记定义了att属性，att 属性值包含前缀为value的子字符串。
例如： div[id^=section]
表示匹配包含id属性，且id属性值是以“section”字符串开头的 div元素。
✎ 4.1 属性选择器
4.1.2 E[att$=value]属性选择器
☞点击查看本小节知识架构
伪元素选Байду номын сангаас器
☞点击查看本小节知识架构
阶段案例——制作招聘页面
✎ 章节概要
选择器是CSS3中一个重要的内容，在上一 章中已经介绍过一些常用的选择器，这些选 择器基本上能够满足设计者常规的设计需 求。但在CSS3中还有一些选择器，使用这 些选择器可以大幅度提高设计者书写和修改 样式表的效率。
1
➢ :not选择器
2
➢ :only-child 选择器
3
➢ :first-child和:last-child选择器
4
➢ :nth-child(n)和:nth-last-child(n)选择器
5
➢ :nth-of-type(n)和:nth-last-of-type(n)选择器
6
➢ :empty选择器
7
✎ 4.3 结构化伪类选择器
HTML5完整教程PPT学习课件
<header>标签用于定义文档的页眉（介绍信息 ）。
使用<header>标签的例子。 <header> <h1>欢迎光临我的网站</h1> <p>我是黑龙江傲立</p> </header> <p>网页的其他部分...</p>
13
<nav>标签
<nav>标签用于定义导航链接。 【例1-17】 使用<nav>标签的例子。 <header> <h1>欢迎光临我的网站</h1> <p>我是黑龙江傲立</p> </header> <nav> <a href="index.asp">首页</a> <a href="intro.asp">简介</a> <a href="contact.asp">联系方式</a> </nav> <p>网页的其他部分...</p> <footer>本文档创建于2012-10-07</footer>
</time></p> <p><time pubdate="pubdate"></time></p>
目前所有主流浏览器都不支持 <time> 标签。
30
<meter>标签
<meter>标签用于定义度量衡。仅用于已知最大和最小值 的度量。浏览器会使用图形方式表现< meter >标签。
使用<header>标签的例子。 <header> <h1>欢迎光临我的网站</h1> <p>我是黑龙江傲立</p> </header> <p>网页的其他部分...</p>
13
<nav>标签
<nav>标签用于定义导航链接。 【例1-17】 使用<nav>标签的例子。 <header> <h1>欢迎光临我的网站</h1> <p>我是黑龙江傲立</p> </header> <nav> <a href="index.asp">首页</a> <a href="intro.asp">简介</a> <a href="contact.asp">联系方式</a> </nav> <p>网页的其他部分...</p> <footer>本文档创建于2012-10-07</footer>
</time></p> <p><time pubdate="pubdate"></time></p>
目前所有主流浏览器都不支持 <time> 标签。
30
<meter>标签
<meter>标签用于定义度量衡。仅用于已知最大和最小值 的度量。浏览器会使用图形方式表现< meter >标签。
HTML5CSS3精品PPT课件
• HTML5新增的事件
– onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload...
HTML5基本布局
<!DOCTYPE html> <htmlang = "en"> <head> <meta charset = "utf-8"> <title>HTML5 Demo</title> <body> <header><h1></h1><h2></h 2></header> <nav><ul><li></li><li></li></ ul></nav> <section> <article></article> <article></article> </section> <aside></aside> <footer></footer> </body> </html>
网站标准的简单历史
XHTML 1 Content
CSS2.1 Presentation
2001-2006
– onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload...
HTML5基本布局
<!DOCTYPE html> <htmlang = "en"> <head> <meta charset = "utf-8"> <title>HTML5 Demo</title> <body> <header><h1></h1><h2></h 2></header> <nav><ul><li></li><li></li></ ul></nav> <section> <article></article> <article></article> </section> <aside></aside> <footer></footer> </body> </html>
网站标准的简单历史
XHTML 1 Content
CSS2.1 Presentation
2001-2006
HTML5+CSS3网页设计实例教程-第1章-网页设计新时代(2024版)
HTML5+CSS3网页设计实例教程
第1章 网页设计新时代
第11页
传统HTML与XHTML
标记语言在我们的日常计算中无处不在。在传统的文字处 理文档中，用于描述结构与外观的标记代码常常不是后台 编码的。在Web文档中，传统HTML和XHTML（XHTML 是HTML基于XML语法规则建立的标记语言）的标记代码 是明显可见的。这些非后台的标记语言能够将Web页面的 结构与外观传递给Web浏览器。
设计网页首先要关注不同用户如何使用Web。有些人使用 不同的设备或低速的Web连接；有些人只使用键盘；有些 人使用屏幕阅读器阅读Web页面；有些人听不到音频内容 。因此要熟悉形形色色的Web用户。不要只是假设所有人 都用相同的模式在使用Web。
HTML5给Web网页的可访问性带来的更广泛的便利。
HTML5+CSS3网页设计实例教程
第1章 网页设计新时代
第8页
结构化文档的Web
可以把Web想象成一个由文档组成的大海，文档之间相互 关联，并且与日常生活中遇到的打印文档有着很多相似性
新闻网站中文章的结构与报纸上的文章结构类似。每一篇 文章包含标题、文本段落以及一些图片（有时可能以视频 代替图片）。相同点非常明显，而唯一的不同就是，在报 纸上可以在一个版面上拥有多篇故事，而在网页上每篇故 事则倾向于独占一个页面。新闻网站还经常使用首页显示 新闻头条以及故事梗概。
在编写Web页面时，HTML代码会告知Web浏览器需要显 示的信息结构，即什么文本放在标题、段落或表格中等， 从而浏览器能够恰当地将其呈现给用户。
HTML5+CSS3网页设计实例教程
第1章 网页设计新时代
第9页
主要内容
1.1 WEB网页设计原则 1.2 HTML5概述 1.3 HTML5页面的特征 1.4 WEB网页设计基础 1.5 编写一个简单的Web页面 1.6 本章小结
《Web前端技术》教学课件12HTML5+CSS3页面布局
性容器（flex container）和弹性项目（flex item）组成。
容器默认存在两根轴：水平的主轴main axis和垂直的交叉轴cross axis。
12.1.1弹性盒子基本概念
定义弹性容器和项目
12.1.2弹性容器属性
弹性容器提供了6个属性，用来设置容器中项目的排列方式和对齐方式。
12.1.2弹性容器属性
align-items属性定义项目在交叉轴上的对齐方式。属性取值包括：flex-start | flex-end | center | baseline | stretch
12.1.2弹性容器属性
align-content属性定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性 不起作用。属性取值包括：flex-start | flex-end | center | space-between | space-around | stretch
12.1.2弹性容器属性
flex-direction属性决定项目沿主轴的排列方向，该属性可取值row | rowreverse | column | column-reverse。其中row为默认值，项目沿水平方 向从左向右进行排列，row-reverse表示项目沿水平方向从右向左进行排列， column表示项目沿垂直方向从上向下排列，column-reverse则表示项目沿 垂直方向从下向上排列。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖alignitems属性。该属性可取值auto | flex-start | flex-end | center | baseline | stretch，默认值为auto，表示继承父元素的align-items属性，如果没有父元素， 则等同于stretch。
容器默认存在两根轴：水平的主轴main axis和垂直的交叉轴cross axis。
12.1.1弹性盒子基本概念
定义弹性容器和项目
12.1.2弹性容器属性
弹性容器提供了6个属性，用来设置容器中项目的排列方式和对齐方式。
12.1.2弹性容器属性
align-items属性定义项目在交叉轴上的对齐方式。属性取值包括：flex-start | flex-end | center | baseline | stretch
12.1.2弹性容器属性
align-content属性定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性 不起作用。属性取值包括：flex-start | flex-end | center | space-between | space-around | stretch
12.1.2弹性容器属性
flex-direction属性决定项目沿主轴的排列方向，该属性可取值row | rowreverse | column | column-reverse。其中row为默认值，项目沿水平方 向从左向右进行排列，row-reverse表示项目沿水平方向从右向左进行排列， column表示项目沿垂直方向从上向下排列，column-reverse则表示项目沿 垂直方向从下向上排列。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖alignitems属性。该属性可取值auto | flex-start | flex-end | center | baseline | stretch，默认值为auto，表示继承父元素的align-items属性，如果没有父元素， 则等同于stretch。
HTML5+CSS3网站设计教程第4章 CSS样式基础
4.3.2 内部样式表
内部样式表是CSS样式表的初级应用形式，它只针对当前页面有效，不 能跨页面执行，因此达不到CSS代码多用的目的，在实际的大型网站开发中， 很少会用得到内部样式表。
4.3.3 外部样式表
外部样式表是CSS样式表中较为理想的一种形式。将CSS样式表代码单 独编写在一个独立文件之中，由网页进行调用，多个网页可以调用同一个 外部样式表文件，因此能够实用代码的最大化多用及网站文件的最优化配。
4.7.2 问题2——CSS和Hypertext Markup Language）由标记文档 内特定元素的一系列标签组成。这些元素都具有默认表示样式。默认表示 样式由浏览器提供，基于HTML的正式规范。用户通过链接到样式表，甚至 通过在HTML文件内包括样式表，可以对HTML页面应用样式表，这样可以重 新定义每个元素的表示样式。 HTML页面可以包含设置表达样式的属性和标签，但是与CSS比较，它 们的功能和效果有限。样式表可以与HTML表达标记一起使用，例如<font> 标签或者color=”red”属性，或者可以完全替换表达标记和属性。
CSS样式表的分类可以分成三种：内联样式(Inline Style)、内部样式表 (Internal Style Sheet)和外部样式表(External Style Sheet)。
4.3.1 内联样式
内联样式仅仅是XHTML标签对于style属性的支持所产生的一种CSS样式 表编写方式，并不符合表现与内容分离的设计模式，使用内联样式与表格 式布局从代码结构上来说完全相同，仅仅利用了CSS对于元素的精确控制优 势，并没能很好的实现表现与内容的分离，所以这种书写方式应当尽量少 用。
CSS是由Cascading Style Sheets缩写来的。是一种对Web文 档添加样式的简单机制，是一种表 现HTML和XML等文件样式的计算 机语言，是一种叫做表样式的技术。 对于设计者来说它是一个非常灵活 的工具，不必再把繁杂的样式定义 编写在文档结构中，可以将有关文 档的样式指定的内容全部脱离出来， 在标题中定义、在行内定义，甚至 作为外部样式表文件供给HTML页 面调用。
第4章 HTML5的表单元素HTML5与CSS3 Web前端开发技术-PPT课件
〔5〕email类型 email类型的文本框具有一个multiple属性一它允 许在该文本框中输入一串以逗号分隔 的email地 址。
<input name="emaill" type="email"
HTML5+CSS3 Web 前端开发技术
4.3 HTML5新增的表单元素和属性
表单新增属性 〔1〕form属性
inputnametypenumbermin说明maxnumber定义允许输入的最大值minnumber定义允许输入的最小值stepnumber定义步长如果step2则允许输入的数值为20valuenumber定义默认值表43数值输入域的属性取值及说明html5css3web前端开发技术43html5新增的表单元素和属性插入数值输入域demo0405htmlhtml5css3web前端开发技术43html5新增的表单元素和属性2滑动条range将input标记中的type属性设置为range可以在表单中插入表示数值范围的滑动条还可以限定可接受数值的范围
4.3 HTML5新增的表单元素和属性
〔2〕滑动条——range 将input标记中的type属性设置为range，可以 在表单中插入表示数值范围的滑动条，还可以限定 可接受数值的范围.
<input name="" type="range" min="" max="" step="" value="">
<form><textarea name=“mytext〞 rows=“5〞 cols=“100〞 ></textarea></form> 文本域输入元素例如
<input name="emaill" type="email"
HTML5+CSS3 Web 前端开发技术
4.3 HTML5新增的表单元素和属性
表单新增属性 〔1〕form属性
inputnametypenumbermin说明maxnumber定义允许输入的最大值minnumber定义允许输入的最小值stepnumber定义步长如果step2则允许输入的数值为20valuenumber定义默认值表43数值输入域的属性取值及说明html5css3web前端开发技术43html5新增的表单元素和属性插入数值输入域demo0405htmlhtml5css3web前端开发技术43html5新增的表单元素和属性2滑动条range将input标记中的type属性设置为range可以在表单中插入表示数值范围的滑动条还可以限定可接受数值的范围
4.3 HTML5新增的表单元素和属性
〔2〕滑动条——range 将input标记中的type属性设置为range，可以 在表单中插入表示数值范围的滑动条，还可以限定 可接受数值的范围.
<input name="" type="range" min="" max="" step="" value="">
<form><textarea name=“mytext〞 rows=“5〞 cols=“100〞 ></textarea></form> 文本域输入元素例如
Web前端开发实例教程——HTML5 CSS3 JavaScript 第4章 网页布局与交互
4.5 表单
4.5.3 表单元素
3．多行文本域<textarea>…</textarea> 在意见反馈栏中往往需要浏览者发表意见和建议，且提供的输入区域一 般较大，可以输入较多的文字。格式为：
<textarea name="文本域名" rows="行数" cols="列数"> 初始文本内容
</textarea>
<caption align="left|right|top|bottom valign=top|bottom>标题</caption> <tr> <th>表头1</th> <th>表头2</th> <th>…</th> <th>表头n</th></tr> <tr> <td>表项1</td> <td>表项2</td> <td>…</td> <td>表项n</td></tr>
表单被广泛用于各种信息的搜集与反馈。一个完整的交互表单由两部分 组成：一是客户端包含的表单页面，用于填写浏览者进行交互的信息；另一 个是服务端的应用程序，用于处理浏览者提交的信息。表单的工作机制如图413所示。
4.5 表单
4.5.2 表单标签<form>…</form>
在一个HTML页面中允许有多个表单，表单的基本语法及格式为：
其中的行数和列数是指不拖动滚动条就可看到的部分。
4.5 表单
HTML5+CSS3网页设计实例教程 第4章 表格与列表
第4章 表格与列表
本章概述 本章的学习目标 主要内容
HTML5+CSS3网页设计实例教程
第4章 表格与列表
本章概述
表格以行和列显示信息，它们被普遍用于显示所 有适合网格结构的数据，如列车时刻表、电视节 目表、财务报告以及体育赛事结果。列表可以有 序地编排一些信息资源，使其结构化和条理化， 以方便浏览者更加快捷地获取信息。本章将主要 介绍何时使用表格以及创建它们所需要的标记。 本章还介绍如何在HTML中创建3种类型的列表。
第4章 表格与列表
第8页
创建基本表格
我们已经了解了表格的基础元素与特性，现在可 以创建一个显示关于Example Café经营时间信息 的表格。
展示营业时间的表格
HTML5+CSS3网页设计实例教程 第4章 表格与列表
第9页
主要内容
4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8 4.9 表格介绍 基本表格元素与特性 为表格添加标题 表格区域分组 嵌套表格 易访问表格 使用列表 表格应用实例 本章小结
使用<colgroup>元素进行列分组
如果两个或更多列是相互关联的，则可以 使用<colgroup>元素解释这些列应该被归 到同一组中。
使用<colgroup>元素进行列分组
HTML5+CSS3网页设计实例教程 第4章 表格与列表
第17页
使用<col>元素在列间共享样式
<col>元素为<colgroup>中的列指定特性( 如列内单元的宽度与对齐方式)。与 <colgroup>元素不同，<col>元素不隐含 任何解构性分组，因此被更多地用于呈现 目的。
本章概述 本章的学习目标 主要内容
HTML5+CSS3网页设计实例教程
第4章 表格与列表
本章概述
表格以行和列显示信息，它们被普遍用于显示所 有适合网格结构的数据，如列车时刻表、电视节 目表、财务报告以及体育赛事结果。列表可以有 序地编排一些信息资源，使其结构化和条理化， 以方便浏览者更加快捷地获取信息。本章将主要 介绍何时使用表格以及创建它们所需要的标记。 本章还介绍如何在HTML中创建3种类型的列表。
第4章 表格与列表
第8页
创建基本表格
我们已经了解了表格的基础元素与特性，现在可 以创建一个显示关于Example Café经营时间信息 的表格。
展示营业时间的表格
HTML5+CSS3网页设计实例教程 第4章 表格与列表
第9页
主要内容
4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8 4.9 表格介绍 基本表格元素与特性 为表格添加标题 表格区域分组 嵌套表格 易访问表格 使用列表 表格应用实例 本章小结
使用<colgroup>元素进行列分组
如果两个或更多列是相互关联的，则可以 使用<colgroup>元素解释这些列应该被归 到同一组中。
使用<colgroup>元素进行列分组
HTML5+CSS3网页设计实例教程 第4章 表格与列表
第17页
使用<col>元素在列间共享样式
<col>元素为<colgroup>中的列指定特性( 如列内单元的宽度与对齐方式)。与 <colgroup>元素不同，<col>元素不隐含 任何解构性分组，因此被更多地用于呈现 目的。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML5+CSS3网页设计实例教程
第4章 表格与列表
第22页
如何线性化表格
在一个屏幕阅读器被用于阅读表格时，它 通常会对其进行线性化，意思是说阅读器 会从第一行起，自左向右朗读行中的单元 ，一个接一个，直到移动到下一行之前， 然后继续这样读，直到阅读器读完了表格 中的每一行。
HTML5+CSS3网页设计实例教程
HTML5+CSS3网页设计实例教程
列表的显示效果
第4章 表格与列表
第28页
有序列表
在有序列表中，不是在每项前放置圆点，而 是可以使用数字(1、2、3)、字母(A、B、 C)或罗马数字(i、ii、iii)来前置标识它们。
有序列表项位于<ol>元素中。之后每一个列 表项都应嵌套于<ol>元素内，并且包含在 <li>开标签和</li>闭标签之间。
► 使用start特性修改有序列表的起始数字 ► 使用reversed特性实现列表顺序倒数 ► 使用type特性指定序列标记
HTML5+CSS3网页设计实例教程
第4章 表格与列表
第29页
定义列表
定义列表是一种特殊类型的列表，它的列 表项由术语和随后的简短文字定义或描述 组成。定义列表包含在<dl>元素内。之后 在<dl>元素内部包含了交替出现的<dt>和 <dd>元素。
HTML5+CSS3网页设计实例教程
第4章 表格与列表
第2页
本章的学习目标
了解表格的概念及在HTML中使用的方法 掌握基本表格元素与特性 了解创建易访问表格的方法 掌握各种形式列表的实现
HTML5+CSS3网页设计实例教程
第4章 表格与列表
第3页
主要内容
4.1 表格介绍 4.2 基本表格元素与特性 4.3 为表格添加标题 4.4 表格区域分组 4.5 嵌套表格 4.6 易访问表格 4.7 使用列表 4.8 表格应用实例 4.9 本章小结
使用<colgroup>元素进行列分组
如果两个或更多列是相互关联的，则可以 使用<colgroup>元素解释这些列应该被归 到同一组中。
HTML5+CSS3网页设计实例教程
使用<colgroup>元素进行列分组
第4章 表格与列表
第17页
使用<col>元素在列间共享样式
<col>元素为<colgroup>中的列指定特性( 如列内单元的宽度与对齐方式)。与 <colgroup>元素不同，<col>元素不隐含 任何解构性分组，因此被更多地用于呈现 目的。
第2行 第4列
第3行 第4列
第4行 第1列
第4行 第2列
第4行 第3列
第4行 第4列
第5行
第5行
第5行
第5行
表格由行和列所组成
HTML5+CSS3网页设计实例教程
第4章 表格与列表
第5页
主要内容
4.1 表格介绍 4.2 基本表格元素与特性 4.3 为表格添加标题 4.4 表格区域分组 4.5 嵌套表格 4.6 易访问表格 4.7 使用列表 4.8 表格应用实例 4.9 本章小结
对于<td>及<th>元素，二者都可以包含一 个叫做colspan的特性，该特性使表格单元 可以跨越多于一个列。
HTML5+CSS3网页设计实例教程
第4章 表格与列表
有span特性跨域行
rowspan特性的作用于colspan特性很类似 ，只是它在相反的方向上工作：rowspan 使单元可以纵向跨越单元行。
HTML5+CSS3网页设计实例教程
第4章 表格与列表
rowspan特性的效果
第15页
将表格分解为表头、表体及表尾
某些情况下，可能需要将表体（装载大部 分表格数据的地方）与表头或者甚至表尾 区分出来。
HTML5+CSS3网页设计实例教程
本例在FireFox浏览器中的效果
第4章 表格与列表
第16页
HTML5+CSS3网页设计实例教程
第4章 表格与列表
第4页
4.1 表格介绍
想要使用表格，需要以“网格”(grid)模式去思考。
列
第1列
第2列
行 第3列
第4列
第1行 第1列
第1行 第2列
第1行 第3列
第1行 第4列
第2行 第1列
第3行 第1列
第2行 第2列
第3行 第2列
第2行 第3列
第3行 第3列
第4章 表格与列表
列表嵌套
第31页
主要内容
4.1 表格介绍 4.2 基本表格元素与特性 4.3 为表格添加标题 4.4 表格区域分组 4.5 嵌套表格 4.6 易访问表格 4.7 使用列表 4.8 表格应用实例 4.9 本章小结
HTML5+CSS3网页设计实例教程
第4章 表格与列表
第32页
4.8 表格应用实例
HTML5+CSS3网页设计实例教程
使用<col>元素在列间共享样式
第4章 表格与列表
第18页
主要内容
4.1 表格介绍 4.2 基本表格元素与特性 4.3 为表格添加标题 4.4 表格区域分组 4.5 嵌套表格 4.6 易访问表格 4.7 使用列表 4.8 表格应用实例 4.9 本章小结
HTML5+CSS3网页设计实例教程
<table>元素是所有表格的包含元素。它可以包含 以下特性：
所有通用特性
面向脚本的基本事件特性
► dir特性 ► <tr>元素包含表格行 ► <td>与<th>元素表示表格单元 ► colspan特性 ► headers特性 ► rowspan特性 ► scope特性
HTML5+CSS3网页设计实例教程
HTML5+CSS3网页设计实例教程
第4章 表格与列表
第11页
主要内容
4.1 表格介绍 4.2 基本表格元素与特性 4.3 为表格添加标题 4.4 表格区域分组 4.5 嵌套表格 4.6 易访问表格 4.7 使用列表 4.8 表格应用实例 4.9 本章小结
HTML5+CSS3网页设计实例教程
第4章 表格与列表
在进行文字排版时，经常需要用到列表效果。在本 章中，介绍了如何在HTML中创建如下3种类型的 列表：
► 无序列表：比如项目列表 ► 有序列表：使用有序数字或字母而非圆点 ► 定义列表：使你可以指定术语及其定义
HTML5+CSS3网页设计实例教程
第4章 表格与列表
第35页
第4章 表格与列表
第23页
使用id、scope及headers特性
在创建单元表头时，在<th>元素中添加 scope特性有助于指定该表头应用于哪些单 元。如果将其赋值为row，就指定了该元素 是所在行的表头；而当值为column时，就 表明它是所在列的表头。
headers特性所扮演的角色与scope特性正 相反。因为它在<td>元素中用于指定哪些 表头对应于该单元。该特性的值是一个由 空格分隔的表头单元id特性值列表。
第12页
4.4 表格区域分组
使用rowspan及colspan特性使单元跨越多 个行或列。
将表格分割为三个区域：表头、表体以及 表尾。
使用<colgroup>元素对列分组。 使用<col>元素在不相关列之间共享特性。
HTML5+CSS3网页设计实例教程
第4章 表格与列表
第13页
使用colspan特性跨越列
第4章 表格与列表
第19页
4.5 嵌套表格
可以在表格单元中包含标记，只要该元素 全部包含于单元内即可。将另一个表格整 体放置于一个表格单元内，从而创建了一 个所谓的“嵌套表格”(nested table)。
HTML5+CSS3网页设计实例教程
一个周末活动计划的表格
第4章 表格与列表
第20页
主要内容
HTML5+CSS3网页设计实例教程
第4章 表格与列表
第24页
创建易访问表格
为Example Café网站创建一个新页面，提 供一个周末烹饪课程的时间表。一共2天上 午和下午的课程。
HTML5+CSS3网页设计实例教程
一个周末烹饪课程的时间表
第4章 表格与列表
第25页
主要内容
4.1 表格介绍 4.2 基本表格元素与特性 4.3 为表格添加标题 4.4 表格区域分组 4.5 嵌套表格 4.6 易访问表格 4.7 使用列表 4.8 表格应用实例 4.9 本章小结
4.1 表格介绍 4.2 基本表格元素与特性 4.3 为表格添加标题 4.4 表格区域分组 4.5 嵌套表格 4.6 易访问表格 4.7 使用列表 4.8 表格应用实例 4.9 本章小结
HTML5+CSS3网页设计实例教程
第4章 表格与列表
第21页
4.6 易访问表格
表格本身可以包含大量数据，并能对这些信 息提供一种很有帮助的视觉呈现形式。在查 看一张表格时，很容易就可以通过上下左右 扫描，在行与列之间找到一个特定的值，或 者比较一定范围的值。
HTML5+CSS3网页设计实例教程
第4章 表格与列表
第34页
4.9 本章小结
在本章中，介绍了表格在创建页面时可以成为怎样 的强大工具，以及所有表格如何基于一种网格模式 ，并使用4种基本元素：<table>，包含每一个表格 ；<tr>，包含表格的行；<td>，包含表格数据的一 个单元；以及<th>，表示一个包含表头的单元。