资源描述
第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.制作一个包含文字和图片的简单页面,效果如本章结束本章结束
展开阅读全文