网页html代码详解介绍

第2章HTML语言本章要点：HTML的基础知识常用HTML标记XHTML2.1HTML简介HTML（HyperTextMarkupLanguage）称为超文本标记语言，是一种描述文档结构的标记语言，它是一种应用非常广泛的网页格式，也是最早被用来显示Web页的语言之一。它与操作系统平台的选择无关，只要有浏览器就可以运行HTML文档，显示网页内容。HTML文档类似于.txt文本文件，不同的是，文档里还包含一种被称为标记的符号。2.1.1标记的格式1.标记的功能控制网页的显示方式2.标记的构成由…、/…及括在其中的命令字符串组成双标记：…、/…成对出现，如HTML、/HTML单标记：…，如BR、HR2.1.1标记的格式3.标记的使用方法(1)标记名文本或超文本/标记名(2)标记名属性名1=“属性值1”属性名2=“属性值2”文本或超文本/标记名例：fontsize=“3”color=“red”你好！/font(3)标记名2.1.1标记的格式书写HTML代码时应注意以下几点：1)HTML标记及属性中字母不区分大小写，如HTML与Html对浏览器来说是完全相同的。2)标记名与左尖括号之间不能留有空白，如html是错误的。3)属性要写在开始标记的尖括号中，放在标记名后，并且与标记名之间要有空白；多个属性之间也要有空白；属性值最好用单引号或双引号引起来，引号一定要是英文的引号，不能是中文引号。4)结束标记要书写正确，不能忘掉斜杠。2.1.2HTML文档结构表2-1html文件构成骨架文件开始html头部head!--头部开始--title标题名/title!--html文件标题--…其他头部内容定义标记…/head!--头部结束--主体body!--主体开始--…网页内容（文本、图像等)…!--可包括其他标记--/body!--主体开始--文件结束/html2.1.2HTML文档结构1.文件头部head、/head之间定义，内容可包括标题名、文本文件地址、创作者信息等网页信息说明。文件头部还可包括一些其他标记：·title/title：定义网页的标题；·meta：说明一些与文档相关的信息，如作者、关键内容、所用语言等；2.1.2HTML文档结构2.文件主体位于头部之后，在body、/body之间定义，定义了网页上显示的主要内容和显示格式。文件主体内可包括众多其他标记。2.1.2HTML文档结构body标记常用属性：·background：设置网页背景图案。例如bodybackground=“photo_6.gif”·bgcolor：设置网页背景色。例如bodybgcolor=“#00FF00”·text：设置文本颜色，默认黑色。·link：设置尚未被访问过的超文本链接的颜色。·vlink：设置已被访问过的超文本链接的颜色。2.1.2HTML文档结构3.注释格式：!--注释--注释以“!--”开始，以“--”结束，注释的内容会被浏览器忽略。利用注释可以为HTML文档的不同部分加上说明，方便日后修改，也可以利用注释为HTML文档加上版权声明。注释可有多行。2.1.3HTML的制作制作HTML文档需要两个基本工具，一个HTML编辑器，一个Web浏览器。HTML编辑器可分为两类：基于文本或代码的编辑器和所见即所得(WYSIWYG)编辑器。前者在创建文档时只能看到HTML代码，后者在编辑时即显示出类似于最终浏览器窗口显示的结果。Web浏览器用来浏览HTML文档，在Windows操作系统上，常用的浏览器是MicrosoftInternetExplorer，也常简称为IE。2.1.3HTML的制作用记事本制作网页的步骤如下：1)打开记事本。2)在记事本中输入代码：htmlheadtitle我的第一个网页/title/headbodybgcolor=blacktext=#FFFFFF这是我用记事本做的第一个网页，我会努力学好HTML！/body/html2.1.3HTML制作工具3)保存文件：HTML文件的扩展名为.htm、.html、.aspx或asp，因为有些Web服务器对中文文件名不能很好支持，所以文件名中尽量不要使用汉字。4)用浏览器打开上步保存的文件，即可看到如图2.1所示的页面。图2.1第一个网页2.2常用HTML标记本节分类介绍常用的HTML标记及其常用属性，其它标记的详细情况请参考相关书籍。2.字体标记4.图像标记6.表格标记8.其他标记1.排版标记3.列表标记5.链接标记7.表单标记2.2.1排版标记1.段落标记p用于分段，p和/p之间的文字在同一段落，并使前段与后段之间加一空白行。结束标记/p可以省略，下一个p开始意味着上一个p结束。p的常用属性align，用来设定段落的对齐方式，可取属性值有：·left：左对齐；·center：居中对齐；·right：右对齐。2.2.1排版标记2.强制换行brbr称为换行标记，在网页设计中比较常用，它的作用就是换行。br属于单标记，没有结束标记，且不包含任何属性。3.预格式化标记prepre称为预格式化标记，它的作用是按原始代码的排列方式显示内容。通常情况下，浏览器显示时会忽略内容中的空白及换行，而pre与/pre之间的空白及换行会被保留。2.2.1排版标记4.水平线标记hrhr称为水平线标记，可以在页面中产生一条水平线，没有结束标记。hr的常用属性有：·align：对齐方式，属性值有left、center、right；·width：长度，属性值可以是绝对值(像素)或相对值(百分比)；·size：粗细，属性值为整数，单位为像素；·color：颜色。例：hrwidth=20size=2hrwidth=80%align=centercolor=red2.2.1排版标记5.centercenter称为居中标记，可以使标记的内容居中显示，使用时需要结束标记/center。6.divdiv是块定义标签，用于定义一个块的风格。div要有开始标签div和结束标签/div当要在许多段落中设置对齐方式时，常用div标记和align属性。如：divalign=“center/right/left”文本或图像/div2.2.1排版标记[例2-2]图2.2排版标记2.2.2字体标记1.标题Hn格式：Hn标题/Hn，n可取1~6之间的整数值每个标题标记所标记的文本加粗显示独占一行且上下保留一空白行，由h1到h6字体依次变小。可用属性设置标题的对齐方式。2.2.2字体标记2.font标记格式：fontsize=“数字”color=“颜色”文本/font常用属性：·face：用来设定文本的字体，属性值为逗号隔开的字体列表，如果浏览器所在机器上没有安装指定的任何一种字体，则以浏览器默认字体显示，所以使用时最好不使用特殊字体。2.2.2字体标记·size：用来设定文本的大小，属性值可以是绝对的或相对的，如size=“5”是绝对的，表示文本以5号字显示;size=“+2”是相对的，表示文本在原先大小的基础上再增大2级。size属性可取1~7之间的整数值.·color：设定文本的颜色。2.2.2字体标记3.b、i、u、s标记b为粗体标记，b与/b之间的文本产生加粗效果。i为斜体标记，i与/i之间的文本产生斜体效果。u为加下划线标记，u与/u之间的文本显示时会加底线。s为加删除线标记，s与/s之间的文本显示时会加删除线。注：这四个标记都是双标记，使用时如果忘掉结束标记，则开始标记对后面的所有文本都起作用。2.2.2字体标记图2.3字体标记[例2-3]2.2.3列表标记1.无序列表ul与li定义项目列表的语法为：ulli项1/lili项2/li……/ulul的常用属性只有一个type，用来设定列表项前面出现的符号，可取属性值有：·disc：列表项前面加上符号●；·circle：列表项前面加上符号○；·square：列表项前面加上符号■。2.2.3列表标记2.有序列表ol与li定义编号列表的语法为：olli项1/lili项2/li……/ol2.2.3列表标记ol的常用属性有：·type：用来设定列表的编号形式，可取属性值有：1：用阿拉伯数字1，2，3，…编号；a：用小写英文字母a，b，c，…编号；A：用大写英文字母A，B，C，…编号；i：用小写罗马字母ⅰ，ⅱ，ⅲ，…编号；I：用大写罗马字母Ⅰ，Ⅱ，Ⅲ，…编号。·start：用来设定列表开始编号的位置，不论采用何种编号形式，属性值都为整数，如start=“3”表示第一项从第3的位置开始编号。2.2.3列表标记3.li标记li用来标记列表中的一项，需同ul或ol一起使用，它的属性有：·type：用来设定列表项的符号，如果li用ul里，属性取值为disc、circle或square，如果li用在ol里，则属性取值为1、a、A、i或I。·value：此属性仅当li用在ol里有效，属性值为一整数，用来设定当前项的编号，其后的项目将以此值为起始数目递增，前面各项不受影响。2.2.3列表标记[例2-4]图2.4列表标记2.2.4图像标记1.图像文件的格式常用图片格式：png、jpeg、gif、bmp。2.加入图像img格式：imgsrc=图像文件名常用属性：·src：图像文件。·alt：替代文本。·height：高度；width：宽度。·border：边框宽度。·vspace：垂直边距；hspace：水平边距。2.2.4图像标记·align：图像与文本的对齐方式，可取值为：top：文本与图像顶部对齐；middle：文本与图像中央对齐；bottom：文本与图像底部对齐；left：图像居左；right：图像居右。例[2-5]2.2.4图像标记绝对路径与相对路径⑴绝对路径指定文档或文件的完整地址。⑵相对路径相对路径又分为根相对路径和文档相对路径，根相对路径总是以站点根目录“/”为起始目录，写起来比较简单；文档相对路径是以当前文件所在路径为起始目录，进行相对的文件查找。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目录结构2.2.4图像标记使用文档相对路径在t.htm中分别插入5幅图片：imgsrc=“2.gif”imgsrc=“../1.gif”imgsrc=“../../4.gif”imgsrc=“../b/3.gif”imgsrc=“c/5.gif”图2.5目录结构好处？在站点内，通常都采用文档相对路径，便于站点的移植。2.2.5链接标记定义链接的语法格式：ahref=“URL”文本或图片/aa常用属性：·href：链接的目标，指定一个URL作为有效的链接资源的地址。·name：锚点的名字。·target：目标窗口，保留目标名有_blank、_parent、_top、_self。例[2-7]2.2.5链接