第2讲HTML标记详解.ppt

1、第2讲关于HTML标记的介绍,1.HTML头标记, 实例1.1网页的机构 这是网页的主体，只有在这里面文字才会显示 ,头部和主体是网页中必不可少的标记,1.1头部中所嵌套的标签,1.标题标签 说明：这对标签是用来设置当前网页文件在浏览器的标题栏中显示的信息。每一个html文件都有一个标题。 语法： 请在此输入标题名 请看标题栏！ ,例2.1.1,2.设置基底网址 说明：在浏览器的左下角设置一个默认的URL地址，一般给出这个网页所在的网站地址。一个网页只能有一个标签。 基本语法：, 2007年1月16日博文视点。 baidu ,例2.1.2,3.设置网页默认文字样式 说明：在制作网页前，先行对网

2、页中的文本文字作出的基本定义，比如字体、字号、颜色等关于字体的样式定义。这个标签意在设置一个默认的文本字体样式。 语法：, , face属性用于设置字体的名称，可以是宋体、隶 体、楷体等； size属性用于设置字号的大小 可以为数值1-7 逐渐变大； color用于设置字体的颜色 可以为英文颜色的英文单词或者 #RGB色彩值。, 2007年1月16日，电子工业出版社博文视点公司召开了“博文视点三周年庆典暨颁奖晚会”。 ,例2.1.3,4.标签 说明：链接到文件 用法：,5.标签 定义： 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

3、标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。meta是html语言head区的一个辅助性标签。几乎所有的网页里都会用到。 标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。,name属性 name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。 语法格式是：；。 其中name属性主要有以下几种参数：,A、Keywords（关键字） 说明：keywords用来告诉搜索引擎你网页的

4、关键字是什么。 举例： B、description（网站内容描述） 说明：description用来告诉搜索引擎你的网站主要内容。 举例：,网站内容描述（description）的设计要点： 网页描述为自然语言而不是罗列关键词（与keywords设计正好相反）； 尽可能准确地描述网页的核心内容，通常为网页内容的摘要信息就是希望搜索引擎在检索结果中展示的摘要信息； 网页描述中含有有效关键词； 网页描述内容与网页标题以及主体内容有高度相关性； 网页描述的文字不必太多，一般不超过搜索引擎检索结果摘要信息的最多字数（通常在100中文字之内，不同搜索引擎略有差异）。,C、robots（机器人向导） 说明

5、：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。 content的参数有 信息参数为all：文件将被检索，且页面上的链接可以被查询； 信息参数为none：文件将不被检索，且页面上的链接不可以被查询； 信息参数为index：文件将被检索； 信息参数为follow：页面上的链接可以被查询； 信息参数为noindex：文件将不被检索，但页面上的链接可以被查询； 信息参数为nofollow：文件将被检索，但页面上的链接不可以被查询； 举例：,默认是all。,http-equiv属性 http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助

6、正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 http-equiv属性语法格式是： ；其中http-equiv属性主要有以下几种参数：,A、Expires（期限） 说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。 用法： 注意：必须使用GMT的时间格式。 B、Pragma(cache模式） 说明：禁止浏览器从本地计算机的缓存中访问页面内容。 用法： 注意：这样设定，访问者将无法脱机浏览。,C、Refresh（刷新） 说明：自动刷新并指向新页面。 用法：；（注意后面的引号，分别在秒数的前面和网址的后面） 注意

7、：其中的2是指停留2秒钟后自动刷新到URL网址。 D、content-Type（显示字符集的设定） 说明：设定页面使用的字符集。 用法：,E、content-Language（显示语言的设定） 用法：,2.body标签,body标签包括和这一对，所有在浏览器中显示的内容都要写在这对标签中间。而且这个标签也有很多属性，用来这种网页显示的一些属性。 例如：网页的背景，网页的边框，正文字体颜色等。,bgcolor设置网页的背景色 设置这个页面的背景颜色填充。一般比较个性的个人网站才会使用背景色。该属性的值和color属性的设置一样，可以用英文单词或者#RGB值。 基础语法： 设置页面背景色 ,bac

8、kground 设置网页背景图 可以为整个网页添加一个背景图片，以平铺的方式。 平铺方式：是以图片的原始大小来填充body的尺寸。这就可能造成如果照片较小而使得同张照片同时多次出现在浏览器界面中。 设置页面背景色 ,设置页面边距topmargin leftmargin rightmargin bottommargin 通过设置页边距属性来设置网页显示的内容与浏览器边框的距离。一般我们只设置top 和 left ，因为我们习惯从左上角来定义坐标。 基础语法： 这是我做的一个测试。 ,text设置正文颜色 设置网页中文字颜色，其中不包括超链接文本的颜色。与basefont中color属性不同的是，

9、text属性不能设置超链接文本的颜色。,课后综合练习,3.字体和段落,1.添加注释或 说明：为了增加网页代码的可读性，或者对一些关键代码的保护，我们会使用到这个注释标签。写在注释标签内的信息将不会被浏览器显示。注释语句可以出现在任何地方。 注意：注释对css样式代码无效。 基础语法： skdhfksjhfkshfk -,例：2.3.1,2.常用特殊转义字符,因为在html标记语言中例如 “ 等这样的字符是有实际应用含义的。所以如果想让它们在网页中显示出来，就必须借助一些特殊的字符来完成转义。,3.标题字体 型号为可变数值 说明： 设置标记中间的文字为标题样式。这些标题内容显示为黑体字。会在内容

10、前后自动插入一个空行，相当于使用了 标记。因此在一行中无法使用不同大小的字体。 基础语法： 今天天气很好 #=1,2,3,4,5,6 其中最大，最小,例：2.3.2,物理字体(Physical Style) 为文本内容加粗 设置文本内容为斜体 为文本内容加上下划线 打印机风格显示文本 设置文本为上标 设置文本为下标 为文本添加删除线 为文本添加删除线, x2-3x+2=0 解：x1=1;x2=2 ,例：2.3.3-sup,逻辑字体(Logical Style) 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 这些标签不太常用，没事

11、别乱用。要求知道就好。,标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。 标签和 标签一样，用于强调文本，但它强调的程度更强一些。 浏览器通常会以不同于 标签的方式来显示 标签中的内容，通常是用加粗的字体来显示其中的内容，这样用户就可以把这两个标签区分开来了。,标签用于表示计算机源代码或者其他机器可以阅读的文本内容。 标签定义键盘文本。 标签表示变量的名称，或者由用户提供的值。 标签是计算机文档中应用的另一个小窍门，这个标签经常与 和 标签一起使用，用来显示计算机编程代码范例及类似方面的特定元素。 对于网页上的技术性文档中，第一次出现的新的术语

12、进行描述时，将其与普通文本区别分开，而使用来强调。 表示包含的文本对某个参考文献的引用，比如书籍或杂志的名字。, 设置字体样式 编辑网页文字的样式，主要是设置文字的字体、字号、颜色等属性。一般编辑特定位置的文本，而设置的是整个网页中所有文字的样式，且为单标签。 基本语法： 要修饰的文字！ , 这是一个测试。 ,例 2.3.5, 预格式化 利用标记对网页中文字段落进行预格式化，可以将网页编辑过程中的回车和空格等格式进行定义。 基础语法： 登鹳鹊楼 由tab键也有空格键也有回车。 百日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。 ,居中显示文字 将网页中的文字居中对齐，甚至图片或其他对象都可

13、以用到居中对齐标记。最好把要居中的内容都放在一个和中间。 缩进文字 每使用一对 可以缩进5个字符。 忽略HTML标记 将网页中不想被浏览器识别解释的标签，可以写在标签中，把不被识别的标签变为文本的内容。, 设置水平线 在网页中可以通过来设置一条水平的直线。 语法说明： 关于width除了可以使用 px像素值，还可以使用百分比。它是以整个浏览器页面的宽度为基准的百分比。,4.文字布局,1.段落标签 设置位于和之间的文本独立成为一个段落。段落前后会空出一定的间隙作为段间距。我们把同时也是一个重要的css样式载体标签。 基础语法： 白日依山尽 黄河入海流 欲穷千里目 更上一层楼 ,注意：在老的HTM

14、L标准中可以是一个单标签，但在新的5.0规范中，必须成对出现。,2.换行标签 在HTML文件中直接敲打回车符进行换行是无效的。必须使用这个标签来代替回车符进行换行操作。 3.换行与不换行和 除了可以使用来实现换行外，还可以使用和结合使用进行控制是否换行。 基础语法： 请继续输入内容这里的文字将会发生神奇的变化 ,例：2.4.1,语法解释：在HTML文档中，和之间的文本内容将不会在换行，但在其中加入与后，则会让这两个标记之间的文本内容去自动适应浏览器的宽度，被浏览器强制换行。 注意： 1.和之间的嵌套关系不能乱套。 标签在外层。 2.对正常的换行没有任何影响。 3.并不会使得文本直接产生回车换行

15、的效果，而是当浏览器的宽度小于内的内容的宽度时，才会出现强制换行的效果。,4.层标签 在Dreamweaver编辑工具中把称之为层标签，其实是承载网页内容中块级别的容器元素。目的是将网页中的内容进行分块儿或分节，把文档分隔成为独立的、不同的部分。它可以用来当做对网页进行布局划分的工具，而且还可以作为设置文档样容器。 基础语法： This is a header This is a paragraph. What is this！,语法说明： 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 固有的唯一格式表现。可以通过 的 class 或 id 应用额外的样式。 属性：ali

16、gn 用来设置文本在容器内的水平对齐方式。 属性值有：left 、 right、center 属性：valign用来设置文本在容器内的垂直对齐方式。 属性值有：bottom、middle、top,5.列表标签 定义：所谓列表就是在网页之中，将内容进行有序列或者无序的罗列显示。例如：导航栏、目录。 列表类型：,5.1 定义列表 定义列表的标记也叫描述性列表，定义列表默认为两个层次，第一层为列表项标签，第二层为注释项标签。和标签通常是成对使用的。也可以一个列表项对应于几个解释项，这种方式很少用。 基础语法： 联系人：郑州大学软件学院 *老师 联系电话： 1234567890 ,注意：以上几个标签之

17、间的嵌套关系。 例：2.5.1,5.2 无序标签 无序列表使用的一对标签是，无序列表指没有进行编号的列表, 每一个列表项前使用。有一个属性type。这个属性有三个选项,这三个选项都必须小写: disc-实心园 circle-空心园 square-小方块 基础语法： 第一项 第二项 ,注意：如果不设置的type属性即默认情况下的会加“实心园”。如果想去掉列表前的符号修饰则需要通过css样式来实现。添加了list-style：none去掉了UL列表符号,无序列表实例： .b list-style:none; .b li wideth:100px; margin:0px 5px; float:lef

18、t; , 测试项目四 导航栏 测试项目四 导航栏 测试项目四 导航栏 ,例:2.5.2,5.3 有序列表 有序列表和无序列表的使用格式基本相同，它使用标签，每一个列表项前使用。列表的结果是带有前后顺序之分的编号。如果插入和删除一个列表项，编号会自动调整。 顺序编号的设置是由的两个属性type和start来完成的。start=编号开始的数字，如start=2则编号从2开始，如果从1开始可以省略，或是在标签中设定valuen改变列表行项目的特定编号，例如。type=用于编号的数字,字母等的类型，如type=a，则编号用英文字母,语法基础：, 第1项 第2项 第3项 ,例：2.5.3,6.超链接,6

19、.1连接标签. HTML文件中最重要的应用之一就是超链接，超链接是一个网站的灵魂，web上的网页是互相链接的，单击被称为超链接的文本或图形就可以链接到其它页面。超文本具有的链接能力,可层层链接相关文件，这种具有超级链能力的操作，即称为超级链接。超级链接除了可链接文本外，也可链接各种媒体，如声音、图象、动画，通过它们我们可享受丰富多采的多媒体世界。 基本语法： 超链接名称,href属性：定义了这个链接所指的目标地址；目标地址是最重要的，一旦路径上出现差错，该资源就无法访问 target属性:该属性用于指定打开链接的目标窗口，其默认方式是原窗口。 title：该属性用于指定指向链接时所显示的标题文

20、字。 连接名称：写在直接的连接名称 不仅可以是文本而且可以是图片，或者是热区。 name属性：该属性只有在同网页中设置书签时才有用，用于指定超链接跳转到本网页的某个段落。,6.2连接路径 每一个文件都有自己的存放位置和路径，理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。 URL(Uniform Resourc Locator)中文名字为“统一资源定位器”。指的就是每一个网站都具有的地址。同一个网站下的每一个网页都属于同一个地址之下，在创建一个网站的网页时，不需要为每一个连接都输入完全的地址，我们只需要确定当前文档同站点根目录之间的相对路径关系就可以了。,链接可以分以下三种： 绝

21、对路径 如： 相对路径 如：news/index.html 根路径 如：d/web/news/index.html,1.绝对路径：包含了标识INTERNET上的文件所需要的所有信息。文件的链接是相对原文档而定的。包括完整的协议名称，主机名称，文件夹名称和文件名称、 2.相对路经：是以当前文件所在路径为起点，进行相对文件的查找。一个相对的URL不包括协议和主机地址信息，表示它的路径与当前文档的访问协议和主机名相同，甚至有相同的目录路径。通常只包含文件夹名和文件名。甚至只有文件名。可以用相对URL指向与源文档位于同一服务器或同文件夹中的文件。此时，浏览器链接的目标文档处在同一服务器或同一文件夹下。

22、,如果链接到同一目录下，则只需输入要链接文件的名称。 要链接到下级目录中的文件。只需先输入目录名，然后加/，再输入文件名。 要链接到上一级目录中文件，则先输入./，再输入文件名。,6.3 超链接的应用 A.书签超链接（锚点超链接） 当网页中要浏览的文档篇幅过长不便阅读时，这个时候可以在特定的位置分节，并引入锚点，从而通过书签链接跳转到指定的文档分节位置。 语法基础： 链接到的目的地址(锚点)： 目标超链接名称 在同一页面要使用链接的地址： 超连链标题名称 在不同页面要使用链接的地址： 超链接标题名称 , 唐诗欣赏 李白 清平調三首 長干行 月下獨酌 清平調三首 長干行 月下獨酌 置顶浏览,例：

23、2.6.1,B 内部链接 在制作网站的过程中，每个网页都是独立的文件，要把这些分散独立的网页联系在一起，站内超链接是必须的工具。 内部链接主要是使用相对地址链接的。以站点文件夹为主目录，然后分类整理站内的各个资源文件。 语法结构：,第一章标签 字体样式标签,C外部链接 所谓外部链接主要是链接到非本网站内部的网页文件或者资源。一般我们需要给去绝对路径（全路径）。全路径就包含协议名，主机名，文件所在主机上的的位置的路径以及文件名。 基础语法： 百度 软件学院教学资源 描述文字,C.1创建邮件超链接实例。, 向笨笨猫的好友发送邮件(抄送笨笨猫) (调用系统的outlook),6.4 图形超链接 图像

24、的链接和文字的链接方法是一样的，都是用标签来完成，只要将标签放在和只见就可以了。用图像链接的图片的上有蓝色的边框，这个边框颜色也可以在标签中设定。 基础语法： ,6.5 热区超链接 在HTML中还可以把图片划分成多个热点区域，每一个热点域链接到不同网页的资源。这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接。这就是影像地图。要完成地图区域超链接要用到三种标签： 语法结构： 插入图片时要在标记中设置参数usemap=#图的名称 ismap，以表示对图像地图（图的名称）的引用；, 用标记设定图像地图的作用区域，并用name属性爲图像起一个名字，应该与usemap属性值相同

25、.可根据需要定义多少个热点区域 ,实例：2.6.5,7.图片标签,7.1 标签 插入图片标签的属性属 性 描 述 src 图像的url的路径 alt 提示文字 width 宽度通常只设为图片的真实大小以免失真,改变图片大小最好用图像工具. height 高度通常只设为图片的真实大小以免失真,改变图片大小最好用图像工具. dynsrc avi文件的url的路径 loop 设定avi文件循环播放的次数,loopdelay 设定avi文件循环播放延迟 start 设定avi文件的播放方式 lowsrc 设定低分辨率图片,若所加入的是一张很大的图片，可先显示图片。 usemap 映像地图 align

26、图像和文字之间的排列属性 border 边框 hspace 水平间距 vlign 垂直间距,7.2 普通照片 ,7.3 标签插入avi文件的属性 属 性 描 述 dynsrc 指定avi文件所在路径 loop 设定avi文件循环次数 loopdelay 设定avi文件循环延迟 start 设定文件播放方式fileopen/mouseover(网页打开时即播放/当鼠标滑到avi文件时播放）, 设定图像的边框 ,8 .表格标签,1.表格定义与作用。 在过去表格是网页布局所使用的工具。在整个网页设计中起到了举足轻重的地位，可后来div+css网页布局方式的流行，表格就没有太大作用了。但在小范围内，格

27、式密集的网页内容 我们还是会使用表格的。例如在电子商务网站中，产品信息详情描述。 表格定义的基本语法： 标 签 描 述 . 用于定义一个表格开始和结束,标 签 描 述 . 定义一行标签，一组行标签内可以建立多组由或标签所定义的单元格 . 定义表头单元格。表格中的文字将以粗体显示，在表格中也可以不用此标签，标签必须放在标签内 . 定义单元格标签，一组标签将将建立一个单元格，标签必须放在标签内 ,2.表格的属性,3.表格的内外边框属性frame、rules 。 （默认情况下不使用以上属性时，所有线条都存在。） rules指定的是表格的内边框,frame指定表格的外边框,rame的值描 述 box

28、显示整个表格边框 void 不显示表格边框 hsides 只显示表格的上下边框 vsides 只显示表格的左右边框 above 只显示表格的上边框 below 只显示表格的下边框 lhs 只显示表格的左边框 rhs 只显示表格的右边框,表格是按行和列（单元格）组成的，一个表格有几行组成就要有几个行标签，行标签用它的属性值来修饰，属性都是可选的。,4.标签的属性,属 性 描 述 height 行高 align 行内容的水平对齐 valign 行内容的垂直对齐 bgcolor 行的背景颜色 bordercolor 行的边框颜色 bordercolorlight 行的亮边框颜色 bordercolo

29、rdark 行的暗边框颜色,5.和的属性 和都是插入单元格的标签，这两个标签必须嵌套在标签内。是成对出现的。用于表头标签，表头标签一般位于首行或首列，标签之间的内容就是位于该单元格内的标题内容，其中的文字以粗体居中显示。数据标签就是该单元格中的具体数据内容,和标签的属性都是一样的，属性设定如下：,属 性 描 述 width/height 单元格的宽和高，接受绝对值（如 80）及相对值（如 80%）。 colspan 单元格向右打通的栏数 rowspan 单元格向下打通的列数 align 单元格内字画等的摆放贴，位置（水平），可选值为： left, center, right。,valign 单

30、元格内字画等的摆放贴 位置（垂直），可选值为： top, middle, bottom。 bgcolor 单元格的底色 bordercolor 单元格边框颜色 bordercolorlight 单元格边框向光部分的颜色 bordercolordark 单元格边框背光部分的颜色 background 单元格背景图片 nowrap 禁止单元格内容自动换行。 TD元素noWrap属性的行为与TD元素的width属性有关，在设置了table元素的width后： 如未设置TD宽度，则noWrap属性起作用； 如设置了TD宽度，则noWrap属性不起作用。 注：如果不设置table元素的width属性，n

31、owrap不起作用。,6.单元格合并（跨多行多列的单元格） 要创建跨多行、多列的单元格，只需在或中加入ROWSPAN或COLSPAN属性的属性值，默认值为1。表明了表格中要跨越的行或列的个数。 基础语法： 跨多列的语法： 跨多行的语法： #号代表数字，表示该单元格要跨的行数或者是列数。,课程练习, 学生基本信息 成绩 姓名 性别 专业 课程 分数 , 咚咚 男 计算机程序设计 68 喃喃 女 89 ,9.表单标签,表单在Web网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个Html文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容

32、就从客户端的浏览器传送到服务器上，经过服务器上的 ASP 或 PHP、JSP等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。这里我们只讲怎样使用Html标志来设计表单。表单是由窗体和控件组成的,一个表单一般应该包含用户填写信息的输入框,提交和按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。,1.表单的框架 一个表单用标志来创建。也即定义表单的开始和结束位置，在开始和结束标志之间的一切定义都属于表单的内容。标志具有action、method和target属性 Form 标签的属性,一个网页最好使用一个表单,2.输入型表单控件标签 这个标

33、签用来把浏览器端的控件加载到html文档当中，此标签是一个单标签，没有结束标记。只是指定一个输入区域，至于使用什么样的输入控件还要通过其type属性来设置，该标签必须写在之间。 语法格式： ,type属性的值,3.常见的公共属性 除了必不可少的type属性外，还有一些公有的属性。 name：指定控件的名字。 Id：指定控件的唯一编号。 Value：指定控件的默认值，或者控制获取的值。 event：控件所具有的js触发事件 Width，height：指定控件的大小。,4.控件的特有属性和事件 text控件输入框控件 语法： (1)name 定义控件名称 (2)value 指定控件初始值,该值就是

34、浏览器被打开时在文本框中的内容 (3)size 指定控件宽度,表示该文本输入框所能显示的最大字符数。 (4)maxlength 表示该文本输入框允许用户输入的最大字符数。 事件： (1)onchang 当文本改变时要执行的函数 (2)onselect 当控件被选中时要执行的函数 (3)onfocus 当文本接受焦点时要执行的函数,b. password控件密码输入框 属性及事件的用法和文本输入框一样 c . Button控件普通按钮 (1)name 指定按钮名称 (2)value 指定按钮表面显示的文字 (3)onclick 指定单击按钮后要调用的javascript事件 (4)onfocus 指定按钮接受焦点时要调用的函数 d. Submit按钮提交按钮 提交到服务器的按钮,当这个按钮被点击时,就会连接到表单form属性action指定的url地址。,e. reset按钮控件重置按钮 将表单内所有控件中的内容全部清空。 f. Image按钮控件图片按钮 使用图像来代替Submit按钮,图像的源文件名由src属性指定,用户点击后,表单中的信息和点击位置的X、Y坐标一起传送给服务器 (1)name 指定图