HTML5+CSS3+Bootstrap响应式Web前端设计第2版全套教学课件

第1章网站初识《HTML5+CSS3+Bootstrap响应式Web前端设计（第2版）》第1章网站初识第2章HTML标签第3章CSS常用属性第4章盒模型与网页布局第5章CSS特效第6章响应式设计与Bootstrap第7章网站建设流程全套可编辑PPT课件学习目标/Target了解网页基本概念，能够说出网页的构成以及网页相关名词的含义。熟悉Web工作原理，了解网页是如何从服务端传送到客户端的。了解浏览器，能够说出各主流浏览器的特点。了解HTML5技术，能够知道HTML5发展历程、优势以及浏览器对HTML5的支持情况。目录/Contents1.1网页构成1.2理论基础1.3开发框架1.4网页开发工具1.5网站发布1.1网页构成网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。网页组成为了快速了解网页的构成，接下来，我们查看一下网页的源代码。打开谷歌浏览器，单击“F12”快捷键，谷歌浏览器中便会弹出当前网页的源代码。网页组成1.1网页构成1.1网页构成文字网页中的文字应统筹规划，大小搭配适当。太大会使得一个网页信息量变小，太小又使人们浏览时感到费劲。网页标题表明本网页的主要内容。醒目的标题能够吸引浏览者能否注意力。1、有些美丽的字型在制作网页的计算机上有，但将来别人浏览你的网页时，浏览者的计算机上未必装有这种字体。2、美丽的标题字体可以制作成图形方式。3、当文本内容较多时。可以利用表格形式来实现。标题字号字型微软雅黑字体浏览器默认字体正常字体字体偏大客户端无雅黑字体1.1网页构成文字1.1网页构成图形加强视觉效果。背景图华丽，使人感到界面友好。但需要占据较大的空间，致使网页的显示速度明显变慢。网页上的菜单按钮有一些是由图形制作。横排竖排链接的标志有文字和图形两种。制作一些精美的图形作为链接按钮，使它和整个网页融为一体。菜单按钮背景图形链接标志绘制图形、图像、动画网页支持格式：JPEG、GIF、PNG将特殊文字设计为图片用图片作为按钮用图片作为链接标志1.1网页构成图形1024分辨率1.1网页构成图形1920分辨率分辨率2*2大小43字节的图片1.1网页构成图形200*200大小1.58KB1.2.1基本概念1.2理论基础网站网站即Website，也称作站点，是指在互联网上，根据一定的规则，使用HTML语言编写的用于展示内容的网页的集合。在本地计算机上，网站体现为一组文件夹。网站由域名、网站空间、网页3部分组成。WWWURLDNSHTTP和HTTPSWebW3CWgzx网站目录index.htm首页Images存放图片style.css样式表about.html网页h1.htm网页h2.htm网页h3.htm网页首页文件的直接上级目录，是网站目录首页文件的间接上级目录，不是网站根目录1.2.1基本概念1.2理论基础网站WWW（WorldWideWeb，万维网）是Internet提供的一种服务——网页浏览服务。我们上网时通过浏览器阅读网页信息就是在使用WWW服务。WWW是Internet上最主要的服务，许多网络功能，如网上聊天、网上购物等，都基于WWW服务。WWWURLDNSHTTP和HTTPSWebW3C1.2.1基本概念1.2理论基础网站WWWURLDNSHTTP和HTTPSWebW3C图书馆图书某一页WWW网站网页网页是网站的基本信息单位，是WWW的基本文档。它由文字、图片、动画、声音等多种媒体信息以及链接组成，是用HTML编写的，通过链接实现与其他网页或网站的关联和跳转。主页(HomePage)是某个Web节点的起始点，主页是链接到一个Web服务器上时显示的第一个网页，拥有一个被称为“统一资源定位地址”URL的唯一地址。一组相关网页以及有关文件、脚本和数据库等内容的有机集合；若干个网页文件经过规划组织后彼此相连而形成完整结构的信息服务系统。万维网是一个通过互联网访问的，由许多互相链接的超文本组成的全球性系统，且是互联网所能提供的服务之一。1.2.1基本概念1.2理论基础网站URL（UniformResourceLocator，统一资源定位符）其实就是Web地址，也称“网址”。在万维网上的所有文件（HTML、CSS、图片、音乐、视频等）都有唯一的URL，用户只要知道文件的URL，就能够对该文件进行访问。URL可以是本地磁盘位置，也可以是局域网上的某一台计算机，还可以是internet上的站点。WWWURLDNSHTTP和HTTPSWebW3C/1.2.1基本概念1.2理论基础网站DNS（DomainNameSystem，域名系统）是互联网的一项服务。在Internet上域名与IP地址（可以理解为Internet上计算机的一个编号）之间是一一对应的，域名（如：淘宝网域名）虽然便于用户记忆，但计算机只能识别IP地址（如：）。计算机将便于记忆的域名转换成IP的过程被称为域名解析。DNS就是进行域名解析的系统。WWWURLDNSHTTP和HTTPSWebW3C1.2.1基本概念1.2理论基础网站HTTP（Hypertexttransferprotocol，超文本传输协议）是一种详细规定了浏览器和互联网服务器之间互相通信的规则。HTTP是非常可靠的协议，具有强大的自检能力，所有用户请求的文件到达客户端时，都是准确无误的。WWWURLDNSHTTP和HTTPSWebW3C由于HTTP传输的数据都是未加密的，因此用户使用HTTP传输隐私信息不太安全。为了保证这些隐私数据能够安全传输，网景公司设计了SSL（SecureSocketsLayer，安全套接字协议），该协议用于对HTTP传输的数据进行加密，从而就诞生了HTTPS。HTTPS是由SSL+HTTP构建的，可进行加密传输、身份认证的网络协议。因此HTTPS要比HTTP更安全。http://通讯协议域名1.2.1基本概念1.2理论基础网站Web翻译为中文是“网络”的意思。对于普通网络用户来说，Web仅仅只是一种环境——互联网的使用环境。而对于网页制作者来说，Web是一系列技术的复合总称，包括网站的前台布局、后台程序、界面架构、数据库开发等。WWWURLDNSHTTP和HTTPSWebW3CWeb前端系统1.2.1基本概念1.2理论基础网站W3C（WorldWideWebConsortium，万维网联盟）是国际最著名的标准化组织。W3C最重要的工作是制定和推广Web规范。自1994年成立以来，W3C已经发布了200多项影响深远的Web技术标准及实施指南。例如，超文本标签语言（HTML）、可扩展标签语言（XML）等。这些规范有效地促进了Web技术的发展。WWWURLDNSHTTP和HTTPSWebW3C1.2.2Web工作原理1.2理论基础1.2理论基础1.2.2（1）静态页面工作原理静态网页在网站设计中，纯粹HTML格式的网页通常被称为“静态网页”，静态网页的网址形式通常为：/eg/eg.htm，

也就是以.htm、.html、.shtml、.xml等为后缀的。1.2理论基础1.2.2（1）静态页面工作原理接受请求找到静态网页发送网页服务器端1.2理论基础静态网页的特点

（1）静态网页每个网页都有一个固定的URL，且网页URL以.htm、.html、.shtml等常见形式为后缀，而不含有“？”；（2）网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件；（3）静态网页的内容相对稳定，因此容易被搜索引擎检索；（4）静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难；（5）静态网页的交互性较差，在功能方面有较大的限制。1.2.2（1）静态页面工作原理动态网页动态网页：动态网页是与静态网页相对应的，也就是说，网页URL的后缀不是.htm、.html、.shtml、.xml等静态网页的常见形式，而是以.asp、.aspx、.jsp、.php、.perl、.cgi等形式为后缀，并在动态网页网址中有一个标志性的符号—？”。BBS论坛留言板聊天室1.2理论基础1.2.2（2）动态页面工作原理1.2.2（2）动态页面工作原理1.2理论基础（1）浏览器中输入将要访问页面的URL地址。由DNS进行域名地址解析，找到服务器IP地址，向该地址所指向的Web服务器发出请求。（2）Web服务器根据浏览器送来的请求，把URL地址转换成页面所在服务器上的文件全名，查找相应的文件。（3）如果URL指向静态HTML文档，Web服务器使用HTTP协议把该文档直接送给浏览器。如果HTML文档中嵌入了ASP、PHP或JSP程序，则由Web服务器运行这些程序，把结果送到浏览器。如果Web服务器运行的程序包含对数据库的访问，则服务器将查询指令发送给数据库服务器，对数据库执行查询操作。（4）查询结果由数据库返回Web服务器，再Web服务器将结果数据嵌入页面，并以HTML格式发送给浏览器。（5）浏览器解释HTML文档，在客户端屏幕上展示结果。1.2理论基础1.2.2（2）动态页面工作原理接受请求找到动态网页发送网页服务器端执行程序代码，生成静态网页1.2.2（2）动态页面工作原理1.2理论基础客户端浏览器显示代码服务器端源代码1.2.2（2）动态页面工作原理1.2理论基础Web开发应用遵循的标准就是Web标准。Web标准是由W3C和其他标准化组织共同制定的，该标准用来创建和解释基于Web的内容，Web标准可以使得在网上发布的文档向后兼容，使其能够被大多数人所访问。1.2.3网站开发标准1.2理论基础Web标准包括一系列标准。网页部分的标准通过三部分来描述：结构（Structure）、表现（Presentation）和行为（Behavior）。HTML（结构），CSS（表现）和JavaScript（行为）HTML用来决定网页的结构和内容;CSS用来设计网页的表现形式;JavaScript用来控制网页的行为。1.2.3网站开发标准1.2理论基础HTML是HyperTextMarkupLanguage的缩写，是一种用来制作超文本文档的简单标记语言，是网页制作的基本语言。CSS(CascadingStyleSheets，层叠样式表)是标准的布局语言，用来排版和显示HTML元素，纯CSS的布局与XHTML相结合，可使内容表现与结构相分离，并使网页更容易维护，易用性更好。JavaScript语言是一种解释性的，基于对象的脚本语言。JavaScript语言与Java语言两者之间没有联系，是两种完全不同的语言，JavaScript是一种“脚本”(Script)，它直接把代码写到HTML文档中，浏览器读取它们的时候才进行编译、执行。1.2.3网站开发标准1.2理论基础1.3开发框架1.4常用开发工具HTML文档编辑工具Notepad++、EditPlus、VScode可视化网页开发软件Dreamweaver最新的版本是AdobeDreamweaverCS5动画制作软件Flash最新版本是AdobeFlashCS5图像处理工具Photoshop目前，Photoshop最新的版本是AdobePhotoshopCS51.5网站发布本章首先介绍了互联网的访问过程和工作机制。在互联网访问的相关概念：浏览器与服务器、WWW与万维网，IP地址与域名Web标准由一系列标准构成，其网页部分的标准通过三部分来描述：结构（Structure）、表现（Presentation）和行为（Behavior）。HTML用来决定网页的结构和内容CSS用来设计网页的表现形式JavaScript用来控制网页的行为。网站开发工具。本章小结随堂项目1.简答题（1）简要说明HTML的基本工作原理。（2）网站、网页概念。（3）组成网页的最基本元素有哪些？（4）简述Web标准的含义。（5）使用记事本编辑HTML文件，需要注意哪些问题?（6）请说出静态网页和动态网页的区别。本章作业第2章HTML标签《HTML5+CSS3+Bootstrap响应式Web前端设计（第2版）》目录/Contents2.1HTML概述2.2文档结构2.3基本标签2.4多媒体2.5超链接2.6表格2.7其他标签2.8表单HTML中的标签分为三种，分别为单标签、双标签、注释标签。2.1HTML概述HTML（英文HyperTextMarkupLanguage的缩写）中文译为“超文本标签语言”。HTML主要是通过标签对网页中的文本、图片、声音等内容进行描述。HTML提供了许多标签，如段落标签、标题标签、超链接标签、图片标签等。网页中需要定义什么内容，就用相应的HTML标签描述即可。2.1.1HTML的概念单标签<标签名/>在上述语法格式中，“标签名”和“/”之间有一个空格，在HTML5中，空格和斜线均可以省略。例如：<hr/>写法一：写法二：<hr>单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。单标签语法格式：2.1HTML概述2.1.1HTML的概念双标签<标签名>内容</标签名>双标签也称体标签，是指由开始和结束两个标签符组成的标签。双标签语法格式：表示该标记的作用开始，一般称为“开始标签”表示该标记的作用结束，一般称为“结束标签”2.1HTML概述2.1.1HTML的概念注释标签<!--注释语句-->若需要在HTML文档中添加注释文字，就需要使用注释标签。注释标签语法格式：注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，可以被下载到用户的计算机上，查看源代码时就可以看到。我们也可以把注释标签看做一种特殊的单标签。2.1HTML概述2.1.1HTML的概念HTML2.01995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布过时。HTML第1版在1993年6月作为互联网工程工作小组（IETF）工作草案发布。HTML3.21997年1月14日，W3C推荐标准。HTML4.01997年12月18日，W3C推荐标准。HTML4.012000年5月，W3C推荐标准。HTML52014年10月，万维网联盟宣布标准规范制定完成。2.1HTML概述2.1.2HTML的兴衰2.1HTML概述1解决了跨浏览器、跨平台问题2新增了多个新标签3安全机制的增强5化繁为简的优势4样式和结构分离更彻底2.1.2HTML的兴衰-新特征浏览器是网页展示的平台，只有经过浏览器渲染，用户才能看到图文并茂的网页。在浏览器的发展历史中，主流浏览器有很多。浏览器名称发布时间所属公司InternetExplorer（IE）1996微软Opera（欧朋）1996TelenorSafari2003苹果Firefox（火狐）2004Mozilla基金会Chrome（谷歌）2008谷歌Edge2015微软2.1HTML概述2.1.3浏览器内核InternetExplorer也被称为IE浏览器，IE浏览器由微软公司推出，直接绑定在Windows操作系统中，无需下载安装。我们在制作网页时，要考虑低版本浏览器的兼容问题。2.1HTML概述2.1.3浏览器内核Opera也被称为欧朋浏览器，欧朋浏览器为来自挪威的一个极为出色的浏览器，具有速度快、节省系统资源、订制能力强、安全性高以及体积小等特点，但兼容性略差。Safari是苹果操作系统内置的浏览器。Safari浏览器外观时尚，速度快。Firefox也被称为火狐浏览器，火狐浏览器是Mozilla公司旗下的一款浏览器。火狐浏览器是一个自由并开源的网页浏览器，其可开发程度很高。任何一个具有编程知识的人都可以为火狐浏览器编写代码，增加一些个性化功能。2.1HTML概述2.1.3浏览器内核Chrome也被称为谷歌浏览器，谷歌浏览器是由谷歌公司开发的网页浏览器。谷歌浏览器基于其他开放原始码软件所撰写，极大地提升了浏览器的稳定性、安全性和响应速度。Edge是由微软公司推出的一款浏览器。Edge浏览器拥有比IE浏览器优化程度更高的代码结构，因此Edge浏览器的速度更快。现在的网页兼容调试也更倾向于Edge。2023年桌面端浏览器统计，全球使用数据，Chrome排名第一（66.13%），Safari排名第二（11.87%），Edge排名第三（11%）。2.1HTML概述2.1.3浏览器内核Chrome在谷歌浏览器中调试网页代码也非常简单，打开谷歌浏览器（以谷歌浏览器80.0.3987.87版本为例），按“F12”快捷键，即可打开调试面板。2.1HTML概述2.1.3浏览器内核Chrome在调试面板中，我们可以查看网页的内容结构和临时显示样式。当我们选择“”按钮后，将鼠标指针悬浮在网页中的某个模块，即可查看该模块的网页代码。2.1HTML概述2.1.3浏览器内核浏览器内核是浏览器最核心的部分，主要负责渲染网页，不同的浏览器内核对网页代码的解释也不同，因此同一网页在不同内核的浏览器中渲染（显示）效果也可能不同。目前常见的浏览器内核有Trident、Gecko、Webkit、Presto、Blink五种。Trident内核代表浏览器是IE浏览器，因此Trident内核又被称为IE内核。Trident内核只能用于Windows平台，并且该内核不是开源的。2.1HTML概述2.1.3浏览器内核Gecko内核代表浏览器是火狐浏览器。Gecko内核是开源的，最大优势是可以跨平台。Webkit内核代表浏览器是Safari浏览器以及老版本的谷歌浏览器。Gecko内核也是开源的。2.1HTML概述2.1.3浏览器内核Presto内核代表浏览器是欧朋浏览器。Presto内核渲染速度快，缺点就是为了提升响应速度丢掉了一部分网页兼容性。Blink内核由谷歌公司和欧朋公司共同开发。现在谷歌浏览器的内核是Blink。Edge浏览器也采用Blink内核。2.1HTML概述2.1.3浏览器内核值得一提的是在国内的一些浏览器大多采用双内核，例如360浏览器、猎豹浏览器采用Trident（兼容模式）和Webkit（高速模式）。2.1HTML概述2.1.3浏览器内核浏览器私有前缀是区分不同内核浏览器的标示。由于W3C组织每提出一个新属性，都需要经过一个耗时且复杂的标准制定流程。在标准还未确定时，部分浏览器已经根据最初草案实现了新属性的功能，为了与之后确定的标准进行兼容，各浏览器使用了自己的私有前缀与标准进行区分，当标准确立后，各大浏览器再逐步支持不带前缀的CSS3新属性。浏览器私有前缀多学一招:拓展部分-浏览器浏览器私有前缀多学一招:拓展部分-浏览器私有前缀浏览器-webkit-Chrome（谷歌）浏览器-moz-Firefox（火狐）浏览器-ms-IE浏览器-o-Opera（欧朋）浏览器示例现在很多新版本的浏览器可以很好地兼容CSS3的新属性，因此很多私有前缀可以不写，但为了兼容老版本的浏览器，仍可以使用私有前缀。2.2.1文档结构与书写规范2.2文档结构致吾友：见字如晤，展信舒颜！………………………………。此致敬礼

*****【结论】写书信要符合书信的基本格式，学习HTML标签语言亦不例外，同样需要先掌握它的基本格式，遵从相应的格式规范。XHTML1.0HTML5简化后2.2.1文档结构与书写规范2.2文档结构<html>用于告知浏览器其是一个HTML文档，<html>标签和</html>标签标志着HTML文档的开始和结束，在它们之间的是文档的头部和主体内容。<!DOCTYPE>位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范。<body>用于定义HTML文档所要显示的内容，浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标签内。<head>用于定义HTML文档的头部信息，也称为头部标签，紧跟在<html>标签之后，主要用来封装其他位于文档头部的标签。2.2.1文档结构与书写规范2.2文档结构<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>网页标题</title></head><body><!--这是注释--></body></html>内嵌式用于向浏览器说明当前文档使用的HTML版本标志着HTML文档的开始标志着HTML文档的结束用于定义HTML文档的头部信息用来描述HTML文档的属性用于对代码进行解释用于定义HTML文档所要呈现的内容HTML5的标准模板：2.2.1文档结构与书写规范2.2文档结构2.2.1文档结构与书写规范2.2文档结构<标签名

属性1="属性值1"属性2="属性值2"…>内容</标签名>HTML5标签设置属性的基本语法格式：在上述语法格式中，标签可以拥有多个属性，属性必须写在开始标签中，位于标签名后面。属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。例如下列代码：<palign="center">我是居中显示的文本</p>属性属性值需要注意的是大多数属性都有默认属性值，例如省略<p>标签的align属性，段落文本则按默认值左对齐显示，也就是说<p></p>等价于<palign="left"></p>。2.2.1文档结构与书写规范2.2文档结构可以把HTML中带有“<>”符号的字母或单词统一被称为标签。元素是指标签和标签包含的所有内容。书写元素时，通常不会带有“<>”符号。HTML中标签和元素的差别多学一招:2.2文档结构-拓展内容标签和元素的常见称谓应用示例如下。HTML中标签和元素的差别多学一招:<div>小美爱学习</div><hr>开始标签：<div>开始标签。标签：<div>标签、<hr>标签。元素内容：小美爱学习。结束标签：</div>结束标签。元素：div元素、hr元素。2.2文档结构-拓展内容为了兼容不规范的HTML文档，HTML5采用宽松的语法格式。和之前的各版本相比，HTML5的语法变化主要体现在以下几个方面。1.标签不区分大小写2.允许属性值不使用引号3.允许部分属性值的属性省略2.2.1文档结构与书写规范2.2文档结构注意：虽然HTML5采用比较宽松的语法格式，支持各种不规范的HTML文档。但网站开发人员仍应采用严谨的代码编写模式，这样更有利于团队合作及后期代码的维护。1.标签不区分大小写2.允许属性值不使用引号3.允许部分属性值的属性省略<p>这里的p标签大小写不一致</P>例如下列代码：虽然<p>与</P>大小写并不匹配，但是在HTML5语法中是完全允许的。2.2.1文档结构与书写规范2.2文档结构1.标签不区分大小写2.允许属性值不使用引号3.允许部分属性值的属性省略<inputchecked="a"type="checkbox"/><inputreadonly="readonly"type="text"/>例如：<inputchecked=atype=checkbox/><inputreadonly=readonlytype=text/>可以将上述代码改为：2.2.1文档结构与书写规范2.2文档结构1.标签不区分大小写2.允许属性值不使用引号3.允许部分属性值的属性省略<inputchecked="checked"type="checkbox"/><inputreadonly="readonly"type="text"/>例如：<inputcheckedtype="checkbox"/><inputreadonlytype="text"/>省略属性值后可以改为：2.2.1文档结构与书写规范2.2文档结构属性描述checked省略属性值后，等价于checked="checked"。readonly省略属性值后，等价于readonly="readonly"defer省略属性值后，等价于defer="defer"ismap省略属性值后，等价于ismap="ismap"nohref省略属性值后，等价于nohref="nohref"noshade省略属性值后，等价于noshade="noshade"在HTML5中，可以省略属性值的属性如下表。2.2.1文档结构与书写规范2.2文档结构属性描述nowrap省略属性值后，等价于nowrap="nowrap"selected省略属性值后，等价于selected="selected"disabled省略属性值后，等价于disabled="disabled"multiple省略属性值后，等价于multiple="multiple"noresize省略属性值后，等价于noresize="noresize"在HTML5中，可以省略属性值的属性如下表。2.2.1文档结构与书写规范2.2文档结构制作网页时，经常需要设置页面的基本信息。例如，页面的标题、作者、页面描述等。为此HTML提供了一系列的标签，这些标签通常都写在<head>标签内，因此被称为头部相关标签。<title>标签<meta>标签<title>标记用于定义HTML页面的标题，即给网页取一个名字，必须位于<head>标记之内。<meta/>标记用于定义页面的元信息，可重复出现在<head>头部标记中。2.2.2文档头部信息2.2文档结构<title>标签<meta>标签<metaname="名称"content="值"/>设置网页关键字设置网页描述设置网页作者<metaname=“keywords”content=“HTML"/><metaname=“description“content=“IT”/><metaname=“author”content=“jndx"/>2.2.2文档头部信息2.2文档结构<title>标签<meta>标签<metahttp-equiv="名称"content="值"/>设置字符集设置页面自动刷新与跳转<metahttp-equiv="Content-Type"content="text/html;charset=gbk"/><metahttp-equiv="refresh"content=“3;url="/>2.2.2文档头部信息2.2文档结构refresh举例charset举例一个网页文件中的各类内容，如文本、图形、图像等，均需要用标签对其进行结构化。HTML中提供了两类标签，分别是块级标签和行内标签。块级标签如，标题标签、长引用、预格式化文本和列表标签等。2.3基本标签2.3.1块级元素2.3基本标签标题标签用于将文本设置为标题，HTML提供了6个等级的标题标签，即<h1>~<h6>，从<h1>~<h6>标题标签的重要性依次递减。（1）标题标签标题标签的基本语法格式<hnalign="对齐方式">标题文本</hn>可选属性，用于指定标题的对齐方式。left

：设置标题文字左对齐（默认值）center：设置标题文字居中对齐right：设置标题文字右对齐（2）段落标签在网页中，可以使用<p>标签来定义段落。<p>标签是HTML文档中常用的标签，默认情况下，一个段落中的文本会根据浏览器窗口的大小自动换行。<palign=“对齐方式”>段落文本</p>段落标签的基本语法格式2.3.1块级元素2.3基本标签（3）水平线标签水平线可以通过<hr>标签来定义。<hr属性="属性值">水平线标签的基本语法格式属性名含义属性值align设置水平线的对齐方式可选择left、right、center三种值，默认为center，居中对齐显示size设置水平线的粗细以像素为单位，默认为2像素color设置水平线的颜色可用颜色名称、十六进制#RGB、rgb(r,g,b)width设置水平线的宽度可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100%2.3.1块级元素2.3基本标签prepre（4）长引用标签引用长文本时，特别是跨越多于4行的引用，应该使用blockquote元素。之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。<blockquote><p>hereisalongquotationhereisalongquotation</p></blockquote>2.3.1块级元素2.3基本标签举例（5）预格式化标签在pre元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。<pre>

春日胜日寻芳泗水滨，无边光景一时新。等闲识得东风面，万紫千红总是春。</pre>举例2.3.1块级元素2.3基本标签

无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间没有顺序级别之分，通常是并列的。2.3.1块级元素2.3基本标签（6）列表标签<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>...</ul><ul>标签用于定义无序列表；每对<ul>中至少应包含一对<li>；<li>标签用于描述具体的列表项举例

无序列表<ul>标签和<li>标签都拥有type属性，用于指定列表项目符号。列表项目符号是列表项前显示的符号。当为type属性设置不同的属性值，可以呈现不同的符号。2.3.1块级元素2.3基本标签（6）列表标签type属性值显示效果disc（默认值）●circle○square■

有序列表：有序列表的各个列表项按照一定的顺序排列。2.3.1块级元素2.3基本标签（6）列表标签<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>...</ol>

有序列表除了type属性之外，还可以为<ol>标签定义start属性、为<li>标签定义value属性。2.3.1块级元素2.3基本标签（6）列表标签有序列表的属性和属性值及相关描述属性属性值描述type1（默认）项目符号显示为数字1、2、3……a或A项目符号显示为英文字母a、b、c……或A、B、C……i或I项目符号显示为罗马数字i、ii、iii……或I、II、III……start数字规定全部列表项的初始值。value数字规定当前列表项的初始值。reversedreversed（可以省略）规定列表顺序为降序。自定义列表：常用于对名词进行解释和描述，与无序列表和有序列表不同，定义列表的列表项前没有任何项目符号。2.3.1块级元素2.3基本标签（6）列表标签<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>...<dt>名词2</dt><dd>名词2解释1</dd><dd>名词2解释2</dd>...</dl>列表嵌套：在使用列表时，列表项中也有可能包含若干子列表项，我们要想在列表项中定义子列表项就需要将列表进行嵌套。2.3.1块级元素2.3基本标签（6）列表标签<ul><li>列表项1</li><li>列表项2</li><li><ol> <li>列表项1</li> <li>列表项2</li></ol></li></ul>2.3.2内联元素（1）换行标签如果想要将某段文本强制换行显示，就需要使用换行标签<br>。2.3基本标签文本格式化标签用于为文字设置粗体、斜体或下划线等一些特殊显示的文本效果2.3基本标签2.3.2内联元素（2）文本格式化标签举例常用的文本格式化标签及文本显示效果标签显示效果<b>标签和<strong>标签文本以粗体方式显示<u>标签和<ins>标签文本以添加下划线方式显示<i>标签和<em>标签文本以斜体方式显示<s>标签和<del>标签文本以添加删除线方式显示<cite>标签文本以斜体方式显示，用于标注引用的参考文献，标记作品的标题（书籍，戏剧，歌曲等）<mark>标签文本以添加底色方式显示2.3基本标签2.3.2内联元素（2）文本格式化标签2.3基本标签2.3.2内联元素（2）文本格式化标签<b>标签和<strong>标签<u>标签和<ins>标签<i>标签和<em>标签<s>标签和<del>标签2.3基本标签2.3.2内联元素（2）文本格式化标签

<cite>标签是一个逻辑标签，该标签嵌套的文本是对某个参考文献的引用。例如，书籍或者杂志中的内容。注意：<cite>标签中的文本会以斜体样式显示在页面中。与<i>标签、<em>标签嵌套的文本显示样式相同，它们的差异在于语义不同，<cite>标签着重强调引用内容。举例2.3基本标签2.3.2内联元素（2）文本格式化标签

<mark>标签是一个逻辑标签，用于高亮显示文本内联元素只能在文本流中，不会引起换行，高度宽度不可以设置。内联元素依附其他块级元素存在，它只能容纳文本或者其它内联元素。又称行内元素。例如：元素描述em强调文本，默认显示为斜体，只是表达意义strong特别强调的文本，默认显示为粗体，只是表达意义abbr简写，简写为以句点结束的单词，如etc.ins被插入的文本，表示对文档的插入，用于标记文本的变化span内容的通用行内容器，并没有任何特殊语义sub定义下标文本sup定义上标文本2.3基本标签2.3.2内联元素举例特殊字符描述字符的代码

空格符

<小于号<>大于号>&和号&￥人民币¥©版权©常用特殊字符对应代码2.3基本标签2.3.3特殊字符特殊字符描述字符的代码®注册商标®°度数符号°±正负号±×乘号×÷除号÷²平方2（上标2）²³立方3（上标3）³2.4.1常用图像格式2.4多媒体GIFPNGJPGGIF格式最突出的特点是支持动画，它是一种无损压缩的图像格式，即修改图像之后GIF格式的图像质量没有损失。而且GIF格式支持透明，很适合在互联网上使用。但GIF格式只能处理256种颜色。因此在网页制作中，GIF格式常常用于Logo、小图标和其他色彩相对单一的图像。Gif图片2.4.1常用图像格式2.4多媒体GIFPNGJPGPNG格式包括PNG-8格式和真色彩PNG格式（包括PNG-24格式和PNG-32格式）。相对于GIF格式，PNG格式最大的优势是体积更小，支持Alpha透明（全透明、半透明），并且颜色过渡更平滑，但PNG格式不支持动画。其中，PNG-8格式与GIF格式类似，只能支持256种颜色，如果用作静态图可以取代GIF格式；真色彩PNG格式可以支持更多的颜色，同时真色彩PNG格式（特指PNG-32格式）支持半透明图像效果。png透明图2.4.1常用图像格式2.4多媒体GIFPNGJPEGJPEG格式是一种有损压缩的图像格式，该格式的图像稍小，但每修改一次图像都会造成一些图像数据的丢失。JPEG格式是专为照片设计的图像格式，网页中类似于照片的图像（如横幅广告、商品图像、较大的插图等）都可以保存为JPEG格式。2.4多媒体要想在网页中显示图像就需要使用图像标签。在HTML中使用<img>标签来定义图像<imgsrc="图像URL">定义图像的基本语法格式src属性用于指定图像的路径，它是<img>标签的必需属性。2.4.2图像标签及其属性举例2.4.2图像标签及其属性2.4多媒体<img>标签的其他的属性属性属性值描述alt文本图像不能显示时的替换文本。title文本鼠标指针悬停时显示的内容。width像素值设置图像的宽度。height像素值设置图像的高度。2.4.3绝对路径和相对路径2.4多媒体路径：在使用计算机查找需要的文件时，需要知道文件的位置，而表示文件位置的方式就是路径。相对路径绝对路径相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。绝对路径就是网页上的文档或目录在盘符（即C盘、D盘等）中的真正路径。例如，“D:\案例源码\chapter02\images\tao.png”是一个盘符中的绝对路径。在HTML5之前，音频、视频内容如何嵌入到网页中以及有什么弊端？嵌入方式：在大多数情况下都是通过第三方插件或浏览器的应用程序嵌入到页面中，例如运用AdobeFlashPlayer插件将视频和音频嵌入到网页中。弊端：使用第三方插件存在不确定性，容易遇到BUG和安全漏洞，降低网页的性能。为了提高用户体验，HTML5新增了<video>标签和<audio>标签来嵌入视频或音频，让网页的代码结构变得清晰简单。2.4.4音视频技术2.4多媒体在HTML5语法中，<video>标签用于为页面添加视频，<audio>标签用于为页面添加音频。<video>标签和<audio>标签浏览器支持情况。浏览器支持版本IE9.0及以上版本Firefox（火狐浏览器）3.5及以上版本Opera（欧朋浏览器）10.5及以上版本Chrome（谷歌浏览器）3.0及以上版本Safari（苹果浏览器）3.2及以上版本2.4.4音视频技术2.4多媒体在HTML5中使用<video>标签来定义视频文件。<videosrc="视频文件路径"controls="controls">

浏览器不支持video标签</video>设置视频文件路径为视频提供播放插件<video>标签的基本语法2.4.4音视频技术2.4多媒体STEP01演示视频在Firefox浏览器和Chrome浏览器中显示的样式<body>

<video

src="video/movie.mp4"

controls>

您的浏览器不支持video标签</video></body>2.4.4音视频技术2.4多媒体Chrome浏览器视频播放效果Firefox浏览器视频播放效果视频标签提供了一些常用的属性，可以进一步优化视频的播放效果,

<video>标签常用属性。属性允许取值取值说明autoplayautoplay如果出现该属性，则视频在就绪后马上播放controlscontrols如果出现该属性，则向用户显示控件，比如“播放”按钮looploop如果出现该属性，则当媒体文件播放完后再次开始播放mutedmuted规定视频输出应该被静音preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性srcurl要播放的视频的URLwidthPixels设置视频播放器的宽度heightpixels设置视频播放器的高度2.4.4音视频技术2.4多媒体目前，在HTML5中嵌入的视频格式主要包括Ogg、MPEG4、WebM三种文件格式。123ogg

：带有Theora视频编码和Vorbis音频编码的Ogg文件，其视频文件格式为video/ogg。oggMPEG：带有H.264视频编码和AAC音频编码的MPEG4文件，其视频文件格式为video/mp4。MPEG4WebM：带有VP8视频编码和Vorbis音频编码的WebM文件，其视频文件格式为video/webm。WebM2.4.4音视频技术2.4多媒体ogg三种视频格式区别Ogg是一种开源的视频封装容器，它也可以将音频编码和视频编码进行混合封装MPEG4MPEG4是目前最流行的视频格式，在同等条件下该格式的视频质量较好。任何支持播放MPEG4视频的设备，都需要有一张MPEG-LA颁发的许可证。WebMWebM是由Google发布的一个开放、免费的媒体文件格式。WebM格式的视频质量和MPEG4较为接近且没有专利限制等问题，被越来越多的人所使用。2.4.4音视频技术2.4多媒体为了最大程度地提高网站或应用程序在用户浏览器上运行的可能性，HTML5中提供了<source>标签，用于指定多个备用的不同格式的文件的路径。<!--示例代码：将MPEG4格式和Ogg格式同时嵌入到页面中--><videocontrols="controls"><sourcesrc="video/file.ogg"type="video/ogg"><sourcesrc="video/file.mp4"type="video/mp4"></video>示例代码举例(video)2.4.4音视频技术2.4多媒体在HTML5中使用<audio>标签来定义定义Web上的声音文件或音频流。<audiosrc="音频文件路径"controls>

浏览器不支持audio标签</audio>设置音频文件路径为音频提供播放插件<audio>标签的基本语法2.4.4音视频技术2.4多媒体<body>

<audio

src="audio/music.mp3"

controls>

您的浏览器不支持audio标签</audio></body><audio>标签示例运行结果在HTML5中嵌入的音频格式主要包括OggVorbis、MP3、WAV三种格式。123Ogg音频格式完全免费并且没有专利限制，音频文件格式表示方式为audio/ogg。OggVorbisMP3是一种音频压缩技术，被用来大幅度地降低音频数据量，其音频文件格式表示方式为audio/mp3。MP3录音时用的标准的Windows文件格式，音频文件格式表示方式为audio/wav。WAV2.4.4音视频技术2.4多媒体在HTML5中，<audio>标签同样支持引入多个音频源，使用<source>标签来定义，只需要把<video>标签换成<audio>标签即可。<!--示例代码：将mp3格式和wav格式同时嵌入到页面中--><audiocontrols="controls"><sourcesrc="audio/1.mp3"type="audio/mp3"><sourcesrc="audio/1.wav"type="audio/wav"></audio>示例代码2.4.4音视频技术2.4多媒体本节重点讲解了音视频的插入方法。为了能够更好地掌握，我们来制作一个音视频播放页面，如下图所示。举例2.4多媒体-随堂练习2.5.1创建超链接使用<a>标签可以创建超链接。<ahref="跳转目标"target="目标窗口的弹出方式">文本或图像</a>创建超链接的语法格式href用于指定链接目标的url地址，当为<a>标签应用href属性时，它就具有了超链接的功能。target用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。2.5超链接2.5.1创建超链接2.5超链接注意：1.暂时没有确定链接目标时，通常将<a>标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。2.在网页中不仅可以创建文本超链接，各种网页元素，如图像、音频、视频等都可以添加超链接。步骤1步骤2创建锚点链接对象：<ahref="#id名">链接文本</a>创建锚点链接分为两步：创建锚点跳转目标：<标签id=“id”>显示内容</标签>2.5.2创建锚点2.5超链接举例在HTML网页中，所有的元素都是通过标签定义的，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...</tr>...</table>2.6表格2.6.1创建表格<tr></tr>

<td></td>定义表格中的一行，嵌套在<table></table>中定义表格中的单元格，嵌套在<tr></tr>中举例属性描述常用属性值border设置表格的边框（默认border="0"为无边框）像素值cellspacing设置单元格与单元格边框之间的空白间距像素值（默认为2像素）cellpadding设置单元格内容与单元格边框之间的空白间距像素值（默认为1像素）2.6表格2.6.2<table>标签的属性bordercellspacingcellspadding属性描述常用属性值height设置行高度

像素值

align设置一行内容的水平对齐方式left、center、rightvalign设置一行内容的垂直对齐方式top、middle、bottom2.6表格2.6.3<tr><td>标签的属性colspan设置单元格横跨的列数（用于合并水平方向的单元格）正整数rowspan设置单元格竖跨的行数（用于合并竖直方向的单元格）正整数设置了table的width、height、border、bgcolor、cellspacing、cellpadding和单元格的align、valign、rowspan属性。举例(table-center)2.6表格2.6.4跨行、跨列属性<th></th>标签用来设置表头，其文本默认加粗居中显示。表头表头2.6表格2.6.5<th>标签的属性在网页制作过程中，对页面元素进行布局时，常常会用到嵌套的表格，即在表格的一个单元格中嵌套使用一个或者多个表格。2.6表格2.6.6表格嵌套举例(table-nest-mix)<marquee>标记用来设置滚动文字。默认是向左滚动无限次，水平滚动的宽度是当前位置的宽度；垂直滚动的高度是当前位置的高度。2.7其他标签2.7.1<marquee>举例

direction：left、right、up、down

behavior：用于设定滚动的方式，主要由三种方式：behavior="scroll"表示由一端滚动到另一端；behavior="slide"表示由一端快速滑动到另一端，且不再重复；behavior="alternate"表示在两端之间来回滚动。

scrollamount：用于设定活动字幕的滚动速度。

loop：用于设定滚动的次数，当loop=-1表示一直滚动下去，直到页面更新。2.7其他标签2.7.2<iframe>框架是一种在一个浏览器窗口中显示多个HTML文件的网页制作技术。内嵌框架内嵌框架，也叫浮动框架，是在浏览器窗口中嵌入子窗口，即将一个文档嵌入在另一个网页中显示。使用成对的<iframe></iframe>标记即可在网页中插入内嵌框架，语法格式如下。<iframesrc="url"></iframe>举例(iframe)2.7其他标签2.7.2<iframe>属性描述src

设置源文件的地址width设置内嵌框架窗口宽度height设置内嵌框架窗口高度bordercolor设置边框颜色align设置框架对齐方式，可选值为left、rightname设置框架名称，是链接标记的target所需参数scrolling设置是否要滚动条,默认为auto根据需要自动出现。Yes-有，No-无frameborder设置框架边框，1-显示边框，0-不显示（不提倡用yes或no）framespacing设置框架边框宽度marginheight设置内容与窗口上下边缘的边距，默认为1marginwidth设置内容与窗口左右边缘的距离，默认为1内嵌框架属性2.7其他标签2.7.3<div>和<span>div和span元素没有自身固有的表现层性质，可以用样式表来格式化内容div元素用来表示块级元素span元素用于表示内联元素可以用id和class属性为元素命名1、使用div<div>…</div>元素是块级元素<div>元素没有特定的含义，常用于确定一个块级文本区可将div当作网页上的容器使用，里面是根据逻辑组合起来的元素，并赋予一个描述性的名称，从而将内容分组，这样使文档结构清晰当与CSS一同使用时，<div>元素可用于对大的内容块设置样式属性<div>元素的另一个常见的用途是文档布局，它取代了使用表格定义布局的老式方法2.7其他标签2.7.3<div>和<span><div><imgsrc="felici.gif"alt=""/><p><cite>TheCompleteManualofTypography</cite>,JamesFecili</p><p>Acombinationoftypehistoryandexampleofgoodandbadtype.</p></div>div元素用作容器，将多个元素（图像和两个段落）组合到一个div，可表示：它们在概念上是相关的2.7其他标签2.7.3<div>和<span>也可为了上下文、结构和布局的需要，将网页分割成几部分<divid="nav"><ul><li><ahref="#">首页</a></li><li><ahref="#">导航1</a></li><li><ahref="#">导航2</a></li><li><ahref="#">导航3</a></li><li><ahref="#">导航4</a></li></ul></div>…………2.7其他标签2.7.3<div>和<span>文档布局分析2.7其他标签2.7.3<div>和<span>文档结构图bodydivid=“header”div(id=logo)div(id=nav)divid=“content”phdivid=“footer”

a2.7其他标签2.7.3<div>和<span>2、使用span<span>…</span>是内联元素<span>元素也没有特定的含义，可用作文本的容器，用来组合文档中的行内元素当与CSS一同使用时，<span>元素可用于为部分文本设置样式属性<span>只能包含文本和其他内联元素，不能将块级元素放入其中2.7其他标签2.7.3<div>和<span><ul><li>Joan:<spanclass="phone">999.8282</span></li><li>Lisa:<spanclass="phone">888.4889</span></li><li>Steve:<spanclass="phone">888.1628</span></li><li>Morris:<spanclass="phone">999.3220</span></li></ul>加了标签的span给其中的文本添加了意义2.7其他标签2.7.3<div>和<span>3、id属性用于标识文档中的唯一元素id的值在文档中只能使用一次可将id用于识别网页的不同部分2.7其他标签2.7.3<div>和<span><divid="header">

<!--mastheadandnavigationhere--></div><divid="main">

<!--maincontentelementshere--></div><divid="links">

<!--listoflinkshere--></div><divid="footer">

<!--copyrightinformationhere--></div>2.7其他标签2.7.3<div>和<span>4、class属性用于组合相似的元素，多个元素可以共用一个class多个元素使用同一个class，可使用同一个样式表，一次将样式应用到所有定义了标签的元素中例:

提示：id属性用于识别，class属性用于归类

<divclass="listing">

<imgsrc="felici.gif"alt=""/>

<pclass="description"><cite>TheComplete……</cite>,</p></div><divid="ISBN881792063"

class="listing

book">

<imgsrc="bringhurat.gif"alt=""/>

<pclass="description"><cite>TheElementsof……</cite>,JamesFelici</p></div>同一个元素可以同时拥有class和id标识符，一个元素也可以同时属于多个class2.7其他标签2.7.3<div>和<span>语义标签是HTML5中新增的标签，用于丰富页面的功能结构，主要包括<header>标签、<nav>标签、<article>标签等。本节将介绍常用的语义标签。2.7其他标签举例2.7.4语义标签1.<header>标签HTML5中的<header>标签是一种具有引导作用的结构标签。（1）可以包含所有放在页面头部的内容。（2）放置整个页面或页面内的某个内容区块的标题。（3）还可以包含网站Logo图像、表单或者其他相关内容。2.7.4语义标签<header><h1>网页主题</h1>…</header><nav>标签是HTML5新增的标签,用于定义导航链接。<nav>标签可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。2.

<nav>标签2.7.4语义标签<nav><ul><li><ahref="#">首页</li><li><ahref="#">公司概况</li><li><ahref="#">产品展示</li><li><ahref="#">联系我们</li></ul></nav>举例传统导航条侧边栏导航页内导航翻页导航<footer>标签用于定义一个页面或者区域的底部，它可以包含所有放在页面底部的内容。与<header>标签类似，一个页面中可以包含多个<footer>标签。3.<footer>标签2.7.4语义标签<footer>

页面底部内容</footer><article>标签用于定义文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义日志、新闻或用户评论等。4.<artical>标签2.7.4语义标签<article><header>