type
status
date
slug
summary
tags
category
icon
password
web的特点
1.易导航和图形化的界面
Web非常流行的一个很重要的原因就在于它可以在一页上同时显示色彩丰富的图形和文本，而在Web之前因特网上的信息只有文本形式。Web具有可以将图形、音频、视频等信息集于一体的特性。同时，Web导航非常方便，只需要从一个链接跳到另一个链接，就可以在各个页面、各个站点之间进行浏览了。
2.与平台无关性
无论计算机系统是什么平台，都可以通过因特网访问万维网。浏览万维网对计算机系统平台没有任何限制。Windows、UNIX、Macintosh以及其他平台都能通过一种叫作浏览器(Browser)的软件实现对万维网的访问，例如Chrome、Edge、Firefox等。
3.分布式结构
大量的图形、音频和视频信息会占用相当大的磁盘空间，用户事先很难预知信息的多少。对于Web来说，信息可以放在不同的站点上，而没有必要集中在一起，浏览时只需要在浏览器中指明这个站点就可以了。这样就使物理上不一定在一个站点的信息在逻辑上是一体的，从用户的角度来看这些信息也是一体的。
4.动态性
由于各 Web站点的信息包含站点本身的信息，因此信息的提供者可以经常对站点上的信息进行更新与维护。一般来说，各信息站点都尽量保证信息的时效性，所以Web站点上的信息需要动态更新，这一点可以通过信息的提供者实时维护。
5.交互性
Web的交互性首先表现在它的超链接上，用户的浏览顺序和所访问的站点完全由用户自己决定。另外，通过表单Form的形式可以从服务器方获得动态的信息。用户通过填写Form可以向服务器提交请求，服务器根据用户的请求返回响应信息。
Web 的工作原理
用户通过客户端浏览器访问因特网上的网站或者其他网络资源时，通常需要在客户端的浏览器的地址栏中输入需要访问网站的统一资源定位符(Uniform Resource Locator,URL)，或者通过超链接方式链接到相关网页或网络资源；然后通过域名服务器进行全球域名解析，并根据解析结果决定访问指定IP地址(IP Address)的网站或网页。
在获取网站的IP后，客户端的浏览器向指定IP地址上的Web服务器发送一个HTTP(HyperText Transfer Protocol，超文本传输协议)请求。在通常情况下，Web服务器会很快响应客户端的请求，将用户所需要的HTML文本、图片和构成该网页的其他一切文件发送回用户。如果需要访问数据库系统中的数据，Web服务器会将控制权转给应用服务器，根据Web服务器的数据请求读写数据库，并进行相关数据库的访问操作，应用服务器将数据查询响应发送给Web服务器，再由Web服务器将查询结果转发给客户端的浏览器，浏览器将客户端请求的页面内容组成一个网页显示给用户。这就是Web的工作原理，如图
大多数网站的网页中包含很多超链接，有内链接和外链接。通过超链接可以设置资源下载、页面浏览及链接其他网络资源。像这样通过超链接把有用的相关资源组织在一起，就形成了一个所谓的信息的“网”。这个网运行在因特网上，使用十分方便，这就构成了TimBerners-Lee在1990年初所说的万维网。
Web的相关概念
URL
URL(Uniform Resource Locator)即统一资源定位器(或统一资源定位符)，可以理解为网页地址。它如同网络上的门牌，是因特网上标准的资源的地址(Address)。
URL由协议类型、主机域名及路径和文件名三部分组成，其构成如下：
第一部分是协议类型(或称为服务类型)，如表所示；第二部分是资源主机域名或IP地址(包括端口号)，HTTP默认的端口号是80；第三部分是主机资源的具体地址，例如目录和文件名等。
第一部分和第二部分之间用“://”符号隔开，第二部分和第三部分之间用“/”符号隔开。
第一部分和第二部分是不可缺少的，第三部分有时可以省略。下面是一些例子：
Web 服务器
Web服务器也称为网站，是指在因特网上提供Web访问服务的站点，它是由计算机软件和硬件组成的有机整体。网站一般采用PHP、JSP、ASP等技术开发成B/S(Browser/Server)架构，由若干个网页有序地组织在一起，第一个网页也称为主页，所以主页的设计非常重要。通常需要为Web服务器配置IP地址和域名，这样才能对外提供Web服务。
超链接
Web页面一般由若干超链接构成。所谓超链接(Hyper Link)，是指从一个网页指向另一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件甚至一个应用程序。
文本超链接在浏览器中表现为带有下画线的文字，当将鼠标指针移动到文字上时，浏览器会将光标转变为手的形状。如图所示为世界上第一个网站上的超链接。
网页中超链接的格式如下：
Web前端开发技术
随着因特网技术的飞速发展与普及，Web技术也在同步发展，并且应用领域越来越广WWW(World Wide Web)已经是当今时代不可或缺的信息传播载体。全球范围内的资源互通互访、开放共享已经成为WWW最有实际应用价值的领域。开发具有用户动态交互、富媒体应用的新一代Web网站需要HTML、CSS、JavaScript、DOM、AJAX等组合技术，其中HTML、CSS、JavaScript三大技术被称为“Web标准三剑客”。
HTML
HTML(HyperText Markup Language)是超文本标记语言，而不是编程语言。HTML是Web页面的结构。HTML使用标记来描述网页。网页的内容包括标题、副标题、段落、无序列表、定义列表、表格、表单等。
HTML是SGML(Standard Generalized Markup Language,标准通用标记语言)下的一个应用(也称为一个子集)，也是一种标准规范，它通过标记符号来标记要显示的网页中的各个部分。SGML是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源。
HTML文档是用来描述网页，由HTML标记和纯文本构成的文本文件。Web浏览器可以读取HTML文档，并以网页的形式显示出它们。例如在Chrome浏览器的URL中输入网址“http://www.edu.cn”，所看到的网页就是浏览器对HTML文档进行解释的结果。如图所示。
CSS
由于Netscape和Microsoft两家公司在自己的浏览器软件中不断地将新的HTML标记和属性(如字体标记和颜色属性)添加到HTML规范中，导致创建具有清晰的文档内容并独立于文档表现层的站点变得越来越困难。为了解决这个问题，Hakon Wium Lie(哈肯·维姆·菜，挪威)和Bert Bos(伯特·波斯，荷兰)于1994年共同发明了级联样式表。
1.CSS的作用
级联样式表(Cascading Style Sheet，CSS)也称为层叠样式表。在设计Web网页时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者同一网站的不同页面的外观和格式。采用CSS技术是为了解决网页内容与表现分离的问题。
CSS语言是一种标记语言，不需要编译，属于浏览器解释型语言，可以直接由浏览器解释执行。CSS标准由W3C的CSS工作组制定和维护。
2.CSS的发展历史
CSS1:1996年12月17日发布，W3C推荐标准。
CSS2：1999年1月11日发布，W3C推荐标准，CSS2添加了对媒介(打印机和听觉设备)、可下载字体的支持。
CSS3：将CSS划分为更小的模块，这些模块包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。
JavaScript
在HTML基础上，使用JavaScript可以开发交互式Web页面。JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。这也是JavaScript与HTML DOM共同构成Web网页的行为。
JavaScript的由来
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态的功能，例如响应用户的各种操作。JavaScript最初由Netscape的Brendan Eich(布兰登·艾奇)设计，是一种由Netscape的LiveScript发展而来、原型化继承面向对象动态类型的客户端脚本语言，主要目的是为服务器端脚本语言提供数据验证的基本功能。在Netscape与Sun公司合作之后，LiveScript更名为JavaScript，同时JavaScript也成为原Sun公司的注册商标。欧洲计算机制造商协会(European Computer Manufacturers Association,ECMA)以JavaScript为基础制定了ECMAScript标准。
JavaScript的组成
一个完整的JavaScript实现是由以下3个不同部分组成的：
核心(ECMAScript)。
文档对象模型(Document Object Model，DOM)。
浏览器对象模型(Browser Object Model，BOM)。
Web前端开发工具
Visual Stodio Code (VScode)
HBuilder X (HS)
浏览器工具
Microsoft Edge(微软)
Google Chrome(谷歌)
Mozilla Firefox(火狐)
Safari(苹果)
Opera
HTML基础
HTML文档结构
HTML文档由头部head和主体body两部分组成。在头部head标记中可以定义标题、样式等，头部信息不显示在网页上；在主体body标记中可以定义段落、标题字、超链接、脚本、表格、表单等元素，主体内容是网页要显示的信息。
HTML文档的基本结构如下：
HTML文档<html>标记开始，以<html>标记结束。所有的HTML代码都位于这两个标记之间。浏览器根据HTML文档类型和内容来解释整个网页，然后呈现给用户。在一般情况下，每个HTML文档都应该有且只有一个html、head、body元素。
head头部
HTML文档的头部 head 标记主要包含页面标题标记、元信息标记、样式标记、脚本标记、链接标记等。头部head标记所包含的信息一般不会显示在网页上。
标题title标记
基本语法
语法说明
title标记是成对标记，
<title>是开始标记，</title>是结束标记，两者之间的内容为显示在浏览器的标题栏上的信息。
元信息meta标记
meta标记用来描述一个HTML网页文档的属性，也称为元信息(meta-information)这些信息并不会显示在浏览器的页面中，例如作者、日期和时间、网页描述、关键词、页面刷新等。meta标记是单个标记，位于文档的头部，其属性定义了与文档相关联的“名称/值”对。
1.meta 标记
基本语法
属性说明
name属性与content属性。name属性用于描述网页，它是“名称/值”形式中的名称，name属性的值所描述的内容通过content属性表示，便于搜索引擎机器人查找、分类，其中最重要的是description、keywords和robots。
http-equiv属性与content属性。http-equiv属性用于提供HTTP协议的响应头报文，它回应给浏览器一些有用的信息，以帮助浏览器正确、精确地显示网页内容。它是“名称/值”形式中的名称，http-equiv属性的值所描述的内容通过content属性表示。meta标记的属性、取值及说明如表2-1所示。
2.meta标记的使用方法
- name属性设置
robots告诉搜索引擎机器人抓取哪些页面。其属性的取值及说明如表2-2所示。
2.http-equiv属性设置
第1行说明禁止浏览器从本地计算机的缓存中访问页面内容，同时访问者将无法脱机浏览。第2行说明多长时间网页自动刷新，加上URL中的网址参数就代表多长时间自动链接其他网址。第3行中的content-type代表的是HTTP协议的头部，它可以向浏览器传回一些有用的信息，以帮助浏览器正确、精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。第4行设置meta标记的expires(期限)，可以用于设定网页在缓存中的过期时间。一旦网页过期，必须到服务器上重新传输。网页到期时间的设置如下：
注：必须使用GMT的时间格式，或直接设置为0（数字表示多少时间后过期）
在HTML5规范和新版本软件中，第三行meta标记已经改为下列简洁行式：
这是元信息meta标记的应用
主体body
主体body是一个Web页面的主要部分，其设置内容是读者实际看到的页面信息。所有WWW文档的主体部分都是由body标记定义的。在主体body标记中可以放置网页中的所有内容，例如图片、图像、表格、文字、超链接等元素。
基础语法
语法说明
<body>是可以标记，</body>是结束标记，两者之间所包括的内容为网页上的显示信息。
body标记的属性
设置body标记的属性可以改变页面的显示效果。该标记的属性主要有topmargin.leftmargin、text、bgcolor、background、link、alink、vlink。在HTML5中可以使用CSS属性替代
1.基本语法
2.属性说明
body标记的属性、取值及说明如表2-3所示。
HTML基本语法
HTML 属性
HTML使用标记来描述网页，浏览器根据标记解释标记所包含内容的效果。每一个标记均定义了一个默认的显示效果，这些默认效果是通过标记的附加信息(也称为属性Attribute)来定义的。如果要修改某一个效果，那就需要修改该标记的附加信息。
例如，段落p标记默认内容是居左对齐，如果需要将段落居中对齐显示，只需要设置对齐align属性。其代码如下：
1.基本语法
2.语法说明
属性应在开始标记(首标记)内定义，且与首标记名称之间至少留一个空格。例如在上例的p标记中，align为属性，center为属性值，属性与属性值之间通过赋值号“=”连接，属性值可以直接书写，也可以使用双引号("")括起来。多个属性/值对之间至少留一个空格。
作为Web前端开发工程师应该养成良好的编写属性/值对的习惯，建议统一为属性值加上双引号，即：
注释
为了提高代码的可读性、可维护性，作为Web前端开发工程师必须养成良好的编程习惯。通过注释标记给脚本代码或样式定义增加注释文本信息，可以给Web编程人员阅读和理解代码提供帮助，为后期软件的维护和升级奠定基础。用户可以使用锯齿格式编写代码，即代码向右缩进4个字符，也可自定义缩进量。
在HTML代码中插入注释标记可以提高代码的可读性。浏览器不会解释注释标记，注释标记的内容也不会显示在页面上。
在HTML代码中添加注释的方法有两种，即<!-- 注释信息＞和
<comment>注释信息</comment＞。但第2种方法在很多浏览器(Chrome等)中会显示在页面上，所以不建议采用。<!--注释信息-->基本语法
语法说明
以左尖括号和感叹号的组合(
<!--)开始，以右尖括号(-->)结束
代码中第一行和第9行定义注释语句，第11~13行是在body标记中插入脚本标记；第12行是向页面输出信息。
HTML代码的书写规范
HTML语法是Web页面设计所应遵循的基本规范，养成按规范编写代码的习惯能够大大减少设计页面中存在的缺陷。下面是进行HTML页面编码时需要注意的基本规范：
(1)HTML标记是由尖括号包围的关键词。所有标记均以“<”开始、以“>”结束。结束标记在开始标记的名称前加上斜杠“/”。例如头部标记的格式如下：
(2)根据标记的类型正确地书写标记，单个标记最好在右尖括号前加一个斜杠“/”，如换行标记是单个标记
<br/>，成对标记最好同时输入开始标记和结束标记，以免忘记。(3)标记可以相互嵌套(也称为包含)，但不能交叉。例如：
(4)HTML代码在书写时不区分大小写，例如将头部标记写成
<HEAD＞，<head>、<Head＞、<HEAd>都可以，但建议在同一个Web开发项目中保持一种风格，如统一成小写标记名称。
(5)若代码中包含任意多的回车符和空格，在显示HTML页面时均不起作用，这时可使用<br/＞和 来实现换行和插入空格。为了使代码清晰，建议不同的标记单独占一行。
(6)在给标记设置属性时，属性值建议用双引号标注起来。例如段落内容居中的格式如下：(7)在书写开始标记与结束标记时，左尖括号与标记名或与斜杠“/”之间不能留有多余空格，否则浏览器不能识别该标记，导致错误标记直接显示在页面上，影响页面的美观效果。例如将例2-5-1中的第9行改成如下格式，错误的标记被显示在页面上，如图2-7所示。
(8)在编写HTML代码时应该使用锯齿结构，即向右缩进2～4个字符，使代码结构清晰，提高代码的可读性，为后期的阅读和维护提供帮助。
HTML文档的命名规则
HTML文档是展示Web前端开发工程师成果的最好表示方式，为了便于文档的规范化管理，在编写HTML文档时必须遵循HTML文档的命名规则。
HTML文档的命名规则如下：
(1)文档的扩展名为htm或者html，建议统一用html。
(2)文档的名称只可由英文字母、数字或下画线组成，建议以字母或下画线开始。
(3)文档名称中不能包含特殊符号，例如空格、$、&.等。
(4)文档名称区分大小写，特别是在UNIX、Linux系统中用大小写表示的文件是不同的。
(5)Web服务器主页一般命名为index.html或default.html。
HTML文档的类型
Web世界中存在许多不同的文档，只有了解了文档的类型，浏览器才能正确地显示文档。HTML也有多个不同的版本，只有完全明白页面中使用的确切HTML版本，浏览器才能正确地显示出HTML页面。
doctype是Document Type的英文缩写，
<!doctype>标记不是HTML标记。此标记可告知浏览器文档使用哪种HTML或XHTML规范。明位于文档中最前面的位置，<!doctype>声明位于文档中最前面的位置，处于<html>标记之前。
基本语法语法说明
<!doctype>表示开始声明文档类型定义(Document Type Definition，DTD)，其中doctype是关键字。
element-name指定该DTD的根元素名称。
DTD-type指定该DTD的类型。若设置为PUBLIC，则表示该DTD是标准公用的；若设置为SYSTEM，则表示该DTD是私人制定的。
DTD-name指定该DTD的文件名称。
DTD-url指定该DTD文件所在的URL地址。>是指结束DTD的声明。HTML5的 DTD 定义
在HTML文档中规定doctype是非常重要的，这样浏览器就能了解预期的文档类型。HTML4.01中的doctype需要对DTD进行引用，因为HTML4.01基于SGML。HTML5不基于SGML，因此不需要对DTD进行引用，但是需要用doctype来规范浏览器的行为。
案例——传统美德故事:铁杵磨成针
格式化文本与段落
Web页面的初步设计
向 Web 页面中添加文字信息
在HTML文件中，主体内容被包含在
<body> </body>标记之间，并且body标记有很多自身的属性，例如设置页面背景、设置页面边界等。1.基本语法
2.语法说明
body标记定义文档的主体。
body标记包含文档的所有内容(例如文本、超链接、图像、表格和列表等)。
一个简单的HTML文档必须包含最基本的必备的标记。
标题字标记
标题字标记由h1～h6共6种标记组成。标记中的字母h是英语Heading的简称。作为标题字，h1标记定义最大的标题字，h6标记定义最小的标题字。h1标记到h6标记属于块级标记，它们必须在HTML中首尾成对出现。浏览器会自动地在标题的前后添加空行。
1.基本语法
2.语法说明
h后面的数字越小，标题字越大。标题字标记的align属性用来定义标题字的对齐方式，对齐方式有4种，分别是left、center、right、justify。但是一般推荐设计者使用CSS样式表来定义对齐方式。
标题文字的大小由它们的重要性决定，等级越高的标题字号越大。在设计时要对各级标题有所规划。
添加空格与特殊符号
在HTML文档中，添加空格的方式与在其他文档中添加空格的方式不同，在网页中通过代码控制来添加空格，而在其他编辑器中通过键盘空格键来输入空格。
- 基本语法
2.语法说明
在网页中添加空格使用“
”，其中“nbsp”是指Non Breaking Space，空格数量与“ ”的个数相同。
在网页中插入特殊字符与插入空格符号的方式相同。特殊字符如表3-1所示。
对于HTML文档中特殊字符对应的代码，浏览器解释后会显示对应的特殊符号
格式化文本标记
文本修饰标记
对于文本修饰标记，各类浏览器均支持，在各类网页开发工具中仍然有这类标记。常见的文本修饰标记如表3-2所示
字体标记
在不指定任何样式的情况下，浏览器会把字体显示为16px、黑色、宋体，因此在设计网页时要根据需要更改不同段落的字体。在HTML5中可以使用CSS中的字体属性替代。
字体标记(font)规定文本的字体系列、字体尺寸、字体颜色，所有浏览器均支持font标记。
1.基本语法
2.属性说明
字体标记(font)的属性、取值及说明如表3-3所示。
段落与排版标记
网页的外观是否美观，在很大程度上取决于其排版。当页面中出现大段的文字时，通常采用分段进行规划，对换行也有极其严格的划分。本节从段落的细节设置入手，利用段落与排版标记处理大段的文字。
段落标记
在HTML文档中，合理地使用段落会使文字的显示更加美观、表达更加清晰。段落标记p用来开始一个段落，它是一个块级标记，该标记中不能再包含其他的任何块级标记。
基本语法
p标记会自动在其前后创建一些空白。浏览器会自动添加这些空间。段落p标记的align属性有4个可选值，分别表示左对齐、居中对齐、右对齐、两端对齐。
换行标记
在HTML文档中插入换行标记br的作用和在普通文档中插入回车符的作用一样，都表示强制性换行。
基本语法
在HTML文档中，换行br标记属于单标记，表示插入换行符。
水平分隔线标记
水平分隔线标记hr用一条线将页面区域按照功能进行分隔。hr标记是单标记。
基本语法
水平分割线标记hr的属性，取值及说明如表3-4所示。
拼音/音标注释标记
ruby标记定义ruby注释(中文注音或字符)。ruby标记与rt标记一同使用。ruby标记由一个或多个字符(需要一个解释/发音)和一个提供该信息的rt标记组成，还包括可选的rp标记，定义当浏览器不支持ruby标记时显示的内容。其效果如图3-6所示。
ruby标记用来将需要注释或注音标的文字内容包围住。
rt标记中放置音标或注释，这个标记要跟在需要注释的文本的后面。
rp标记是防备那些不支持ruby标记的浏览器，主要用来放置括号。对于支持这个标记的浏览器，rp标记的CSS样式是(display:none;)，也就是不可见。
基本语法
段落缩进标记
段落缩进标记blockquote是块级标记，常称为块引用标记。该标记引用的内容能够向右缩进5个英文字符的位置，并在其内容的周围增加外边距。
基本语法
预格式化标记
在HTML中利用成对的
<pre> </pre>标记对网页中的文字段落进行预格式化，浏览器会完整保留设计者在源文件中所定义的格式，包括各种空格、缩进以及其他特殊格式。
基本语法
案例——公民基本道德规范
列表
列表概述
使用列表能对网页中的相关信息进行合理的布局，将项目有序或无序地罗列在一起，便于用户浏览和操作。列表分为无序列表、有序列表、定义列表、菜单列表和目录列表5种，常用的列表有3种，分别是无序列表、有序列表、定义列表。列表类型与标记符号如表4-1所示。
无序列表
无序列表标记 ul (unordered list)为成对标记，
<ul>是开始标记，</ul>是结束标记，在两者之间插入若干个列表项 li (list items)标记，完成无序列表的插入。基本语法
语法说明
ul标记的type属性有3个值，如表4-2所示。列表项 li 标记的type属性的取值与 ul 标记相同。设置ul标记的type属性会使其包含的列表项按统一风格显示，设置其中某一列表项的type属性值时只会影响它自身的显示风格，其他列表项按原样显示。
有序列表
有序列表 ol (ordered list)标记是成对标记，以<ol＞为起始标记，以</ol＞为结束标记，在其间使用
<li></li>标记完成有序列表项目的插入。
1.基本语法在
<ol>、</o1>标记之间必须使用<li> </li>标记来添加列表项值。
2.属性说明
列表 ol 标记的属性
type:列表项前面的编号，编号是有序的，有5种类型。
start:定义有序列表的起始编号，默认值为1。当设置其为非1时，列表项前编号的起始位置会发生改变。例如start="5"，当type="1"时，表示从第5个开始编号；当type="A"时，表示从E开始编号，以此类推。
列表项 li 标记的属性
type:只影响当前列表项前面的编号类型，后续列表项前面的编号类型依旧遵循 ol 标记的type属性的取值。
value:改变当前列表项前面编号的值，并影响其后所有列表项编号的值。
列表嵌套
在一个列表中嵌入另一个列表，作为此列表的一部分，称为列表嵌套。有序列表、无序列表可以混合嵌套，浏览器能够自动地嵌套排列。
使用列表嵌套不仅能使网页的内容布局更加合理、美观，而且使其内容看起来更加简洁。列表嵌套的方式分为无序列表的嵌套、有序列表的嵌套，还可以是无序列表和有序列表的混合嵌套。列表嵌套不能交叉嵌套，例如
<ul><ol></ul></ol>是错误的嵌套。当然，定义列表也可以与无序列表、有序列表进行嵌套。
基本语法有序列表和无序列表嵌套的应用，其代码如下：
定义列表
定义列表 dl (definition list)标记是成对标记，以
<dl>为首标记，以 </dl>为尾标记。定义列表由dt(definition term)标记和dd(definition description)标记组成。定义列表中每一个元素的标题使用<dt>…</dt>标记定义,后面跟随<dd>…</dd>标记，用于描述列表中元素的内容。
1.基本语法2.语法说明
在网页中每一个dt标记可由一个或多个dd标记组成。这两个标记只能在dl标记中使用。定义列表的每一列表项前面既没有符号，也没有编号。
【例4-5-1】用定义列表展示联系人信息。其代码如下，页面效果如图4-4所示。
案例——中国传统文化故事：悬梁刺股
超链接与浮动框架
超链接概述
有了超链接，各个独立的网页便可以有机地链接在一起构成一个网站。所谓超链接，是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至一个应用程序。用户通过浏览器浏览网页，打开页面上的超链接后，可以访问新的页面上的内容。例如百度首页，如图5-1所示，单击网页中的“新闻”链接，会跳转到百度新闻的首页。
超链接的语法、路径及分类
超链接的语法
在网页文件中，超链接通常使用链接a标记的超文本引用href (HyperText Reference)属性建立目标对象，当前文档便是链接源，href设置的属性值是目标文件。
1.基本语法
2.语法说明
超链接a标记以
<a>开始，以</a >结束。其间内容为超链接标题。超链接由目的地址、链接标题、打开位置三部分组成。
3.属性说明
href:链接指向的目标文件。
name:规定锚(anchor)的名称。
title:指向链接的提示信息。
target:指定打开的目标窗口，如表5-1所示。
超链接的路径
在网页设计中超链接a标记的href属性定义链接所访问的目标地址，也称为访问路径。每一个网页都有一个相对固定的地址，即统一资源定位符(URL)，通过独立的URL可以访问不同网站上的不同页面。在HTML文档中提供了3种路径，分别是绝对路径、相对路径和根路径。
1.绝对路径
绝对路径指文件的完整路径，包括盘符或文件传输的协议http、ftp等，一般用于网站的外部链接。绝对路径有两种：一种是从盘符开始定义的文件路径，例如“E:\web\index.html”；另一种是从协议开始定义的URL网址，例如中国教育与科研计算机网的网址“http://www.edu.cn”。
2.相对路径
相对路径是指相对于当前文件的路径，从当前文件所在位置指向目标文件的路径。采用相对路径是建立两个文件之间的相互关系，相对路径一般用于网站内部链接。相对位置的输入方法如表5-2所示。
3.根路径
根路径是指从网站的最底层开始，一般网站的根目录就是域名下对应的文件夹，例如E盘上存放一个网站，双击E盘进入E盘看到的就是网站的根目录，这种路径称为根路径，所以根路径以斜杠“/”开头，然后书写文件夹名，接着书写子文件夹名或文件名，以此类推，直到写完路径为止。例如“/web/news/show.html”。
根路径一般用于创建内部链接。通常不建议采用此种链接形式。
根目录路径和相对路径都是以某个位置为起点的相对路径，但是根目录路径一般用于有多台服务器的大型网站，建议对路径的概念不太熟悉的初学者在做链接时采用相对路径。另外，为了避免出现链接错误，不管使用何种类型的链接，站点的建立是必要的。
超链接的分类
在HTML文档中，超链接可以分为内部链接和外部链接两种。内部链接是指网站内部文件之间的链接，而外部链接是指网站内的文件链接到网站外的文件。将URL设置为相对路径为内部链接，而将URL设置为文件的绝对路径为外部链接。
【例5-2-2】内部链接和外部链接的应用。其代码如下，页面效果如图5-3所示。
超链接的应用
在网络上能够通过链接访问不同的资源或网页。链接对象多种多样，可分为文件、FTP站点、图像、电子邮件及书签等。
创建HTTP文档下载超链接
网站经常提供软件、文件等资料的下载，下载文件的链接指向文件所在的相对路径或绝对路径，文件类型为
*.doc、.pdf、.exe、*.rar等。其基本语法如下：创建FTP站点访问超链接
FTP服务器链接和网页链接的区别在于所用协议不同，浏览网页采用http协议，而访问FTP服务器采用ftp协议。FTP需要从服务器管理员处获得登录的权限，不过部分FTP服务器可以匿名访问，从而获得一些公开的文件。其基本语法如下：
创建图像超链接
将链接标题替换为一幅图像，在浏览时单击该图像，就可以打开链接的目标文件。其基本语法如下：
使用
<img>标记代替原来超链接的标题，即可实现图像链接。创建电子邮件超链接
一般网站上都会设置“联系我们”这样的栏目或超链接，目的是方便用户及时与网站管理员进行沟通与联系，这就是人们常说的电子邮件链接。其基本语法如下：
邮件地址必须完整，例如intel@qq.com。其参数有cc(抄送)、bcc(密送)、subject(主题)、body。多个收件人用分号“；”分隔；多个参数用“&”连接，“&.”与关键字之间不能留空格；空格用“%20”代替。
举例如下：
创建页面书签链接
书签是指到文章内部的链接，可以实现段落间的任意跳转。实现这样的链接要先定义一个书签作为目标端点，再定义到书签的链接。链接到书签分为两种，即链接到同一页面中的书签和链接到不同页面中的书签。
1.定义书签
通过设置超链接a标记的name属性来定义书签。
name属性的值是定义书签的名称，供书签链接引用。超链接
<a> </a >之间的信息为书签的标题。
2.定义书签链接
通过设置超链接a标记的href属性来定义书签链接。基本语法
第一种是同一页面内的书签，第二种是不同页面间的书签，其中URL设置HTML文件名称，“#书签名”表示引用名称为“书签名”的书签。
浮动框架
浏览器窗口中含有的孤立的子窗口称为浮动框架，也称为内联框架。在浏览器窗口中嵌入浮动框架可使用iframe标记，该标记为成对标记，必须插入在body标记中，而不能插入在frameset标记中。
1.基本语法
2.语法说明
属性名称及相关说明如表5-3所示。
案例——公民基本道德规范诠释
图像与多媒体文件
图像
图像是网页中必不可少的元素，灵活地应用图像会给网页增色不少，而且图像直观明了、绚丽美观，是文字无法替代的。
网页上常见的图像格式有JPEG(Joint Photographic Experts Group)、GIF(GraphicsInterchange Format)和PNG(Portable Network Graphics)等，BMP格式不常用。
在HTML文档中使用img标记在网页上插入图像。设置它的属性可以控制图像的路径、尺寸和替换文字等。
插入图像
用户可以使用HTML的img标记将图像插入网页中，也可以使用CSS设置成某元素的背景图像，根据图像的格式不同，其适用的地方也不同。
1.基本语法
2.语法说明
img标记是单(个)标记，图像样式由img标记的属性决定。img标记有两个必选属性，分别是src、alt，其他属性为可选属性，img标记的具体属性、取值及说明如表6-1所示
src指“source”。源属性的值是图像的URL地址。用户可以采用绝对路径或相对路径来表示文件的位置，例如src="D:/web/ch6/imagesl.jpg”是采用绝对路径，而src"imagesl.jpg"是采用相对路径。
设置图像的替代文本
img标记的alt属性用来为图像设置替代文本。替代文本有以下两个作用：
在浏览网页时，在鼠标指针悬停在图像上的，鼠标指针旁边会出现替代文本。
当图像加载失败时，在图像的位置上会显示红色的“×”，并显示替代文本。
1.基本语法
2.语法说明
替代文本既可以是中文也可以是英文。
设置图像的高度和宽度
img标记的width和height属性用来设置图像的宽度和高度。在默认情况下，网页中的图像大小由图像原来的宽度和高度来决定。如果不设置图像的宽度和高度，则图像的大小和原图一样。
1.基本语法
2.语法说明
图像高度和宽度的单位可以是像素，也可以是百分比。
在设置图像的宽度和高度属性时，可以只设置宽度和高度属性中的一个，另一个属性将按原图的宽度、高度等比例显示。如果同时设置两个属性，图像会发生变形。
设置图像的边框
默认图像是没有边框的，通过img标记的border属性可以为图像设置边框的宽度，但边框的颜色是不可以调整的，当未设置图像链接时，边框的颜色为黑色；当设置图像链接时，边框的颜色和链接文字的颜色一致，默认为深蓝色。通过样式表可以修改边框的线型、宽度和颜色。
1.基本语法
2.语法说明
value为边框线的宽度，用数字表示，单位为像素。
【例 6-1-2】设置图像的高度、宽度及边框。其代码如下，页面效果如图6-3所示。
设置图像的对齐方式
图像和文字之间的对齐方式通过img标记的align属性来设置。图像对齐方式分水平对齐方式和垂直对齐方式两种，其中水平对齐方式的取值有left、center、right，垂直对齐方式的取值有top、middle、bottom，表示图像与同行文字的相对位置。
1.基本语法
2.语法说明
align属性的取值及说明如表6-2所示。
设置图像的间距
图像img标记的hspace和vspace属性用来控制图像的水平距离和垂直距离，而且两者均以px为单位。注意在编写代码时不需要给属性值加上单位px，否则不会产生效果。
1.基本语法
2.语法说明
hspace调整图像左右两边的空白距离，vspace调整图像上下两边的空白距离。在实际应用中很少直接使用图像的对齐属性和图像的间距属性，一般都采用CSS替代，所以此处不再举例。
设置图像的热区链接
除了对整幅图像设置超链接外，还可以将图像划分为若干区域，这叫作“热区”，每个区域可设置不同的超链接。此时包含热区的图像可以称为映射图像。
1.基本语法
2.属性语法
usemap属性将图像定义为客户端图像映射。图像映射指的是带有可单击区域的图像。usemap属性与map标记的name或id属性相关联(适应不同浏览器的需要)，usemap属性的值以“#”开始，后面紧跟“映射图像名称”，以建立
<img>标记与<map> </map>标记之间的关系。它指向特殊的<map>区域。用户计算机上的浏览器将把鼠标在图像上单击时的坐标转换成特定的行为，包括加载和显示另一个文档。
map标记是成对标记。name或id属性映射图像的名称，与img标记的usemap属性的值关联。
area标记是单(个)标记，定义图像映射中的区域。<area>标记总是嵌套在<map></map>标记中。该标记有3个属性，分别是shape、coords、href。href属性定义此区域的目标URL。shape、coords属性的取值及说明如表
滚动文字
如果要设计一个更加生动的网站，还需要在网页中添加多媒体元素。多媒体元素可以更好地体现设计者的个性，通常滚动文字可以增加文字的动态效果。
添加滚动文字
通过marquee标记可以添加滚动文字(内容)，增加动态效果，丰富网页的内容。
1.基本语法
2.语法说明
marquee 标记是成对标记，以
<marquee>开始，以</marquee>结束，将需要滚动的内容放到marquee标记之间，同时也可以设置滚动内容的样式。
marquee标记中onMouseOver="this.stop()"属性值对的作用是当鼠标指针移动到滚动文字区域时，滚动内容将暂停滚动；onMouseOut="this.start()"属性值对的作用是当鼠标指针移出滚动文字区域时，滚动内容将继续滚动。
【例6-2-1】添加滚动文字。其代码如下，页面效果如图6-5所示。
设置滚动文字的背景颜色与滚动循环
为了能够突出显示滚动文字的内容，可以通过bgcolor属性为滚动文字添加背景颜色，这样滚动文字在网页中就会更加明显，同时也可以设置滚动的次数。
1.基本语法
2.语法说明
文字的背景颜色采用多种方法添加，最常用的设置方法是使用十六进制数和rgb()函数。
在默认情况下，滚动文字将会不停地循环滚动。使用loop属性可以设置滚动文字的循环滚动次数，循环滚动次数直接使用数字表示，一般为整数，一1表示无限循环。
设置滚动方向与滚动方式
在没有设定文字的滚动方向时，通常默认以从右到左的顺序滚动。在很多情况下，滚动文字可能需要从其他方向开始滚动，可以用direction属性进行设置。滚动文字的方向确定了以后，滚动文字就会一直滚动下去，如果需要停止，则需要设置behavior属性来实现不同的滚动方式，例如滚动一次就停止、交替滚动、循环滚动等。
1.基本语法
2.语法说明
direction属性决定滚动方向，其属性值及说明如表6-4所示。
设置滚动方向于滚动方式
在设置滚顶文字后，用户可能会考虑到滚动的快慢问题，使用scrollamount属性可以设置滚动文字的速度。滚动延迟就是滚动文字的暂停，使用scrolldelay属性来设置滚动文字的延迟时间。
1.基本语法
2.语法说明
滚动速度实际上就是滚动文字每次移动的长度，这个长度用数字表示，单位为像素。延迟时间以毫秒为单位，其值设置得越小，滚动速度越快。
设置滚动范围与滚动空白空间
设置滚动范围就是设置滚动的背景面积范围，在默认情况下是一个和文字等高、浏览器等宽的颜色带。该面积可以通过width和height属性来控制。
设置滚动空白空间就是设置滚动文字背景和它周围的文字及图像之间的空白空间范围。在默认情况下，滚动对象周围的文字或图像是与滚动背景紧密连接的，使用hspace和vspace可以设置它们之间的空白空间。
1.基本语法
2.语法说明
宽度值和高度值均用数字表示，单位为像素。
hspace、vspace属性的值是整数，单位为像素。
【例6-2-2】设置滚动文字的滚动空白与滚动范围。其代码如下，页面效果如图6-6所示。
embed 标记
<embed>标记定义了一个容器，用来嵌入外部应用程序或者互动程序(插件)。使用该标记可以嵌入图像、音频、视频以及HTML文档，为网页增加更多的炫丽效果。
注：现在已经不建议使用<embed>标记了，可以使用<img>、<iframe>、<video>、<audio>等标记代替它。1.基本语法
2.语法说明
width、height:整型值，单位为像素。设置宽度和高度会出现播放界面，否则不显示播放界面。如果播放声音、音乐文件作为背景音乐，必须同时将宽度和高度属性的值设置为0，而不是省略。
src：设置媒体文件的路径。
type:MIME_type规定嵌入内容的MIME(Multipurpose Internet Mail Extensions)类型。
【例6-3-1】embed标记综合应用。其代码如下，页面效果如图6-7所示
案例——中国影响世界的十大杰出发明创造
- 作者:源殇
- 链接:https://ys.lvems.cc/article/qianduan1
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。