HTML基础.pptx

HTML基础（二）基础（二）EE页面的主体标记1、设置文字颜色text2、背景颜色属性bgcolor3、背景图像属性background4、设置链接文字属性link 5、设置边距margin EE元素及元素属性(一)概述 元素表明是HTML文档的主体部分。在与之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。EE元素及元素属性(二)元素中有下列元素属性：(1)bgcolornbgcolor属性标志HTML文档的背景颜色。如：bgcolor=#CCFFCC。(2)backgroundnbackground属性标志HTML文档的背景图片。如：background=“images/bg.gif。n可以使用的图片格式为GIF，JPGEE元素及元素属性(三)元素中有下列元素属性：(3)bgproperties=fixednbgproperties=fixed使背景图片成水印效果，即图片不随着滚动条的滚动而滚动。(4)textntext属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。Text元素定义的颜色将应用于整篇文档。2.2.htmlEE元素及元素属性(四)元素中有下列元素属性：(5)超级链接颜色nlink、vlink、alink分别控制普通超级链接、访问过的超级链接、当前活动超级链接颜色。(6)leftmargin和topmarginn设置网页主体内容距离网页顶端和左端的距离如：leftmargin=20 topmargin=30“2.3.htmlEEHTML的注释的注释HTML文档可以插入注释。注释内容不会在文档可以插入注释。注释内容不会在浏览器窗口显示浏览器窗口显示HTML注释的格式为：注释的格式为：EE超链接的基本知识 1、超链接的概述2、绝对路径3、相对路径EE超链接的概述超链接的概述超链接是网页页面中最重要的元素之一。一个网站是超链接是网页页面中最重要的元素之一。一个网站是由多个页面组成的，页面之间依据链接确定相互的导由多个页面组成的，页面之间依据链接确定相互的导航关系。链接能使浏览者从一个页面跳转到另一个页航关系。链接能使浏览者从一个页面跳转到另一个页面，实现文档互联、网站互联。面，实现文档互联、网站互联。超文本链接（超文本链接（hypertextlink）通常简称为超链接）通常简称为超链接（hyperlink），或者简称为链接（），或者简称为链接（link）。链接是）。链接是HTML的一个最强大和最有价值的功能。链接是指文的一个最强大和最有价值的功能。链接是指文档中的文字或者图像与另一个文档、文档的一部分或档中的文字或者图像与另一个文档、文档的一部分或者一幅图像链接在一起。者一幅图像链接在一起。EE绝对路径和相对路径绝对路径和相对路径C:html 目录目录C:example目录目录Doc1.htmDoc3.htmDoc2.htmDoc4.htm要链接到同一目录(C:html)下的页面，可编写 或 要链接到另一目录(C:example)下的页面，可编写 或 相对路径名相对路径名绝对路径名绝对路径名EE超链接的建立1、超链接标记的基本语法 2、建立文本超链接 3、设置超链接的目标窗口 EE超链接标记的基本语法超链接标记的基本语法超链接是用锚元素定义的 在元素下，有元素属性href,href的属性值为一个URL地址如：指向学院的超级链接 如：普通超级链接5.1.htmlEE设置超链接的目标窗口设置超链接的目标窗口 超链接标签超链接标签有一个有一个Target属性，它可以取值为:_blank(新开窗口)_self(在同一窗口打开，与默认设置相同)_parent(父框架，在上一级窗口打开)-top(在浏览器的整个窗口打开)其他窗口名称例如：新窗口打开页面 5.2.htmlEE图像的添加 1、图像的添加EE图像的添加图像的添加语法语法解释引用图片必须用元素标志。元素下的基本元素属性是src属性，src的属性值为所引用的图片的URL地址。src属性是必须的。Src的URL可以是绝对地址，也可以是相对地址。6.1.htmlEE图像的格式1、图像的格式优点、缺点、应用EE超链接的概述超链接的概述常见的图片格式介绍常见的图片格式介绍图像类型优点缺点适用场合制作工具*.jpg体积小，比较清晰有损压缩、画面失真 网页图片Photoshop*.gif支持 Internet 标准,支持无损耗压缩和透明度，很流行 支持有限的透明度,效果不如别的图像网页图片Photoshop*.swf体积小,便于网络传输制作麻烦网页动画 Flash*.png支持高级别无损耗压缩，支持alpha通道透明度，受最新的Web浏览器支持较旧的浏览器不支持PNG文件网页图片Photoshop*.bmp支持 24 位颜色深度，兼容性好不支持压缩 容量大桌面墙纸photoshopEE设置图像属性 1、图像高度heigh 2、图像宽度width 3、图像边框border 4、图像水平间距hspace 5、图像垂直间距vspace 6、图像相对于文字基准线的对齐方式align 7、图像的提示文字alt EE设置图像属性设置图像属性图片显示大小图片显示大小图片显示大小图片显示大小我们可以指定一幅图片在浏览器窗口里的显示大小。定义图片的显示大小的方法是：width指定图片的宽度，height指定高度。它们的属性值可以是像素，也可以是%。6.2.html、6.3.htmlEE设置图像属性设置图像属性图片的边框图片的边框图片的边框图片的边框我们可以为一幅图片加一个边框以突出显示：nborder的属性值为像素数6.4.htmlEE设置图像属性设置图像属性图片的间距图片的间距6.5.html、6.6.html定义图片与左、右和上、下的文本之间的间距定义图片与左、右和上、下的文本之间的间距图片在显示时，与左右的文本之间可以有一定的间距语法 语法解释Hspace(horizontal)定义水平间距；Vspace(vertical)定义垂直间距。单位都是像素数.EE设置图像属性设置图像属性图片的对齐方式图片的对齐方式6.7.html图片的对齐方式图片的对齐方式图片可以相对于页面或单元格有一个对齐方式。定义水平对齐方式的方法是：定义图片的垂直对齐方式：EE设置图像属性设置图像属性图片的对齐方式图片的对齐方式上面介绍了最常用的图片对齐方式，下面再介绍一下其他的对齐方式。上面介绍了最常用的图片对齐方式，下面再介绍一下其他的对齐方式。align取值 表示的含义texttop 把图像的顶部和同行中最高的文本的顶部对齐 absmiddle 把图像的中部和同行中最大项的中部对齐 baseline 把图像的底部和文本的基线对齐 absbottom 把图像的底部和同行中的最低项对齐 EE设置图像属性设置图像属性图片的提示文字图片的提示文字 提示文字有两个作用。当浏览该网页时，如果图像下载完成，鼠标放在提示文字有两个作用。当浏览该网页时，如果图像下载完成，鼠标放在该图像上，鼠标旁边会出现提示文字。也就是说，当鼠标指向图像上该图像上，鼠标旁边会出现提示文字。也就是说，当鼠标指向图像上方的时候，稍等片刻，可以出现图像的提示性文字，这用于说明或者方的时候，稍等片刻，可以出现图像的提示性文字，这用于说明或者描述图像。第二个作用是，如果图像没有被下载，在图像的位置上就描述图像。第二个作用是，如果图像没有被下载，在图像的位置上就会显示提示文字。会显示提示文字。语法语法 语法解释在该语法中，提示文字的内容可以是中文，也可以是英文。6.8.htmlEE图像的超链接 1、设置图像的超链接 2、设置图像热区链接 EE图像的超链接图像的超链接设置图像的超链接设置图像的超链接对于给整个一幅图像文件设置超链接来说，实现的方法比较简单，其实现的方法与文本链接类似。语法 语法解释在该语法中，href参数用来设置图像的链接地址，而在图像属性中可以添加图像的其他参数，如height、border、hspace等 6.9.htmlEE图像的超链接图像的超链接设置图像热区链接设置图像热区链接 除了对整个图像进行超链接的设置外，还可以将图像划分成不同的区除了对整个图像进行超链接的设置外，还可以将图像划分成不同的区域进行链接设置。而包含热区的图像也可以称为映射图像。域进行链接设置。而包含热区的图像也可以称为映射图像。语法语法首先需要在图像文件中设置映射图像名，在图像的属性中使用首先需要在图像文件中设置映射图像名，在图像的属性中使用标记添加图像要引用的映射图像的名称如下：标记添加图像要引用的映射图像的名称如下：img src=”然后需要定义热区图像以及热区的链接属性如下：然后需要定义热区图像以及热区的链接属性如下：map name=area shape=/EE图像的超链接图像的超链接 语法解释语法解释 在该语法中要先定义映射图像的名称，然后再引用这个映射图像。在在该语法中要先定义映射图像的名称，然后再引用这个映射图像。在标记中定义了热区的位置和链接，其中标记中定义了热区的位置和链接，其中shapeshape用来定义热区形状，用来定义热区形状，可以取值为可以取值为rectrect（矩形区域）、（矩形区域）、circlecircle（圆形区域）以及（圆形区域）以及polypoly（多边形区域）；（多边形区域）；coordscoords参数则用来设置区域坐标，对于不同形状来说，参数则用来设置区域坐标，对于不同形状来说，coordscoords设置的方式设置的方式也不同。也不同。对于矩形区域对于矩形区域rectrect来说，来说，coordscoords包含包含4 4个参数，分别为个参数，分别为leftleft、toptop、rightright和和bottombottom，也可以将这，也可以将这4 4个参数看做矩形两个对角的点坐标；对于圆形区域个参数看做矩形两个对角的点坐标；对于圆形区域circlecircle来说，来说，cooedscooeds包含包含3 3个参数，分别为个参数，分别为center-xcenter-x、center-ycenter-y和和tadiustadius，也可以看作是圆形的圆心坐标（也可以看作是圆形的圆心坐标（x x，y y）与半径的值；对于多边形区域）与半径的值；对于多边形区域polypoly设设置坐标参数比较复杂，跟多边形的形状息息相关。置坐标参数比较复杂，跟多边形的形状息息相关。coordscoords参数需要按照顺序参数需要按照顺序（可以是逆时针，也可以是顺时针）取各个点的（可以是逆时针，也可以是顺时针）取各个点的x x、y y坐标值。坐标值。6.10.html