1、HTML5+CSS3+JavaScript网页设计与制作项目教程项目1 认识HTML5布局网页目录E N T E R P R I S E O P E R A T I O N R E P O R T04.总结提升03.知识链接02.学习目标01.项目导入PART 01项目导入“旅行家旅行家合作伙伴合作伙伴”页面效果展示页面效果展示HTML5可实现页面内容的布局。常见的HTML标记包括文本标记、超链接标记及列表标记。本章我们将使用这些元素制作“旅行家合作伙伴”页面PART 02知 识 目 标能 力 目 标1、了解HTML及其发展历程，了解常用的浏览器及其特点2、了解常用的HTML编译器 3、掌握H
2、TML文档的基本结构1、掌握VSCode的下载与安装方法2、掌握文本控制标记的使用3、掌握超链接标记的使用4、掌握列表标记的使用PART 03一、HTML5概述1、什么是HTMLHTML全称“超文本标记语言（Hyper Text Markup Language）”，是一种标记语言。它包括一系列标签通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。需要强调的是，HTML 不是一种编程语言，而是一种标记语言。所谓标记语言是一套标记标签(markup tag)，HTML 使用标记标签来描述网页。HTML标签可包括文字，图形、动画、声音、表格、链接等。2、HTML
3、的特点及其发展历程HTML具有简易型、可扩展性、平台无关性及通用性等特点。HTML最初于1989年由CERN的Tim Berners-Lee发明，已经经历了4个版本的更新，主要由W3C对其规则进行管理。一、HTML5概述3、HTML与浏览器目前常用的浏览器包括谷歌（Chorme）、火狐（FireFox）、Safari及Microsoft Edge等，如图所示。各浏览器随着HTML的更新迭代，不同版本对其有相应的支持，同时具有各自的特点及优势。一、HTML5概述4、VS Code的下载与安装VS Code，全称Visual Studio Code，是Microsoft在发布的一个运行于 Wind
4、ows、Mac OS X和Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器。支持前端开发应用的HTML、CSS、JavaScript等语言，并支持丰富的其他语言和运行时扩展的生态系统。VS Code软件功能非常强大，界面简洁明晰、操作方便快捷，设计得很人性化。本书中的案例将使用VS Code作为编译工具。一、HTML5概述1、创建HTML5文档(1)使用记事本创建HTML文档步骤1：创建一个记事本文件；步骤2：打开新建文本文档，选择“文件另存为”，重命名txt文件将其后缀改为html，注意将文件保存类型选择为“所有文件”，点击保存按钮即可将文件保存为html文档；步骤3：选
5、中html文档，点击鼠标右键，在快捷菜单中选择打开方式，选择记事本，即可打开html文档并对其进行编辑。步骤4：使用浏览器打开html文档，可查看页面效果。二、HTML5文档及其基本语法2、使用VS Code创建HTML文档步骤1：打开VS Code，选择“文件新建文件”步骤2：在界面右下角选择语言模式为HTML步骤3：按“Ctrl+S”键打开另存为对话框，选择文档保存位置并命名文档，点击保存按钮保存文档步骤4：切换输入法为英文，在代码编辑区域输入“!”，按Tab键，将自动生成html文档基本结构步骤5：在body标签中输入“Hello World！”，按“Ctrl+S”保存文档，在代码编辑区
6、域空白处点击鼠标右键，在快捷才到中选择“Open in Default Browser”即可在默认浏览器中预览html页面二、HTML5文档及其基本语法2、HTML5文档的基本结构HTML5文档由文档类型声明、根标记、头部标记、主体标记组成。【例1-1】HTML5文档基本结构 MyFirstPage 二、HTML5文档及其基本语法文档类型声明这个部分的用来说明该文档是HTML文档。所有的HTML文档开始于文档声明之后，它说明了文档的类型及其所遵守的标准规范集。本例中的是html5的文档类型声明，形式简洁。根标记 根标记位于文档类型声明之后，位于html文档的最外层。根标记是双标记，标志着htm
7、l文档的开始，标志着html文档的结束。根标记中嵌套着头部标记和主体标记。lang属性指定页面内容的默认语言，例如：en表示英语。二、HTML5文档及其基本语法头部标记头部标记位于根标记之后，是双标记，用来定义html文档的头部信息。Head标记中通常嵌套着、等标记。其中：元标记，以属性的形式来定义文档信息的名称、内容等，包括文档的关键字、作者、描述、编码和语言等多种信息。其语法格式如下：例如：标题标记，描述页面的名称；及标记：用来说明文档包含的样式及脚本；：表示对外部资源（如CSS样式表）的引用二、HTML5文档及其基本语法主体标记主体标记位于根标记中，位于头部标记后，与头部标记是并列关系。
8、其中嵌套着页面中显示的内容，包括文字、图片、音频、视频等元素。一个html文档中只能有一个主体标记。注意：注意：HTML文档中的标记存在两种关系，分别是嵌套关系和并列关系，以此基本文档格式为例，标记与标记为嵌套关系，标记与标记为并列关系。二、HTML5文档及其基本语法HTML标记双标记在HTML文档中，大多数标记都是双标记，其语法格式如下：内容其中表示标记的开始，称为开始标记；表示标记的结束，称为结束标记；它们之间是内容。例如：HTML基础语法这里标题标签中添加了标题内容“HTML基础语法。”二、HTML5文档及其基本语法单标记单标记又称空元素，用单标签来表示，里面不需要包含内容，只有一个开始
9、标签，而不需要关闭标签。例如换行标记：二、HTML5文档及其基本语法注释标记注释标记是HTML中的一种特殊标记，用来作为代码的注解，并不显示在页面当中。其语法格式如下例如：二、HTML5文档及其基本语法标记的属性在HTML中可以为标记添加属性，标记的属性以键值对的形式表示，单标记和双标记都可以添加标记的属性，其语法格式如下：内容例如：项目1 认识HTML5 注意：注意：属性值可以放在单引号、双引号中 HTML文档中允许不使用引号 部分属性值可省略二、HTML5文档及其基本语法HTML文本控制标记文本控制标记文字是网页中最基本的组成元素，HTML提供了文本控制标记，用于在网页中添加文字，包括标题
10、标记、段落标记、水平线标记、换行标记、文本格式化标记及特殊字符标记等。二、HTML5文档及其基本语法1.标题标记HTML提供了6个等级的标题标记，分别是、h3、h4、及。从到标题字体大小递减。其语法格式如下：标题内容【例1-2】标题标记 标题标记 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题二、HTML5文档及其基本语法1.段落标记HTML提供了6个等级的标题标记，分别是、h3、h4、及。从到标题字体大小递减。其语法格式如下：段落内容【例1-3】段落标记 HTML简介 HTML简介 HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格
11、式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以是文字、图形、动画、声音、表格、链接等。二、HTML5文档及其基本语法3、水平线标记HTML中可以使用标记添加水平线，水平线标记是单标记，其语法格式如下：水平线标记也可以添加属性设置其样式，常用属性如表1.2所示：表 1.2 水平线标记属性二、HTML5文档及其基本语法属性名属性说明属性值align对齐方式left、right、centersize设置水平线粗细以像素为单位，默认2pxcolor设置水平线颜色颜色名称、RGB值、十六进制RGB值width设置水平线宽度像素值、百
12、分比（占浏览器窗口宽度的百分比）1.换行标记在HTML文档中，按回车键无法使文字换行，需要插入换行标记开始新的一行。标记是单标记。【例1-4】古诗词页面 古诗词 赠汪伦 作者：李白 李白乘舟将欲行，忽闻岸上踏歌声。桃花潭水深千尺，不及汪伦送我情。二、HTML5文档及其基本语法文本格式化标记HTML文档提供了一些文本格式化标记，使字体以斜体、加粗、下划线和删除线的样式显示，常见的文本格式化标记如表1.3所示：表 1.3 文本格式化标记二、HTML5文档及其基本语法标记显示样式和文字加粗和字体倾斜和字体添加删除线和字体添加下划线【例1-5】使用文本格式化标记 文本格式化标记 正常段落文字 文字加粗
13、效果 文字倾斜效果 文字删除线效果 文字下划线效果二、HTML5文档及其基本语法转义字符在网页中经常会使用到一些特殊符号，在HTML中输入这些特殊符号需要使用转义字符，常用的转义字符如表1.4所示：表 1.4 HTML常用转义字符二、HTML5文档及其基本语法特殊字符说明转义字符代码不断行的空白格 大于>&符号&双引号"版权©已注册商标®商标（美国）™摄氏度°正负号±乘号×除号÷HTML列表标记列表标记在网页中经常使用列表来展示内容，在HTML中列表有三种形式：无序列表、有序列表和自
14、定义列表。在页面布局中我们会经常使用到列表。二、HTML5文档及其基本语法无序列表ul无序列表(Unordered List)是一个没有特定顺序的相关条目(或称为列表项)的集合。在无序列表中，各个列表项之间属并列关系，没有先后顺序之分，它们之间以一个项目符号来标记。无序列表的语法格式如下：项目名称 项目名称 其中：用来插入无序列表，用来定义列表项序列。二、HTML5文档及其基本语法无序列表标记的type属性，可以指定出现在列表项前项目符号的样式，可以使用的项目符号样式包括：disc：实心圆 circle：空心圆 square：实心方块二、HTML5文档及其基本语法【例1-6】无序列表 无序列表
15、 三大网页技术 HTML CSS JavaScript 二、HTML5文档及其基本语法有序列表ol有序列表(Ordered List)是一个有特定顺序的相关条目(或称为列表项)的集合。在有序列表中，各个列表项有先后顺序之分，它们之间以编号来标记。有序列表的语法格式如下：项目名称 项目名称 其中：用来插入有序列表；用来定义列表项序列。二、HTML5文档及其基本语法有序列表标记的type属性，可以指定出现在列表项前的项目编号的样式，可以使用的项目符号样式包括：1：指定项目编号为阿拉伯数字；a：指定项目编号为小写英文字母；A：指定项目编号为大写英文字母；i：指定项目编号为小写罗马数字；I：指定项目编
16、号为大写罗马数字。有序列表默认会从1、a、A、开始自动编号，也可使用start属性改变标号的起始值。start属性值是一个整数，表示从哪一个数字或字母开始编号。在有序列表中还可以使用reversed属性使编号倒叙排列。二、HTML5文档及其基本语法【例1-7】有序列表 有序列表 蔬菜 萝卜 白菜 番茄 水果 苹果 香蕉 草莓 二、HTML5文档及其基本语法列表的嵌套列表还可以嵌套使用来展示多层次内容。嵌套列表可以是无序列表的嵌套，也可以是有序列表的嵌套，还可以是有序列表和无序列表的混合嵌套。【例1-8】列表嵌套 列表嵌套 音乐分类 二、HTML5文档及其基本语法 流行 国语流行 粤语流行 日韩
17、流行 欧美流行 电子 电子舞曲 迪斯科 浩室舞曲 锐舞音乐 二、HTML5文档及其基本语法1.自定义列表dl自定义列表(Definition List)，它的每一项前既没有项目符号，也没有编号，它是通过缩进的形式清晰展示内容的层次结构，其语法格式如下：列表标题1列表内容列表内容列表标题2列表内容列表内容其中：标记用来创建定义列表。标记用来定义列表标题，内容将左对齐。标记用来定义列表中的内容，标记的内容将相对于标记定义的内容向右缩进。二、HTML5文档及其基本语法【例1-9】列表嵌套 自定义列表 中国小说top3 红楼梦 红楼梦是一部百科全书式的长篇小说。以宝黛爱情悲剧为主线，以四大家族的荣辱兴
18、衰为背景，描绘出18世纪中国封建社会的方方面面，以及封建专制下新兴资本主义民主思想的萌动。结构宏大，情节委婉，细节精致，人物形象栩栩如生，声口毕现，堪称中国古代小说中的经典。三国演义 滚滚长江东逝水，浪花淘尽英雄。吕布赵云关羽，官渡赤壁街亭，斩华雄空城计长坂坡七擒七纵，一看三叹，三国风云起，几度夕阳红。该小说展现了历史上一个豪强们为攫取最高统治权而进行的政治斗争和频繁混战的动乱时代，展示了魏、蜀、吴纵横捭阖、逐鹿争雄的历史画卷！西游记 西游记的艺术虚构是建立在传统艺术经验和社会的宗教性观念与风习的基础之上的，但它又以作者融会了传统艺术经验所形成的艺术的独创性批判了社会的宗教性观念，或更正确地说
19、，和社会的宗教性观念开了玩笑，进行了嘲弄。这正是这部演述超人间故事的神魔小说最突出、最优异的品质，也是它的艺术价值和魅力的最根本的所在。二、HTML5文档及其基本语法一一 HTML超链接标记超链接标记1.超链接标记及其属性在制作网站时会使用到超链接实现页面之间的跳转，在HTML中使用标记添加超链接，其语法格式如下：链接文本其中：href：指定链接目标url地址 target：指定链接页面的打开方式，其属性值有4种。_blank为在新窗口中打开，_self为在自身窗口中打开(默认值)，_parent为在上一级窗口中打开，_top为在本窗口中打开。注意：注意：URL指的是统一资源定位符（Unifo
20、rm Resource Locator），是因特网的万维网服务程序上用于指定信息位置的表示方法，俗称网址。URL一般由协议、域名或IP地址、端口、路径及文件名组成，如图1.30所示。二、HTML5文档及其基本语法URL可分为两类，绝对路径和相对路径。绝对路径：带域名的文件的完整路径。一般从盘符开始，例如：D:proc1imagespic1.png。相对路径：相对于当前文档的路径。在HTML文档中，通常是以当前HTML文档为起点，描述其他资源的相对位置。当目标文件与当前文件在同一文件夹中时，写作./文件名.后缀名 当目标文件在当前文件上一级文件夹中时，写作./文件名.后缀名 当目标文件在当前文件
21、下一级文件夹中时，写作文件夹名/文件名.后缀名注意：在相对路径中有两种相似的符号：./、./。其中“./”表示当前目录，可省略不写；“./”表示上级目录，即上一级文件夹，这里需要区分。二、HTML5文档及其基本语法【例1-10】使用超链接标记 超链接标记 学习网站：CSDN w3school 二、HTML5文档及其基本语法锚点链接典型的网站布局大多使用超链接实现站点内外页面的跳转，在极简风格网站中，经常使用锚点链接实现页面内的跳转。使用锚点链接指向同一页面中内容，实现方法分为两步：创建锚点：在链接目标位置定义其id属性显示内容链接锚点：定义超链接属性href=#id名显示内容二、HTML5文档
22、及其基本语法图像标记图像标记网页中常见的图像格式 一个成功的网页中必然少不了丰富的图像，图像在网页中不仅可以美化页面，也是对文字重要的补充与说明。由于网络的传输特性，网页中的图像需要具有载入速度快、图像质量高的特点。根据这样的特点，网页中常用的图像格式有JPG、GIF和PNG三种。1、JPG格式JPG格式是一种最为常见的图像文件格式，支持8位和24位色彩的压缩位图格式，显示的颜色比GIF和PNG多，可以用来保存超过256种颜色的图像，但JPG是一种有损压缩格式。这就意味着每修改一次图片都会用有损压缩的方式去除冗余的图像和颜色数据。JPG是特别为照片设计的文件格式，它的特点是文件尺寸小，下载速度
23、快，同时支持多种浏览器，因此是目前网络上最流行的图像格式。二、HTML5文档及其基本语法2、GIF格式GIF最突出的特点是支持动画，且支持透明格式。它的压缩率一般在50%左右，所占空间非常小，但GIF只能处理256种颜色，对复杂的颜色不能达到很好地表现效果，因此GIF格式常用于LOGO、小图标及其他相对单一的图像。3、PNG格式PNG是一种高保真的图像格式，可以用无损压缩的方式把图像文件压缩到最小，同时支持alpha透明，并且颜色过渡更光滑，但PNG不支持动画效果。鉴于PNG兼有GIF和JPG格式的大部分优点，它既利于图像传播，又能保证图片的高品质。由以上常用的网络图像格式的特点可知，在网页中
24、小图片或网页基本元素如图标、按钮等通常使用GIF或PNG-8格式，半透明图片使用PNG-24格式，类似照片的图像，如滚动显示的图片、网页头部图片等，则使用JPG格式。二、HTML5文档及其基本语法图像标记及其基本属性使用图像标记可以在网页中添加图片，其基本语法格式如下：其中，src属性用来定义图像文件的路径和文件名。除此之外，图像标记还有其他常用属性，具体如下：1、width属性和height属性。width：指定图像的宽 height：指定图像的高图像的宽、高属性值，单位可以使像素（px），也可以是百分比（%）。不设置 width 和 和 height 时，图片在浏览器中显示大小等于原图；只
25、设置 width 或 height 时，图片会通过按比例缩放来决定没有设置的 width 或 height 的值；同时设置 width 和 height 时，图片会缩放到刚好等于设置的宽度和高度，图片中的内容会完整显示，图片可能变形（没有按比例缩放的时候）。二、HTML5文档及其基本语法2、title属性和alt属性 title：指定鼠标悬停在图片上时显示的文字 alt：指定图片无法显示时的替代文字3、ismap属性ismap属性用来将图像规定为服务器端图像映射。设置了ismap属性之后，当用户在ismap图像上单击时，浏览器会自动把鼠标的x、y位置（相对于图像的左上角）发送到服务器端。注意：
26、注意：只有当 元素属于带有有效 href 属性的 元素的后代元素时，才允许 ismap 属性。ismap 属性将图像定义为“服务器端图像映射”。“图像映射”指的是带有可点击区域的图像。二、HTML5文档及其基本语法【例1-12】使用图片标记 使用图片标记 西瓜的营养价值：西瓜堪称“盛夏之王”，清爽解渴，味道甘味多汁，是盛夏佳果。西瓜除不含脂肪和胆固醇外，含有大量葡萄糖、苹果酸、果糖、蛋白氨基酸、番茄素及丰富的维生素C等物质，是一种富含很高 的营养、纯净、食用安全的食品。瓤肉含糖量一般为5%12%，包括 葡萄糖、果糖和蔗糖。甜度随成熟后期蔗糖的增加而增加。二、HTML5文档及其基本语法PART
27、04HTML5 新增标签新增标签为了更好地处理今天的互联网应用，HTML5提供了新的元素来创建更好的页面结构。这里将介绍HTML5新增的结构元素、分组元素、页面交互元素。在HTML5出现以前，HTML布局所使用的标签存在文档定义不明确的问题，需要使用HTML+CSS文档结构写法来布局页面，同时也不利于SEO搜索引擎对页面内容的抓取。在HTML5中新增了语义化标签来布局页面。一、结构元素HTML5语义化标签如下：header：头部标签，用来定义页面的页眉，可以包含标题等元素，如logo、搜索表单等；nav：导航标签，页面链接的集合。article：内容标签。用来定义一个独立的、完整的相关内容块，
28、可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。article可以嵌套，例如一篇博客的文章，可以用article显示，然后一些评论可以以article的形式嵌入其中。section：块级标签，表示文档中的一个区域，比如内容中的一个专题组。aside：侧边栏标签，与一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。footer：尾部标签，定义了页面的页脚，通常包含原创作者，版权信息，联系方式和站点地图,文档相关的链接等信息。一、结构元素1.figure元素和figcaptio
29、n元素在HTML5中，可以使用 标签标记文档中的一个图像。标签带有一个标题，使用标签可以添加图像的题注。其语法格式如下:图片题注 二、分组元素【例1-13】图片与题注 图片与题注 三亚蜈支洲岛电影取景地 二、分组元素2、hgroup元素在HTML5中，可以使用hgroup元素对网页或区段（section）的标题进行组合。其语法格式如下：标题1 标题2二、分组元素【例1-14】hgroup标题组 hgroup元素 诗经 周南桃夭 作者：佚名 桃之夭夭，灼灼其华。之子于归，宜其室家。桃之夭夭，有蕡其实。之子于归，宜其家室。桃之夭夭，其叶蓁蓁。之子于归，宜其家人。二、分组元素1、details元素和
30、summary元素details元素用于描述文档或者文档某个部分的细节。summary元素经常与details元素配合使用，作为details元素的第一个子元素，用于为details定义标题。标题是可见的，当用户单击标题时，会显示或隐藏details中的其他内容。其语法格式如下：文档简介文档内容三、页面交互元素【例1-15】使用details元素和summary元素 使用details元素 HTML页面交互元素 details元素和summary元素 progress元素 meter元素 三、页面交互元素2、progress元素 progress元素用于表示一个任务的完成进度。可以用0到某个最
31、大数字（如100）之间的数字来表示准确的进度完成情况。其语法格式如下：其中：value：已经完成的工作量。max：总共有多少工作量。注意：注意：value和max属性的值必须大于0，且value的值要小于或等于max属性的值。三、页面交互元素【例1-16】使用progress元素 使用progress元素 已加载：三、页面交互元素3、meter元素 meter元素用于表示指定范围内的数值。例如，显示硬盘容量或者对某个候选者的投票人数占投票总人数的比例等，都可以使用meter元素。Meter元素是双标记，其语法格式如下：其中：value：定义度量的值 max：定义最大值，默认值是1 min：定义最小值，默认值是0 high：说明定义度量的值位于那个点被界定为高的值 low：定义度量的值位于哪个点被界定为低的值 optimum：定义什么样的度量值是最佳的值。如果该值高于high 属性，则意味着值越高越好。如果该值低于low属性的值，则意味着值越低越好。三、页面交互元素【例1-17】使用meter元素 使用meter元素 三好学生评选：张三：65 李四：80 王五：75 三、页面交互元素
