搜索
网页设计与制作应用教程机械工业出版社同名教材配套电子课件2009.4第2章XHTML基础2.1XHTML简介2.2创建简单网页文件2.3XHTML文档的基本结构与标记2.1XHTML简介XHTML的产生HTML是HyperTextMarkupLanguage（超文本置标语言）的缩写，它是构成Web页面，表示Web页面的符号标记语言。XHTML1.0是一种在HTML4.0基础上优化和改进的新语言，其目的是实现基于XML的应用。XHTML是一种增强了的HTML，它的可扩展性和灵活性将更适应未来网络应用的需求。通过XHTML，将所需表达的信息按某种规则写成XHTML文件，再通过专用的浏览器来识别，并将这些XHTML文件翻译成可以识别妁信息，就是所见到的网页。XHTML的优点XHTML文档遵从XML标准在XHTML文档中可使用更多的应用程序2.1XHTML简介XHTML代码规范1.所有的标记都必须有一个相应的结束标记2.所有标签的元素和属性的名字都必须使用小写3.所有的标记都必须合理嵌套4.所有的属性必须用引号括起来5.特殊符号“”、“”和“＆”用编码表示6.每个属性必须赋值2.2创建简单网页文件创建一个简单的网页，可以通过网页编辑器来编辑网页、并保存，生成XHTML文件。打开记事本。单击Windows的“开始”按钮，在“程序”菜单的“附件”子菜单中单击“记事本”命令。创建新文件，并按XHTML语言规则编辑。在“记事本”窗口中输入XHTML代码，代码内容。保存网页。打开“记事本”的“文件”菜单，选择“保存”命令。此时将出现“另存为”对话框，在“保存在”下拉列表框中选择文件要存放的路径，在“文件名”文本框输入以“html（或htm）”为后缀的文件名，最后单击“保存”按钮，生成网页文档。在资源管理器窗口找到网页文档，双击文档图标，随即在打开的IE浏览器窗口中可以浏览到网页内容。2.3XHTML文档的基本结构与标记基本标记及其属性1．标记2．标记的属性格式为：标记受标记影响的内容/标记格式为：标记属性1=＂属性值1＂属性2=＂属性值2＂…被标记的内容/标记2.3XHTML文档的基本结构与标记XHTML的基本结构XHTML文档是一种纯文本格式的文件，XHTML文档的基本结构为：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=gb2312/title我的网页标题/title/headbody网页内容/body/html2.3XHTML文档的基本结构与标记1．XHTML文档标记html…/html2．XHTML文档头标记head…/head3．XHTML文档标题标记title＞…/title4．XHTML文档主体标记body…/body格式为：bodybgcolor=＂色彩值＂background=＂图像文件名＂text=＂色彩值＂link=＂色彩值＂vlink=＂色彩值＂alink=＂色彩值＂leftmargin=＂像素值＂topmargin＝＂像素值＂网页的内容…/body说明:说明：（1）主体位于头部之后，以body为开始标记，/body为结束标记。它定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中。（2）body标记有很多属性，可以定义页面的背景图像、背景色彩、文字色彩、超文本链接的色彩等。这些属性用于设定网页的总体风格。bgcolor：设置网页的背景色。text：设置非可链接文字的色彩。link：设置尚未被访问过的超文本链接的色彩，默认为蓝色。alink：设置超文本链接在被访问瞬间的色彩，默认为蓝色。vlink：设置已被访问过的超文本链接的色彩，默认为蓝色。background：设置网页的背景图像，bgproperties＝＂fixed＂可使背景图像固定。leftmargin：设置页面左边的空白，单位为像素值。topmargin：设置页面上方的空白，单位为像素值2.3XHTML文档的基本结构与标记2.3XHTML文档的基本结构与标记段落标记2.强制换行br/1.注释标记！--…--格式为：！--注释内容--3.段落标记p…/p格式为：palign=＂对齐方式＂文字/p格式为：文字br/4.定位标记div…/div格式为：divalign＝＂对齐方式＂文本、图像或表格/div说明:属性align用来设置段落文字在网页上的对齐方式:left（左对齐）、默认为left。center（居中）right（右对齐）。2.3XHTML文档的基本结构与标记5.水平线标记hr/格式为：＜hralign=“left|center|right”size=“横线粗细”width=＂横线长度＂color=＂横线色彩＂noshade＝＂noshade＂说明：size：设定线条粗细，以像素为单位，默认值为2。width：设定线段长度，可以是绝对值（以像素为单位）或相对值（相对于当前窗口的百分比）。所谓绝对值，是指线段的长度是固定的，不随窗口尺寸的改变而改变。所谓相对值，是指线段的长度相对于窗口的宽度而定，窗口的宽度改变时，线段的长度也随之增减，默认值为100%，即始终填满当前窗口。color：设定线条色彩，默认为黑色。色彩可以用相应的英文名称或以“#”引导的一个十六进制代码来表示，见表2-1。noshade：设定线条为平面显示（没有三维效果），若省略则有阴影或立体效果。2.3XHTML文档的基本结构与标记色彩色彩英文名称十六进制代码黑色block#000000蓝色blue#0000ff棕色brown#a52a2a青色cyan#00ffff灰色gray#808080绿色green#008000乳白色Ivory#fffff0橘黄色orange#ffa500粉红色pink#ffc0cb红色red#ff0000白色white#ffffff黄色yellow#ffff00深红色crimson#cd061f淡紫色lavender#dbdbf8色彩代码表2.3XHTML文档的基本结构与标记实例【2-1】设置文字格式1．标题文字标记h#…/h#说明：（1）“#”用来指定标题文字的大小，取1～6的整数值，取1时文字最大，6时最小。（2）属性align用来设置标题在页面中的对齐方式，取值为：left（左对齐）、center（居中）、right（右对齐），默认为left。（3）h#…/h#标记默认显示宋体，在一个标题行中无法使用不同大小的字体。（4）与用title…/title定义的网页标题不同，标题格式显示在浏览器窗口内，而不显示在浏览器的标题栏中。格式为：h#align=对齐方式标题文字/h#2.3XHTML文档的基本结构与标记2．设置文字大小格式为：fontsize=数字face=字体名color=颜色被设置的文字/font说明：（1）size用来设置文字的大小。数字的取值范围从1～7，size取1时最小，取7时最大。（2）face用来设置字体。当文字是汉字时，格式中的“字体名”可以为如黑体、宋体、楷体_GB2312、仿宋_GB2312、隶书。当文字为英文时，字体名可以为TimesNewRoman等约50种字体。（3）Color用来设置文字的颜色。（4）font和hn标记都可以设置文字的大小，二者的区别，见表2-2。另外，当font中的size取7时的文字比h1要大。2.3XHTML文档的基本结构与标记表2-2font与hn比较表标记对象用法文字大小n的取值font一段文章、语言、短语fontsize=数字文字/fontn=1~7取1最小hn标题hn文字/hnn=1~6取6最小2.3XHTML文档的基本结构与标记设置文字的颜色可以用body标记或者font标记。（1）body标记中的text属性bodytext=颜色文字/bodybody与/body标记所包含的内容是HTML文件的主体，所以它对整个文件起作用。（2）font标记中的color属性fontcolor=颜色被设置的文字/fontfont标记中的color属性可以作用于其后面的文字，可以在文件中多处设定。当body与font同时对文字颜色进行定义时，font标记优先。3．设置文字颜色2.3XHTML文档的基本结构与标记实例【2-2】2.3XHTML文档的基本结构与标记超链接1.锚点标记a…/a锚点（anchor）标记由a定义，它在网页上建立超文本链接。通过单击文本或图像，可以从此处转到另一个链接资源（目标资源），这个目标资源有惟一的地址（URL）。格式为：ahref=地址target=打开窗口方式热点/a说明：（1）href属性为超文本引用，它的值为一个URL，是目标资源的有效地址。如果要创建一个不链接到其它位置的空链接，可用“#”代替URL，即ahref＝#＞热点/a（2）target属性设定超级链接被单击后所打开窗口的方式，可选值为：_blank,_parent,_self和_top。2.3XHTML文档的基本结构与标记2．指向其它页面的链接（1）链接到同一目录内的网页文件格式为：ahref=＂目标文件名.htm＂热点文本/a（2）链接到下一级目录中的网页文件格式为：ahref=＂子目录名／目标文件名.htm＂热点文本（3）链接到上一级目录中的网页文件ahref=＂../目标文件名.htm＂热点文本/a其中，”../”表示退到上一级目录。（4）链接到同级目录中的网页文件ahref=＂../子目录名／目标文件名.htm＂热点文本/a表示先退到上一级目录，然后再进入目标文件所在的目录。格式为：格式为：3．指向本页中的链接要在当前页面内实现超链接，需要定义两个标记：一个为超链接标记，另一个为书签标记。（1）超链接标记格式为：ahref＝＂＃记号名＂热点文本/a即单击热点文本，将跳转到记号名开始的文本。（2）书签标记用＜a＞标记对该文本做一个记号。如果有多个链接，不同目标文本要设置不同的书签名。书签名在a的name属性中定义。格式为：aname=＂记号名＂目标文本附近的字符串/a2.3XHTML文档的基本结构与标记4．指向下载文件的链接如果链接到的文件不是HTML文件，则该文件将作为可下载文件。格式为：ahref=＂可下载文件名＂热点文本/a5．指向电子邮件的链接单击指向电子邮件的链接，将打开默认的电子邮件程序，如Foxmail、OutlookExpress等，并自动填写邮件地址。格式为：ahref＝＂mailto：E-mail地址＂热点文本/a2.3XHTML文档的基本结构与标记实例【2-3】1.图像1．设置图像标记img使用图像标记可以把一幅图像加入到网页中。用图像标记还可以设置图像的替代文本、尺寸、布局等属性。格式为：imgsrc=＂图像文件名＂alt=＂简单说明＂width=＂图像宽度＂height=＂图像高度＂border=＂边框宽度＂hspace=＂水平方向空白＂vspace=＂垂直方向空白＂align=＂环绕方式|对齐方式＂/说明：src：指出要加入图像的文件名，并且指出文件存放的路径，即“图像文件的路径＼图像文件名”。alt：在浏览器尚未完