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

第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.1 HTML语法基础Web前端开2.1HTML语法基础WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）32.1 HTML语法基础Web前端开发与应用教程（HTML2.1HTML语法基础HTML语言是用来描述网页的一种语言，该语言是一种标记语言（即一套标记标签，用来描述网页），而不是编程员，它是制作网页的基础语言，主要用于描述超文本中内容的显示方式。WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）42.1 HTML语法基础HTML语言是用来描述网页的一种语2.1.1HTML文档结构完整的HTML文件包括头部和主题两大部分，头部描述了文档的各种属性和信息，包括文档的标题、在Web中的位置以及和其他文档的关系等；主体包括文本、段落、列表、表格、绘制的图形以及各种嵌入对象，这些对象称为HTML元素。WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）52.1.1 HTML文档结构完整的HTML文件包括头部和主2.1.1HTML文档结构基本的HTML文件结构如下：WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）62.1.1 HTML文档结构基本的HTML文件结构如下：W2.1.2HTML标记HTML5不是一种编程语言，而是一种描述性的标记语言，用于描述超文本中的内容和结构。HTML最基本的语法是。标记通常是成对使用的，一个开始标记和一个结束标记。WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）72.1.2 HTML标记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标题标记标记用于定义段落标题的大小级数。其语法格式如下：标题其中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水平线标记标记用于产生一条水平线，以分隔文档的不同部分。其语法格式如下：标记是非成对标记，所以规范的换行标记在使用的时候记为。WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）142.2.2 文本格式化标记2水平线标记Web前端2.2.2文本格式化标记3字形标记字形标记用于设置文字的风格。WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）15标记含义.粗体标记.斜体标记.大字体标记.小字体标记.下划线标记.上标标记.下标标记.斜体加T体标记.定义带有记号的文本2.2.2 文本格式化标记3字形标记Web前端开发与应用2.2.2文本格式化标记4标记标记可以用来排版大块HTML段落，设置多个段落的文本对齐方式等。其语法格式如下：WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）162.2.2 文本格式化标记4标记Web前端开发2.2.2文本格式化标记5标记标签被用来组合文档中的行内元素。使用方法和标记基本相同。其语法格式如下：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特殊字符标记特殊符号特殊符号符号码符号码说明说明“双引号&符号>大于版权已注册商标circled plus商标乘号除号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嵌入图片图像标记为，是一个单标记，规范的图像标记语法格式如下：WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）252.3.2 嵌入图片图像标记为，是一个单标记，规2.3.2嵌入图片属性值描述alt（必须）text规定图像的替代文本。（必须）URL规定显示图像的 URL。（可选）Pixels/%定义图像的高度。（可选）Pixels/%设置图像的宽度。（可选）URL将图像定义为服务器端图像映射。（可选）URL指向包含长的图像描述文档的 URL。（可选）URL将图像定义为客户器图像映射。WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）26标记的属性及描述2.3.2 嵌入图片属性值描述alt（必须）text规定2.3.2嵌入图片1图像的源文件src该属性用于指定图片源文件的路径，为必不可少的属性。语法格式为：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属性值的单位可以是像素，也可以是百分比。如：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绝对路径绝对路径是指文件在硬盘上真正存在的路径。如：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）可以指定访问者点击链接时会发生什么。可以创建链接进入另一个页面，在页面内跳转，显示图像，下载文件等。使用标记可以实现网页超链接，基本语法结构如下：网页元素其中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 表格由 table 2.5.2设置属性属性属性值值描述描述borderpixels规定表格边框的宽度。设置为0表示不显示边框cellpaddingPixels、%规定单元边沿与其内容之间的空白。cellspacingPixels、%规定单元格之间的空白。rulesnone、groups、rows、cols、all规定内侧边框的哪个部分是可见的。width%、pixels规定表格的宽度。WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）40标签常用属性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-information），如针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对。其语法格式如下：WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）442.6 元标记元标记提供有关页面的元信息（met2.6元标记属性属性值值描述描述charsetcharacter encoding定义文档的字符编码。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属性2.6 元标记属性值描述charsetcharacter e2.7link标记WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）462.7 link标记Web前端开发与应用教程（HTML5+C2.7link标记标签定义文档与外部资源的关系，最常见的用途是链接样式表。此元素只能存在于head部分，不过它可以出现多次。其语法格如下：WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）472.7 link标记标签定义文档与外部资源的关2.7link标记属性属性值值描述描述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标记属性2.7 link标记属性值描述hrefURL定义被链接文档2.8练习WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）492.8 练习Web前端开发与应用教程（HTML5+CSS32.8练习1.制作一个包含文字和图片的简单页面，效果如图2-18所示，可以通过表格实现该效果。2.制作一个带导航的主页面，将其他页面链接到首页上。3.浏览网站http:/www.w3.org,查看W3C标准。4.使用锚链接制作电子书阅读网页。5.制作一个图文混排的页面。WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）502.8 练习1.制作一个包含文字和图片的简单页面，效果如本章结束本章结束