html-基础

课题名称：HTML基础教学目的：知识目标：掌握Xhtml的语法能力目标：1、掌握DW创建表格能力2、掌握DW创建表单能力情感目标：提高学生团结合作精神，提高学生竞争意识教学重点：1、Xhtml语法2、DW创建表格和表单教学难点：Xhtml教学方法：讲授法、演示法、讨论法课时安排：2课时教学环境：多媒体教室学习过程：教学环节教学内容学生活动新课导入（5min）上个学期我们学习了dreamweaver软件，在这个软件中，同学们还记得哪些标签呢？小组竞赛写标签，标签写的越多，小组加分越多任务1Html语法大全虽然已经有很多现成的HTML编辑器可以用，不必再自己编写HTML文件，但学习手工编写HTML文件的必要性的理由在于：1、现在HTML标准一直在改进中，而现成的HTML编辑器并不一定跟得上HTML的潮流。2、可以看到，用HTML编辑器编出来的HTML文件结构相当乱，这是因为在编辑过程中，编辑器并不能真正理会用户的编辑要求，结果反复修改后，就留下不少垃圾。3、自己编写HTML文件，可以随时将HTML的新发展增加进去，而不用受编辑器的限制。4、HTML是一种很有意思的语言，它能将你的想法在INTERNET上很好地体现出来。ＨＴＭＬ语句特点：1.所有HTML语句大部分都是TAG/TAG结构，TAG表示打开标记，/TAG表示下载软件关闭标记。但有的语句只有描述开始标记，没有描述结束，如P2.HTML中对文字的大小写不敏感。3.所有语句都可以循环嵌套，但要注意嵌套对称。例：h3center……./center/h3就是正确的嵌套方法h3center……./h3/center这种书写方法将导致编译错误任务2Html文档构成一、HTML文档的基本结构HTML部分：每个HTML文档必须以打开HTML标记开始，以关闭HTML标记结束HTML/HTML说明其间内容为HTML格式文档。头部分：此部分包含文档的标题、文档使用的脚本、样式表定义等信息，还可以包含搜索工具和索引所要的其他信息。头部分必须包含在HEAD/HEAD标记对中1.TITLE/TITLE其间包含的文字是该HTML的主题，会显示在窗口的TITLE栏位。2.META标记，此标记可以设置网页的编码、自动刷新网页、设置网页的过期值metaname=”author”content=”…….”metaname=”keyword”content=”…..”metahttp-equiv=”Expires”content=”mon,15sep2003”metahttp-equiv=”Refresh”content=”10”,url=”metahttp-equiv=”Content-Type”content=”text/html;charset=gb2312”正文部分BODY/BODY其间说明HTML文件的主体内容。BACKGROUND=“图形名”背景图形文件TEXT=#RRGGBB文字颜色（一般为黑#000000）LINK=#RRGGBB链接标志文字颜色VLINK=#RRGGBB具有超连接部分显示的颜色，点过之后为ALINK的颜色ALINK=#RRGGBB已经链接标志文字颜色ONLOAD=“扩展函数调用串”与SCRIPT一同使用对照教师的演示，小组动手尝试安装-text-text是描述性文字，注释。SCRIPT/SCRIPT描述一扩展语言。其中：LANGUAGE=“javascript”描述以下为Java语言二、字体Hy/Hy(y=1-6)用于说明各级标题文字，y=1时字体最大，y=6时字体最小。其中：ALIGN=缺省对左(LEFT)=CENTER对中=RIGHT对右CAPTION/CAPTION显示标题文字（一般用于TABLE显示表格）FONT/FONT字体大小设置（NETSCAPEONLY）其中：SIZE=-4~+4将字体设置为BASEFONT的相对大小COLOR=#RRGGBB字体颜色（R、G、B三色）BASEFONT/BASEFONT设置基本字体（NESCAPEONLY）其中：SIZE=1-6三、字型变化Italic（斜）字体：I/I斜体字EM/EM着重字CITE/CITE段落、书名的引用VAR/VAR表明可变内容(如文件名)Bold（黑）字体：B/B黑体字STRONT/STRONG加强字,Fixedwidthfont（紧凑）字体：TT/TT紧凑字（打印机字体）CODE/CODE紧凑字SAMP/SAMP样本字KBD/KBD显示键盘上键名其它字体修饰：U/U下划线BLINK/BLINK闪烁字特殊字符：（ＣＥＲＮ中列表）<<>>&&&""öñ±è《@@©(c)（NETSCAPEONLY）®（NETSCAPEONLY） 非中断空格四、段落P单独表示段落结束。P/P表示其间文字是同一个段落，段落显示分成若干行，在何处分行由浏览器的窗口宽度决定，可适应任何宽度的窗口。其中：ALIGN=缺省对左（LEFT）=CENTER对中=RIGHT对右BR在页面上加一个回车。HR显示一条水平分界线。其中：（以下NETSCAPEONLY）SIZE=n高度点数WIDTH=n宽度点数=n%宽?**计聊话俜直?ALIGN=缺省对中=LEFT对左=RIGHT对右CENTER/CENTER表示其间内容显示向中间对齐。（NETSCAPEONLY）PRE/PRE预设文字格式（PreformattedText）其中的文字间隔、跳行、空白照原始键入情形显示出来，常用于程序的表达。其它标注也允许存在PRE中。BLOCKQUOTE/BLOCKQUOTE区块引用设定。其中的文字内容会比其他文字缩进一些。ADDRESS/ADDRESS地址区域。通常放在最后，包含一个EMAIL地址，告知本页面作者。显示为斜体字。段落示例五、链接A/A链接标记。其间文本（图像）将显示出来，并用链接颜色和下划线区别出来。其中:NAME=“position”表示页面中position处HREF=“#position”表示链接到本页面position处NAME=“filename#position”链接到filename文件的position处=“filename.html”链接到指定的filename页面NAME=“filename.gif”显示指定的图形图形格式为GIF、TIEF、JPEG、RGB、HDF等格式NAME=“scheme://host-domain[:port]/path/filename”链接到指定主机的指定页面scheme是http、ftp等host-domain为服务器名port为提供此服务的端口号，缺省为８０，可省略六、图像IMG/IMG显示图像。其中:ALIGN=BOTTOM缺省文本在图像下面=MIDDLE在中间=TOP在上面SRC=“图像名”图像文件ALT=“text”图像别名，若图像不显示时，显示在虚框内WIDTH=n宽度点数=n%可显示面积的百分比HEIGHT=n高度点数=n%可显示面积的百分比BORDER=n立体边框厚度点数HSPACE=“图像名”水平空间（NETSCAPEONLY）VSPACE=“图像名”垂直空间（NETSCAPEONLY）ISMAP说明本图像为地图USEMAP=“#name”给本图像取一个地图名MAP/MAP对一幅地图进行*作。其中：NAME=“name”由IMG中指定的地图名AREA/AREA区域选择。在MAP中使用,其中:SHAPE=RECT矩形区域，只需提供对角坐标(x1,y1,x2,y2),=POLYGON多边形，要提供多边形各顶点坐标(x1,y1,...,xn,yn)COORDS=x1,y1,...,xn,yn坐标值(１０进制)HREF=链接对象（参照A）图像示例七、列表以下各种排列可以综合嵌套排列，成为有层次的排列。UL/UL未标序的排列（UnnumberedLists）在其中的每一行文字前加上LI，起始会显示“●”或“□”或“■”等，具体显示什么由具体的浏览器决定。OL/OL标序的排列（NumberedLists或OrderedLists）在其中的每一行文字前加上LI，起始会显示数字编号。LI/LI每一行文字的起头。DL/DL陈述式排列（DescriptiveLists）DT/DTDL中显示陈述的主题。DD/DDDL中显示叙述的内容，会比DT内容缩入一些位置。在DT和DD中，可包含其它链接内容。DIR/DIR显示清单，每行最多２０个字符。在其中的每一行文字前加上LI。MENU/MENU显示菜单。在其中的每一行文字前加上LI。八、输入框（输入表格）FORM/FORM说明一个输入表格。这是从浏览器向服务器发回反馈信息或交互运行的重要方式。其中：METHOD=GET从服务器获取信息=POST发送表格信息到服务器ACTION=“CGI-program”CGI-program是服务器上一个可执行程序，其接口标准为CGI(CommonGatewayInterface)，它将处理浏览器发送回来的填表信息。表格中可以使用多种元件，如输入框、列表、按钮等。INPUT/INPUT输入框或按钮选择。在FORM中使用。其中：SIZE=n输入框或按钮大小NAME=“name”便于CGI-program识别的变量名TYPE=“type”类型（见下）=TEXT文本输入框，只有一行=PASSWORD口令输入框，输入的信息不显示出来=CHECKBOX确任盒（[]或[X]）=RADIO圆按钮，几个同名的RADIO只能按下一个=SUBMIT发送按钮，按动后发出已填好的表格=RESET重置按钮，按动后将所有元件重置为缺省值=IMAGE=HIDDENVALUE=“value”缺省值（见下）=字符串对于TEXT和PASSWORD=ON/OFF对于CHECKBOX和RADIO=显示字符串对于SUBMIT和RESETTEXTAREA/TEXTAREA说明一个可以多行输入的文本输入框。其间的文本内容为缺省的文本输入框内容。其中：NAME=“name”变量名ROWS=n输入框行数COLS=n输入框列数SELECT/SELECT显示一个选择列表。在其中的每一行文字前加上OPTION。其中：NAME=“name”变量名SIZE=1显示一个*作菜单（OptionMenu）=2显示一个滚动列表（ScrolledList）SIZE为列表显示出来的行数OPTION/OPTION每一行列表的起头。在SELECT中使用。九、显示表格TABLE/TABLE显示二维表格。其中：BORDER=n二维表格的立体边框厚度点数WIDTH=n宽度点数=n%宽?**计聊话俜直?CELLPADING=n是指TABLE中框架与元素的边界的距离CELLSPACING=n表格中每项之间的空间点数，包括横向和纵向。TR/TR在表格的每一行开头加上TR(TextRow)。其中：ALIGN=CENTER对中=LEFT对左=RIGHT对右TH/TH在表格的每一种类项目开头加上TH(TextHead)，显示为黑体字。TD/TD在表格的每一个项目开头加上TD(TextData)。其中：WIDTH=n宽度点数=n%HALIGN=CENTER对中=LEFT对左=RIGHT对右VALIG