第一章 网页制作的基础知识

1.1 认识网页和网站

1.1.1 网页，网站

网页和网站的区别：

   1.网站通常是指由多数网页组成的一个网页集合体，它往往会包含前端页面和后端的发布编辑平台，网站的不同类型，其复杂度也相差很大，现主要以公司官网类的展示性网站来举例。

一个公司网站，前端网页包括首页、关于公司、联系方式、产品或服务、新闻、案例等介绍，而且可以通过后端的发布平台（通常称为网站后台）不断的创建新的内容页面，这样整个的页面和程序集合体及数据库文件称为一个网站。

   2.网页往往是指网站的单个页面，你打开网站的一个页面，即是一个网页。

常用术语：

1.Internet：互联网，又称国际网络，指的是网络与网络之间所串连成的庞大网络，这些网络以一组通用的协议相连，形成逻辑上的单一巨大国际网络。

2.www：万维网

3.浏览器：将Internet中的文本文档和其他文件翻译成网页的软件，通过浏览器可以快捷地获取Internet 中的内容。常用的浏览器有Internet Explorer(IE)浏览器，Firefox浏览器和Chrome浏览器等。 

4.URL:统一资源定位符，指定通信协议和地址，如"http://www.baidu.com”是一个
URL,"http:/”表示通信协议为超文本传输协议，“www.baidu.com”表示网站名称。

5.IP:网际协议。Intermet 中的每台计算机都有唯一的IP地址，表示该计算机在Internet 中的位置。IP通常分为A、B和C三类。

6.域名：指网站名称，在全世界是唯一的。通常把域名看成网站的网址。域名由固定的网络域茗管理组织进行全球统一管理。域名需向各地的网络管理机构进行申请才能获取。域名的书写格式:机构名，主机名.类别名，地区名。 
HTTP:超文本传输协议，是互联网上应用最为广泛的一种网络协议。所有的WwW文
件都必须遵守这个标准。 

7.FTF:文件传输协议，通过该协议，可把文件从一个地方传到另外一个地方，从而真正地实现资源共享。 

8.发布：指将制作好的网页传到网络上的过程，也称为上传网站。

9.站点：一个站点就是一个网站所有内容所存放的文件夹。Dreamweaver 的使用是以站点
为基础的，必须为每一个要处理的网站建立一个本地站点。站点可分父子站点。站点管理是对一个Internet 的站点进行组织、维护和管理的功能集合。

10.超链接：超链递从一个阿页指向一个目标的连接关系，这个目标可以是另一个何页，可以是相同网页的不同位置，也可以是一个图片，一个电子邮件地址，一个文。甚至是一-个程序。 在浏览网页时单击超鑢接就能跳转到与之相应的頁面。 

 1.1.2 静态网页和动态网页

1.静态同页

静态网頁是指客户端的测览器发送URL请求给WwW服务器。服务器查我需要的超文本文件并不加处理地直接下载到客户端，运行在客户端的页面是己经事先司好务存敏在服务器中的同頁。静态同页通常由纯粹的LL/CS5语言编写。 

2动态同页

动态同页能够根据不同览者的请求来显示不同的内容。无论阿页本身是否具有视觉意义上的动态效果，只要采用动态阿站技术生成的河页都称为动态阿页。其本质主要体现在交互性方面。根据程序运行区域的不同，动态阿页可分为客户境动态阿页与服务案动态阿页。客户端动态网页不需要与服务器进行交互，实现动态功能的代码在往采用脚本语言形式直接嵌入同页中，常见的客户端动态阿页技术包括ESer。ActeK和Fl等。 
服务端动态阿页则需要与客户端共同参与，客户端通过浏览器发页面请后，服务端根据URL携带的参数运行服务程序，产生的结吴页面再返回客户端，动态网页比较往重交互性，即网页会根据客户端的要求和选择而动态改变和响脑般涉及数据库具作的网页(如注册、登录和查询等)都集要噩务动态网页程序。 

1.2网页的基本构成元素

在初次设计网页之前，首先应该认识一下构成阿页的基本元素，这样才能在设计中得心应手，根据需要合理地组织和安排网頁内容。 
一般网站的首页包含常见的网页元素，如导航栏、广告动画、图片、交互表单、文本和起链接等。 

1.文本

文本具有体积小、网络传输速度快等特点，可使用户更方便地浏览和下载文本信息。是可頁最主要的基本元素，也是頁面中最主要的信息载体。与图片相比。文本虽然不如图片部手能够很快引起测览者的注意，但却能准确地表达信息的内容和含义。为了克服文本固有的点，人们赋予了网頁中文本更多的属性，如字体、字号、颜色、底纹和边框等，通过不同式的区别，突出显示重要的内容。此外，用户还可以在网頁中设计各种各样的文字列表， 新地法一艺万项日

2.图片和动画

图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的税覺冷: 力。网页中的网站标识、背景、链接等都可以是图片。用户在网页中使用的图片椿式主司% 品Gll、JPEG和PNG 等，其中使用最广泛的是GIF 和 JPEG两种格式。在网页中，为了y 有效给吸引测见者的注意，许多网站的广告都做成了动画形式。 
确定好网集单元素等台的。

3.超链接

超链接技术是wWW流行起来的最主要的原因。超链接是从一个网页指向另一个目的编的碰接，指定从一个位置跳转到另一个位置，可以是文本链接、图像链接和锚链接等。息链接可以在当前页面中进行跳转，也可以在页面外进行跳转。 

4.音频和视频

音频文件可使网页效果多样化，网页中常用的音频格式有mid和 mp3。其中mp3为压丝文件，其压缩率非常高，音质也不错，是背景音乐的首选。 
网页中的视频文件一般为flv格式，它是一种基于Flash MX 的视频流格式，具有文件小、加载速度快等特点，是网络视频格式的首选。 

5.交互表单

网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件、网页和电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息，接收用户要求，获得反馈意见，让浏览者注册为会员并以会员的身份登录站点等。 

6.其他常见元素

网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮、 JavaSeript与ActiveX等各种特效，它们不仅能点缀网页，使网页更活泼有趣，还在网上娱乐、电子商务等方面也有着不可忽视的作用。

 
1.3页面布局结构

对一个网站来说，除了内容之外，还要对网站进行整体规划设计。格局凌乱的网站内容再精彩，也不是一个好网站。在网页插人各种对象和装饰效果前，要先确定网页的总体风格和布局。 

1.网页页面布局

根据不同的网页制作风格，可以将网页分为个人网页和商业网页。商业网页内容丰富、 信息量大，一般都有统一的布局；个人网页风格比较多样、内容比较专一、形式比较灵活， 更容易创造出美感。确定好网商Ns、要勦网商的市局调行规则、也是确定网m上网哈标识，导甔韂以及Q@元e等8公国、在N頁设计中、结构市局是覜酿设计鼋索在网页中的位曾分参遗行分类、家8脑构市局e“。穿罗、掌型、海擱型和Flah 型等，

2.同质色彩塔配

(网页安全色。网更安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合。在使用网页安全色进行配色后、这些颜色在任何终端用户的显示设备上都将显示为相同的效果。 
网页安全色是红色、绿色和蓝色。当颜色数字信号值为0、 51、102、 I5、204和25s 时，构成的颜色组合一共有216种颜色。 
(2)网页中色彩的表达。在网页设计中、颜色值最常见的表达方式是十六进制。十六进制是计算机中数据的一种表示方法、由数字0~0和字母A~F组成、字母不区分大小写。 颜色值可以采用6位的十六进制来进行表示，并且需要在前面加上特殊符号“”、如# 0E533D.还可通过RGB、HSB,Lab和CMYK 来进行表示；RGB色彩模式是通过对红(R)、绿(G)、蓝(B)3个颜色通道的变化以及相互之间的叠加来得到各种颜色，、是目前运用最广的颜色系统之一。HSB色彩模式是普及型设计软件中常见的色彩模式。Lab 颜色模型由亮度(L)和a、b两个颜色通道组成，这种颜色混合后将产生具有明亮效果的色彩。 CMYK 也称作印刷色彩模式，由青、洋红 (品红)、黄和黑4种色彩组合成各种颜色。 
(3)常见的色彩搭配: 
采用相近色配色:相近色是指相同色系的颜色，使用相近色进行网页色彩的搭配、可以使网页的效果更加统一和谐，如暖色调和冷色调就是相近色的两种运用。 
采用近似色配色:在色相环中每一个颜色对面的颜色，称为互补色、也是对比最强的色组。也可以指两种明显区分的色彩，包括色相对比、明度对比、饱和度对比、冷暖对比等、 如黄和蓝，紫和绿，红和青。任何色彩和黑、自、灰，深色和浅色，冷色和眼色，亮色和暗色都是对比色关系。

1.4Web前端技术简介

I.4.1初识Web前端

Wehb前端即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购啊物等都是在浏览网页。但网页制作还需要了解与网页相关的基本概念，下面对Web前瑞的湘关榔念进行详细讲解。 
页添加各JavaScrip JavaScri 
万HTML+ Css用现逻
1991年8月6日，来自欧洲核子研究中心的科学家Tim Bermers-Lee,启动了世界上第一个可以正式访问的网站(http:1/ino.cerm.ch),标志着万维网时代的到来。随着互联网的飞速发展，网站开发人员也变得炙手可热。 
良好白后给完毕
Web前端开发是从网页演变而来的，名称上有明显的时代特征。随着用户体验要求越来越高，前端开发的技术难度越来越大，Web前端开发这个职业也从设计和制作不分的局面中独立出来。 
早期的前端其实就是Tabel布局，后来发展到Div+Css 网站重构，再到JavaScript逐渐成为Web前端开发的语言以及Web2.0的出现，每个阶段都涌现出相应的产品，如 SNS、 博客、微博等。随着人们对网页需求的不断增大，Web前端技术也正加速地发展。 

1.4.2Web前端开发的三大核心技术

W3C组织，即万维网联盟，创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。W3C专门负责制定网页相关的标准，Web前端的相关技术都是基于W3C标准实现的。 
下面来介绍Web前端开发所包括的三大核心技术:HTML、CSS语言和JavaScript语言。 
1.HTML 
HTML是制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音乐、 程序等非文字元素。超文本标记语言的结构包括“头部”(Head)和“主体”(Body)两部分，其中“头部”提供关于网页的信息，“主体”提供网页的具体内容。 
2.CSS语言
CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，并拥有对网页对象和模型样式进行编辑的能力。 
3.JavaScript语言
JavaSeript是一种属于网络的脚本语言，已经被广泛地用于Web应用开发，常用来为网

页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。它的解释器被称为JavaSceript引擎，属于浏览器的一部分，因此JavaSorip代码由浏览器边解释边执行。通常JavaScoript脚本通过嵌人在HTML中的方式来实现自身的功能。 
万维网联盟(W3C)规定，Web标准需要将网页的结构、样式和行为三者进行分离。 HTML+CSS+JavaScript本质上构成一个MvC框架，即HTML.用于搆述网页的结构(Model), CSss用于描述网页的样式(View),JavaScrip用于描述网页的行为即调度数据和实现某种展现逻辑(Controller)。 
用盖房子的例子来描述三者之间的关系。首先需要把房子的地基和结构搭建好，有一个良好的结构(HTML)。然后给房子刷上油漆和添加窗户，对房子样式进行美化(CsS)。最后给房子添加电梯和地暖，与住户进行一些行为上的交互(JavaScript),这样房子才算搭建完毕。 

1.4.3Web前端开发工具

“工欲善其事，必先利其器。”在HTML+CsS开发过程中，需要先来选择适合的相关开发工具。HTML+CSS开发过程中主要涉及三大类工具:浏览器、网页编辑器和切图软件。 
1.浏览器
浏览器是网页的运行平台，是可以把HTML文件展示在其中，供用户进行浏览的一种软件。目前主流的浏览器有E浏览器、Chrome浏览器、Firefox浏览器、Safari浏览器和Opera 浏览器等，如图1-2所示。由于某些因素，这些测览器没有完全采用统一的Web标准，或者说不同的浏览器对同一个CSS样式有不同的解析，这就导致了同样的页面在不同的浏览器下显示效果可能不同。用户使用的浏览器可能不同，因此制作网页时，需要保证该网页可以兼容所有的主流浏览器。 
O E浏览器Chrome浏览器Firefox浏览器Safar浏览器Opera浏览器
图1-2主流浏览器
下面介绍几种主流浏览器。 
(1)IE浏览器。E是Intemet Explorer 的简称，是由微软公司推出的一款网页浏览器， 采用Trident 内核实现，有6.0,7.0,8.0,9.0,10.0和11.0等版本。在IE7.0以前，中文直译为“网络探路者”，但在IE7.0以后官方便直接称为“E浏览器”。一些用户仍然在使用低版本的浏览器，因此在制作网页时，一般也需要兼容低版本的浏览器。一些其他的浏览器也是基于E内核的，如360安全浏览器和搜狗浏览器等，只要兼容E浏览器，这些基于E内核的浏览器也都兼容。 


(2) Sublime Text。Sublime Text的界面布局非常有特色，它支持文件夹导航图和代码缩略图效果。该软件支持多种编程语言的语法高亮显示，也具有代码自动完成提示功能。该软件还具有自动恢复功能，如果在编程过程中意外退出，在下次启动该软件时文件会自动恢复为关闭之前的编辑状态。 
(3)Note Pad ++。NotePad ++的名称来源于Windows系列操作系统自带的记事本NotePad，在此基础上多了两个加号，立刻带来了质的飞跃。这是一款免费开源的纯文本编辑器，具有完整中文化接口并支持UTF-8技术，如图1-5所示。它具有语法高亮显示、代折众矿功出 因此也非堂活合作为计
(4)EdPl-。EditPlus是由韩国SangilKim (ES-Computing)公司发布的一歇文学織器，支持HTML.CSs,JavaScript, PHP和Java等多种计算机程序的语法高亮显示与代叠功能。其中最具特色的是EitPlus具有自动完成功能。例如，在CSS源文件中输入有b，加上空格，就会自动生成“border: Ipx solid red”语句，开发者可以自行编辑快捷统务代表的代码块，然后在开发过程中使用快捷方式让 EdiPlus自动完成指定的代码内容。 
(5)HBuilder。HBuilder是由DCloud (数字天堂)推出的一款支持HTML5的Web别IDE。HBuilder主要用于开发HTML，s (Javascript)和 CSs,同时配合HTML的后端脚本语言如 PHP 和P 也可以适用，还有前端的预编译语言如 less以及人们钟爱的markiw都可以良好地进行编辑。从2013年夏天发布至今，HBuilder 已经成为业内主流的开发工具目前，HBuilderX发布了1.0正式版。 
3.切图软件
切图软件是对UI设计师设计出的效果图进行切图操作。也可以对网页中的图片进行信改等处理、常用的切图软件有Photoshop和Fireworks两种。

 
1.5HTML语法基础

1.5 1HTML概述

TM1.是Hyper Tee Msrkup lmngouge的写、即刚文本标屺，m业细市融重本文档的简单标记语言。 
1.语言
HTML作为一种超文本标记语言，有指定的睠法规测、椭文本睡协砚现定了京题作运行H7TML文档时所遵循的规则和进行的报作。协议的制定便测業器在运行用文木时有了统的规则和标准。用HTML编写的超文本文档称为HTML.文档，它能独立于各种操作系统平台。自1990年以来HTML就一直被用作www的信息表示语育，使用HrMEL描述的文件， 需要通过Wcb浏览器HTTP显示出效果。 
2.超文本
超文本是可以加人图片、声音、动画、影视等内容的文本。事实上每一个HTMEL.文器都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，简单且易学易懂。 
3.标记
HTML5实际上不算是一种编程语言，而是一种标记语言。HTML5文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档的某个部分。在HTML中每个用作标签的符号都是一条命令，它会告诉浏览器如何显示文本。这些标签均由“<”和“>"符号以及一个字符串组成。如<head>,<body>等。而浏览器的功能是对这些标记进行解释，显示出文字、 图片、动画和播放声音。这些标签符号用“<标签名字属性>”来表示。标签分为单标签和双标签两大类: 
单标签指的是只存在一个标签的写法，如<meta><input>等。 
双标签指的是存在一对标签的写法，如<head>/head>,<body></body>等。 
注意，在双标签中第一个标签称为起始标签，第二个标签称为结束标签，结束标签需要在左尖括号后添加一个关闭符“”。 
HTML只是一个纯文本文件。创建一个HTML文档，需要HTML编辑器和Web浏览器两个工具。HTML编辑器是用于生成和保存HTML文档的应用程序。Web浏览器用来打开Web网页文件，提供查看Web资源的客户端程序。

 
1.5.2HTML基本结构

HTML文档是由一系列的元素和标签组成的。元素名不区分大小写，HTML用标签来规定元素的属性和它在文件中的位置，HTML文档分为头部和主体两部分，在文档头部对文档进行一些必要的定义，主体部分是文档要显示的信息。其基本结构见例1.1。 
HTML是制作网页的基础语言，是初学者必学的内容。虽然现在有许多所见即所得页制作工具，但是这些工具生成的代码仍然是以HTML为基础的，因此学习HTML代码计网页非常重要。

1.HTML文档标签<html>……</html>

HTML文档标签的格式为<html>HTML文档的内容</html>

<html>处于文档的最前面，表示HTML文档的开始，即浏览器从<html>开始解释，直到遇到</html>

2.HTML文档头标签<head>…/head> 

HTML文档包括头部(head)和主体(body)。HTML文档头标签的格式为
<head头部的内容</head> 
文档头部内容在开始标签<html>和结束标签</html>

3.文档编码

文档编码格式如下: <meta charset="utf-8"/> 
为了被浏览器正确解释和通过W3C代码标准，所有的HTML文档都必须声明它们所使

用南国码綝南。享档声丽的细码应匲与廑编码，有两会用从码。付学中/对至9 着秦磁，用户一椒佳用GW2313人簡体中女)。

 
4.HTML文档主体标看<body>...</body> 

HM实档丰体标签的格式为skae4有s网的舂备Ahely> 
体佑干头隔以后，Wchwnly>为开始标俊，bxdy>为生亷标售。他限义网漏傅主貅内容与暴示格声，是整个网觅的榼心，y网员中明瓤东示的内容

1.6创建HTML文档

个网页可以仙单得见有文字，也可以复柒得既有图片。，交守，)有运鳾别、省频等。F面使用师Mui4er快隗编辑一个HTML文件，通过亿来学别网列的编辑，仪杯5。 
(1)使用拜4Aer新值项目。依沙点南择“文作”，新健”“Wi项国.

(2)创建项目名称，设置项目所在的位置确定即可，完成之后会在左边的项目栏管器中出现，如图1-8所示，在本示例中，项目名称为“课堂练习”。

(3)打开项目“课堂练习”的文件夹，会看到里面有首页index.html,如图1-9所示
有文件夹，有css文件夹，还有图片的文件夹，基本齐全。

(4)到了这一步之后，便可以编写网页代码了，可以直接在index.html 中编写代码。

(5)在“创建文件向导”对话框中，选择好文件所在目录，并为文件命名，模板为
html5,如图1-11所示。

6)本实例将文件命名为“示例程序1.2.html”,开始编写网页代码，

(7)网页完成后，可以执行菜单“运行”→“浏览器运行”，选择电脑中已有的浏览器进行预览。本书使用Chrme测览器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<p>这是我的第一个网页项目</p>
		<p>2023级软件技术4班</p>
		<a	<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

1.7 网页头部标签

在网页的头部中，通常存放一些介绍页面内容的信息。例如，页面标题、描述和关键词
链接的CsS样式文件和客户端的JavaScript脚本文件等。其中，页面标题及页面描述称为页

》》 
面的摘要信息，摘要信息的生成在不同的搜索引擎中会存在比较大的差别， 即使是同-个物索引擎也会由于页面的实际情况而有所不同。一般情况下、搜索引擎会提取贞面标蟪际签唔的内容作为摘要信息的标题，而描述则常来自页而撟述标签的内容或直接从萸面止文中街取。如果希望自已发布的网页能被百度等搜索引1擎搜索，那么在制作网页时就需要注意编写网页的摘要信息。 
健字设置如下: 
metameke 
金品，生鲜，京东“> 
2.descriptior 

1.7.1 <title>标签

<title>标签是页面标题标签。它将HTML文件的标题显示在浏览器的标题栏中，用以说明文件的用途。这个标签只能应用于<head>与</head>之间。<title>标签是对文件内容的概括。一个好的标题能使读者从中判断出该文件的大概内容。 
网页的标题不会显示在文本窗口中，而以窗口的名称显示出来，每个文档只允许有一个标题。网页的标题能给浏览者带来方便，如果浏览者喜欢该网页，将它加人书签中或保存到磁盘上，标题就作为该页面的标志或文件名。另外，使用搜索引擎时显示的结果也是页面的标题。 
deseription 月置如下: 
metaname 选择、俔廒便捷的
字、金品、生鲜等
当测览者网站主页的标
Bal# 
<title>标签位于<bead>与</head>中，用于标示文档标题，格式如下: <title>标是</title> 
B(S,10) 
<ctitle>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title> 
打开网页后，在网页文档头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示，尽管文档头部定义的信息很多，但能在浏览器标题栏中显示的信息只有标题内容。 

1.7.2<meta>标签

<meta>标签是元信息标签，在HTML中是一个单标签。该标签可重复出现在头部标签中，用来指明本页的作者、制作工具、所包含的关键字，以及其他一些描述网页的信息。 
<meta>标签分两大属性:HTTP标题属性(http-equiv)和页面描述属性(name)。不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。本节主要讲解的name属性，用于设置搜索关键字和描述。<meta>标签的name属性的语法: 
<meta name="参数"content="参数值"> 
name 属性主要用于描述网页摘要信息，与之对应的属性值为content。content 中的内容主要是便于搜索引擎查找信息和分类信息用。 
name属性主要有以下两个参数:keywords(关键字)和 description(网站内容描述)。 
1. keywords 
国
keywords用来告诉搜索引擎网页使用的关键字。例如，著名的京东商城网，其主页的关
例如，京东商城的文档标题:

一个搜示签中中截编写
键字设置如下: 
cmrtm name”keywonds”owteM出“网上购椸、网上薦鹽，象也，手机，意脂@，,象，票，是。个学。 食品，生鲜，京东*> 
2. description 
以说的概
个到的
description用来告诉搜索引擎网站主要的内容。例如，京东商城网啮主页的内容描递设
置如下: 
cmetn name="desceription"content=“京东JD.COM-专业的鰷合网上购杨商盛，为偬提供正品低价的勇物选择、优质便捷的服务体验。商品来自全球教十万品牌商家，食括家电、手机、电脑、服果、居家、母麈，是后、个护、食品、生鲜等丰富品奥，满足各种购物需求。”/> 
当浏览者通过百度搜索引擎(百度)搜索“京东”时，就可以看到搜素结果中显示出网站主页的标题、关键字和内容描述，如图1-14所示。 
BaidBR 京东百-
网页资讯^ 贴吧 知道视频音乐图片地图库更多s 
具
百度为您找到相关结果约71，000,000个
搜素结果涉及价格仅作参考，请以商家官网为准
京东JD.COM官网多快好省只为品质生活官网
京东
家用电器手机通讯
冰箱洗衣机领券享优惠
PLUS会员| 京东超市
D东官方网站

1.7.3<link>标签

京东JD.cOM-专业综合网上购物商城，销售超数万品牌，4020 万种商品，囊括家电、手机、电脑、服装、居家、母婴、美妆个护、食品、旅游等13大品类。京东PLUS会员，免费体验30天！京东秉承客户为先，100%正品行货保障，提供全国联保，机打发票，专业配送，售后服务！ 
www.JD.com 20 19-02-品牌广告
食品百货生活服务海围全球新春开门红大促冰箱洗衣机领差券享优惠冰洗大卖场打烊电视影音会场空调新春钜惠小家电情人节海国全球京东生鲜图书音像
电脑数码
用的特然持号及
京东官网，京东”GO"实惠，刷新超低折扣价，就等你来京东JD.cOM-专业的综合网上购物商城！ 
图1-14在百度搜索“京东” 
<link>标签用于连接外部资源和当前HTML文档，它只在首部标签<head>和</head>中，

1.7.4<script>标签

<script>标签是脚本标签，用于为HTML文档定义客户端脚本信息。此标签可以在文档中包含一段客户端脚本程序，可以位于文档中任何位置，但常位于<head>标签内，以便于维护。格式如下: 
<scripttype="text/css”src="脚本文件名n.js">X/script> 

1.8HTML5文档注释和特殊符号

1.8.1 注释

为增加HTML5文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行。HTML5使用<！--…-->标签为文档进行注释，注释标签以“<!--”开头，以“-->”结束，中间的“…”替换为注释文字内容即可。<!--…-->标签支持单行和多行注释。 

1.8.2特殊符号

由于大于号“>”和小于号“<”等已作为HTML的语法符号，所以，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示。这些特殊符号对应的HTML代码被称为字符实体。 
常用的特殊符号立的字符实体见表1-1。这些字符实体都以"“&”开头，以“；” 
结束

以一首宋词为例子，参照给定的HTML代码和图片资源，利用HBuilder 设计Web 网。 在编写时要遵守HTML代码的编写规范，并养成良好的编码习惯。 
以下为完整代码，以供参考。 
<!--综合案例--> 
<! DOCTYPE html> 
<html> 
<head> 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="keywords"	content="xxx"/>
		<meta name="description"	content="xxx"/>
		<title>这是我的第一个网页项目</title>
		<link rel="stylesheet" href="css/index.css" type="text/css"/>
		<script>stc="js/index.js" type="text/javascript"</script>
	</head>
	<body>
		<!--注释内容-->
		<p>这是我的第一个网页项目</p>
		<!--
		第一行注释内容
		第二行注释内容
		第三行注释内容
		-->
		<p>2023级软件技术4班</p>
		<a	<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

1.9综合案例--临江仙·送钱穆父

本例浏览
D# →C 
<meta name="keywords"content="宋词，苏轼"charset="utf-8"/>H, <meta name=" description"content="本网站收录精选宋词"/> <title>宋词精选</title> 
00 
本询e 
<style type=" text/css"> 
pl 
} 
</style> 
</head> 
当王和特库
text-align:center; font-size: larger; 
□ 
<body bgcolor="antiquewhite" text-"#333333"> 
<h2 align="center">临江仙·送钱穆父</h2> 
<P>宋苏轼</p > 
8. 
<!--使用<br/>的效果--> 
<p>一别都门三改火，天涯踏尽红尘。<br/> 
依然一笑作春温。<br/> 
无波真古井，有节是秋筠。<br/> 
惆怅孤帆连夜发，送行淡月微云。<br/> 
尊前不用翠眉顰。<br/> 
<font color="brown"face-"微软雅黑">人生如逆旅，我亦是行人。/font></p > < img src="img/1.1. jpg"/> 
<!--水平线--> 
P普
<hr size="2" color="black" width="100%"/> 
是空
<p align="center">网页制作教程Copyright&copy;广东南方职业学院</p > (# </body> 
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta name="keywords"	content="宋词，苏轼"charset="utf-8" />
		<meta name="description"	content="本网站收录精选宋词"/>
		<title>宋词精选</title>
		<style type=" text/css"> 
		p{
			text-align:center; 
			 font-size: larger; 
		}
		</style> 
		</head> 
		<body bgcolor="antiquewhite" text-"#333333"> 
		<h2 align="center">临江仙·送钱穆父</h2> 
		<P>宋苏轼</p > 
		<!--使用<br/>的效果--> 
		<p>一别都门三改火，天涯踏尽红尘。<br/> 
		依然一笑作春温。<br/> 
		无波真古井，有节是秋筠。<br/> 
		惆怅孤帆连夜发，送行淡月微云。<br/> 
		尊前不用翠眉顰。<br/> 
		<font color="brown"face-"微软雅黑">人生如逆旅，我亦是行人。</font></p > 
		<img src="微信图片_20240912135119.jpg"
		 <!--水平线--> 
		 <hr size="2" color="black" width="100%"/> 
		 <p align="center">网页制作教程Copyright&copy;广东南方职业学院</p >
	</body>
</html>