HTML网页设计基础知识学习

11.HTML概述1.1简介HTML即超文本标记语言。所谓标记语言是指用标记进行编辑作业的语言，通过标记指定文本或其他对象（如图像、声音等）的表示格式，从而制作成超文本文件。标记是描述HTML文件结构的标识符。它规定了HTML文件的逻辑结构，并且控制网页的显示方式。HTML的标记不区分大小写，例如HTML和html等价。1）标记的功能HTML标记的功能是，标记文件结构，设定文字、图像、表格、表单等在浏览器上的显示风格和位置，嵌入脚本，实现动态网页及多媒体等。21.HTML概述2）标记的构成标记是由符号…、/…和括在其中的命令字符串组成。标记有双标记和单标记两种。双标记包括开始标记和结束标记，必须成对出现。例如，HTML、/HTML是文件的开始标记和结束标记；BODY、/BODY是网页内容的开始和结束标记。单标记只有开始标记而没有结束标记。例如，标尺线标记HR只有开始标记而没有结束标记。另外，有的标记例如P（分段标记）可以写为双标记P、/P，也可以写为单标记P。31.HTML概述3）标记的表示方法HTML的标记有下列3种表示方法：a）标记名文本/标记名b）标记名属性名1=”值1”属性名2=”值2”…文本/标记名c）标记名：仅用于一些特殊的标记。例如，BR表示强制换行，它没有与之对应的/BR。4）标记的属性属性是用来修饰说明标记的，放在开始标记内。例如颜色、对齐方式、高度和宽度等。各属性间以空格分隔。41.HTML概述标记的常用属性如下：a）对齐属性:align（left左对齐（默认）、center居中对齐、right右对齐、justify两端对齐）b)范围属性（width=像素值或百分比对象宽度;height=像素值或百分比对象高度）c)色彩属性（color=#RRGGBB前景色bgcolor=#RRGGBB背景色）其中，颜色值可以是英文颜色名或十六进制的颜色值。561.HTML概述1.2HTML文件结构71.HTML概述BODY标记中可以有以下常用属性：①background—设置网页背景图案。②bgcolor—设置网页背景色。默认为白色。③text—设置文本颜色。默认为黑色。④link—设置尚未被访问过的超文本链接的颜色，默认为蓝色。⑤vlink—设置已被访问过的超文本链接的颜色，默认为紫色。例如:BODYbackground=“photo6.gif”bgcolor=”#00FF00”将背景图像设为photo6.gif，背景色设为绿色。82.网页的基本元素2.1网页中的文本使用一般而言，Web网页是由图像、表格及环绕它们的文本组成。网页中文本的文字风格和布局设计在网页设计中非常重要。例如，标题字的大小，是否居中及各级标题的设置，文字字体及颜色的设定，文章分段及段落的风格，页面的整体布局等，都是在网页设计中必须考虑的问题。1.标题Hn标题/Hn标记中的n值可取1～6的整数，取1时文字最大，取6时最小，默认为H6。92.网页的基本元素【例2-1】Hn标记的应用HTMLBODYH1align=center软件学院教授简介/H1HRsize=4color=#FF00FF定义一条标尺线H1张光明教授/H1P    张光明教授，男，1940年10月诞生于河北省石家庄市。H2张光明教授研究方向/H2PH3张光明教授研究成果/H3P/BODY/HTML102.网页的基本元素2.文字大小和颜色1）使用FONT标记使用FONT标记的size属性可以设定一段文章、一个语句、一个单词的文字大小。格式为：FONTsize=数字一段文章、一个语句、一个单词/FONTFONT标记的color属性设定一段文章、一个语句、一个单词的文字颜色。格式为：FONTcolor=”颜色”一段文章、一个语句、一个单词/FONT例如，FONTcolor=”#FFFFFF”文字段颜色为白色/FONT或FONTcolor=”red”文字段颜色为红色/FONT112.网页的基本元素2）使用BODY标记的text属性BODY标记中的text属性可以设定整个网页文字的颜色，格式为：BODYtext=”颜色”例如，BODYtext=”#FF0000”3.换行和分段1）强制改行强制改行使用标记BR，位于行的末尾，无结束标记。2）段落段落标记P用于分段，位于前段的末尾，并使前段与后段之间加一行空白。段落标记P可以省略结束标记。122.网页的基本元素3）标尺线标尺线标记HR在前、后两个段落之间定义一条标尺线。HR标记中的width属性用来控制标尺线的长度。例如，HRwidth=50线长为50像素宽HRwidth=50%线长为屏幕宽度的50%HR标记的size属性控制标尺线的粗细；noshade属性将标尺线设置为黑色；align属性指定标尺线的位置。例如：HRalign=”right”右对齐HRalign=”left”左对齐HRalign=”center”居中（默认）HR的color属性控制标尺线的颜色。如HRcolor=”颜色”132.网页的基本元素４.文本(或图像)布局1）对齐方式Palign=”center”文本或图像/P或Hnalign=”center”文本或图像/Hn（n=1,2,3,4,5,6）或CENTER文本或图像/CENTER（center居中;right右对齐;left左对齐）2）DIV标记当要在许多段落中设置对齐方式时，常使用DIV（层）标记。DIValign=”center”文本或图像/DIV居中（center居中;right右对齐;left左对齐）142.网页的基本元素2.2网页中的图像使用1.网页中加入图像使用标记IMG格式为：IMGsrc=”图像文件名”alt=”图像文本性说明”longdesc=”xxx.htm”其中，“图像文件名”可以用绝对路径也可以用相对路径，文件可以是gif、jpg或png类型。“图像文本性说明”用在不能显示图像的浏览器，或浏览器显示图像时间太长时先显示此文字内容。“xxx.htm”指明关于图的详细说明以补充alt属性的简单说明。152.网页的基本元素2.图像的尺寸设定使用IMG标记的width和height属性设定图像的宽和高格式为：IMGsrc=”图像文件名”width=xheight=y其中，x和y可以是像素值，也可以取百分数。例如，IMGsrc=”asd.gif”width=20height=20IMGsrc=”asd.gif”width=20%height=20%162.网页的基本元素3.图像和文本布局图像和文本混排时，图像和文本在垂直方向的对齐及相互间的左右位置关系使用align属性。格式为:文本IMGsrc=”图像文件名”align=”位置参数”文本其中，位置参数可以是：top(顶对齐)、middle(中央对齐)、bottom(底边对齐)、left(图像在文本左边)和right(图像在文本右边)。172.网页的基本元素2.3网页中的列表使用在网页中使用列表，可以清楚地看到定义顺序、信息排序及信息的相对重要性。HTML提供了丰富的列表元素，用于在HTML文档中建立列表。列表中并列的信息(数据)称为项。项前可以添加符号或序号，也可以各项并列而不加任何记号。带序号的列表称为有序列表，带符号的列表称为无序列表，各项并列而不加任何记号的列表称为定义列表。182.网页的基本元素1.无序列表建立无序列表可以使用标记UL和项目标记LI;格式为：ULLI项目LI项目…/ULULLI注：无序列表可以嵌套192.网页的基本元素2.有序列表1）创建有序列表在实现应用中，人们更多地使用带序号的列表，以便清楚地表达并列信息的顺序。使用标记OL，可以实现有序列表。格式为：OLLI项目LI项目…/OL202.网页的基本元素2）有序列表序号的种类有序列表序号可以设定，在OL或LI标记内使用type属性可以设定5种序号，即阿拉伯数字(1)、大小写英文字母(A)和(a)、大小写罗马数字(I)和(i)。格式为：OLtype=”1,A,a,i,I”或LItype=”1,A,a,i,I”说明：①省略type属性时自动设定为阿拉伯数字。②OLtype=””的作用范围为整个标记范围。③LItype=””的作用范围是当前项(行)。212.网页的基本元素3）设定起始序号有序列表的序号可以从任意数字开始。方法是，在OL标记内使用start属性或在LI标记内加入value属性。格式为：OLstart=xLIvalue=”x”其中，x为任意整数。注意，OLstart=x的作用域为当前OL标记，LIvalue=”x”的作用域为从当前项开始直到当前的/OL标记为止的各项。222.网页的基本元素【例2-2】设定序号的种类BIG大字H3HTML入门/H3OLtype=ALI=IHTMLLI网页/OLEMHTML案例教程/EM斜体OLtype=aLI=i列表LI表格/OL/BIG232.网页的基本元素2.4超文本链接浏览Web页时，我们能够快捷地从一个Web网页跳到另一个相关的Web网页，就是在这些文件之间建立了超文本链接。1.创建网页间的链接建立超文本链接语法格式为:Ahref=“URL”文本或图像/A注意，必须使用结束标记/A。href意为超文本引用，URL是一个有效的链接资源的地址，“文本或图像”是在浏览器上显示的热点信息。标记A的常用属性：Href:定义一个URL，作为有效的链接资源的地址。Name:指定当前文档内的一个字符串作为链接时的位置名称。Type:指定特定内容的类型。242.网页的基本元素注意，依链接资源存放位置不同，链接可分为全局链接和局部链接。如果资源文件存放在服务器自己的目录中，称为局部链接；与本服务器以外文件的链接称全局链接。在全局链接中，http写入的URL称为绝对路径。例如，Ahref=“”热点文本/A文件之间的局部链接有下面４种情况：(1)链接同一目录内的文件。(2)链接下一级目录内的文件。(3)链接上一级目录内的文件。(4)链接同级目录内的文件。252.网页的基本元素MARQUEE标记用来控制文字的移动,例如:MARQUEE文字在移动/MARQUEEMARQUEE标记的主要属性有:①direction:控制移动方向,可取“left”,“right”,“up”,“down”四个值②behavior:移动方式,可取scroll(循环移动),slide(只走一圈),alternate(来回移动)③loop:循环次数,不输入表示无限次循环④scrollamount:移动快慢,数值越大越快⑤scrolldelay:每移动一步之后的延时,单位是毫秒⑥height,width:移动区域的高和宽,单位像素⑦bgcolor:移动区域的背景色实例:MARQUEEdirection=upwidth=100height=100bgcolor=#