网页设计与制作 课件 项目2 认识网页中常用的元素_第1页
网页设计与制作 课件 项目2 认识网页中常用的元素_第2页
网页设计与制作 课件 项目2 认识网页中常用的元素_第3页
网页设计与制作 课件 项目2 认识网页中常用的元素_第4页
网页设计与制作 课件 项目2 认识网页中常用的元素_第5页
已阅读5页，还剩23页未读， 继续免费阅读

下载本文档

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

文档简介

任务2-1认识HTML标签

任务2-2使用文本控制标签

任务2-3使用图像标签

任务2-4使用列表标签

任务2-5使用超链接标签任务2-1认识HTML标签1.认识HTML文件的基本结构HTML文件的语法结构十分简单，其基本结构如下：从上面给出的HTML结构可以看出，HTML文档包括以下3个主要标记：(1)文档标记<html>…</html>：标示HTML文档的开头和结尾。它是一个根标记，告知浏览器其自身是一个HTML文档。(2)头部标记<head>…</head>：用来定义整个文档的属性和文档的标题，这部分的标题信息在浏览器的窗口中显示出来，可以包括标题(<title>)、头元素(<meta>)、代码(<script>)等。(3)主体标记<body>…</body>：<body>与</body>之间的部分，是文档的主要部分，在浏览器中显示的内容和显示内容的格式标记都放在这里，如文字、图像、动画、表格等。在编写HTML代码时，必须遵守以下规范：(1)所有标记都必须有一个相应的结束标记。(2)所有标记和属性的名称都必须小写。(3)所有标记都必须合理嵌套。(4)所有属性值必须用双引号括起来。(5)把<、>和&等符号用编码表示。(6)所有属性都要赋一个值。(7)注释标记<!--注释内容-->2.认识标签在HTML页面中，带有“<>”符号的元素被称为HTML标签，如上面<body>、<title>都是HTML标签，也称HTML标记或HTML元素，本书称为标签。1)标签的分类根据标签组成的特点，HTML标签可分为双标签和单标签两类。(1)双标签。双标签由开始和结束两个标签组成，其基本语法格式如下：<标签名>内容</标签名>(2)单标签。单标签是指用一个标签符号就能完整地描述某个功能的标签。其基本语法格式如下：<标签名/>2)标签的关系一个网页中会存在多种标签，各标签之间具有一定的关系。根据标签的位置，标签的关系主要有嵌套关系和并列关系两种。图2-1所示是HTML的结构，其中就包含了这两种关系。(1)嵌套关系。嵌套关系就是平常所说的包含关系，即在一个双标签里包含其他的标签。(2)并列关系。并列关系也称兄弟关系，就是两个标签处于同一级别，并且没有包含关系。3)注释HTML中有两种注释方法：(1) <!--注释内容-->：常用于注释一段内容。(2) <!注释内容>：常用于说明标签里的内容。注释内容只为阅读者提供阅读代码的方便，在浏览器窗口中不显示。通常，标签包括以下5种：(1)声明文档类型标签。!doctype声明位于HTML文档的最前面，在<html>标签之前，用于告知浏览器文档使用哪种HTML或XHTML规范。(2) html标签。html标签用于表示HTML文件的开始与结束。Web页面所有内容都位于这两个标签之间。(3) head标签。<head>标签又称首部标签符，位于Web页的开头。Head标签用于描述HTML文档本身的信息，如网页标题、关键字等，但不包括Web页的任何实际内容。除了网页标题在浏览器的标题栏显示外，其他一般不会显示在浏览器中。(4) title标签。<title>标签用来说明网页的主题或用途，显示在浏览器的标题栏。(5) meta标签。meta标签不显示在页面中，一般用来定义页面信息、关键字、刷新等。meta不需设置结束标记。通常使用<metacharset="utf-8">格式，表示meta标签定义网页中所使用的字符集为utf-8。任务2-2使用文本控制标签1.页面格式化标签1)标题标签HTML提供了6个等级的标题标签，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，从<h1>到<h6>标题的重要性依次递减。其格式如下：<hn>标题文本</hn>n取1～6间的值。若想让标题文字呈对齐(左对齐、居中对齐、右对齐)方式，可在标签里设置align属性来实现，其格式如下：<hnalign="对齐方式">标题文本</hn>说明：“对齐方式”的取值如下：(1) left：设置标题文字左对齐(默认值)。(2) right：设置标题文字右对齐。(3) center：设置标题文字居中对齐。2)段落标签在网页中使用<p>标签来定义段落。<p>标签是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。<p>标签的格式如下：<palign="对齐方式">段落文本</p>3)水平线标签在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过<hr/>标签来定义。<hr/>是一个单标签，其定义格式如下：<hr属性="属性值"/><hr/>常用的属性如表2-1所示。4)换行标签在Word中，按“Enter”键可以将一段文字换行显示，但在网页中，如果想要将某段文本强制换行显示，就需要使用换行标签<br/>。在Dw设计窗口，可按“shift+Enter”键换行。2.文本样式标签文本样式标签<font>用来控制网页中文本的效果(如字体、字号和颜色等)，让网页中的文字样式变得更加丰富。文本样式标签的基本语法格式如下：<font属性="属性值">文本内容</font><font>标签中常用的属性如表2-2所示。3.文本格式化标签网页中经常需要为文字设置粗体、斜体或下画线等一些特殊的文本效果，此时可以使用HTML提供的文本格式化标签实现文字的特殊显示。常用的文本格式化标签如表2-3所示。4.文本语义标签在HTML中，文本语义标签有很多，这里列举mark和cite标签，并简要介绍其应用。1) mark标签mark标签的主要功能是在文本中让某些字符高亮显示，该元素的用法与em标签和strong标签有相似之处，但mark标签在突出显示样式时更随意、灵活。2) cite标签cite标签可以创建一个引用，用于对文档引用参考文献的说明，一旦在文档中使用了该标签，被标注的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。5.特殊字符标签网页中有些字符是不能直接输入的，为此HTML为这些字符提供了专门的替代代码，如表2-4所示。任务2-3使用图像标签1.认识常见的图像格式网页中通常使用以下几种文件格式。1) JPEG文件格式JPEG(JointPhotographicExpertsGroup)图像格式常用于全彩图像，在Web中常见。它是将原始的图像压缩后的格式，其压缩比较大，在图像打开时自动解压缩。JPEG格式支持CMYK、RGB和灰度颜色模式，但不支持Alpha通道。与GIF格式不同，JPEG保留RGB图像中的所有颜色信息，只是有选择地扔掉数据来压缩文件大小。2) GIF文件格式GIF(GraphicsInterchangeFormat)图像格式是一种图像交换格式，仅支持256色，常用于Web图像。GIF又细分为两种格式即87a和89a，其中89a可存储动画和透明背景效果。3) PNG文件格式PNG(PortableNetworkGraphics)图像格式使用的是无丢失压缩方式，支持24位图像，能生成透明的背景，是网络上的一种新生文件格式。它的最大特点是将JPEG和GIF两种格式的优点很好地结合在一起使用。4) TIFF文件格式TIFF(Tagged-imageFileFormat)是扫描仪常用的格式，支持跨平台的软件应用。TIFF文档的文件最大可达4 GB。TIFF格式支持具有Alpha通道的CMYK、RGB、Lab、索引颜色和灰度图像，并支持无Alpha通道的位图模式图像。5) SWF文件格式SWF(ShockWaveFlash)文件格式是基于矢量图像的文件格式，它用于创建适合Web的可缩放的小型图像。因为文件格式基于矢量，所以在任何分辨率下图像都可以保持图像品质，特别适用于动画帧的创建。6) SVG文件格式SVG(ScalableVectorGraphics)是将图像描述为形状、路径、文本和滤镜效果的矢量格式。生成的文件很紧凑，在Web上可以设计激动人心的、高分辨率的Web图像页面，甚至在资源十分有限的手持设备中都可提供高品质的图像。2.图像的路径若网页中有图像，则浏览器在渲染时需要知道图像的位置即图像的路径。如果不知道路径，就不能够正确显示图像。因此，在网页中插入图像，就需要采用“路径”的方式来指定图像文件的位置。通过设置“路径”来帮助浏览器找到图像文件。路径有绝对路径和相对路径。1)绝对路径绝对路径一般是指带有盘符的路径，或完整的网络地址。2)相对路径相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。相对路径的设置通常有以下3种形式：(1)图像文件和html文件位于同一文件夹。只需输入图像文件的名称即可。(2)图像文件位于HTML文件的下一级文件夹。输入文件夹名和文件名，之间用“/”隔开。(3)图像文件位于HTML文件的上一级文件夹。在文件名之前加入“../”，如果是上两级，则需要使用“../../”，以此类推。3.图像标签<img/>在网页中使用<img>标签显示图像。图像标签的基本语法格式如下：<imgsrc="图像URL"/><img/>标签的属性如表2-5所示。下面介绍<img>标签的属性。1)图像的替换文本属性alt当页面中的图像无法正常显示时，我们可以使用alt属性告知用户原因。2)鼠标悬停在图像上时显示的内容属性title<img/>标签的title属性用来设置当鼠标悬停在图像上时显示文本信息。3)图像的宽度width和高度height属性通过width和height属性可以设置图像的宽度和高度。若只设一个属性，则另一个按等比缩放。如果不设置图像的width和height属性，则图像按照原始尺寸显示。4)图像的边框属性border默认情况下图像是没有边框的，可以使用border属性为图像加边框，犹如给真实的画装裱。5)图像的边距属性vspace和hspaceHTML中通过vspace和hspace属性分别调整图像的垂直边距和水平边距。6)图像的对齐属性align图文混排是网页中常见的排版方式，默认情况下图文按上下关系。要实现图文混排，可使用对齐属性align。align的取值分别为left(左对齐)和right(右对齐)。任务2-4使用列表标签列表的主要用途是简单明了地罗列各项内容之间的层次关系，为访问者阅读网页提供方便。HTML为用户提供了无序列表、有序列表和定义列表3种形式。1.无序列表无序列表是网页中最常用的列表，其各个列表项之间没有顺序级别之分，通常是并列的。定义无序列表的基本语法格式如下：其中：(1) <ul></ul>标签用于定义无序列表。(2)每对<ul></ul>中至少应包含一对<li></li>。(3) <ul>和<li>都拥有type属性，用于指定列表项目符号。无序列表的type属性值如表2-6所示。不赞成使用无序列表的type属性，一般通过CSS样式属性替代。<li>与</li>之间相当于一个容器，可以容纳所有的元素。但是<ul></ul>中只能嵌套<li></li>，不允许直接在<ul></ul>标签中输入文字。2.有序列表有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列。网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。定义有序列表的基本语法格式如下：其中：(1) <ol></ol>标签用于定义有序列表。(2) <li></li>标签用于描述具体的列表项。(3)每对<ol></ol>中至少应包含一对<li></li>。有序列表中，除了type属性之外，还可以为<ol>定义start属性、为<li>定义value属性。有序列表的相关属性如表2-7所示。注意：(1)各浏览器对有序列表的type和value属性的解析不同。(2)不赞成使用<ol>、<li>的type、start和value属性，一般通过CSS样式属性替代。3.定义列表定义列表用于对术语或名词进行解释和描述。与无序和有序列表不同，定义列表的列表项前没有任何项目符号。下面介绍列表的嵌套应用。在使用列表时，列表项中也有可能包含若干子列表项。这种在列表项中定义子列表项的方法被称为列表的嵌套。列表嵌套的方法十分简单，我们只需将子列表嵌套在上一级列表项中即可。下面给出一个有序列表嵌套一个无序列表的格式。任务2-5使用超链接标签1.超链接在HTML中创建超链接非常简单，只需用<a></a>标签环绕需要被链接的对象即可。其语法格式如下：<ahref="跳转目标"target="目标窗口的弹出方式">文本或图像</a>其中：(1) href：用于指定链接目标的URL地址，当为<a>标签应用href属性时，它就具有了超链接的功能。(2) target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。需要注意的是：(1)暂时没有确定链接目标时，通常将<a>标签的href属性值定义为“#”(即hr

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论