新書推薦：
《
质子交换膜燃料电池系统及其控制 戴海峰，余卓平，袁浩 著
》
售價：NT$
1114.0
《
绘画的基础 彩色铅笔技法入门教程
》
售價：NT$
279.0
《
听闻远方有你2
》
售價：NT$
240.0
《
牛津分配正义手册
》
售價：NT$
2016.0
《
全域增长：从战略制定到战术执行
》
售價：NT$
661.0
《
澎湖湾的荷兰船：十七世纪荷兰人怎么来到台湾
》
售價：NT$
370.0
《
银元时代生活史
》
售價：NT$
493.0
《
大唐兴衰三百年3：从女主当国到开元盛世
》
售價：NT$
325.0
|
| 編輯推薦： |
|
（1）由浅入深、循序渐进地介绍了HTML5、CSS3、JavaScript等前端网页设计技术。（2）图文并茂、通俗易懂，可作为高等学校计算机科学与技术、软件工程、信息管理与信息系统、网络工程、物联网工程、信息科学技术、数字媒体技术及其他文、理科相关专业或计算机公共基础的网页开发与设计、网页制作、Web编程技术、Web前端开发技术等课程教学的教材，也可作为网页设计初学者快速入门的自学读物。
|
| 內容簡介： |
本书依据互联网行业对Web前端开发工程师岗位技术与能力的要求，结合作者长期在网页设计教学中积累的经验，由浅入深、循序渐进地介绍了HTML5、CSS3、JavaScript等前端网页设计技术。
全书共分为13章，全面讲述HTML5、CSS3和JavaScript技术。第1～8章重点介绍网页设计的相关概念、HTML5语言基础和网页设计开发工具Sublime Text的使用；第9、10章讲解CSS3样式表与网页布局的相关知识；第11、12章讲述JavaScript语言的相关内容和前台动态页面的制作；第13章讲解HTML5高级应用技术。
本书图文并茂、通俗易懂，可作为高等学校计算机科学与技术、软件工程、信息管理与信息系统、网络工程、物联网工程、信息科学技术、数字媒体技术及其他文、理科相关专业或计算机公共基础的网页开发与设计、网页制作、Web编程技术、Web前端开发技术等课程教学的教材，也可作为网页设计初学者快速入门的自学读物。
|
| 目錄：
|
目录
第1章Internet与Web基础1
1.1Internet与万维网1
1.1.1Internet的诞生与发展2
1.1.2万维网的诞生2
1.2统一资源标识符和域名3
1.2.1统一资源定位符3
1.2.2域名4
1.3浏览器与服务器5
1.3.1BS模型5
1.4HTML语言与HTML55
1.4.1HTML语言6
1.4.2HTML的最新版本HTML56
1.5Web前端开发相关技术9
1.5.1CSS9
1.5.2JavaScript9
1.6Sublime Text简介10
1.6.1Sublime Text的安装10
1.6.2Sublime Text的使用12
1.7本章小结17
第2章HTML5结构与基础语法18
2.1HTML5文档结构18
2.1.1文档类型定义19
2.1.2头部内容19
2.1.3主体内容20
2.2HTML5基本语法21
2.2.1标记语法21
2.2.2属性语法22
2.3注释23
2.4编写与命名规范23
2.4.1编写规范23
2.4.2命名规范24
2.5上机练习24
2.6本章小结25
〖1〗HTML5网页设计教程目录[3]〖3〗第3章文字与段落27
3.1文字内容27
3.1.1标题字27
3.1.2添加空格28
3.1.3添加特殊符号29
3.1.4注释标记30
3.2文字修饰30
3.2.1粗体、斜体、下画线30
3.2.2删除线31
3.2.3上标和下标31
3.2.4设置地址文字32
3.3段落33
3.3.1段落标记33
3.3.2换行标记34
3.3.3居中标记34
3.3.4水平分隔线34
3.3.5预格式化标记35
3.4上机练习36
3.5本章小结37
第4章超链接39
4.1超链接简介39
4.2创建超链接39
4.2.1相对路径和绝对路径39
4.2.2内部链接41
4.2.3外部链接41
4.3链接对象41
4.3.1文字链接41
4.3.2图片链接42
4.3.3书签链接43
4.3.4电子邮件链接46
4.3.5FTP链接47
4.3.6下载文件链接47
4.4上机练习47
4.5本章小结49
第5章列表50
5.1列表简介50
5.2无序列表50
5.3有序列表51
5.3.1有序列表及编号样式51
5.3.2编号起始值52
5.3.3列表项编号52
5.4嵌套列表55
5.5定义列表56
5.6上机练习57
5.7本章小结59
第6章多媒体应用60
6.1图片60
6.1.1图片标记60
6.1.2指定图像的高与宽61
6.1.3指定图像的对齐方式62
6.2音频和视频64
6.2.1视频文件格式64
6.2.2video标签的属性64
6.2.3为视频添加控件和自动播放65
6.2.4为视频指定循环播放和海报图像66
6.2.5阻止视频预加载68
6.2.6音频文件格式68
6.2.7audio标签的属性70
6.2.8自动播放、循环和载入音频70
6.2.9使用多种来源的视频和备用文本72
6.3本章小结74
第7章表格75
7.1表格标记75
7.1.1表格标题76
7.1.2表格表头78
7.2表格属性79
7.2.1设置表格的边框属性79
7.2.2设置表格的宽度和高度80
7.2.3设置表格的背景颜色80
7.2.4设置表格的背景图像80
7.2.5设置表格单元格间距82
7.2.6设置表格单元格边距83
7.2.7设置表格的水平对齐属性84
7.3设置行的属性86
7.3.1行内容水平对齐86
7.3.2行内容垂直对齐86
7.4设置单元格的属性88
7.4.1设置单元格跨行88
7.4.2设置单元格跨列89
7.5表格嵌套91
7.6上机练习93
第8章表单95
8.1表单概述95
8.1.1表单的结构95
8.1.2表单的处理96
8.1.3HTML5表单的特性96
8.2表单类型98
8.2.1创建文本框98
8.2.2创建密码框98
8.2.3创建单选按钮100
8.2.4创建复选框101
8.2.5创建提交按钮和重置按钮102
8.2.6创建隐藏字段103
8.2.7创建电子邮件框104
8.2.8搜索框105
8.2.9电话框106
8.2.10网址框107
8.2.11数字框108
8.2.12日历框109
8.3创建文本区域110
8.4创建选择框111
8.5让访问者上传文件112
8.6上机练习113
8.7本章小结114
第9章CSS3基础115
9.1CSS115
9.1.1CSS简介115
9.1.2从CSS到CSS3115
9.1.3CSS3新特性115
9.2样式表的定义与使用116
9.2.1定义内联样式表116
9.2.2定义内部样式表116
9.2.3链接外部样式表117
9.3定义选择器117
9.3.1按照类型选择元素117
9.3.2按照类选择元素118
9.3.3按照ID选择元素119
9.3.4选择元素的一部分121
9.3.5伪类选择器121
9.4文本与排版样式的使用126
9.4.1长度、百分比单位126
9.4.2文本样式属性127
9.5背景和颜色的使用138
9.5.1设置颜色的方法138
9.5.2设置背景颜色140
9.5.3设置背景图片141
9.6设置超链接样式143
9.7盒子概念与使用145
9.7.1盒子的概念145
9.7.2设置元素外边界145
9.7.3设置元素边框147
9.7.4设置元素内边界149
9.8列表150
9.9上机练习151
9.10本章小结154
第10章CSS3高级应用155
10.1div元素155
10.2导航栏设计158
10.3动画设计159
10.3.1@keyframes规则159
10.3.22D变形160
10.3.2平滑过渡165
10.3.33D动画167
10.3.4渐变效果171
10.4用户界面177
10.4.1CSS3调整尺寸177
10.4.2CSS3方框大小调整177
10.4.3CSS3外形修饰178
10.5页面布局178
10.5.1多栏布局178
10.5.2盒布局179
10.6上机练习181
10.7本章小结183
第11章JavaScript基础语法184
11.1JavaScript简介184
11.2JavaScript的使用184
11.2.1将JavaScript插入网页的方法184
11.2.2JavaScript的位置186
11.3JavaScript变量187
11.3.1变量的类型及声明187
11.4JavaScript数据类型188
11.4.1数据类型的相关内容188
11.4.2数据类型189
11.5JavaScript运算符和表达式191
11.5.1表达式191
11.5.2运算符192
11.6JavaScript控制语句196
11.7JavaScript对象和函数201
11.7.1JavaScript对象201
11.7.2JavaScript函数201
11.8JavaScript注释201
11.9上机练习JavaScript综合实例202
11.10本章小结204
第12章JavaScript面向对象编程205
12.1内置对象205
12.1.1字符串对象205
12.1.2数学对象207
12.1.3日期对象207
12.1.4数组对象208
12.1.5Boolean对象209
12.2宿主对象209
12.2.1DOM对象的属性和方法209
12.2.2DOM对象的操作212
12.2.3window对象214
12.3常用其他对象215
12.3.1表单对象215
12.3.2Image对象215
12.4事件编程216
12.4.1事件处理216
12.4.2事件驱动217
12.5上机练习JavaScript综合实例219
12.6本章小结222
第13章HTML5高级应用223
13.1使用HTML5绘制图形223
13.1.1绘制基本图形224
13.1.2使用moveTo与lineTo绘制直线227
13.1.3使用bezierCurveTo绘制贝塞尔曲线229
13.1.4绘制渐变图形231
13.1.5绘制平移效果的图形234
13.1.6绘制缩放效果的图形235
13.1.7绘制旋转效果的图形236
13.1.8绘制组合效果的图形237
13.1.9绘制带阴影的图形240
13.1.10使用图像241
13.2本地存储243
13.2.1Web存储243
13.2.2使用本地数据库进行本地存储245
13.3离线缓存248
13.3.1建立一个应用缓存248
13.3.2配置manifest文件249
13.3.3更新缓存250
13.4地理位置250
13.4.1地理位置元素的基础知识250
13.5本章小结253
|
| 內容試閱：
|
序言前言随着HTML5、CSS3和JavaScript技术的广泛应用， Web前端开发者的工作量大大减轻，开发成本不断降低，三者是Web项目开发中非常重要的开发技术。HTML5跨平台的优势使其在未来的技术市场中逐渐发展成为主流开发技术，占据越来越重要的地位。本书以HTML5为主体，搭配CSS3和JavaScript，并且立足于当前网络行业，成为您充实自己实力或踏入网页设计领域的最好帮手。1. 本书内容全书共分为13章，各章节主要内容如下：第1章主要对Internet与Web技术进行概述。包括Internet与万维网、域名、URL等概念，以及开发工具sublime text的安装和使用。第2章介绍HTML5的网页文档结构。包括HTML5文档的基本框架、标记和标记属性等语法，为编写Web程序打下基础。第3章介绍HTML5文档文字与段落的处理，包括文字内容、文字修饰、段落等常用标记。第4章介绍用HTML5建立超链接。包括文字、图片、邮箱的超链接，锚点的使用和相对路径与绝对路径的概念等。第5章介绍用HTML5创建列表。包括无序列表、有序列表、嵌套列表和自定义列表。第6章介绍多媒体的应用。包括图片、音频和视频的应用。第7章介绍用HTML5创建表格。包括表格的常用属性、样式设计、表格嵌套等。第8章介绍使用表单。包括表单概述、表单基本元素的使用和表单的验证方法和属性等。第9章介绍HTML5的高级应用。包括画布、地理位置、Web存储、应用缓存等高级应用技术。第10章介绍CSS3基础。包括CSS3基础语法、选择器、媒体查询等。第11章介绍CSS3的高级应用。包括Div元素、导航栏设计、动画设计等。第12章介绍JavaScript基本语法和内置对象。包括JavaScript简介、数据类型与变量、运算符与表达式、流程控制语句和函数、字符串对象、数学对象、日期对象和数组对象等。第13章介绍JavaScript的对象编程。包括常用对象、DOM操作和事件编程。2. 本书特色1 知识全面，内容丰富。内容由浅入深，涵盖了所有HTML5、CSS3和JavaScript知识点，便于读者全面掌握网页设计技术。2 循序渐进，难度适中。知识结构安排合理，把知识点融汇于案例实训中，并且结合经典案例进行讲解和拓展，帮助读者快速入门。3 理论与实际紧密结合。书中穿插大量综合案例，帮助读者学习理论知识的同时，更好地结合开发实践，掌握网页设计工作中解决实际问题的方法。4 结合最新工具，高效开发。本书采用Web开发中广泛应用的Sublime Text3开发工具进行讲述，使读者在学习知识的同时，能够熟练高效地使用工具。5 配套资源完善。为帮助读者更好地使用本教材进行学习，教材配套相关教学资源，提供免费的图片、代码等相关素材，还特别为教师提供PowerPoint教案，方便教师授课使用。〖1〗HTML5网页设计教程前言[3]〖3〗3. 读者对象本书适合作为高等学校计算机科学与技术、软件工程、信息管理与信息系统、网络工程、物联网工程、信息科学技术、数字媒体技术及其他文、理科相关专业或计算机公共基础的网页开发与设计、网页制作、Web编程技术、Web前端开发技术等课程教学的教材，也可作为网页设计初学者快速入门的自学读物。书中大量的示例模拟了真实的网页设计案例，对读者的学习有现实的借鉴意义。4. 作者团队本书作者孙甲霞、吕莹莹、李学勇等长期从事网页设计课程教学工作。孙甲霞编写第1～3章，吕莹莹编写第4～7章，金松林编写第8～10章，李学勇编写第11～13章，另外，在本书的编写过程中，牛燕尾在素材的整理等工作中也付出了辛勤的劳动，才能使此书和读者见面。 在本书的编写过程中，我们力求精益求精，但由于水平有限，书中难免有不足之处，恳请读者谅解。读者如果遇到问题或有意见和建议，敬请与我们联系，我们将全力提供帮助。
编者2017年1月
第3章文字与段落文字和段落是网页中最重要、最常用的元素。学习本章的目的是掌握HTML5文档文字与段落的处理,包括文字内容、文字修饰、段落常用标记。本章重点 掌握HTML5文档中文字内容的处理和修饰 掌握段落格式的设置3.1文 字 内 容网页的内容主要是通过文字来体现的,HTML5中提供了许多与文字相关的标记。3.1.1标题字标题文字标记用来标示页面中的标题文字,被标示的文字将以粗体形式显示。HTML5中对标题文字的大小定义了六级。 定义最大的标题。 定义最小的标题。它们需要与尾标记一起使用。语法： 标题文字其中align属性用来控制标题文字的对齐方式： left为左对齐默认方式;center为居中;right为右对齐。的应用如例31所示。This is header 1This is header 2This is header 3This is header 4This is header 5This is header 6代码运行结果如图31所示。图31标题字实例演示3.1.2添加空格HTML中的常用字符实体是不间断空格。浏览器总是会截短 HTML页面中的空格。如果在文本中写10个空格,在显示该页面之前,浏览器会删除它们中的9个。如需在页面中增加空格的数量,需要使用字符实体。[1]HTML5网页设计教程第3章文字与段落[3][3]添加空格的应用如例32所示。HTML使用空格符号使用空格缩进两个汉字的位置：
两个空格符号表示一个汉字的位置。两个空格符号表示一个汉字的位置。两个空格符号表示一个汉字的位置。两个空格符号表示一个汉字的位置。
使用空格缩进四个汉字的位置：
两个空格符号表示一个汉字的位置。两个空格符号表示一个汉字的位置。两个空格符号表示一个汉字的位置。两个空格符号表示一个汉字的位置。
代码运行结果如图32所示。图32空格实例演示3.1.3添加特殊符号在HTML中,某些字符是预留的。在HTML中不能使用小于号,这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符,必须在HTML源代码中使用字符实体。字符实体类似这样： &entity_name或者&#entity_number如需显示小于号,必须写为或<。HTML中有许多有用的字符实体,如表31所示。续表表31HTML中常用的字符实体显 示 结 果描述实 体 名 称实 体 编 号大于号>&和号&"引号"''撇号 IE不支持'￠分¢￡镑£￥日圆¥节§版权©注册商标®乘号×除号÷提示： 实体名称对大小写敏感!3.1.4注释标记注释标签用于在源代码中插入注释。注释不会显示在浏览器中。可使用注释对代码进行解释,这样做有助于以后对代码的编辑。当编写了大量代码时尤其有用。使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯这样就不会把脚本显示为纯文本,如下面代码所示。This text is a commentThis is a regular paragraph
3.2文 字 修 饰[45]3.2.1粗体、斜体、下画线1. 粗体 标签规定粗体文本。2. 斜体标签显示斜体文本效果。标签和基于内容的样式标签类似。它告诉浏览器将包含其中的文本以斜体字italic或者倾斜oblique字体显示。如果这种斜体字对该浏览器不可用的话,可以使用高亮、反白或加下画线等样式。3. 下画线 标签定义文档的其余部分之外的插入文本。综合应用如例33所示。粗体斜体
一打有 二十十二 件。
代码运行结果如图33所示。图33粗体、斜体、下画线效果演示注意： 标签一定要和结束标签结合起来使用。3.2.2删除线标签定义文档中已删除的文本。3.2.3上标和下标 标签可定义上标文本。包含在 标签和其结束标签中的内容将会以当前文本流中字符高度的一半来显示,但与当前文本流中文字的字体和字号都是一样的。 标签可定义下标文本。包含在 标签和其结束标签 中的内容将会以当前文本流中字符高度的一半来显示,但与当前文本流中文字的字体和字号都是一样的。上标和下标的应用如例34所示。 标签这段文本包含 下标这段文本包含 上标X1 Y22=15代码运行结果如图34所示。图34上标和下标效果演示提示： 无论是标签还是与它对应的标签,在数学等式、科学符号和化学公式中都非常有用。3.2.4设置地址文字标签定义文档或文章的作者、拥有者的联系信息。如果元素位于元素内,则表示文档的联系信息。如果元素位于元素内,则表示文章的联系信息。元素中的文本通常呈现为斜体。大多数浏览器会在address元素前后添加折行。设置地址文字的应用如例35所示。 标签Written by HTML5
Email us
Address： Box 564, Disneyland
Phone：12 34 56 78代码运行结果如图35所示。图35设置地址文字效果演示提示： 标签不应该用于描述通信地址,除非它是联系信息的一部分。3.3段落[45]3.3.1段落标记
定义了一个段,是一种块级标记,其结尾标签可以省略。不过在使用浏览器的样式表单时为了避免出现差错,还是建议使用结尾标签。提示： 块级标记是相对于行内标记来讲的,可以换行,而行内标记中的内容默认排列方式是同行排列,直到宽度超出包含它容器宽度时才自动换行。段落标记的应用如例36所示。网页标题这是我的第一个段落我是段落内容
第二个段落
3.3.2换行标记使用标记分段时,在段落之间有一空行。如果不希望出现空行,可以使用
换行标记。当浏览器遇到
标记时会另起一行,中间不插入空行。3.3.3居中标记居中标记用于对其所包括的文本进行水平居中。居中标记的应用如例37所示。段落居中这段文字是居中的代码运行结果如图36所示。图36居中标记效果演示3.3.4水平分隔线水平线标记语法为：浏览器遇到水平线标记,会在页面上画出一条水平线。水平线可以把页面分成几部分,使页面内容更加清晰醒目。标记的属性用来控制水平线的样式,常用的属性如表32所示。表32标记的属性属性功能示例size水平线的粗细,以像素为单位,默认值是1width水平线的宽度,可以以像素为单位,也可以用对屏幕的百分比表示,默认值为100%align水平线对齐方式,可取值为： left、center或right,默认值是centercolor水平线的颜色3.3.5预格式化标记 元素可定义预格式化的文本,使HTML文档中的空格、制表符、回车换行符起作用。元素中的文本通常会保留空格和换行符,而文本也会呈现为等宽字体。常应用于表示计算机的源代码。元素中允许的文本可以包括物理样式和基于内容的样式变化,还有链接、图像和水平分隔线。当把其他标签比如 标签放到 块中时,就像放在HTMLXHTML文档的其他部分中一样即可。预格式化标记的应用如例38所示。这是预格式文本。它保留了空格和换行。用pre实现的漂亮文字图案：
代码运行结果如图37所示。图37预格式化标记效果演示3.4上 机 练 习本节给出一个唐诗欣赏的页面,在这个实例中,综合运用本章所介绍的标记对普通文字和段落进行格式化。步骤1： 打开Sublime Text,新建一个HTML文件,输入以下代码： 文字段落网页唐诗欣赏静夜思
李白
床前明月光,
疑是地上霜。
举头望明月,
低头思故乡。
【简析】
这是写远客思乡之情的诗,诗以明白如话的语言雕琢出明静醉人的秋夜的意境。它不追求想象的新颖奇特,也摒弃了辞藻的精工华美;
它以清新朴素的笔触,抒写了丰富深曲的内容。境是境,情是情,那么逼真,那么动人,百读不厌,耐人寻味。无怪乎有人赞它是妙绝古今。
版权：版权所有,违者必究E-mail：limingwei@gmail.com步骤2： 在浏览器中预览,效果如图38所示。图38综合实例演示效果3.5本 章 小 结文字与段落是页面排版的重点,也是网页的基础部分,可以通过HTML标记实现对文字和段落的格式化。本章主要讲解了HTML文字与段落的格式设置,主要内容包括文字内容标记、文字修饰标记、段落修饰标记的使用。1 在浏览器显示的文字内容编写在和标记之间,内容包括普通的文字、空格符号和特殊符号以及页面的注释语句,标题字标记在HTML中,定义了六级标题。2 文字修饰标记可实现网页文字的斜体、加粗、上标、下标、大小字号、下画线、删除线、等宽、地址等设置。3 段落格式设置可实现段落对齐方式、换行、预格式化、水平线设置、换行等设置。[1]第4章超链接HTML文件中最重要的应用之一就是超链接。超链接就是当鼠标单击一些文字、图片或其他网页元素时,浏览器会根据其指示载入一个新的页面或跳转到页面的其他位置。超链接除了可链接文本外,还可链接各种媒体文件,如声音、图像、动画,通过这些进入丰富多彩的多媒体世界。本章重点 理解相对路径和绝对路径 掌握文字链接 掌握图片链接 理解锚点的使用 了解邮箱地址链接4.1超链接简介超链接是指从一个网页指向另一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一张图片、一封电子邮件、一个文件,甚至是一个应用程序。超链接在本质上属于网页的一部分,它为Web站点提供了最重要的交互措施,使网络不限于特定的地理位置,只要鼠标一点,就可以到达全球任意一个站点。4.2创建超链接在HTML5中建立超链接所使用的标记为。超链接有两个最重要的元素,设置为超链接的网页元素和超链接指向的目标地址。超链接的基本结构如下： 网页元素4.2.1相对路径和绝对路径一个站点中通常有以下两种类型的文件路径。1. 绝对路径绝对路径就是你的主页上的文件或目录在硬盘上真正的路径,例如,你的程序是存放在C：HTML5index.html下的,那么C：HTML5index.html就是index.html的绝对路径。在网络中,以http开头的链接都是绝对路径,例如,http：www.march.comsupportcontents.html就是一个绝对路径。当然不是任何时候都需要使用绝对路径,对于本地链接来讲,使用绝对路径就不是最好的方式,因为一旦将此站点移动到其他域,则所有本地绝对路径都将断开。其次,当插入图像时,如果使用图像的绝对路径,而图像又驻留在远程服务器而不在本地硬盘驱动器,则将无法在文档窗口中查看该图像。此时,就必须在浏览器中预览该文档才能看到它。绝对路径一般在程序的路径配置中经常用到,而在实际制作网页中很少使用。[1]HTML5网页设计教程第4章超链接[3][3]2. 相对路径相对路径又称文档相对路径,是指省略掉当前文档和所链接的文档都相同的绝对URL部分,而只提供不同的路径部分。如supportcontents.html就是一个相对路径。相对路径对于大多数Web站点的本地链接来说,是最适用的路径。在当前文档与所链接的文档处于同一文件内,且可能继续保持这种状态的情况下,文档相对路径就显得特别有用。文档相对路径还可用来链接到其他文件夹中的文档,方法是利用文件夹的层次结构,指定从当前文档到所链接的文档的路径。绝对路径和相对路径的区别说明如下。假设所建立的Web站点目录路径如图41所示。图41Web站点目录路径用表41来说明图41的情况下,某文件引用另一文件时,所应使用的相对路径与绝对路径的区别。表41绝对路径与相对路径的对比引用者被引用者绝对路径相对路径Ref1.htmlBeRef1.gifDir1SubDir2BeRef1.gif..SubDir2BeRef1.gifRef2.htmlBeRef1.gifDir1SubDir2BeRef1.gif....Dir1SubDir2BeRef1.gifRef1.htmlBeRef2.htmlDir2BeRef2.html....Dir2BeRef2.htmlRef2.htmlBeRef2.htmlDir2BeRef2.html..BeRef2.html注意： ".."代表上一层目录,而"...."所代表的是上一层目录的上一层目录。所以,从表41中可以看出,如果引用的文件存在于目前目录的子目录中,或者存在于上一层目录的另一个子目录中,运用相对路径是比较方便的。如果不是时,则干脆利用绝对路径,还比较省事。另外,当被引用的是同一个文件时,引用文件所使用的绝对路径是一样的。4.2.2内部链接内部链接是指超链接的链接对象是在同一个网站中的资源。与自身网站页面有关的链接称为内部链接。假设想要在网页1中点击超链接就跳转到网页2或者网页3,这就是内部链接,因为这3个网页都是在同一个网站内的。内部链接的链接对象是在同一个网站的。语法形式如下。4.2.3外部链接外部链接是指本站以外的链接,表达的是网站之间的链接关系,是针对搜索引擎友情链接。高质量的外部链接指与自身网站建立链接的网站知名度高,访问量大,同时相对的外部链接较少,有助于快速提升自身的网站知名度和排名的网站。语法形式如下： 4.3链 接 对 象[45]4.3.1文字链接设置超链接的网页元素通常使用文本。文本超链接是通过标记来实现的,将文本放在开始标记和结束标记之间,即可建立超链接,语法形式如下。文字内容应用实例如例41所示。文字的超链接文字链接
在浏览器中预览网页效果如图42所示。图42文字链接演示效果4.3.2图片链接图片链接,顾名思义就是对图片设置的超链接。图片链接的建立和文字超链接的建立基本类似,都是通过＜a＞＜a＞链接标记来实现的。只需要把原来的链接文字换成相应的图片。语法形式如下： 应用实例如例42所示。图片的超链接
点击该图片放大在浏览器中预览网页效果如图43所示。图43图片链接演示效果4.3.3书签链接书签链接又称为锚点链接,属于内部链接的一种,它的链接对象是当前页面的某一个部分。有些网页由于内容比较多,导致页面过长,访问者需要不停地拖动浏览器上的滚动条来查看文档中的内容,为了方便用户查看文档中的内容,可以在文档中建立书签链接。id属性常被用于创建到当前页面文档内部的链接,其作用类似于书签链接anchor。因此,HTML5中将用于制作锚点的的属性name取消了。书签链接要设置两部分： 一是目标锚点的id名称;二是超链接部分。例如,在下面的位置创建一个内部链接锚点位置的链接形式如下： 内部链接锚点位置在同一个文档的其他位置创建一个到内部链接锚点位置的链接形式如下： 访问"内部链接锚点位置"显示出来的结果如下：访问内部链接锚点位置如果在其他文档中,还需要在 #tips 前面加上到目标文档的链接地址： 访问"HTML链接"页面上的"内部链接锚点位置"显示结果如下所示：访问HTML链接页面上的内部链接锚点位置提示：1 所有支持id属性的HTML标签都可以作为锚点,直接创建到该锚点的链接就可以了。标题一2 如果创建了一个指向页面内部位置的超链接,但是却没有写锚点文本,如： 本文注意： 同一个页面内部不能有重复的id属性值。应用实例如例43所示。书签链接查看 第四章
第一章本章讲解文字相关知识
第二章本章讲解图片相关知识
第三章本章讲解音乐相关知识
第四章本章讲解美术相关知识
第五章本章讲解绘画相关知识
第六章本章讲解钢琴相关知识
第七章本章讲解汉字相关知识
第八章本章讲解吉祥物相关知识
第九章本章讲解玉器相关知识
第十章本章讲解陶瓷相关知识
在浏览器中预览网页效果如图44所示。图44书签链接演示效果单击页面中的链接,即可将第四章的内容跳转到页面顶部,如图45所示。图45书签链接跳转演示效果4.3.4电子邮件链接好的站点总在不断地自我完善和提高,所以从浏览器那里及时获得需要的意见和建议是非常有必要的。很多情况下,需要将网站管理员的Email地址保留在网页上,以便及时获取外界的反馈信息,这时就需要在网页中使用电子邮件链接。电子邮件链接是一种特殊的链接,单击它不是跳转到相应的网页上,也不是下载相应的文件,而是启动计算机中相应的Email程序,允许书写电子邮件,然后发往指定地址。语法形式如下： 我的邮箱应用实例如例44所示。链接到电子邮箱我的邮箱
在浏览器中预览网页效果如图46所示。图46电子邮件链接演示效果
|
|
購物車/收銀台(
0
) | 在線留言板
| 付款方式
| 聯絡我們
| 運費計算
| 幫助中心 |
加入書簽
HOME
新書上架
