《网页html代码详解解读》由会员分享，可在线阅读，更多相关《网页html代码详解解读（70页珍藏版）》请在金锄头文库上搜索。
1、第2章HTML语言本章要点：HTML的基础知识常用HTML标记XHTML2.1HTML简介nHTML（HyperTextMarkupLanguage）称为超文本标记语言超文本标记语言，是一种描述文档结构的标记语言，它是一种应用非常广泛的网页格式网页格式，也是最早被用来显示Web页的语言之一。它与操作系统平台的选择无关，只要有浏览器浏览器就可以运行HTML文档，显示网页内容。nHTML文档类似于.txt文本文件，不同的是，文档里还包含一种被称为标记标记的符号。2.1.1标记的格式1.标记的功能n控制网页的显示方式2.标记的构成n由、及括在其中的命令字符串组成nn双标记：双标记：、成对出现，如、n
2、n单标记：单标记：，如、2.1.1标记的格式3.标记的使用方法(1)文本或超文本(2)文本或超文本例：你好！(3)2.1.1标记的格式n书写HTML代码时应注意注意以下几点：1)HTML标记及属性中字母不区分大小写，如与对浏览器来说是完全相同的。2)标记名与左尖括号之间不能留有空白，如是错误的。3)属性要写在开始标记的尖括号中，放在标记名后，并且与标记名之间要有空白；多个属性之间也要有空白；属性值最好用单引号或双引号引起来，引号一定要是英文的引号，不能是中文引号。4)结束标记要书写正确，不能忘掉斜杠。2.1.2HTML文档结构表2-1html文件构成骨架文件开始头部标题名其他头部内容定义标记主
3、体网页内容（文本、图像等)文件结束2.1.2HTML文档结构1.文件头部nn、之间定义，内容可包括标题名、文本文件地址、创作者信息等网页信息说明。n文件头部还可包括一些其他标记：定义网页的标题；：说明一些与文档相关的信息，如作者、关键内容、所用语言等；2.1.2HTML文档结构2.文件主体n位于头部之后，在、之间定义，定义了网页上显示的主要内容和显示格式。n文件主体内可包括众多其他标记。2.1.2HTML文档结构n标记常用属性属性：background：设置网页背景图案。例如bgcolor：设置网页背景色。例如text：设置文本颜色，默认黑色。link：设置尚未被访问过的超文本链接的颜色。vl
4、ink：设置已被访问过的超文本链接的颜色。2.1.2HTML文档结构3.注释n格式：n注释以“”结束，注释的内容会被浏览器忽略。利用注释可以为HTML文档的不同部分加上说明，方便日后修改，也可以利用注释为HTML文档加上版权声明。n注释可有多行。2.1.3HTML的制作n制作HTML文档需要两个基本工具，一个HTML编辑器，一个Web浏览器。nHTML编辑器可分为两类：基于文本或代码的编辑器和所见即所得(WYSIWYG)编辑器。前者在创建文档时只能看到HTML代码，后者在编辑时即显示出类似于最终浏览器窗口显示的结果。nWeb浏览器用来浏览HTML文档，在Windows操作系统上，常用的浏览器是
5、MicrosoftInternetExplorer，也常简称为IE。2.1.3HTML的制作用记事本制作网页的步骤如下：1)打开记事本。2)在记事本中输入代码：我的第一个网页这是我用记事本做的第一个网页，我会努力学好HTML！2.1.3HTML制作工具3)保存文件：HTML文件的扩展名为.htm、.html、.aspx或asp，因为有些Web服务器对中文文件名不能很好支持，所以文件名中尽量不要使用汉字。4)用浏览器打开上步保存的文件，即可看到如图2.1所示的页面。图2.1第一个网页2.2常用HTML标记本节分类介绍常用的HTML标记及其常用属性，其它标记的详细情况请参考相关书籍。2.字体标记4
6、.图像标记6.表格标记8.其他标记1.排版标记3.列表标记5.链接标记7.表单标记2.2.1排版标记1.段落标记n用于分段，和之间的文字在同一段落，并使前段与后段之间加一空白行。结束标记可以省略，下一个开始意味着上一个结束。n的常用属性align，用来设定段落的对齐方式，可取属性值有：left：左对齐；center：居中对齐；right：右对齐。2.2.1排版标记2.强制换行格式：格式：标题，n可取16之间的整数值每个标题标记所标记的文本加粗显示独占一行且上下保留一空白行，由到字体依次变小。可用属性设置标题的对齐方式。2.2.2字体标记2.标记格式：格式：文本常用属性：face：用来设定文本的
7、字体，属性值为逗号隔开的字体列表，如果浏览器所在机器上没有安装指定的任何一种字体，则以浏览器默认字体显示，所以使用时最好不使用特殊字体。2.2.2字体标记size：用来设定文本的大小，属性值可以是绝对的或相对的，如size=“5”是绝对的，表示文本以5号字显示size=“+2”是相对的，表示文本在原先大小的基础上再增大2级。size属性可取17之间的整数值.color：设定文本的颜色。2.2.2字体标记3.、标记为粗体标记，与之间的文本产生加粗效果。为斜体标记，与之间的文本产生斜体效果。为加下划线标记，与之间的文本显示时会加底线。为加删除线标记，与之间的文本显示时会加删除线。注：这四个标记都是
8、双标记，使用时如果忘掉结束标记，则开始标记对后面的所有文本都起作用。2.2.2字体标记图2.3字体标记例2-32.2.3列表标记1.无序列表与n定义项目列表的语法为：项1项2n的常用属性只有一个type，用来设定列表项前面出现的符号，可取属性值有：disc：列表项前面加上符号；circle：列表项前面加上符号；square：列表项前面加上符号。2.2.3列表标记2.有序列表与定义编号列表的语法为：项1项22.2.3列表标记的常用属性属性有：type：用来设定列表的编号形式，可取属性值有：1：用阿拉伯数字1，2，3，编号；a：用小写英文字母a，b，c，编号；A：用大写英文字母A，B，C，编号；i
9、：用小写罗马字母，编号；I：用大写罗马字母，编号。start：用来设定列表开始编号的位置，不论采用何种编号形式，属性值都为整数，如start=“3”表示第一项从第3的位置开始编号。2.2.3列表标记3.标记用来标记列表中的一项，需同或一起使用，它的属性属性有：type：用来设定列表项的符号，如果用里，属性取值为disc、circle或square，如果用在里，则属性取值为1、a、A、i或I。value：此属性仅当用在里有效，属性值为一整数，用来设定当前项的编号，其后的项目将以此值为起始数目递增，前面各项不受影响。2.2.3列表标记例2-4图2.4列表标记2.2.4图像标记1.图像文件的格式常用
10、图片格式：png、jpeg、gif、bmp。2.加入图像格式：格式：常用属性：属性：src：图像文件。alt：替代文本。height：高度；width：宽度。border：边框宽度。vspace：垂直边距；hspace：水平边距。2.2.4图像标记align：图像与文本的对齐方式，可取值为：top：文本与图像顶部对齐；middle：文本与图像中央对齐；bottom：文本与图像底部对齐；left：图像居左；right：图像居右。例2-52.2.4图像标记绝对路径与相对路径绝对路径与相对路径绝对路径n指定文档或文件的完整地址。相对路径n相对路径又分为根相对路径根相对路径和文档相文档相对路径对路径，
11、根相对路径总是以站点根目录“”为起始目录，写起来比较简单；文档相对路径是以当前文件所在路径为起始目录，进行相对的文件查找。2.2.4图像标记文档相对路径的几种形式：同一个目录中的文件：如果源文件和目标文件在同一个目录里，直接写目标文件名即可。表示上级目录：.表示源文件所在目录的上一级目录，.表示源文件所在目录的上上级目录，以此类推。表示下级目录：直接写下级目录文件的路径即可。2.2.4图像标记例2-6：假设有如图2.5所示的目录结构，其中root、web、a、b、c为文件夹，t.htm、1.gif、2.gif等为相应文件夹中的文件，怎样在t.htm页中分别插入1至5这五个图片？图2.5目录结构
12、2.2.4图像标记使用文档相对路径在t.htm中分别插入5幅图片：图2.5目录结构好处好处？u在站点内，通常都采用文档相对路径，便于站点的移植。便于站点的移植。2.2.5链接标记n定义链接的语法格式格式：文本或图片n常用属性：属性：href：链接的目标，指定一个URL作为有效的链接资源的地址。name：锚点的名字。target：目标窗口，保留目标名有_blank、_parent、_top、_self。例2-72.2.5链接标记全局链接与局部链接全局链接与局部链接n如果指定的目标文件存放在外部网站（本服务器以外），只能使用绝对路径，这种与本服务器以外的文件的链接称为全全局链接局链接。n如果目标文
13、件存放在本地服务器，称为局部链接局部链接，局部链接可以使用绝对路径，但建议最好使用相对路径。2.2.5链接标记相对路径的几种形式：相对路径的几种形式：同一个目录中文件的链接例：源文件info.html，在info.html里点击“主页”链接到目标文件index.html。假设info.html路径是：c:Inetpubwwwrootsitesblablainfo.html假设index.html路径是：c:Inetpubwwwrootsitesblablaindex.html在info.html加入index.html超链接的代码：主页2.2.5链接标记表示上级目录例：假设info.html路
14、径是：c:Inetpubwwwrootsitesblablainfo.html假设index.html路径是：c:Inetpubwwwrootsitesindex.html在info.html加入index.html超链接：主页2.2.5链接标记例：假设info.html路径是：c:Inetpubwwwrootsitesblablainfo.html假设index.html路径是：c:Inetpubwwwrootindex.html在info.html加入index.html超链接：主页2.2.5链接标记例：假设info.html路径是：c:Inetpubwwwrootsitesblablai
15、nfo.html假设index.html路径是：c:Inetpubwwwrootsiteswowstoryindex.html在info.html加入index.html超链接：主页2.2.5链接标记表示下级目录例：假设info.html路径是：c:Inetpubwwwrootsitesblablainfo.html假设index.html路径是：c:Inetpubwwwrootsitesblablahtmlindex.html在info.html加入index.html超链接：主页2.2.5链接标记的几种用法：的几种用法：1.链接网页：文本或图像2.链接命名锚点：字符串value值即锚名，是
16、定义的定位位置名热点文本点击“热点文本”链接到锚名所指定的位置例top例2-82.2.5链接标记3.链接非Web数据：简历4.图像链接：5.电子邮件链接：联系2.2.6表格标记n表格现已成为对文本和图形进行布局的强有力的工具。nHTML中一个表格通常由、标记n整个表格始于而终于，是一个容器标记，、等只能在它的范围内使用。n常用的属性属性有：width=“n|n%”：表格宽度。height=“n”：表格高度。border=“n”：表格边框粗细。bordercolor：表格边框颜色。2.2.6表格标记bgcolor：表格背景颜色。background：表格背景图像。cellpadding：边距，表单元线和单元格内数据之间的距离。cellspacing：间距，表
