1、第2章 HTML语言,本章要点：HTML的基础知识常用HTML标记XHTML,2.1 HTML简介,HTML（Hyper Text Markup Language）称为超文本标记语言，是一种描述文档结构的标记语言，它是一种应用非常广泛的网页格式，也是最早被用来显示Web页的语言之一。它与操作系统平台的选择无关，只要有浏览器就可以运行HTML文档，显示网页内容。 HTML文档类似于.txt文本文件，不同的是，文档里还包含一种被称为标记的符号。,2.1.1 标记的格式,1. 标记的功能 控制网页的显示方式 2. 标记的构成 由 、及括在其中的命令字符串组成 双标记： 、成对出现，如、 单标记： ，
2、如、,2.1.1 标记的格式,3. 标记的使用方法(1) 文本或超文本(2) 文本或超文本例：你好！(3) ,2.1.1 标记的格式,书写HTML代码时应注意以下几点： 1) HTML标记及属性中字母不区分大小写，如与对浏览器来说是完全相同的。 2) 标记名与左尖括号之间不能留有空白，如是错误的。 3) 属性要写在开始标记的尖括号中，放在标记名后，并且与标记名之间要有空白；多个属性之间也要有空白；属性值最好用单引号或双引号引起来，引号一定要是英文的引号，不能是中文引号。 4) 结束标记要书写正确，不能忘掉斜杠。,2.1.2 HTML文档结构,表2-1 html文件构成骨架,2.1.2 HTML
3、文档结构,1. 文件头部 、之间定义，内容可包括标题名、文本文件地址、创作者信息等网页信息说明。 文件头部还可包括一些其他标记： ：定义网页的标题； ：说明一些与文档相关的信息，如作 者、关键内容、所用语言等；,2.1.2 HTML文档结构,2. 文件主体 位于头部之后，在、之间定义，定义了网页上显示的主要内容和显示格式。 文件主体内可包括众多其他标记。,2.1.2 HTML文档结构,标记常用属性： background：设置网页背景图案。例如 bgcolor：设置网页背景色。例如 text：设置文本颜色，默认黑色。 link：设置尚未被访问过的超文本链接的颜色。 vlink：设置已被访问过的
4、超文本链接的颜色。,2.1.2 HTML文档结构,3. 注释 格式： 注释以“”结束，注释的内容会被浏览器忽略。利用注释可以为HTML文档的不同部分加上说明，方便日后修改，也可以利用注释为HTML文档加上版权声明。 注释可有多行。,2.1.3 HTML的制作,制作HTML文档需要两个基本工具，一个HTML编辑器，一个Web浏览器。 HTML编辑器可分为两类：基于文本或代码的编辑器和所见即所得(WYSIWYG)编辑器。前者在创建文档时只能看到HTML代码，后者在编辑时即显示出类似于最终浏览器窗口显示的结果。 Web浏览器用来浏览HTML文档，在Windows操作系统上，常用的浏览器是Micros
5、oft Internet Explorer，也常简称为IE。,2.1.3 HTML的制作,用记事本制作网页的步骤如下： 1) 打开记事本。 2) 在记事本中输入代码：, 我的第一个网页这是我用记事本做的第一个网页，我会努力学好HTML！,2.1.3 HTML制作工具,3) 保存文件：HTML文件的扩展名为.htm、.html、 .aspx或asp，因为有些Web服务器对中文文件名不能很好支持，所以文件名中尽量不要使用汉字。 4) 用浏览器打开上步保存的文件，即可看到如图2.1所示的页面。,图2.1 第一个网页,2.2 常用HTML标记,本节分类介绍常用的HTML标记及其常用属性，其它标记的详细
6、情况请参考相关书籍。,2. 字体标记 4. 图像标记 6. 表格标记 8. 其他标记,排版标记 3. 列表标记 5. 链接标记 7. 表单标记,2.2.1 排版标记,1. 段落标记 用于分段，和之间的文字在同一段落，并使前段与后段之间加一空白行。结束标记可以省略，下一个开始意味着上一个结束 。 的常用属性align，用来设定段落的对齐方式，可取属性值有： left：左对齐； center：居中对齐； right：右对齐。,2.2.1 排版标记,2. 强制换行 称为换行标记，在网页设计中比较常用，它的作用就是换行。属于单标记，没有结束标记，且不包含任何属性。 3. 预格式化标记 称为预格式化标记
7、，它的作用是按原始代码的排列方式显示内容。通常情况下，浏览器显示时会忽略内容中的空白及换行，而与之间的空白及换行会被保留。,2.2.1 排版标记,4. 水平线标记 称为水平线标记，可以在页面中产生一条水平线，没有结束标记。的常用属性有： align：对齐方式，属性值有left、center、right； width：长度，属性值可以是绝对值(像素)或相对值(百分比) ； size：粗细，属性值为整数，单位为像素； color：颜色。 例：,2.2.1 排版标记,5. 称为居中标记，可以使标记的内容居中显示，使用时需要结束标记。 6. 是块定义标签，用于定义一个块的风格。 div要有开始标签和结
8、束标签 当要在许多段落中设置对齐方式时，常用标记和align属性。如：文本或图像,2.2.1 排版标记,例2-2,图2.2 排版标记,2.2.2 字体标记,1. 标题格式： 标题，n可取16之间的整数值每个标题标记所标记的文本加粗显示独占一行且上下保留一空白行，由到字体依次变小。可用属性设置标题的对齐方式。,2.2.2 字体标记,2. 标记 格式：文本 常用属性： face：用来设定文本的字体，属性值为逗号隔开的字体列表，如果浏览器所在机器上没有安装指定的任何一种字体，则以浏览器默认字体显示，所以使用时最好不使用特殊字体。,2.2.2 字体标记, size：用来设定文本的大小，属性值可以是绝对
9、的或相对的，如size=“5”是绝对的，表示文本以5号字显示; size=“+2”是相对的，表示文本在原先大小的基础上再增大2级。 size属性可取17之间的整数值. color：设定文本的颜色。,2.2.2 字体标记,3. 、标记 为粗体标记，与之间的文本产生加粗效果。 为斜体标记，与之间的文本产生斜体效果。 为加下划线标记，与之间的文本显示时会加底线。 为加删除线标记，与之间的文本显示时会加删除线。 注：这四个标记都是双标记，使用时如果忘掉结束标记，则开始标记对后面的所有文本都起作用。,2.2.2 字体标记,图2.3 字体标记,例2-3,2.2.3 列表标记,1. 无序列表与定义项目列表的
10、语法为：项1项2,的常用属性只有一个type，用来设定列表项前面出现的符号，可取属性值有： disc：列表项前面加上符号； circle：列表项前面加上符号； square：列表项前面加上符号。,2.2.3 列表标记,2. 有序列表与定义编号列表的语法为：项1项2,2.2.3 列表标记,的常用属性有： type：用来设定列表的编号形式，可取属性值有：1：用阿拉伯数字1，2，3，编号；a：用小写英文字母a，b，c，编号；A：用大写英文字母A，B，C，编号；i：用小写罗马字母，编号；I：用大写罗马字母，编号。 start：用来设定列表开始编号的位置，不论采用何种编号形式，属性值都为整数，如star
11、t=“3”表示第一项从第3的位置开始编号。,2.2.3 列表标记,3. 标记用来标记列表中的一项，需同或一起使用，它的属性有： type：用来设定列表项的符号，如果用里，属性取值为disc、circle或square，如果用在里，则属性取值为1、a、A、i或I。 value：此属性仅当用在里有效，属性值为一整数，用来设定当前项的编号，其后的项目将以此值为起始数目递增，前面各项不受影响。,2.2.3 列表标记,例2-4,2.2.4 图像标记,1. 图像文件的格式常用图片格式：png、jpeg、gif、bmp。 2. 加入图像格式：常用属性： src：图像文件。 alt：替代文本。 height：
12、高度；width：宽度。 border：边框宽度。 vspace：垂直边距；hspace：水平边距。,2.2.4 图像标记, align：图像与文本的对齐方式，可取值为：top：文本与图像顶部对齐；middle：文本与图像中央对齐；bottom：文本与图像底部对齐；left：图像居左；right：图像居右。 例2-5,2.2.4 图像标记,绝对路径与相对路径 绝对路径 指定文档或文件的完整地址。 相对路径 相对路径又分为根相对路径和文档相对路径，根相对路径总是以站点根目录“/”为起始目录，写起来比较简单；文档相对路径是以当前文件所在路径为起始目录，进行相对的文件查找。,2.2.4 图像标记,文
13、档相对路径的几种形式： 同一个目录中的文件：如果源文件和目标文件在同一个目录里，直接写目标文件名即可。 表示上级目录：/表示源文件所在目录的上一级目录，/表示源文件所在目录的上上级目录，以此类推。 表示下级目录：直接写下级目录文件的路径即可。,2.2.4 图像标记,例2-6：假设有如图2.5所示的目录结构，其中root、web、a、b、c为文件夹，t.htm、1.gif、2.gif等为相应文件夹中的文件，怎样在t.htm页中分别插入1至5这五个图片？,图2.5 目录结构,2.2.4 图像标记,使用文档相对路径在t.htm中分别插入5幅图片：,图2.5 目录结构,好处？,在站点内，通常都采用文档
14、相对路径，便于站点的移植。,2.2.5 链接标记,定义链接的语法格式： 文本或图片 常用属性： href：链接的目标，指定一个URL作为有效的链接资源的地址。 name：锚点的名字。 target：目标窗口，保留目标名有_blank、_parent、_top、_self。 例2-7,2.2.5 链接标记,全局链接与局部链接 如果指定的目标文件存放在外部网站（本服务器以外），只能使用绝对路径，这种与本服务器以外的文件的链接称为全局链接。 如果目标文件存放在本地服务器，称为局部链接，局部链接可以使用绝对路径，但建议最好使用相对路径。,2.2.5 链接标记,相对路径的几种形式： 同一个目录中文件的链
15、接 例：源文件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路径是： c :Inetpubwwwrootsitesblablainfo.html假设index.html路径是：c:Inetpubwwwrootsites
16、index.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:Inetpubwwwrootsitesblablainfo.html假设index.html路径是：c:Inetpubwwwrootsiteswowstoryindex.html在in
17、fo .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值即锚名，是定义的定位位置名热点文本 点击“热点文本”链接到锚名所指定的位置 例top例2-8,2.2.5 链接标记,3.
18、 链接非Web数据：简历 4. 图像链接：5. 电子邮件链接： 联系,2.2.6 表格标记,表格现已成为对文本和图形进行布局的强有力的工具。 HTML中一个表格通常由、三个标记来定义，分别表示表格、行、单元格。 在对表格进行设置时，可以设置整个表格或表格中的行或单元格的属性，它们优先顺序为：单元格优先于行，行优先于表格。,2.2.6 表格标记,1. 基本格式,表项1表项2表项1表项2,2.2.6 表格标记,(1) 标记 整个表格始于而终于，是一个容器标记，、等只能在它的范围内使用。 常用的属性有： width=“n|n%”：表格宽度。 height =“n” ：表格高度。 border=“n”
19、：表格边框粗细。 bordercolor：表格边框颜色。,2.2.6 表格标记, bgcolor：表格背景颜色。 background：表格背景图像。 cellpadding：边距，表单元线和单元格内数据之间的距离。 cellspacing：间距，表单元线与边框间的空白。 align=“left/right/center”：表格水平对齐方式。 rules：设定有无表格线。 frame：设定有无边框。,2.2.6 表格标记,(2) 标记 定义表格行，是单元格(或)的容器。 常用属性有： align=“left/right/center”：这一行单元格中内容的水平对齐方式。 valign=“top
20、/middle/bottom”：用来设定这一行单元格中内容的垂直对齐方式。 bgcolor：这一行的背景颜色。,2.2.6 表格标记,(3) 标记 单元格标记，使用时要放在与之间。 常用属性有： background：背景图像。 bgcolor：背景颜色。 align：水平对齐方式。 valign：垂直对齐方式。 width：宽度。 height：高度。 colspan：跨列数目。 rowspan：跨行数目。,2.2.6 表格标记,2. 表题 使用标记给表格添加表题，并使用align属性定义表题的位置。 格式:表题 ,2.2.6 表格标记,3. 表头 使用标记可在表的第1行或第1列加表头，格式
21、：,表项1表项2表项1表项2 ,例2-9,表项1表项2表项1表项2 ,2.2.6 表格标记,4.单元格的合并 (1)合并行表项或表项x为垂直方向上合并的行数 (2)合并列表项或表项x为水平方向上合并的单元格数,2.2.6 表格标记,图2.7 表格标记,例2-10,2.2.6 表格标记,图2.6 表格标记,例2-11,2.2.7 表单标记,表单是用户与网站进行交互的主要方式，它的作用是从访问Web站点的用户那里获取信息。访问者可以使用诸如文本框、列表框、复选框以及单选按钮之类的表单对象输入信息，然后单击某个按钮提交这些信息。,2.2.7 表单标记,1. 标记 格式： 表单对象：文本框选择按钮列表
22、框按钮 ,2.2.7 表单标记,标记常用属性： action：表单数据的处理手段。 method：表单数据传输方法，取值为get或post。 get：表单数据附加到URL中。 post：表单数据嵌入HTTP 请求中。,2.2.7 表单标记,2.表单对象 (1) 文本框 用于单行文本的输入。 格式： 常用属性：name、value、size、maxlength等。 (2) 密码框 格式： 常用属性：name、value、size、maxlength等。,2.2.7 表单标记,(3) 单选按钮 格式： 常用属性：name、value、checked等。 注：同一组中所有单选按钮的name属性必须设
23、 置相同。 (4) 复选框 格式： 常用属性：name、value、checked等。value属性用来设置当用户选中该项后，表单所提交的值。,2.2.7 表单标记,(5) 按钮 提交按钮： 常用属性：name、value等。 重置按钮： 常用属性：name、value等。 普通按钮： 常用属性：name、value等。 图像按钮： 常用属性：name、src、width、height、alt等。,2.2.7 表单标记,(6) 列表框 格式：选项1 选项2 ,2.2.7 表单标记,的属性：name，size，multiple等； size没设置或设为1，为下拉列表框；size设置大于1，为列表
24、框。 multiple不用赋值，若加入标记中，则列表框可选多项。 的属性：value，selected等。,2.2.7 表单标记,(7) 文本区域：可输入多行文本。 格式：文本 常用属性：name、rows、cols、wrap等。,2.2.7 表单标记,例2-12,图2.8 表单举例,HTML（HyperText Markup Language）称为超文本标记语言，是一种描述文档结构的标记语言，它是一种应用非常广泛的网页格式。 XHTML（eXtensible HyperText Markup Language），是可扩展超文本标识语言的缩写。 HTML是一种基本的WEB网页设计语言，XHTM
25、L是一个基于XML的置标语言，看起来与HTML有些相象，不过语法上更加严格。,2.3 XHTML,从HTML到XHTML，大致经历了以下版本： HTML 2.0：1995年11月发布。 HTML 3.2：1996年1月14日发布。 HTML 7.0：1997年12月18日发布。 HTML 7.01：1999年12月24日发布(微小改进)。 XHTML 1.0：2000年1月发布，后经过修订于2002年8月1日重新发布。 XHTML 1.1：2001年5月31日发布。 XHTML 2.0 ：正在制定中。,2.3 XHTML,XHTML与HTML的重要区别： 1.在XHTML中标记名称必须小写 2
26、.在XHTML中属性名称必须小写 3.在XHTML中标记必须严格嵌套 4.在XHTML中标记必须封闭 5.在XHTML中即使是空元素的标记也必须封闭 6.在XHTML中属性值用双引号括起来 7.在XHTML中属性值必须使用完整形式,2.3 XHTML,使用文档类型(DOCTYPE)指令来声明使用哪种规范解释该文档。建议使用XHTML 1.0 transitional(XHTML 1.0过渡类型)，这样设计者可以按照XHTML的标准书写符合Web标准的网页代码，同时在一些特殊情况下还可以使用传统的做法。,2.3 XHTML,2.4 本章小结,通过本章的学习，应该掌握一下的内容： 什么是超文本? HTML的作用？ HTML文档结构 常用HTML标记 什么是XHTML?,
