网站建设与实训Html 基础知识.docx
- 文档编号:10946294
- 上传时间:2023-02-23
- 格式:DOCX
- 页数:28
- 大小:82.11KB
网站建设与实训Html 基础知识.docx
《网站建设与实训Html 基础知识.docx》由会员分享,可在线阅读,更多相关《网站建设与实训Html 基础知识.docx(28页珍藏版)》请在冰豆网上搜索。
网站建设与实训Html基础知识
Html基础知识
Html优点
•Html文档独立于平台,多平台兼容。
只要有一个可以阅读和解释html的浏览器就可。
不同浏览器显示的形式不同。
•Html是纯文本文件,可以用记事本、写字板等文本编辑器来编写。
(从本质上说,www只是一个由html文件及一系列传输协议组成的集合)
●如何建立HTML文档
(1)使用记事本新建一个HTML文件
(2)使用编辑工具创建
1文档结构
•从结构上讲,html文件由元素(element)组成,元素用来组织文件的内容和指导文件的输出格式。
一个html文件应具有以下结构:
….….应注意:
(1)html文件仅有一个html元素构成,即文件以开始,以结束。
文件其他部分是html的元素体,元素体主要有两大部分,即头元素和体元素还有一些注释组成
(2).大部分元素有两部分,起始标记(startag)和结尾标记(endtag)
(3).每一个元素都有名称和可选择的属性,元素的名称和属性都在起始链接签内标明,属性的顺序不重要
1.1…
应该是发给浏览器的第一个标记,用于表示一个页面的开始。
应当是发送到浏览器的最后一个标记。
1.2
…对页面的一般性说明,如:
标题、主题介绍、字符集、作者信息等,这些信息与书写顺序无关。
必须出现在
之前。1.3
出现在
…之间,用于提供页面的名称,可以出现在浏览器标题栏上,而且在1.4
出现在
…之间,提供该文档的媒体信息,有name,content,url和http-equiv属性,其中url属性在客户引导页面时,提供目标地址,content属性为name和http-equiv提供指定值。(1)name属性
1〉keywords
说明:
keywords用来告诉搜索引擎你网页的关键字是什么。
举例:
2〉description简介
说明:
description用来告诉搜索引擎你网站的主要内容。
举例:
3〉robots机器人向导
说明:
robots用来告诉搜索引擎那些页面需要索引,那些页面不需要索引。
Content的参数有all.None.Index.Noindex.Follow.nofollow,默认为all.
举例:
注意:
设定为"all"时文件将被检索,且页上链接可被查询;
设定为"none"则表示文件不被检索,而且不查询页上的链接;
设定为"index"时文件将被检索;
设定为"follow"则可查询页上的链接;
设定为"noindex"时文件不检索,但可被查询链接;
设定为"nofollow"则表示文件不被检索,但可查询页上的链接.
4>author(作者)
说明:
标注网页的作者。
举例:
(2)http-equiv属性
常用类型有:
1〉expires期限
说明:
可以用于设定网页的到期时间。
一旦网页过期,必须到服务器上从新下载调阅。
举例:
30: 41gmt”> 注意: 必须使用gmt时间格式。 2〉pragma(cach模式) 说明: 禁止浏览器在本地机的缓存中调阅叶面内容。 举例: ”no-cache”> 注意: 这样设定,访问者将无法脱机浏览。 3〉refresh(刷新) 说明: 定时让网页自动链接到其他网页。 举例: 注意: 其中5是指停留5秒后自动刷新至新url网址。 4〉(cookie设定) 说明: 如果网页过期,那么存盘的cookie将被删除。 用法: 20: 00GMT">cookie设定,如果网页过期,存盘的cookie将被删除。 需要注意的也是必须使用GMT时间格式 expires=Wednesday,21-Oct-9816: 14: 21GMT;path=/"> 注意: 必须使用GMT的时间格式。 5>Window-target(显示窗口的设定) 说明: 强制页面在当前窗口以独立页面显示。 用法: <METAHTTP-EQUIV="Window-target"CONTENT="_top"> 注意: 用来防止别人在框架里调用你的页面。 Content选项: _blank、_top、_self、_parent。 "_blank"是链接文件在新的窗口中打开,你可以做其他设置。 将“_blank”改为“_parent”是链接文件将在当前窗口的父级窗口中打开;改为“_self”链接文件在当前窗口(帧)中打开;改为“_top”链接文件全屏显示。 6>Content-Type(显示字符集的设定) 说明: 设定页面使用的字符集。 用法: <METAhttp-equiv="Content-Type"content="text/html;charset=gb2312"> 注意: 游览器会根据此来调用相应的字符集显示page内容 7>Pics-label(网页等级评定) 说明: 在IE的Internet选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过该参数来设置的。 用法: <METAhttp-equiv=”Pics-label”contect=”(PICS-1.1"http: //www.gcf.org/v2.5" labelson"1994.11.05T08: 15-0500" until"1995.12.31T23: 59-0000" for"http: //w3.org/PICS/Overview.html" ratings(suds0.5density0color/hue1)) ”> 注意: 不要将级别设置的太高。 8>页面进入和退出的特效(例1) 用法: 说明: 这个是页面被载入和调出时的一些特效。 duration表示特效的持续时间,以秒为单位。 transition表示使用哪种特效,取值为1-23: 0矩形缩小 1矩形扩大 2圆形缩小 3圆形扩大 4下到上刷新 5上到下刷新 6左到右刷新 7右到左刷新 8竖百叶窗 9横百叶窗 10错位横百叶窗 11错位竖百叶窗 12点扩散 13左右到中间刷新 14中间到左右刷新 15中间到上下 16上下到中间 17右下到左上 18右上到左下 19左上到右下 20左下到右上 21横条 22竖条 23以上22种随机选择一种 1.5. 使用 在创建文档集合时,使用 通过在每个文档中放置正确的 比如直接copy网上一个html文件的源文件下来,存成本地文件,打开往往图片的地址找不到。 这时可以使用basetag Forexample,giventhefollowingBASEdeclarationandAdeclaration: DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN" "http: //www.w3.org/TR/html4/strict.dtd"> Haveyouseenour 1.6. 说明了html文件的主体部分,所有需要在浏览器上显示的文本及标识符都应该放置在这里。 通过使用以下属性可以对网页进行修饰。 1〉text属性指明整个文档的所有文本的颜色; 2〉bgcolor属性指明文档的背景颜色; 3〉background属性指明背景图像文件的url; 4〉bgproperties属性指明背景图像是否随着文档的滚动而滚动,其值为fixed,则保持固定不动; 5〉link属性指明文档中还未问访问过的超文本链接的颜色。 6〉alink属性指明单击超文本链接时超文本链接的颜色; 7〉vlink属性指明文档中已经被访问过的超文本链接的颜色; 8〉topmargin属性以像素为单位指明这个文档上边的边缘大小 9〉leftmargin属性以像素为单位指明整个文档左边的边缘大小 1.7 --…..--> 指明注释,用于在html中进行一些功能说明或在用于某些简单的浏览器时,可以用于隐藏不支持的客户端脚本语句和css语句。 可以在html文件的任何部位加入注释,一个注释也可以分成许多行。 当文件太大时,添加大量的注释是一种标明文件各部分功能的好办法,以便以后能记住文件究竟是干什么的。 1.8 doctype>序 指明html的版本。 该标识必须放在html文档的第一行,但并不常用,如 Doctypehtmlpublic”-//w3c//dtdhtml4.0final//en> 2文本修饰 2.1设置文本字体 2.1.1 指明所有文档的基础字体大小,有以下属性: 1〉color属性指明文档文本的颜色。 2〉face属性指明文档文本的字体。 3〉size属性是一个1~7之间的整数,自小而大,用于指明字体的大小。 2.1.2… 以一种指定的字体格式化文本。 其属性有: 1〉color属性指明字体的颜色。 2〉face属性设置文本的字体。 3〉size属性是一个1~7之间的整数或相对值如-1,用于指明字体的大小。 2.1.3 用来指定个部分标题,其中#代表1~6之间的数字,自大至小,其属性有: align属性,其值是left,center和right控制对其方式。 2.2调整文本显示格式 2.2.1调整文本对齐方式与文本显示格式一般通过改变文本的对齐方式.控制文本的显示样式进行 (1)文本缩进…
标识(例2)
(2)使文本/图像居中
2.2.2设置文本隔离
(1)文本换行
通过在需要中断的文本后设置
,实现中断,与其功能相反的是
(2)段落设置
html允许在文本中间分段。
…
标识自动为文本进行分段,且段与段间有一空行。有align属性,其值有left.center和right,控制段落对齐方式。
(例4)
*(3)创建文本区域
html允许使用
这些标识的属性有:
align属性指明在
2.2.3设置文本的显示样式
(1)预格式化文本标识
…使用等宽字体和保留空格与换行符来创建格式化文本,使其按照原文件中的格式显示,其属性width,用于指明文本的宽度。
(例5)
(2)引用格式显示文本
html使用…标识以引用或参考的形式显示文本(一般以斜体显示)。
(例6)
(3)以程序代码格式显示文本
html使用标识…
,以程序代码形式显示文本。
(例7)其中代码并不执行
(4)以列表的形式显示格式化文本
html使用
标识以菜单列表的形式格式化文本。(例8)
2.2.4显示滚动文本
显示一个滚动的选项框,其间文本可以滚动显示。
属性有:
ALIGN:
用于按设定的值对齐滚动的文本。
ALIGN可以设定的值有:
LEFT,CENTER,RIGHT,TOP,BOTTOM。
此属性不是必须使用的。
例:
效果:
这段滚动文字设定为上对齐
BEHAVIOR:
可以在页面上一旦出现文本时让浏览器按照设定的方法来处理文本。
如果设定的方法是SLIDE,那么文本就移动到文档上,并停留在页边距上。
如果设定为ALTERNATE,则文本从一边移动到另一边。
如果设定为SCROLL,文本将在页面上反复滚动。
本属性不是必须使用的。
可以设定的值有:
SILIDE,ALTERNATE,SCROLL。
例:
效果:
文字从一边移动到另一边
BGCOLOR:
用于设定字幕的背景颜色。
背景颜色可用RGB、16进制值的格式或颜色名称来设定。
例:
效果:
用颜色名称设定滚动文字背景颜色为红色
DIRECTION:
用于设定文本滚动的方向,可以设定的值有:
LEFT,RIGHT,up,down。
此属性不是必须使用的。
例:
效果:
文字向左边滚动
文字向右边滚动
HEIGHT:
用于设定滚动字幕的高度,高度可用像素或可视页面的百分比来表示。
此属性不是必须使用的。
例:
效果:
滚动字幕的高度是12像素
WIDTH:
用于设定字幕的宽度,宽度可用像素或可视页面的百分比来表示。
此属性不是必须使用的。
例:
效果:
滚动字幕的宽度是可视页面的90%
滚动字幕的宽度是200像素
HSPACE:
用于设定滚动字幕左右的空白空间,空白空间用像素表示。
此属性不是必须使用的。
例:
效果:
滚动字幕左右空白空间为15个像素
VSPACE:
用于设定滚动字幕上下的空白空间,空白空间用像素表示。
此属性不是必须使用的。
例:
效果:
滚动字幕上下的空白空间为2个像素
LOOP:
用于设定滚动字幕的滚动次数。
当LOOP的值为"INFINITE"或是"-1"时,则文字会无限制地滚动。
此属性不是必须使用的。
例:
效果:
文字滚动无数次
SCROLLAMOUNT:
用于设定每个连续滚动文本后面的间隔,该间隔用像素表示。
此属性不是必须使用的。
例:
效果:
此文本后面的间隔为10个像素
SCROLLDELAY:
用于设定两次滚动操作之间的间隔时间,该时间以毫秒为单位。
此属性不是必须使用的。
例:
效果:
此文本两次滚动之间的间隔时间为5毫秒
//www.w3.org/1999/xhtml">
使用滚动字幕,可以使网页生动起来
滚动字幕是最常用的
这个方向的滚动可以吗?
//www.w3.org/1999/xhtml">
80%;HEIGHT: 100px"scrollAmount=2direction=upbehavior=alternate>