最新html基础.docx

最新html基础.docx

《最新html基础.docx》由会员分享，可在线阅读，更多相关《最新html基础.docx（15页珍藏版）》请在冰豆网上搜索。

最新html基础

html-基础

课题名称：

HTML基础

教学目的:

知识目标:

掌握Xｈtml的语法　

能力目标：

1、掌握DW创建表格能力

　2、掌握DW创建表单能力　　

情感目标：

提高学生团结合作精神，提高学生竞争意识

教学重点:

1、Ｘhtｍl语法

2、DW创建表格和表单

教学难点:

Xｈtmｌ

教学方法:

讲授法、演示法、讨论法

课时安排：

2课时

教学环境：

多媒体教室

学习过程:

教学环节

教学内容

学生活动

新课导入（5mｉｎ）

上个学期我们学习了dreaｍｗeaver软件,在这个软件中，同学们还记得哪些标签呢？

小组竞赛写标签,标签写的越多，小组加分越多

任务1

Html语法大全

　虽然已经有很多现成的ＨTML编辑器可以用,不必再自己编写HTＭＬ文件，但学习手工编写ＨＴML文件的必要性的理由在于:

１、现在HＴML标准一直在改进中，而现成的HＴＭL编辑器并不一定跟得上HTＭL的潮流.

　2、可以看到,用ＨTＭL编辑器编出来的HTML文件结构相当乱，这是因为在编辑过程中,编辑器并不能真正理会用户的编辑要求，结果反复修改后，就留下不少垃圾。

ﻫ　3、自己编写HTML文件,可以随时将ＨTＭL的新发展增加进去,而不用受编辑器的限制。

ﻫ　4、ＨＴML是一种很有意思的语言,它能将你的想法在IＮＴERＮET上很好地体现出来.ﻫＨＴＭＬ语句特点:

1。

       所有ＨTML语句大部分都是表示打开标记,

但有的语句只有描述开始标记,没有描述结束,如〈P＞

2。

       　ＨＴML中对文字的大小写不敏感。

3。

       　所有语句都可以循环嵌套,但要注意嵌套对称。

例:

〈h3〉……。

〈／h3〉〈/cenｔer〉  这种书写方法将导致编译错误

下载软件

任务2

Htｍl文档构成

一、ＨTMＬ文档的基本结构ﻫ         　HTML部分:

每个HTML文档必须以打开ＨTML标记开始，以关闭HTＭＬ标记结束ﻫ＜ＨTML＞<／HTＭL>说明其间内容为HTMＬ格式文档。

ﻫ         　头部分：

此部分包含文档的标题、文档使用的脚本、样式表定义等信息，还可以包含搜索工具和索引所要的其他信息。

头部分必须包含在

       〈TＩＴLE>〈／TITLE〉其间包含的文字是该HTML的主题，会显示在窗口的ＴＩＴLE栏位.

２。

       <ＭETA〉标记,此标记可以设置网页的编码、自动刷新网页、设置网页的过期值ﻫ       〈metａ　namｅ=”aｕthor”contenｔ=”…….”>

       <ｍeｔa　namｅ=”ｋｅyｗorｄ”coｎtent=”…。

。

”>ﻫ       ＜metaｈttｐ—equiv＝”Expiｒes"　conｔent=”ｍon，１５sep20０3”>ﻫ       ﻠ

/／ｙoｕrlink”>ﻫ       　

         正文部分ﻫ＜ＢＯDＹ>

BＡCＫGRＯＵNＤ=“图形名"　背景图形文件

TEXT=＃RＲGGBB　文字颜色（一般为黑　＃00000０）

LINK=#RRGGBB链接标志文字颜色　

VＬINK=＃RRGGBB具有超连接部分显示的颜色,点过之后为ALINＫ的颜色

AＬＩＮK＝#ＲRGＧBB　已经链接标志文字颜色ﻫOＮLOAD=“扩展函数调用串"与〈SCRIPT〉一同使用ﻫ〈－teｘt—〉　ｔext　是描述性文字,注释。

〈SCRＩPT〉＜/SCRIPＴ>描述一扩展语言。

　其中：

LAＮGＵAGE=“jａvasｃript”描述以下为Jaｖa语言　

二、字　体

〈Hy〉（y=1-6）用于说明各级标题文字,y=１时字体最大,y=６时字体最小.其中:

AＬIＧN＝缺省对左（ＬEFＴ）

　　=CENTＥR对中ﻫ　　=RＩGHT对右

〈CＡＰTＩON〉显示标题文字（一般用于TＡＢLE显示表格）　

SIZE=-4　～　+４将字体设置为BAＳEFＯＮT的相对大小ﻫCOLＯR＝#RRGＧBB字体颜色（Ｒ、G、Ｂ三色）　ﻫ〈BASEＦONT＞

ＳIZＥ=１—６

三、字型变化　

Iｔaｌiｃ（斜）字体:

　ﻫ〈I>〈/Ｉ>斜体字〈EM>〈／EM〉　着重字

〈VＡR>〈/VAR>表明可变内容（如文件名）

Bｏｌd（黑）字体:

　〈B〉<／B>黑体字〈ＳTRONT＞〈/STRONG〉　加强字,

Fixeｄwidthfont（紧凑）字体:

　ﻫ〈ＴT＞紧凑字（打印机字体）　ﻫ〈ＣOＤE>〈/CODE〉　紧凑字　

＜SＡＭP>〈/SAMP〉样本字ﻫ＜KBＤ〉〈/KBD〉显示键盘上键名ﻫ其它字体修饰：

〈U＞　闪烁字ﻫ特殊字符:

（CEＲN中列表）<；<　０;>〉　>&ａｍp;&　&＃38;&ｑuot;　""；&ｏuml;＆ntilｄｅ；±&ｅgｒave;《@　@＆copy；（ｃ）（NETＳＣAPE　ONLY）　&ｒeg；（NETSCAＰＥＯNLY） 非中断空格 ﻫ ﻫ四、段　落

＜P〉单独表示段落结束。

<Ｐ〉〈/Ｐ〉表示其间文字是同一个段落,段落显示分成若干行,在何处分行由浏览器的窗口宽度决定，可适应任何宽度的窗口。

其中：

　ALIGＮ=缺省　对左（ＬEFＴ）=ＣＥNTEＲ对中=RＩGHT对右

〈BR〉　在页面上加一个回车.

〈HR>显示一条水平分界线。

其中：

（以下NETSCAPE　OＮLY）ﻫSIZE＝n高度点数ﻫWIDTＨ=n　宽度点数=n％　宽?

**计聊话俜直?

ﻫALIＧN=缺省对中=LEFT对左＝ＲIGHT对右

<／ＣENTER〉　表示其间内容显示向中间对齐。

（NＥTSCAＰEOＮＬY）

〈ＰRE〉〈/PRE＞预设文字格式（ＰｒｅfｏrmatｔｅdText）其中的文字间隔、跳行、空白照原始键入情形显示出来,常用于程序的表达。

其它标注也允许存在〈PRE〉中．

〈BLOCＫQUOTE>

其中的文字内容会比其他文字缩进一些。

通常放在最后，包含一个ＥMAIL地址，告知本页面作者。

显示为斜体字。

段落示例

五、链　接

其中:

NAME＝“ｐositｉoｎ"表示页面中pｏｓitiｏn处HREＦ=“＃posiｔｉon”表示链接到本页面ｐｏsitiｏn处

NＡME=“ｆilenａme＃posｉtion”　链接到fiｌenamｅ文件的position处=“ｆｉleｎame．ｈtml”　链接到指定的fｉｌｅnamｅ页面ﻫNAMＥ=“fiｌeｎame.ｇif”显示指定的图形图形格式为GIＦ、TIEF、ＪPEＧ、RGＢ、HＤＦ等格式

ＮＡME＝“scheｍe：

//ｈosｔ-ｄoｍain[:

port］/pａth/fiｌename"链接到指定主机的指定页面　scｈemｅ是ｈttp、ftp等host-ｄｏmaｉn为服务器名ｐort为提供此服务的端口号，缺省为８０,可省略　

六、　图　像ﻫ〈IMG〉〈/IMG>显示图像.其中：

ﻫAＬIGＮ=ＢOTTOM缺省文本在图像下面　　　　　　　　　　=MIDDLＥ在中间　　　　　　　　　＝ＴOP在上面　

SRC=“图像名＂图像文件

ALT=“teｘt”图像别名，若图像不显示时,显示在虚框内　

WIDTＨ=n宽度点数＝n%　可显示面积的百分比ﻫHEＩGＨT=ｎ高度点数=n％　可显示面积的百分比

BORDER＝n立体边框厚度点数ﻫHSPACE=“图像名”水平空间（ＮETSCAＰEＯNＬY）　ﻫVSPACE＝“图像名”垂直空间（NETSＣAPE　OＮＬＹ）ﻫISＭAP说明本图像为地图

USEMＡP=“＃nａme”给本图像取一个地图名

<ＭAＰ〉〈／MAＰ〉对一幅地图进行＊作。

其中：

ＮAMＥ＝“name”由〈IMG〉中指定的地图名

〈/AREＡ〉区域选择。

在<ＭAP＞中使用，其中:

SHAPE=REＣＴ矩形区域,只需提供对角坐标（x１，y１，x2,y2），ﻫ　＝PＯLYGＯＮ多边形,要提供多边形各顶点坐标（x1,y1，.。

.，ｘn,yｎ）

ＣOORＤＳ＝x1,y１,..。

，ｘn，yn坐标值（１0进制）　ﻫＨRＥF＝链接对象（参照〈Ａ＞）　ﻫ图像示例

七、列    表

以下各种排列可以综合嵌套排列,成为有层次的排列。

〈UL>〈／UL〉未标序的排列（UnｎumｂerｅｄＬiｓts）在其中的每一行文字前加上〈LI〉，起始会显示“●”或“□”或“■”等，具体显示什么由具体的浏览器决定.　

〈／OL〉　标序的排列（NumberedListｓ或Ordered　Lists）在其中的每一行文字前加上〈ＬI>,起始会显示数字编号.

〈ＬI〉每一行文字的起头。

〈DＬ〉〈/DＬ〉陈述式排列（Dｅscrｉptｉve　Lists）　

〈DT＞〈/DT＞

ﻫ

在＜DT〉和

中，可包含其它链接内容.ﻫ〈DIR>＜/DＩR〉显示清单,每行最多2０个字符。

在其中的每一行文字前加上〈ＬI〉。

〈MENU＞

八、输入框（输入表格）

〈FOＲM〉<／FORM〉说明一个输入表格.这是从浏览器向服务器发回反馈信息或交互运行的重要方式。

其中:

MEＴＨOD＝GET从服务器获取信息ﻫ　　=POST发送表格信息到服务器

ＡＣTIＯN=“CGＩ—ｐrogram"CＧI—ｐrogｒａｍ是服务器上一个可执行程序,其接口标准为CGI　（ComｍoｎGａtewayIｎtｅrｆace），它将处理浏览器发送回来的填表信息。

表格中可以使用多种元件，如输入框、列表、按钮等。

〈INPUT>〈/ＩＮPUT〉　输入框或按钮选择。

在

其中:

　ﻫSＩZＥ＝n输入框或按钮大小

NAMＥ=“nａｍe”便于CGＩ—progｒam识别的变量名

TYPE=“type”类型（见下）ﻫ=TEXT文本输入框，只有一行

　=PASSWOＲD口令输入框，输入的信息不显示出来ﻫ　=CHECＫＢOX确任盒（[]或[X]）ﻫ　=RＡDIO圆按钮，几个同名的ＲＡDIO只能按下一个ﻫ　=ＳＵBＭIT发送按钮,按动后发出已填好的表格

　　=RＥSEＴ重置按钮,按动后将所有元件重置为缺省值ﻫ　　=IMAGE　

　　=HＩＤDEＮﻫVALＵE=“vａlue"缺省值（见下）

　　=字符串对于ＴＥXT和PAＳSWORＤﻫ　=ON/OＦF　对于CHECKBＯX和RADＩOﻫ　　=显示字符串对于SUBMIT和ＲESＥTﻫ〈TEXTAＲEA〉〈／ＴＥＸTAREA〉说明一个可以多行输入的文本输入框。

其间的文本内容为缺省的文本输入框内容。

其中:

ＮAME＝“namｅ"变量名　

ROWＳ=n输入框行数

ＣＯＬＳ=n输入框列数ﻫ<ＳEＬECT>显示一个选择列表。

在其中的每一行文字前加上＜OPTION>.其中：

　ﻫＮAME＝“nａme”变量名ﻫSIZE=1显示一个*作菜单（OptionMenu）＞=2显示一个滚动列表（ＳcrｏｌledList）　ＳIZE为列表显示出来的行数ﻫ〈ＯPTION>〈/OPTION〉每一行列表的起头.在

九、显示表格

　显示二维表格.其中:

ＢＯＲDEＲ=n二维表格的立体边框厚度点数ﻫWIＤＴH＝n宽度点数　=ｎ％宽？

＊＊计聊话俜直?

CELLPＡDING=n是指TAＢLE中框架与元素的边界的距离

ＣELLSPACIＮＧ=n表格中每项之间的空间点数,包括横向和纵向。

（Texｔ　Ｒow）。

其中：

ALIGＮ=CENTＥR对中

　　　＝LEFT对左ﻫ　＝ＲIＧHT对右ﻫ＜TH＞＜／TH〉在表格的每一种类项目开头加上〈TH>（TextHead）,显示为黑体字。

＜ＴD>〈/ＴD>在表格的每一个项目开头加上＜TD〉（TextData）。

其中:

ＷＩＤＴH=ｎ　宽度点数

　=ｎ%

HALIＧN=CENＴEＲ　对中　

　　＝ＬEFT对左　

　　　=RIＧHT对右

ＶALIＧN　=TOP在上面ﻫ　=MIDDLE　在中间　

　=BOTTＯM在下面

对照教师的演示，小组动手尝试安装

板书设计

ＨTML基础

一、hｔｍl语法

二、Html文档构成

1、ｈtml文档结构

2、字体

3、字型变化

4、段落

5、链接

6、图表

7、列表

8、输入框

9、显示表格

课堂小结

一、hｔｍｌ的语法特点

二、Ｈtml文档的构成

课后反思

本次主要讲述htmｌ一些基本的语法标签,学生需要掌握标签的开始和结束标志,掌握常用标签的用法，由于上个学期有ｄreaｍweavｅｒ的基础，学生学起来较轻松，但是一些不常见的还需要多记忆。