HTML第5章

合集下载

第5章网页布局

图5-11 单元格间距为8
返回本节
第5章网页布局
5.2.1 在页面中插入表格
5．页眉设置页眉设置其实就是为表格选择一个加粗文字的标题栏，这样对于要求标题以默认粗体显示的表格，省去了每次手工执行加粗动作，提高了工作效率。可将页眉设置为无、左部、顶部，或者左部和顶部同时设置。如图5-12和图5-13就是分别将页眉设置在左部和顶部时的效果。
5.2.3 表格标签
第5章网页布局
5.2.4 在普通模式下用表格布局网页
表格是最常用的网页布局实现方式。在表格中，很容易实现表格行和列的大小操作，从而方便地实现网页布局。本节通过实例介绍利用表格进行网页布局的方法。网页布局实例效果如图5-20。这个页面是由4个表格组成的，某些单元格中又嵌套有表格。布局示意图如图5-21示。表1为网页的顶部，包括网站的Logo及Banner；表2是网站导航条；表3是页面的主体区，包括左侧的文章列表，右侧的其他链接和下部的搜索条，其中分别嵌套有小表格；表4是网站的底部，是网站的版权栏。
第5章网页布局
第5章网页布局
网站的设计，不仅体现在具体内容与细节的设计制作上，也需要对框架进行整体的把握。在进行网站设计时，需要对网站的版面与布局进行一个整体性的规划。
本章主要内容：
网页布局类型用表格进行网页布局
框架
用CSS进行网页布局
开始
第5章网页布局
5.1
网页布局类型述
5.2.2 设置表格属性
在页面中插入表格以后，可以在“属性”面板中对表格进行设置，除了某些属性和“表格”对话框中的设置一样外，还可以设置表格的背景颜色、边框颜色和对齐方式等属性。
图5-14 表格属性面板

HTML5概述

第1章HTML5概述学习要点：1.HTML5的历史2.HTML5的功能3.HTML5的特点4.课程学习问题HTML5是继HTML4.01和XHTML1.0之后的超文本标记语言的最新版本。

它是由一群自由思想者组成的团队设计出来，并最终实现多媒体支持、交互性、更加智能的表单，以及更好的语义化标记。

HTML5并不仅仅是HTML规范的最新版本，而是一系列用来制作现代富Web 内容的相关技术的总称，其中最重要的三项技术分别为：HTML5核心规范（标签元素）、CSS （层叠样式表第三代）、和JavaScript。

一．HTML5的历史1993年HTML首次以因特网草案的形式发布，然后经历了2.0、3.2和4.0，直到1999 年的HTML4.01版本稳定下来。

由于发展缓慢，逐渐的被更加严格的XHTML取代。

XHTML 的兴衰史自从HTML4.01版本之后，掌握着HTML规范的万维网联盟（W3C）组织没有再发布新的标准，而是围绕着XHTML1.0 以及之后的XHTML2.0展开工作。

XHTML是基于XML、致力于实现更加严格并且统一的编码规范的HTML版本，解决之前HTML4.01版本时，由于编码不规范导致浏览器的各种古怪行为。

所以，Web开发者对XHTML非常的拥护。

XHTML极大的好处，就是强迫开发者养成良好的编码习惯，放弃HTML 的凌乱写法，最终降低了浏览器解析页面的难度，方便移植到更多平台。

可是，越是想往好的方面发展，往往可能是带来的却是毁灭性的灾难，世间万物就是如此。

XHTML2.0规范了更严格的错误处理规则，强制要求浏览器拒绝无效的XHTML2页面，强制Web开发者写出绝对正确规范的代码，同时不得向下兼容，摒弃HTML遗留的怪异行为和编码习惯。

按理说，取其精华、舍其糟粕应该是好事。

但是，这样的话，数亿的页面将无法兼容，Web开发者的难度又被加大，并且制定这个标准又太过久远，最终被抛弃。

HTML5的回归2008年W3C发布了HTML5 的工作草案，2009年停止了XHTML2计划。

网页设计与制作自考第五章HTML历年考题整理

网页设计与制作自考第五章HTML历年考题整理第五章HTML语言历年考题一、单选题1.在HTML语言中，标记</body>代表（）A.文件头开始B.文件头结束C.文件体开始D.文件体结束2.在HTML语言中，符号<pre>表示（）A.预排版标记B.文字效果标记C.特殊符号标记D.转行标记3.在HTML文件中，使一段文字按照原来的格式显示的标记是( )A.<form>B.<tr>C.<nobr>D.<pre>4.在HTML文件中，<u><／u>标记表示( )A.文本加粗B.文本加注底线C.文本斜体D.删除线5.在HTML语言中，<sup>代表( )A.倾斜标记B.文字闪烁标记C.下标标记D.上标标记6．在HTML语言中转行的标记是 ( )A．<p> B．<br> C．<title> D．<pre> 7．在HTML中，关于文字效果标记的说法错误的是( )A．能够使用font标记color属性指定文字颜色B．能够使用font标记size属性指定文字大小C．能够使用em标记指定文字的斜体效果D．能够使用cite标记指定粗体字体8.在HTML页面中，&amp；表示的符号是( )A.<B.>C.&D.’’9．在HTML语言中，有些符号由于被标记或标记的属性所占用，在HTML文本中用特殊符号表示，“&LT；”代表的符号是()A．& B．" C．> D．<10.在HTML标记中，关于<hx>的描述正确的是（）A.<hx>表示横线标记B.<hx>中的x表示1～6的数字标题字体标记有6种C.<hx>本身是一个独立的标记，表示新的行的开始D.<hx>必须与<／.hx>标记一起使用11.在HTML中，关于预排版标记<pre>…<／pre>叙述正确的是（）A.不需要重新排版的内容，能够用<pre>…<／pre>标记通知浏览器B.使用该标记时与<p>标记效果相同C.使用该标记与<quot>标记效果相同D.该标记已不在新版本中使用，取代它的是<quot>标记12.在HTML标记中，&AMP表示的符号是（）A.<B.>C.＆D.@13.在HTML中，关于<br>的描述不正确．．．的是（）A. <br>是转行标记 B. <br>必须与</br>成对使用C. 与<br>相反的标记是<nobr> D. <br>与</br>之间的文字即使有回车符也不能自动换行14.下列标记中，字体最小的是( )A.〈H1〉B.〈H3〉C.〈H5〉D.〈H6〉15.不能．．使文字换行的标记是( )A.〈PRE〉B.〈BR〉C.〈P〉D.〈BLOCK〉16.对文字使用下划线的标记是( )A.〈X〉B.〈P〉C.〈U〉D.〈B〉17.上标标记是( )A.〈SUP〉B.〈SUB〉C.〈STRIKE〉D.〈BLINK〉18.BACKGROUND属性指定的是( )A.背景色B.背景音乐C.背景图片D.背景有无19.&GT表示的符号是( )A.<B.>C."D.&20.&AMP表示的符号是( )A.<B.>C."D.&21.在HTML标记中，&QUOT表示的符号是（）A. QUOTB. &C. ＂D. < 22．下列标记不能．．改变文字颜色的是（）A．<FONT COLOR=RED> B．<FONT COLOR="RED">C．<FONT COLOR=#FF0000> D．<FONT COLOR=#12>23．&LT表示的符号是（）A．< B．> C．″D．&24．下列不是．．文字斜体标记的是（）A．<em> B．(embed) C．(i> D．(cite) 25．对文字使用删除线的标记是（）A．(d) B．(delete) C．(del) D．(strike)26.在HTML语言中，嵌入图片的标记是（）A.<caption>……</caption>B.<img src=¨URL¨>C.<embed src="URL">D.<a href="URL">字符串</a>27.在HTML中，符号清单的type属性值square表示( )A.实心圆点B.空心圆点C.实心方块D.空心方块28.在HTML文件中，单击一个链接，自动跳转到某网页的某一指定位置，此链接为( )A.邮件链接B.位置链接C.跳转链接。

《Dreamweaver网页设计》-第5章

站点根目录相对路径站点根目录相对路径是指从站点的根文件夹到文档的路径。当在处理使用多个服务器的 Web 站点，或者在使用承载有多个不同站点的服务器时，则可能考虑使用这种类型的路径。不过，如果您不太熟悉此类型的路径，最好使用上面提到的相对路径。站点根目录相对路径以一个正斜杠“/”开始，该正斜杠表示站点根文件夹。比如，/inf/info.html 是文件的站点根目录相对路径，该文件位于站点根文件夹的inf子文件夹中。在某些 Web 站点中，需要经常在不同文件夹之间移动 HTML 文件，在这种情况下，站点根目录相对路径通常是指定链接的最佳方法。当移动含有根目录相对链接的文档时，不需要更改这些链接；当移动该HTML文件后，其相关文件链接依然有效。但是，如果移动或重命名根目录相对链接所链接的文档，即使文档彼此之间的相对路径没有改变，仍必须更新这些链接。例如，如果移动某个文件夹，则指向该文件夹中文件的所有根目录相对链接都必须更新。
当要链接到与当前文档处于同一文件夹中的文档时，只需输入文件名。比如要从 aboutus.htm 链接到 yewu.htm （两个文件在同一文件夹“bm”中，且目录深度相同），则其相对路径为yewu.htm。当要链接到当前文档所在文件夹的子文件夹文档时，先要有子文件夹名称，然后跟符号“/”，在加文件名。比如要从 index.html 链接到 yewu.htm（两个文件在同一文件夹 “eshop”中，index.html处于父目录中，而yewu.htm处于子目录bm中），则其相对路径为bm/yewu.htm。反过来，当要链接到当前文档所在文件夹的父文件夹的文档时，在文档名前要加“../”。比如要从yewu.htm链接到 index.html（两个文件在同一文件夹“eshop”中， index.html处于父目录中，而yewu.htm处于子目录bm中），则其相对路径为../ index.html。当要链接到非同一目录的文档时，要先加“../”，后加文件夹名再加链接到的文件名。比如要从 tupian.htm 链接到 aboutus.htm（两个文件在不同的目录中，tupian.htm在 “album”目录中，aboutus.htm在“bm”目录中），则其相对路径为../bm/ aboutus.htm。

140701第5章 HTML5网页表单设计(定稿)

网页设计技术实用教程--从基础到前沿第5章HTML5网页表单设计（字数3万）参考文献：我chp6；陆chp4；格式类似我P73；目录5.1表单简介及应用案例5.2 表单主体设计---form 标记5.2表单主体设计（form）包括新增元素5.3表单输入域设计---input标记5.3 表单设计的相关属性包括新增属性input元素type属性的新增类型：电子邮件类型；搜索类型；URL类型；电话号码类型；数字类型；范围类型；日期类型；周类型；月份类型；时间类型；日期与时间类型；本地日期与时间类型；颜色类型；新增属性：form属性；formaction；formmethod；placeholder；autofocus；list；autocomplete；5.4 文本区与列表选择框设计--- textarea、select标记5.5标签与按钮设计---label、button标记5.6表单控件分组设计--- fieldset、legend标记5.7 HTML5表单设计前沿内容知识技术5.7.1 新增与改进的表单元素；HTML5表单新增与改进的元素5.7.2 新增与改进的表单属性；HTML5表单新增与改进的属性5.7.3 input域控件的type属性的新增与改进5.4 表单设计示例如果例子多，需要单独成节，可增加该节例子（见陆p46-59）按功能划分：input元素使用示例；form等属性示例；表单验证示例……5.8 使用DWCS5进行网页表单设计实例（薛凯7.3.5；对5.1节的案例用工具制作、设计）5.9本章小结5.10进阶学习5.11 思考与实践第5章HTML5表单设计本章导读：上一章我们学习了、了解了……网页中链接的设计。

而在网站注册或购物时不可或缺的元素就是表单，本章就引导大家读者学习表单的设计。

首先，通过一个案例的介绍，让大家领略了解表单在网站中的重要魅力作用，同时在读者建立起了对表单有了大概的初步感性认识印象后；接着通过理论与示例结合的方式，、详细具体讲解介绍表单主体及其内部各种标记和属性的知识；同时，紧跟技术的发展，讲述介绍HTML5表单设计前沿内容；如果有该节则加入此句有了在掌握了表单设计的基本知识、技术的理论储备准备之后，我们通过几个综合示例讲解表单设计中各种元素的实用方法，完成理论向实践的转变。

第2章 HTML、XHTML、HTML5

第2章 HTML、XHTML、HTML5
第14页
2.2.5 命名空间
在XHTML文档中，还有一句常见的代码： <html xmlns="/1999/xhtml" > xmlns，即XHTML Namespace的缩写，即命名空间。该属性声明了html顶级元素的命名空间，用来定义该顶级元素以及其包含的各级子元素的唯一性。由于XML语言允许用户自定义标签，使用命名空间，可以避免自己定义的标签和别人定义的标签发生冲突。比如，如果两个人定义了一个一模一样的文档，若文件头部没有xmlns命名空间的区分，就会发生冲突，如果在文档头部加上了不同的命名空间，则文档不会冲突。通俗地讲，命名空间就是给文档做一个标签，标明该文档是属于哪个网站的。对于HTML文档来说，由于它的元素是固定的，不允许用户进行定义，所以指定的命名空间永远是/1999/xhtml。
第20页
2.4 新增和废除的属性

2.4.1 新增的属性 2.4.2 废除的属性
第2章 HTML、XHTML、HTML5
第21页
2.4.1 新增的属性

HTML5中新增的属性主要体现在表单属性、链接属性以及其他属性。
第2章 HTML、XHTML、HTML5
第22页
2.4.1 新增的属性

第2章 HTML、XHTML、HTML5
第2页
本章的学习目标
了解H TML语言的作用、结构和语法了解XHTML和XML的关系，及XHTML的语法特点掌握HTML5的语法和元素掌握HTML5中新增的以及废除的元素掌握HTML5中新增的和废除的属性掌握HTML5新增的全局属性掌握HTML5新增的事件

第5章 HTML语言基础

5.2.1 HTML的标题标记
例5-2 文件头标记的应用。 
<html>
<head> <title>文件头标记的应用</title> <meta name="keywords" content="study, computer">
<meta name="author" content="Zhangjie">
5.2.2 HTML的正文标记
（6）页面内容距浏览器边界的距离格式： <body leftmargin="number01" topmargin=" number02">…</body> 说明：leftmargin属性和topmargin属性取值均为数值，分别表示网页主体内容距浏览器左端和顶端的距离，如，<body leftmargin=“30” topmargin=“ number50”>。
属性：<body>标记一般有六种可选属性，它们用来设置Web页面的外观。这些属性分别是：
（1）页面背景颜色属性
格式：<body bgcolor="#RRGGBB">…</body>
说明：该属性是用来设置页面的背景颜色的，其值可用六位十六进制形式的颜色代码表示。颜色代码#RRGGBB中的RR、GG、BB分别表示红、绿、蓝三种原色的亮度，取值范围在00～FF之间，数值越大亮度越高，如颜色代码#000000表示为黑色。常见的颜色代码如表5-1所示。

第5章 Request和Response对象

返回本节
5.2.3 Response对象的数据集合对象的数据集合
Response对象只有对象只有Cookies一个数据集合，一个数据集合，对象只有一个数据集合 Cookies数据集合是负责取得记录在客户端的数据集合是负责取得记录在客户端的 Cookies数据，允许用户检索在数据，数据允许用户检索在HTTP请求中请求中发送的Cookies的值。发送的的值。的值 Cookies的详细内容请参阅后面的章节。的详细内容请参阅后面的章节。的详细内容请参阅后面的章节
图5-6 Request对象的TotalBytes属性示例返回本节
5.3.2 Request对象的方法对象的方法
Request对象只提供一种对象只提供一种BinaryRead方法，方法，对象只提供一种方法该方法是以二进制方式来读取客户端使用 POST传送方法所传递的数据。其语法如下：传送方法所传递的数据。传送方法所传递的数据其语法如下： Variant数组数组 =Request.BinaryRead(Count) BinaryRead方法的返回值为通用变量数组方法的返回值为通用变量数组），其参数（Variant Array），其参数），其参数Count是ห้องสมุดไป่ตู้个整是一个整型数据，用以表示每次读取数据的字节大小，型数据，用以表示每次读取数据的字节大小，范围介于0到对象TotalBytes方法所范围介于到Request对象对象方法所取得的字节大小之间。取得的字节大小之间。
Request对象只提供一个对象只提供一个TotalBytes属性，这是一个属性，对象只提供一个属性只读的属性，表示从客户端所接收数据的字节的长度，只读的属性，表示从客户端所接收数据的字节的长度，其语法如下：其语法如下：字节长度=Request.TotalBytes 字节长度下面的程序将示范如何取得从客户端接收的数据字节大小。大小。例5-6：： <% Response.Write "从客户端接收的数据字节大小从客户端接收的数据字节大小为：" &Request.TotalBytes %>

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

居中标记
<center>称为居中标记称为居中标记 <Body> <center> <Table Border=0> 对于已加有align="CENTER" 参数的参数的<TABLE>标记也要不对于已加有标记也要不 <Tr bgcolor="lime"> 厌其烦地加上居中标记，因为很多浏览器不支持<TABLE> 厌其烦地加上居中标记，因为很多浏览器不支持 <Th>编号编号</Th> 编号标记中的align="CENTER"参数标记中的 <Th>名称名称</Th> 参数名称 <Th>价格元)</Th> 价格(元价格 </Tr> <Tr bgcolor="red"> <Td>001</Td> <Td>语文教材语文教材</Td> 语文教材 <Td>20.00</Td> </Tr> </table> </center> </Body>
width="整数和 height="整数整数" 整数" 整数整数
设定控制面板的高度和宽度。设定控制面板的高度和宽度。
<Body> <div align="center"> <embed src="file.wmv" autostart=true loop="true" width="400" height="200"> </div> </Body>
用作版权声明注意: 注意注释标记中没有任何属性。注释标记中没有任何属性。开始标记和结束标记必须同时存在。开始标记和结束标记必须同时存在。注解内容允许为空。注解内容允许为空。其内容长度不用被限制在一行内，可以为任意长度。其内容长度不用被限制在一行内，可以为任意长度。结束标识和开始标识可以不在一行上。和开始标识可以不在一行上。
hidden=#
是否完全隐藏控制画面 true为是，no为否默认为是，为否默认) 为否(默认为是
<Body> <div align="center"> <embed src="file.wmv" autostart=true loop="true" hidden=true> </div> </Body>
设定背景音乐的档案及路径，设定背景音乐的档案及路径，可以是相对路径或绝对路径
Байду номын сангаас
是否自动反复播放。是否自动反复播放。 LOOP=2 表示重复两次，表示重复两次， Infinite 表示重复多次
是否在音乐档下载完之后就自动播放。是否在音乐档下载完之后就自动播放。 true 是，false 否 (默认值默认值) 默认值
分段标记
分段标记<p>用来定义一个段落，在此标记对之间的文本用来定义一个段落，分段标记用来定义一个段落按照段落的格式显示在浏览器上
HTML将多个空格以及回车等效为一个空格，将多个空格以及回车等效为一个空格，将多个空格以及回车等效为一个空格 HTML的分段完全依赖于分段标记的分段完全依赖于分段标记
预排版标记
<pre>标记被称为预排版标记。标记被称为预排版标记。标记被称为预排版标记该标记允许保留你在原代码中输入的空白和回车
<Body> <center> <p> <pre> 编号名称 001 语文教材 </pre> </p> </center> </Body>
很实用~~ 很实用价格(元) 20.00
水平线标记
水平线标记<hr>用来把页面分成几个部分用来把页面分成几个部分水平线标记
left；right；center ；；
以像素作单位，内定为以像素作单位，内定为2
1．align=# 设定线条摆放位置．
<hr>标记拥有以下属性标记拥有以下属性
2．size=#属性．属性 3．width=#属性设定线条长度．属性设定线条长度
插入多媒体
<embed> 是用来插入各种多媒体格式可以是 Midi、Wav、AIFF、AU 等等、、、
属性
1．src=# ． 2．autostart=# ． 3．loop=# ． 4. hidden=# 5．starttime="分:秒" ．分秒 6．volume="0-100" ． 7．width="整数和 high="整数整数" 整数" ．整数整数
第五章
页面版式控制与多媒体效果
课程目标
页面版式控制标记插入背景音乐插入多媒体文件
体验
创建有背景音乐及多媒体效果的页面我们要给HTML页面加入背景音乐并且还要在页面中加入我们要给页面加入背景音乐并且还要在页面中加入多媒体效果，如图所示：多媒体效果，如图所示：
页面版式控制
排版标记分为 <P>、<BR>、<HR>、排版标记分为、<P>、<BR>、<HR>、 （结束标记）（开始标记）注释内容（结束标记）
注释的功能：为文中不同的部分加上说明，注释的功能：为文中不同的部分加上说明，方便日后修改
<Body> <div align="center"> <embed src="file.wmv" autostart=true> </div> </Body>
loop=#
用来设定播放次数。用来设定播放次数。 loop=2表示重复两次表示重复两次 loop= true表示持续反复播放表示持续反复播放 loop=false表示只播放一次表示只播放一次 <Body> <div align="center"> <embed src="file.wmv" autostart=true loop="true"> </div> </Body>
定位标记
<div>称为定位标记。它的作用是设定文字表格等摆放位置。称为定位标记。它的作用是设定文字表格等摆放位置。称为定位标记我们可以通过align属性设定文字表格的位置我们可以通过属性设定文字表格的位置