页面静态标记(A).ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,201003,*,页面静态标记,(A),主要内容,HTML,简介,HTML,文件编写工具,一个,HTML,文件的简单例子,HTML,的相关术语,HTML,文件的基本结构,及其相关标记,及其相关标记,标记,文字显示标记,段落控制标记,图像和超链接标记,列表和格式预定标记,201003,2,HTML,简介,HTML,是,HyperText,Markup Language,的缩写,一个,HTML,文件(即网页)是一些,文本,再加上一些,标记符,(,markup tags),组成,标记符的作用是告诉浏览器如何显示,HTML,文件中的文本,HTML,文件必须有.,htm,或者.,html,的文件后缀,HTML,文件可以用简单文本编辑工具编写，如,Windows,中的记事本，也可以使用其他页面开发工具，如,Dreamweaver、FrontPage,、,等,201003,3,HTML,文件编写工具,(1),FrontPage,Dream Weaver,Notepad(,记事本,),201003,4,HTML,文件编写工具,(2),Notepad,记事本,201003,5,静态页面设计,一个简单例子,网页的标题,这是我的第一个网页,此处文本为斜体,201003,6,HTML,相关术语（1）,Tag(,标记符),HTML tag(,标记符)是用来标记,HTML element(,元素)的,HTML,标记符由符号“,”合围起来,标记符一般成对出现(围堵标记)比如,和,，,也有单独出现(空标记,),的标记如,对于成对出现的标记，第一个称为,start tag(,起始标记符)，接着出现的称为,end tag(,结尾标记符),在起始和结尾标记符之间的称,element content(,为元素内容),HTML,标记符大小写不敏感,和,意义相同,201003,7,HTML,相关术语（2）,element(,元素),此处的,HTML,元素开始于:,此元素的内容是：,此处文本为斜体,此元素以结束于:,此处标记符,的作用再于说明此处的元素内容以斜体显示,此处文本为斜体,这是我的第一个网页,此处文本为斜体,201003,8,HTML,相关术语（3）,Tag attributes(,标记的属性),标记可以具有属性，属性可以给,HTML,元素提供更多信息,例如在,标记中可以有,bgcolor,属性，这个属性说明浏览器显示区域的颜色。若使,bgcolor,取值为,red,，,则浏览器显示区域呈现红色。,例如,属性的写法为：属性名称=“属性值,”,属性写在起始标记中,201003,9,HTML,基本架构（1）,网页文件的开始,网页文件的第一部分，,用于说明文件本身信息。,网页文件的第二部分，,用于显示在浏览器的部分。网页文件的结束,201003,10,HTML,基本架构（2）,整份文件处於标记,与,之间。,用以说明这是,html,文件，让浏览器认出并正确处理此,html,文件。,文件分两部分，由,至,称为,头部,，,至,称,体部,。基本上两者各有适用的标记。,201003,11,头部及其相关标记（1）,和,首部标记,和,位于,Web,页的开头，其中不包括,Web,页的任何实际内容，而是提供一些与,Web,页有关的特定信息。,和,在首部标记符中，最基本、最常用的标记符是标题标记,和,，,用于定义网页的标题。,当网页在浏览器中显示时，网页标题将在浏览器窗口的标题栏中显示。,演示,网页标题,201003,12头部及其相关标记（2）,和,样式的定义写在,和,之间,CSS,一节详细讲述。,用于说明与网页有关的信息，如：说明网页的制作工具、文件作者等信息。,201003,13,标记,和,标记,体部文标记符,和,包含,Web,页的内容，同时也可以配置一些有用的页面属性，如：,text,=#000000,用以设定文字颜色。,#000000,代表黑色，亦可以采用颜色的名称，即,text=,black,。,background,=bg1.gif,设定背景,纸。,GIF,或,JPEG,皆可。,bgcolor,=“#FFFFFF”,设定背景颜色。,topmargin,=2,设定整份文件显示画面的,上,方边沿空间。只适用於,IE,leftmargin,=2,设定整份文件显示画面的,左,方边沿空间，单位为像素。,只适用於,IE,201003,14,文字显示标记(1),文字控制标记,设置文字的大小,在网页中为了增强页面的层次，其中的文字可以用不同的大小、字体、字型、颜色。用,标记设置字号。设置文字的大小的格式为：,被设置的文字,标记可设定文字的字体、字号和颜色。其中属性：,size,用来设置文字的大小。数字的取值范围从 17，,size,取 1 时最小，取 7 时最大。,face,用来设置字体。如黑体、宋体、楷体_,GB2312、,隶书、,Times New Roman,等。,color,用来设置文字颜色演示,201003,15,文字显示标记(2),.,标题,在页面中，标题是一段文字内容的核心，所以总是用加强的效果来表示。网页中的信息可以分为主要点、次要点，可以通过设置不同大小的标题，为文章增加条理。标题文字标记的格式为：,标题文字,属性,align,用来设置标题在页面中的对齐方式：,left,（,左对齐）、,center,（,居中）或,right,（,右对齐）。属性,n,用来指定标题文字的大小。,n,可以取 16 的整数值，取 1 时文字最大，6 时文字最小。,演示,201003,16,文字显示标记(3),斜体显示标记,粗体显示标记,加下划线显示标记,下标字体标记,上标字体标记,大字体标记,小字体标记,文字居中已经不再使用,演示,201003,17,段落控制标记（1）,注释标记,像很多电脑语言一样，,HTML,文件也提供注解功能。浏览器会忽略此标记中的文字（可以是很多行）而不作显示。一般使用目的是为文中不同部分加上说明，方便日后阅读和修改。注释标记的格式为：,注释并不局限于一行，长度不受限制。结束置标符不必与开始置标符在同一行上。,演示,201003,18,段落控制标记（2）,换行标记,放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。由于浏览器会自动忽略原始码中空白和换行的部分，这使,成为最常用的标记之一。,演示,从本例可以看出，,HTML,语言忽略多余的空格，,最多只空,一个空格,。在需要空格的位置，可以,用“&,nbsp,;”,插入一个空格。用“&,nbsp,;”,可以,在文本中加入任意多个空格。,201003,19,段落控制标记（3）,段落标记,在,HTML,文档中，无法用多个回车、空格、,键来调整文档段落的格式。要用,HTML,的,标记来强制换行、用,标记分段。,段落标记放在这段文字的末尾，就定义了一个新段落的开始。,标记不但能使后面的文字换到下一行，还可以使两段之间多一空行。,属性,align=“,对齐方式”可选参数为:,left,center,right,演示,201003,20,段落控制标记（4）,分隔线,在页面中插入一条水平标尺线(,Horizontal Rules)，,可以使不同功能的文字分隔开，看起来整齐、明了。当浏览器解释到,HTML,文件中的,标记时，会在此处换行，并加入一条水平线段。线段的样式由标识的参数决定。水平线标记的格式为：,属性,align,设定横线放置的位置，,属性,size,设定线条粗细，以像素为单位，默认为 2。,属性,width,设定线段长度，可以是绝对值（以像素为单位）或相对值,属性,color,设定线条颜色，默认为黑色。,演示,201003,21,图像标记,图像标记的基本使用,使用图片标记，可以把一幅图片加入到网页中。用图片标记还可以设置图片的替代文本、尺寸、布局等属性。,格式为：,src,属性用于指定要插入的图像的文件名（包括路径）,如:,alt,属性表示图像的简单文本说明,width,和,height,属性,border,控制图像边框宽度,演示1,演示2,201003,22,超链接标记(1),文字超链接,标记符用于创建超链接(结束标记符不能省略)，,通过单击一个词、句或一段话，可从此处转到另一个链接资源,。,格式为:文字,href,属性,属性,href,为超文本引用（,h,ypertext,ref,erence），,它的值为一个,URL，,是目标资源的有效地址。,target,属性 设定链接被按后结果所要显示的窗口。可选值为：_,blank，_self，_parent,等。,演示,201003,23,超链接标记(2),图像超链接,演示,锚点链接,使用锚点超链接时，首先需要定义锚点，然后在超链接中指向该锚点。,定义锚点应使用,指向锚点：,link,演示,电子邮件链接,演示,201003,24,列表标记和预定格式标记,(1),列表标记,有序列表,（,Ordered list）,也称数字式列表，它是一种在表的各项前显示有数字或字母的缩排列表。定义有序列表需要使用有序列表标记符,和列表项,（,List item）,标记符,（,结束标记符可省略）。,演示,无序列表,（,Unordered list）,是一种在表的各项前显示有特殊项目符号的缩排列表。定义无序列表需使用无序列表标记符,和列表项标记符,。,演示,201003,25,列表标记和预定格式标记,(2),预定义格式标记,演示1,演示2,201003,26,