第2章 网页制作基础语言――HTML

网页设计与制作教程王尧2.1HTML简介2.2HTML文档的基本结构2.3网页文件的创建过程2.4段落标记2.5文字标记2.6超链接2.7图片2.8列表2.9表格2.10字幕、音频和视频2.11框架（多窗口页面）2.12表单第2章网页制作基础语言——HTMLHTML是HypertextMarkupLanguage（超文本标记语言）的缩写，是一种为普通文件中某些字句加上标识的语言，其目的在于运用标记（tag）对文件达到预期的效果。它是构成Web页面（Page），用来表示Web页面的符号标记语言。通过HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件翻译成可以识别的信息，就是所见到的网页。HTML语言是建立网页的规范或标准，从它出现发展到现在，规范不断完善，功能越来越强。但是依然有缺陷和不足，人们仍在不断的改进它，使它更加便于控制和有弹性，以适应网络上的应用需求。2000年，W3C组织公布发行了XHTML1.0版本。XHTML1.0是一种在HTML4.0基础上优化和改进的新语言，目的是基于XML应用。XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求。2.1HTML简介1.标记HTML文档由标记和被标记的内容组成。标记（tag）能产生所需的各种效果。格式为：标记受标记影响的内容/标记例如，标题标记title表示为：title我的第一个网页/title2.标记的属性标记只是规定这是什么信息，或是文本，或是图片，但怎样显示或控制这些信息，就需要在标记后面加上相关的属性来表示，每个标记有一系列的属性。格式为：标记属性1=属性值1属性2=属性值2…受影响的内容/标记例如，字体标记font有属性size和color等。fontsize=3color=red属性示例/font2.2HTML文档的基本结构2.2.1标记及其属性HTML文档是一种纯文本格式的文件，HTML文档的基本结构为：htmlheadtitle网页的标题/title/headbody网页的内容/body/html2.2HTML文档的基本结构2.2.2HTML的基本结构1、HTML文档标记html……/html2、HTML文档头标记head……/head这一标记在HTML文档中不是必须的，若无，浏览器也能照常解释文件。3、HTML文档标题标记title……/title这一标记定义的内容不在浏览器窗口显示，而是显示在浏览器的标题栏中。4、HTML文档主体标记body……/body这一标记定义了网页上显示的主要内容与显示格式，是整个网页的核心。Bgcolor网页的背景色Text设置非可链接文字的颜色Link设置尚未被访问过的超链接的颜色，默认为蓝色Alink设置超链接被访问瞬间的颜色，默认为蓝色Vlink设置已被访问过的超链接的颜色，默认为蓝色Background设置网页的背景图像Leftmargin设置网页左边的空白，单位为像素值Topmargin设置网页上方的空白，单位为像素值用最简单的“记事本”来编辑网页。①打开记事本。单击Windows的“开始”按钮，在“程序”菜单中的“附件”子菜单中单击“记事本”。②创建新文件，并按HTML语言规则编辑。在“记事本”窗口中输入HTML语言，输入的内容。③保存网页。打开“记事本”的“文件”菜单，选择“保存”。此时将出现“另存为”对话框，在“保存在”下拉列表框中选择文件要存放的路径；在“文件名”文本框输入以.html或.htm为后缀的文件名，如mypage1.html；在“保存类型”下拉列表框中选择“文本文档”。最后单击“保存”按钮，将记事本中的内容保存在磁盘中。如果希望这一页是网站的首页（主页），想让浏览者输入网址后，就显示这一页的内容，可以把这个文件设为默认文档，文件名为index.html或index.htm。2.3网页文件的创建过程2.3.1编辑和保存网页通过编辑可以得到一个.html文件，要想使这个文档显示出网页的样子，就要使用浏览器进行预览。有两种方法可以打开.html网页文件。1.用浏览器打开网页在浏览后会有不满意的地方，此时可重新在“记事本”中打开该.html文件修改；或者在浏览器中直接打开源文件（在IE中，从“查看”菜单中的“源文件”中打开）。修改后，单击“文件”菜单中的“保存”命令。如果浏览器没有关闭，要在浏览器中看到修改后的效果，不必重新打开该文件，直接单击浏览器工具栏上的“刷新”按钮。2.在“Windows资源管理器”或“我的电脑”中打开在“Windows资源管理器”或“我的电脑”中双击要打开的.html文件，这时将直接在默认的浏览器中打开该.html文件。2.3网页文件的创建过程2.3.2预览网页注释标记的格式为：!--注释内容--注释并不局限于一行，长度不受限制。结束标记与开始标记可以不在一行上。2.4.2强制换行和不换行标记br、nobr.../nobr要用HTML的标记来强制换行、分段。br放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。强制换行标记的格式为：文字br不换行标记可令文字不能因太长使浏览器无法显示而换行，它对住址、数学公式、一行数字等尤其有用。其格式为：nobr文字/nobr【例2-2】2.4段落标记2.4.1注释标记!--...--段落标记放在一个段落的头尾，用于定义一个段落。p.../p标记不但能使后面的文字换到下一行，还可以使两段之间多一空行，相当于两个brbr标记。段落标记的格式为：palign=left|center|right文字/p一个段落标记p可以看作是两个br标记，即brbr。其中属性align用来设置段落文字在网页上的对齐方式：left（左对齐）、center（居中）和right（右对齐）。缺省时默认为left。格式中的“|”表示“或者”，即多中选一。【例2-3】2.4段落标记2.4.3段落标记p.../p设定文字、图像、表格的摆放位置。当在许多段落中设置对齐方式时，常使用div…/div标记。定位标记的格式为：divalign=left|center|right文本、图像或表格/div其中属性align用来设置文本块、一段文字或标题在网页上的对齐方式：left、center和right。缺省时默认为left。【例2-4】2.4段落标记2.4.4定位标记div…/divdiv标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。在页面中插入一条水平标尺线，可以使不同功能的文字分隔开，看起来整齐、明了。当浏览器解释到HTML文档中的hr标记时，会在此处换行，并加入一条水平线段。线段的样式由标记的参数决定。水平线标记的格式为：hralign=left|center|rightsize=横线粗细width=横线长度color=横线色彩noshadesize设定线条粗细，以像素为单位，默认为2。width设定线段长度，可以是绝对值（以像素为单位）或相对值（相对于当前窗口的百分比）。color设定线条色彩，默认为黑色。可以采用色彩的名称。色彩可以用相应英文单词或以“#”引导的一个十六进制数代码来表示。【例2-5】2.4段落标记2.4.5水平线标记hr在页面中，标题是一段文字内容的核心，所以总是用加强的效果来表示。网页中的信息可以分为主要点、次要点，可以通过设置不同大小的标题，为文章增加条理。标题文字标记的格式为：h#align=left|center|right标题文字/h##用来指定标题文字的大小，#取1～6的整数值，取1时文字最大，6时文字最小。属性align设置标题在页面中的对齐方式：left、center或right。缺省时默认为left。h#…/h#标记缺省显示宋体，在一个标题行中无法使用不同大小的字体。与用title…/title定义的网页标题不同，标题格式显示在浏览器窗口内，而不显示在浏览器的标题栏中。【例2-6】2.5文字标记2.5.1标题文字标记h#…/h#在网页中为了增强页面的层次，其中的文字可以用不同的大小、字体、字型、色彩。用font标记设置字号（font被W3C列为不建议使用的标记，以后将学习用CSS来设定字体）。设置文字大小的格式为：fontsize=数字face=字体名color=色彩被设置的文字/fontfont标记可设定文字的字体、字号和色彩。size用来设置文字的大小。数字的取值范围从1～7，size取1时最小，取7时最大。face用来设置字体。如黑体、宋体、楷体_GB2312、隶书、TimesNewRoman等。color用来设置文字色彩。【例2-7】【例2-8】【例2-9】【例2-10】2.5文字标记2.5.2字体标记font.../font超链接（Hyperlink）是网页互相联系的桥梁，超链接可以看作是一个“热点”，它可以从当前网页定义的位置跳转到其他位置，包括当前页的某个位置、Internet或本地硬盘或局域网上的其他文件，甚至跳转到声音、图片等多媒体文件。浏览网页是超链接最普遍的一种应用，通过超链接还可以获得不同形态的服务，如文件传输、资料查询、电子邮件、远程访问等。当网页包含超链接时，网页中的外观形式为彩色（一般为蓝色）且带下划线的文字或图片。单击这些文本或图片，可跳转到相应位置。鼠标指针指向超链接的显示文本或图片时，将变成手形。超文本链接使用锚点标记a来定义。2.6超链接锚点（anchor）标记由a定义，它在网页上建立超文本链接。通过单击一个词、句或图片，可从此处转到另一个链接资源（目标资源），这个目标资源有惟一的地址（URL）。具有以上特点的词、句或图片就称为热点。a标记的格式为：ahref=URLtarget=打开窗口方式热点/ahref属性为超文本引用，它的值为一个URL，是目标资源的有效地址。如果要创建一个不链接到其他位置的空超链接，可用“#”代替URL，即ahref=#热点/a。2.6超链接2.6.1锚点标记a.../atarget属性设定链接被单击后结果所要打开窗口的方式。可选值为：_blank，_parent，_self，_top。•_blank-在一个新的未命名的窗口载入文档•_self-在相同的框架或窗口中载入目标文档•_parent-把文档载入父窗口或包含了超链接引用的框架的框架集•_top-把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架1.链接到同一目录内的网页文件链接到同一目录内的网页文件的格式为：ahref=目标文件名.html热点文本/a【例2-11】2.链接到下一级目录中的网页文件链接到下一级目录中网页文件的格式为：ahref=子目录名/目标文件名.html热点文本/a3.链接到上一级目录中的网页文件链接到上一级目录中网页文件的格式为：ahref=../目标文件名.html热点文本/a其中“../表示退到上一级目录中。4.链接到同级目录中的网页文件链接到同级目录中网页文件的格式为：ahref=../子目录名/目标文件名.html热点文本/a2.6超链接2.6.2指向其他页面的链接要在当前页面内实现超链接，需要定义两个标记：一个为超链接标记，另一个为书签标记。超链接标记的格式为：ahref=#记号名热点文本/a书签就是用a标记对该文本作一个记号。格式为：aname=记号名目标文本附近的字符串/a【例2-12】如果要建立指向其他页面某处的文本，格式为：ahref=URL#记号名热点文本/a要在跳转到的位置处加上链接标记：a