Web前端开发与应用教程第2章-HTML5基础课件

上传人：y*** IP属地：贵州上传时间：2022-12-30 格式：PPTX 页数：102 大小：336.58KB 积分：25 举报 版权申诉

已阅读5页，还剩97页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第2章HTML基础

第2章HTML基础第2章

HTML基础2.1HTML语法基础2.2文本控制标记2.3图像标记2.4超链接标记2.5表格标记2.6元标记2.7link标记2.8练习Web前端开发与应用教程（HTML5+CSS3+JavaScript）2第2章HTML基础2.1HTML语法基础Web前端开2.1HTML语法基础Web前端开发与应用教程（HTML5+CSS3+JavaScript）32.1HTML语法基础Web前端开发与应用教程（HTML2.1HTML语法基础HTML语言是用来描述网页的一种语言，该语言是一种标记语言（即一套标记标签，用来描述网页），而不是编程员，它是制作网页的基础语言，主要用于描述超文本中内容的显示方式。Web前端开发与应用教程（HTML5+CSS3+JavaScript）42.1HTML语法基础HTML语言是用来描述网页的一种语2.1.1HTML文档结构完整的HTML文件包括头部和主题两大部分，头部描述了文档的各种属性和信息，包括文档的标题、在Web中的位置以及和其他文档的关系等；主体包括文本、段落、列表、表格、绘制的图形以及各种嵌入对象，这些对象称为HTML元素。Web前端开发与应用教程（HTML5+CSS3+JavaScript）52.1.1HTML文档结构完整的HTML文件包括头部和主2.1.1HTML文档结构基本的HTML文件结构如下：<!DOCTYPEhtml><html> <head> </head> <body> </body></html>Web前端开发与应用教程（HTML5+CSS3+JavaScript）62.1.1HTML文档结构基本的HTML文件结构如下：W2.1.2HTML标记HTML5不是一种编程语言，而是一种描述性的标记语言，用于描述超文本中的内容和结构。HTML最基本的语法是<标记名></标记名>。标记通常是成对使用的，一个开始标记和一个结束标记。Web前端开发与应用教程（HTML5+CSS3+JavaScript）72.1.2HTML标记HTML5不是一种编程语言，而是一种2.1.3标记的属性HTML属性能够赋予标签含义和语境，提供了有关HTML元素的更多的信息。属性要在开始标签中指定，通常是以名称/值对的形式出现.Web前端开发与应用教程（HTML5+CSS3+JavaScript）82.1.3标记的属性HTML属性能够赋予标签含义和语境2.2文本控制标记Web前端开发与应用教程（HTML5+CSS3+JavaScript）92.2文本控制标记Web前端开发与应用教程（HTML5+2.2文本控制标记设计web页面时要组织好页面的基本元素，同时再配合一些特效，构成一个绚丽多彩的页面。页面的组成对象包括文本、图像、表单、超链接以及多媒体等。Web前端开发与应用教程（HTML5+CSS3+JavaScript）102.2文本控制标记设计web页面时要组织好页面的基本元素2.2.1标题段落标记标题段落在页面文字中起到格式化文本的作用，可以使得文本信息结构更清晰，读者可以一目了然。1．标题标记<hi><hi>标记用于定义段落标题的大小级数。其语法格式如下：<hi>标题</hi>其中i表示标题级数，取值范围为1到6之间的正整数。Web前端开发与应用教程（HTML5+CSS3+JavaScript）112.2.1标题段落标记标题段落在页面文字中起到格式化文本2.2.1标题段落标记2．段落标记标记用于划分段落，控制文本的位置。其语法格式如下：……是成对标记，用于定义内容从新的一行开始，并与上段之间有一个空行。开始标记和结束标记之间写入段落内容。Web前端开发与应用教程（HTML5+CSS3+JavaScript）122.2.1标题段落标记2．段落标记Web前端开发与2.2.2文本格式化标记1．换行标记 标记用于定义文本从新的一行显示。其语法格式如下： 它不产生一个空行，但连续多个的 标记可以产生多个空行的效果。 标记是非成对标记，所以规范的换行标记在使用的时候记为 。Web前端开发与应用教程（HTML5+CSS3+JavaScript）132.2.2文本格式化标记1．换行标记 Web前端开2.2.2文本格式化标记2．水平线标记<hr><hr>标记用于产生一条水平线，以分隔文档的不同部分。其语法格式如下：<hr><hr>标记是非成对标记，所以规范的换行标记在使用的时候记为<hr>。Web前端开发与应用教程（HTML5+CSS3+JavaScript）142.2.2文本格式化标记2．水平线标记<hr>Web前端2.2.2文本格式化标记3．字形标记字形标记用于设置文字的风格。Web前端开发与应用教程（HTML5+CSS3+JavaScript）15标记含义...粗体标记...斜体标记<big>...</big>大字体标记...小字体标记...下划线标记...上标标记...下标标记...斜体加T体标记...定义带有记号的文本2.2.2文本格式化标记3．字形标记Web前端开发与应用2.2.2文本格式化标记4．<div>标记<div>标记可以用来排版大块HTML段落，设置多个段落的文本对齐方式等。其语法格式如下：<div>……</div>Web前端开发与应用教程（HTML5+CSS3+JavaScript）162.2.2文本格式化标记4．<div>标记Web前端开发2.2.2文本格式化标记5．标记标签被用来组合文档中的行内元素。使用方法和<div>标记基本相同。其语法格式如下：……Web前端开发与应用教程（HTML5+CSS3+JavaScript）172.2.2文本格式化标记5．标记Web前端开2.2.3特殊字符标记在HTML中，特殊字数以“&”开头，以“；”结尾，中间为相关字符编码。如用于声明标记的“<”和“>”，在页面上需要显示这两个符号的时候需要进行特殊处理。在HTML编码中，用“<；”表示“<”，用“>；”表示“>”。Web前端开发与应用教程（HTML5+CSS3+JavaScript）182.2.3特殊字符标记在HTML中，特殊字数以“&”开头2.2.3特殊字符标记特殊符号符号码说明“"双引号&&&符号<<小于>>大于©©版权®®已注册商标⊕⊕circledplus™™商标××乘号÷÷除号Web前端开发与应用教程（HTML5+CSS3+JavaScript）192.2.3特殊字符标记特殊符号符号码说明“"双引号&&&2.3图像标记Web前端开发与应用教程（HTML5+CSS3+JavaScript）202.3图像标记Web前端开发与应用教程（HTML5+CS2.3图像标记图片在网页中占据重要的位置，俗话说，一图胜千言。图片感官上的形象性，能够直接再现事物本身，直观具体地表达页面内容，更能够增加页面的美观性。图片不仅能够增加网页的吸引力，同时也大大地提升了用户在浏览网页的体验。图片的展示形式丰富多样，不同形式的图片展现也让浏览网页的乐趣变得更加多样化。Web前端开发与应用教程（HTML5+CSS3+JavaScript）212.3图像标记图片在网页中占据重要的位置，俗话说，一图胜2.3.1图片的格式与分辨率图片的格式有很多种，常见的有JPEG，GIF，BMP，TIFF，PNG等，选择网页上的图片只有一个原则,即在图片清晰的前提下,文件越小越好。因此在网页文件中使用最广泛的图片格式为GIF、JPEG和PNG。Web前端开发与应用教程（HTML5+CSS3+JavaScript）222.3.1图片的格式与分辨率图片的格式有很多种，常见的有2.3.1图片的格式与分辨率GIF就是图像交换格式（GraphicsInterchangeFormat），只支持256色以内的图像；GIF采用无损压缩存储，在不影响图像质量的情况下，可以生成很小的文件.JPEG是一种广泛使用的压缩图像标准，也是网页中最受欢迎的格式，JPEG可支持多达16M颜色.PNG格式的图片近年来在网络中也很流行，其特点为不失真，具有GIF和JPEG的色彩模式，网络传输速度快，支持透明图像的制作。Web前端开发与应用教程（HTML5+CSS3+JavaScript）232.3.1图片的格式与分辨率GIF就是图像交换格式（Gr2.3.1图片的格式与分辨率分辨率是指在单位长度内的像素点数，单位为dpi，是以每英寸包含几个像素来计算，像素越多，分辨率就越高，而图片的质量也就越细腻；反之图片就会越粗糙；一般来说，图片最好不要超过100kbWeb前端开发与应用教程（HTML5+CSS3+JavaScript）242.3.1图片的格式与分辨率分辨率是指在单位长度内的像素2.3.2嵌入图片图像标记为<img>，是一个单标记，规范的图像标记语法格式如下：<img属性=”属性值”>Web前端开发与应用教程（HTML5+CSS3+JavaScript）252.3.2嵌入图片图像标记为<img>，是一个单标记，规2.3.2嵌入图片属性值描述alt（必须）text规定图像的替代文本。（必须）URL规定显示图像的URL。

（可选）Pixels

/%定义图像的高度。（可选）Pixels

/%设置图像的宽度。（可选）URL将图像定义为服务器端图像映射。（可选）URL指向包含长的图像描述文档的URL。（可选）URL将图像定义为客户器图像映射。Web前端开发与应用教程（HTML5+CSS3+JavaScript）26<img>标记的属性及描述2.3.2嵌入图片属性值描述alt（必须）text规定2.3.2嵌入图片1．图像的源文件src该属性用于指定图片源文件的路径，为必不可少的属性。语法格式为：<imgsrc=”图片路径”>Web前端开发与应用教程（HTML5+CSS3+JavaScript）272.3.2嵌入图片1．图像的源文件srcWeb前端开发与2.3.2嵌入图片2．设置图像的提示文字alt该属性定义了图像的替代文本。当图像没有被成功下载，不能正常在页面上显示图片时，则在图像的位置上就会显示提示文字；当图像下载完成，则当鼠标指针放在该图像上，鼠标指针旁边就会出现提示文字.Web前端开发与应用教程（HTML5+CSS3+JavaScript）282.3.2嵌入图片2．设置图像的提示文字altWeb前端2.3.2嵌入图片3．设置图像的宽度width和高度height该属性为可选属性，设置了这些属性，就可以在页面加载时为图像预留空间。Width和height属性值的单位可以是像素，也可以是百分比。如：<imgsrc="图片路径"width="60%"height="30px">Web前端开发与应用教程（HTML5+CSS3+JavaScript）292.3.2嵌入图片3．设置图像的宽度width和高度he2.3.3路径的表示方法在页面的各个元素中，只有文本是写在HTML中的，其他多媒体元素如图片、声音、视频等都是嵌入到页面中的，HTML只记录了这些文件的路径，所以正确的路径信息是多媒体能够在页面上正常显示的基础。Web前端开发与应用教程（HTML5+CSS3+JavaScript）302.3.3路径的表示方法在页面的各个元素中，只有文本是写2.3.3路径的表示方法1．绝对路径绝对路径是指文件在硬盘上真正存在的路径。如：<imgsrc="E:\book\Web前端开发实践教程\第2章\picture\food.jpg">Web前端开发与应用教程（HTML5+CSS3+JavaScript）312.3.3路径的表示方法1．绝对路径Web前端开发与应用2.3.3路径的表示方法2．相对路径通常在网页里指定文件时，都会选择使用相对路径。所谓相对路径，就是相对于本文档的目标文件位置。Web前端开发与应用教程（HTML5+CSS3+JavaScript）322.3.3路径的表示方法2．相对路径Web前端开发与应用2.4超链接标记Web前端开发与应用教程（HTML5+CSS3+JavaScript）332.4超链接标记Web前端开发与应用教程（HTML5+CS2.4超链接标记网页中的超链接按照链接路径的不同，可以分为三种类型：内部链接、锚点链接和外部链接。按照使用对象不同，网页中的链接又可以分为文本超链接、图像超链接、E-mail链接、锚点链接、多媒体文件链接、空连接等。Web前端开发与应用教程（HTML5+CSS3+JavaScript）342.4超链接标记网页中的超链接按照链接路径的不同，可以分为2.4.1创建超链接链接有两个主要的部分：目标和标签。使用目标（destination）可以指定访问者点击链接时会发生什么。可以创建链接进入另一个页面，在页面内跳转，显示图像，下载文件等。使用<a>标记可以实现网页超链接，基本语法结构如下：<ahref=URL>网页元素</a>其中href属性指定超链接所要链接的地址。Web前端开发与应用教程（HTML5+CSS3+JavaScript）352.4.1创建超链接链接有两个主要的部分：目标和标签。使用目2.4.1创建超链接属性值描述hrefURL规定链接指向的页面的URL。target_blank_parent_self_topframename规定在何处打开链接文档。reltext规定当前文档与被链接文档之间的关系。downloadfilename规定被下载的超链接目标。Web前端开发与应用教程（HTML5+CSS3+JavaScript）362.4.1创建超链接属性值描述hrefURL规定链接指向的页2.5表格标记Web前端开发与应用教程（HTML5+CSS3+JavaScript）372.5表格标记Web前端开发与应用教程（HTML5+CS2.5表格标记

早期的网页设计中表格的作用非常重要，不但可以用表格清晰的显示数据，而且还用来设计页面布局。不过在HTML5中表格的作用已经被减弱了，第三章中将要给大家介绍的页面元素是HTML5新增的页面布局元素，因此，目前表格更多的被用来显示数据。Web前端开发与应用教程（HTML5+CSS3+JavaScript）382.5表格标记

早期的网页设计中表格的作用非常重要，不但2.5.1创建表格基本的HTML表格由table元素以及一个或多个tr、th或td元素组成。从基本层面看，table元素是由行组成的，行又是由单元格组成的。每个行（tr）都包含标题单元格（th）或数据单元格（td），或者同时包含这两种单元格。Web前端开发与应用教程（HTML5+CSS3+JavaScript）392.5.1创建表格基本的HTML表格由table2.5.2设置属性

属性值描述borderpixels规定表格边框的宽度。设置为0表示不显示边框cellpaddingPixels、%规定单元边沿与其内容之间的空白。cellspacingPixels、%规定单元格之间的空白。rulesnone、groups、rows、cols、all规定内侧边框的哪个部分是可见的。width%、pixels规定表格的宽度。Web前端开发与应用教程（HTML5+CSS3+JavaScript）40<table>标签常用属性2.5.2设置属性

属性值描述borderpixels规2.5.2设置属性

Table属性主要是针对表格设置的，如border属性表示表格边框的宽度，设置为“0”时，表示不显示边框；cellpadding属性规定单元格边线与内容之间的空白距离；cellspacing是规定单元格与另一个单元格之间的空白距离；rules属性规定表格内边框的哪个部分显示等。下面通过具体的实例来说明每项属性的用法和功能。Web前端开发与应用教程（HTML5+CSS3+JavaScript）412.5.2设置属性

Table属性主要是针对表格设置的，2.5.2设置属性

属性值描述alignright、left、center、justify、char定义表格行的内容对齐方式。bgcolorrgb(x,x,x)、#xxxxxx、colorname不赞成使用。请使用样式取而代之。规定表格行的背景颜色。charcharacter规定根据哪个字符来进行文本对齐。charoffnumber规定第一个对齐字符的偏移量。valigntop、middle、bottom、baseline规定表格行中内容的垂直对齐方式。Web前端开发与应用教程（HTML5+CSS3+JavaScript）42单元格属性2.5.2设置属性

属性值描述alignright、le2.6

元标记Web前端开发与应用教程（HTML5+CSS3+JavaScript）432.6元标记Web前端开发与应用教程（HTML5+CSS2.6元标记<meta>元标记提供有关页面的元信息（meta-information），如针对搜索引擎和更新频度的描述和关键词。<meta>标签位于文档的头部，不包含任何内容。<meta>标签的属性定义了与文档相关联的名称/值对。其语法格式如下：<metahttp-equiv="…"name="…"content="…">Web前端开发与应用教程（HTML5+CSS3+JavaScript）442.6元标记<meta>元标记提供有关页面的元信息（met2.6元标记属性值描述charsetcharacterencoding定义文档的字符编码。contentsome_text定义与http-equiv或name属性相关的元信息。http-equivcontent-type、expires、refresh、set-cookie把content属性关联到HTTP头部。nameauthor、description、keywords、generator、revised、others把content属性关联到一个名称。Web前端开发与应用教程（HTML5+CSS3+JavaScript）45

属性值描述hrefURL定义被链接文档的位置。hreflanglanguage_code定义被链接文档中文本的语言。mediamedia_query规定被链接文档将显示在什么设备上。relalternate、archives、author、bookmark、external、first、help、icon、last、license、next、nofollow、noreferrer、pingback、prefetch、prev、search、sidebar、stylesheet、tag、up必需。定义当前文档与被链接文档之间的关系。sizesHeightxWidth、any定义了链接属性大小，只对属性rel="icon"起作用。typeMIME_type规定被链接文档的MIME类型。Web前端开发与应用教程（HTML5+CSS3+JavaScript）48

属性值描述hrefURL定义被链接文档2.8练习Web前端开发与应用教程（HTML5+CSS3+JavaScript）492.8练习Web前端开发与应用教程（HTML5+CSS32.8练习1.制作一个包含文字和图片的简单页面，效果如图2-18所示，可以通过表格实现该效果。2.制作一个带导航的主页面，将其他页面链接到首页上。3.浏览网站,查看W3C标准。4.使用锚链接制作电子书阅读网页。5.制作一个图文混排的页面。Web前端开发与应用教程（HTML5+CSS3+JavaScript）502.8练习1.制作一个包含文字和图片的简单页面，效果如本章结束本章结束第2章HTML基础

第2章HTML基础第2章

HTML基础2.1HTML语法基础2.2文本控制标记2.3图像标记2.4超链接标记2.5表格标记2.6元标记2.7link标记2.8练习Web前端开发与应用教程（HTML5+CSS3+JavaScript）53第2章HTML基础2.1HTML语法基础Web前端开2.1HTML语法基础Web前端开发与应用教程（HTML5+CSS3+JavaScript）542.1HTML语法基础Web前端开发与应用教程（HTML2.1HTML语法基础HTML语言是用来描述网页的一种语言，该语言是一种标记语言（即一套标记标签，用来描述网页），而不是编程员，它是制作网页的基础语言，主要用于描述超文本中内容的显示方式。Web前端开发与应用教程（HTML5+CSS3+JavaScript）552.1HTML语法基础HTML语言是用来描述网页的一种语2.1.1HTML文档结构完整的HTML文件包括头部和主题两大部分，头部描述了文档的各种属性和信息，包括文档的标题、在Web中的位置以及和其他文档的关系等；主体包括文本、段落、列表、表格、绘制的图形以及各种嵌入对象，这些对象称为HTML元素。Web前端开发与应用教程（HTML5+CSS3+JavaScript）562.1.1HTML文档结构完整的HTML文件包括头部和主2.1.1HTML文档结构基本的HTML文件结构如下：<!DOCTYPEhtml><html> <head> </head> <body> </body></html>Web前端开发与应用教程（HTML5+CSS3+JavaScript）572.1.1HTML文档结构基本的HTML文件结构如下：W2.1.2HTML标记HTML5不是一种编程语言，而是一种描述性的标记语言，用于描述超文本中的内容和结构。HTML最基本的语法是<标记名></标记名>。标记通常是成对使用的，一个开始标记和一个结束标记。Web前端开发与应用教程（HTML5+CSS3+JavaScript）582.1.2HTML标记HTML5不是一种编程语言，而是一种2.1.3标记的属性HTML属性能够赋予标签含义和语境，提供了有关HTML元素的更多的信息。属性要在开始标签中指定，通常是以名称/值对的形式出现.Web前端开发与应用教程（HTML5+CSS3+JavaScript）592.1.3标记的属性HTML属性能够赋予标签含义和语境2.2文本控制标记Web前端开发与应用教程（HTML5+CSS3+JavaScript）602.2文本控制标记Web前端开发与应用教程（HTML5+2.2文本控制标记设计web页面时要组织好页面的基本元素，同时再配合一些特效，构成一个绚丽多彩的页面。页面的组成对象包括文本、图像、表单、超链接以及多媒体等。Web前端开发与应用教程（HTML5+CSS3+JavaScript）612.2文本控制标记设计web页面时要组织好页面的基本元素2.2.1标题段落标记标题段落在页面文字中起到格式化文本的作用，可以使得文本信息结构更清晰，读者可以一目了然。1．标题标记<hi><hi>标记用于定义段落标题的大小级数。其语法格式如下：<hi>标题</hi>其中i表示标题级数，取值范围为1到6之间的正整数。Web前端开发与应用教程（HTML5+CSS3+JavaScript）622.2.1标题段落标记标题段落在页面文字中起到格式化文本2.2.1标题段落标记2．段落标记标记用于划分段落，控制文本的位置。其语法格式如下：……是成对标记，用于定义内容从新的一行开始，并与上段之间有一个空行。开始标记和结束标记之间写入段落内容。Web前端开发与应用教程（HTML5+CSS3+JavaScript）632.2.1标题段落标记2．段落标记Web前端开发与2.2.2文本格式化标记1．换行标记 标记用于定义文本从新的一行显示。其语法格式如下： 它不产生一个空行，但连续多个的 标记可以产生多个空行的效果。 标记是非成对标记，所以规范的换行标记在使用的时候记为 。Web前端开发与应用教程（HTML5+CSS3+JavaScript）642.2.2文本格式化标记1．换行标记 Web前端开2.2.2文本格式化标记2．水平线标记<hr><hr>标记用于产生一条水平线，以分隔文档的不同部分。其语法格式如下：<hr><hr>标记是非成对标记，所以规范的换行标记在使用的时候记为<hr>。Web前端开发与应用教程（HTML5+CSS3+JavaScript）652.2.2文本格式化标记2．水平线标记<hr>Web前端2.2.2文本格式化标记3．字形标记字形标记用于设置文字的风格。Web前端开发与应用教程（HTML5+CSS3+JavaScript）66标记含义...粗体标记...斜体标记<big>...</big>大字体标记...小字体标记...下划线标记...上标标记...下标标记...斜体加T体标记...定义带有记号的文本2.2.2文本格式化标记3．字形标记Web前端开发与应用2.2.2文本格式化标记4．<div>标记<div>标记可以用来排版大块HTML段落，设置多个段落的文本对齐方式等。其语法格式如下：<div>……</div>Web前端开发与应用教程（HTML5+CSS3+JavaScript）672.2.2文本格式化标记4．<div>标记Web前端开发2.2.2文本格式化标记5．标记标签被用来组合文档中的行内元素。使用方法和<div>标记基本相同。其语法格式如下：……Web前端开发与应用教程（HTML5+CSS3+JavaScript）682.2.2文本格式化标记5．标记Web前端开2.2.3特殊字符标记在HTML中，特殊字数以“&”开头，以“；”结尾，中间为相关字符编码。如用于声明标记的“<”和“>”，在页面上需要显示这两个符号的时候需要进行特殊处理。在HTML编码中，用“<；”表示“<”，用“>；”表示“>”。Web前端开发与应用教程（HTML5+CSS3+JavaScript）692.2.3特殊字符标记在HTML中，特殊字数以“&”开头2.2.3特殊字符标记特殊符号符号码说明“"双引号&&&符号<<小于>>大于©©版权®®已注册商标⊕⊕circledplus™™商标××乘号÷÷除号Web前端开发与应用教程（HTML5+CSS3+JavaScript）702.2.3特殊字符标记特殊符号符号码说明“"双引号&&&2.3图像标记Web前端开发与应用教程（HTML5+CSS3+JavaScript）712.3图像标记Web前端开发与应用教程（HTML5+CS2.3图像标记图片在网页中占据重要的位置，俗话说，一图胜千言。图片感官上的形象性，能够直接再现事物本身，直观具体地表达页面内容，更能够增加页面的美观性。图片不仅能够增加网页的吸引力，同时也大大地提升了用户在浏览网页的体验。图片的展示形式丰富多样，不同形式的图片展现也让浏览网页的乐趣变得更加多样化。Web前端开发与应用教程（HTML5+CSS3+JavaScript）722.3图像标记图片在网页中占据重要的位置，俗话说，一图胜2.3.1图片的格式与分辨率图片的格式有很多种，常见的有JPEG，GIF，BMP，TIFF，PNG等，选择网页上的图片只有一个原则,即在图片清晰的前提下,文件越小越好。因此在网页文件中使用最广泛的图片格式为GIF、JPEG和PNG。Web前端开发与应用教程（HTML5+CSS3+JavaScript）732.3.1图片的格式与分辨率图片的格式有很多种，常见的有2.3.1图片的格式与分辨率GIF就是图像交换格式（GraphicsInterchangeFormat），只支持256色以内的图像；GIF采用无损压缩存储，在不影响图像质量的情况下，可以生成很小的文件.JPEG是一种广泛使用的压缩图像标准，也是网页中最受欢迎的格式，JPEG可支持多达16M颜色.PNG格式的图片近年来在网络中也很流行，其特点为不失真，具有GIF和JPEG的色彩模式，网络传输速度快，支持透明图像的制作。Web前端开发与应用教程（HTML5+CSS3+JavaScript）742.3.1图片的格式与分辨率GIF就是图像交换格式（Gr2.3.1图片的格式与分辨率分辨率是指在单位长度内的像素点数，单位为dpi，是以每英寸包含几个像素来计算，像素越多，分辨率就越高，而图片的质量也就越细腻；反之图片就会越粗糙；一般来说，图片最好不要超过100kbWeb前端开发与应用教程（HTML5+CSS3+JavaScript）752.3.1图片的格式与分辨率分辨率是指在单位长度内的像素2.3.2嵌入图片图像标记为<img>，是一个单标记，规范的图像标记语法格式如下：<img属性=”属性值”>Web前端开发与应用教程（HTML5+CSS3+JavaScript）762.3.2嵌入图片图像标记为<img>，是一个单标记，规2.3.2嵌入图片属性值描述alt（必须）text规定图像的替代文本。（必须）URL规定显示图像的URL。

（可选）Pixels

/%定义图像的高度。（可选）Pixels

/%设置图像的宽度。（可选）URL将图像定义为服务器端图像映射。（可选）URL指向包含长的图像描述文档的URL。（可选）URL将图像定义为客户器图像映射。Web前端开发与应用教程（HTML5+CSS3+JavaScript）77<img>标记的属性及描述2.3.2嵌入图片属性值描述alt（必须）text规定2.3.2嵌入图片1．图像的源文件src该属性用于指定图片源文件的路径，为必不可少的属性。语法格式为：<imgsrc=”图片路径”>Web前端开发与应用教程（HTML5+CSS3+JavaScript）782.3.2嵌入图片1．图像的源文件srcWeb前端开发与2.3.2嵌入图片2．设置图像的提示文字alt该属性定义了图像的替代文本。当图像没有被成功下载，不能正常在页面上显示图片时，则在图像的位置上就会显示提示文字；当图像下载完成，则当鼠标指针放在该图像上，鼠标指针旁边就会出现提示文字.Web前端开发与应用教程（HTML5+CSS3+JavaScript）792.3.2嵌入图片2．设置图像的提示文字altWeb前端2.3.2嵌入图片3．设置图像的宽度width和高度height该属性为可选属性，设置了这些属性，就可以在页面加载时为图像预留空间。Width和height属性值的单位可以是像素，也可以是百分比。如：<imgsrc="图片路径"width="60%"height="30px">Web前端开发与应用教程（HTML5+CSS3+JavaScript）802.3.2嵌入图片3．设置图像的宽度width和高度he2.3.3路径的表示方法在页面的各个元素中，只有文本是写在HTML中的，其他多媒体元素如图片、声音、视频等都是嵌入到页面中的，HTML只记录了这些文件的路径，所以正确的路径信息是多媒体能够在页面上正常显示的基础。Web前端开发与应用教程（HTML5+CSS3+JavaScript）812.3.3路径的表示方法在页面的各个元素中，只有文本是写2.3.3路径的表示方法1．绝对路径绝对路径是指文件在硬盘上真正存在的路径。如：<imgsrc="E:\book\Web前端开发实践教程\第2章\picture\food.jpg">Web前端开发与应用教程（HTML5+CSS3+JavaScript）822.3.3路径的表示方法1．绝对路径Web前端开发与应用2.3.3路径的表示方法2．相对路径通常在网页里指定文件时，都会选择使用相对路径。所谓相对路径，就是相对于本文档的目标文件位置。Web前端开发与应用教程（HTML5+CSS3+JavaScript）832.3.3路径的表示方法2．相对路径Web前端开发与应用2.4超链接标记Web前端开发与应用教程（HTML5+CSS3+JavaScript）842.4超链接标记Web前端开发与应用教程（HTML5+CS2.4超链接标记网页中的超链接按照链接路径的不同，可以分为三种类型：内部链接、锚点链接和外部链接。按照使用对象不同，网页中的链接又可以分为文本超链接、图像超链接、E-mail链接、锚点链接、多媒体文件链接、空连接等。Web前端开发与应用教程（HTML5+CSS3+JavaScript）852.4超链接标记网页中的超链接按照链接路径的不同，可以分为2.4.1创建超链接链接有两个主要的部分：目标和标签。使用目标（destination）可以指定访问者点击链接时会发生什么。可以创建链接进入另一个页面，在页面内跳转，显示图像，下载文件等。使用<a>标记可以实现网页超链接，基本语法结构如下：<ahref=URL>网页元素</a>其中href属性指定超链接所要链接的地址。Web前端开发与应用教程（HTML5+CSS3+JavaScript）862.4.1创建超链接链接有两个主要的部分：目标和标签。使用目2.4.1创建超链接属性值描述hrefURL规定链接指向的页面的URL。target_blank_parent_self_topframename规定在何处打开链接文档。reltext规定当前文档与被链接文档之间的关系。downloadfilename规定被下载的超链接目标。Web前端开发与应用教程（HTML5+CSS3+JavaScript）872.4.1创建超链接属性值描述hrefURL规定链接指向的页2.5表格标记Web前端开发与应用教程（HTML5+CSS3+JavaScript）882.5表格标记Web前端开发与应用教程（HTML5+CS2.5表格标记

早期的网页设计中表格的作用非常重要，不但2.5.1创建表格基本的HTML表格由table元素以及一个或多个tr、th或td元素组成。从基本层面看，table元素是由行组成的，行又是由单元格组成的。每个行（tr）都包含标题单元格（th）或数据单元格（td），或者同时包含这两种单元格。Web前端开发与应用教程（HTML5+CSS3+JavaScript）902.5.1创建表格基本的HTML表格由table2.5.2设置属性

属性值描述borderpixels规2.5.2设置属性

Table属性主要是针对表格设置的，2.5.2设置属性

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

Web前端开发与应用教程第2章-HTML5基础课件

文档简介

温馨提示

最新文档

评论

Web前端开发与应用教程第2章-HTML5基础课件

文档简介

温馨提示

最新文档

评论

相关文档