WEB前台技术2-HTML

3Sept.2008©NeusoftConfidentialWEB前台技术——HTML东软人才实训中心课程结构内容第一章：HTML简介第二章：表格（table）第三章：基本标记第四章：表单（form）第五章：框架（frame）综合练习第一章：HTML简介目标:本章旨在向学员介绍HTML的相关概念及基本结构，通过本课的学习，学员应该掌握如下知识学员应该掌握如下知识：1）了解HTML的概念2）了解HTML的元素、标签与属性3）了解HTML的基本结构教学方法：讲授ppt＋课堂演示HTML概念•HTML文件是什么？9HTML表示超文本标记语言（HyperTextMarkupLanguage）9编写网页的主要语言9以htm或html为后缀名☆9是一种解释语言，用浏览器打开解释执行HTML文件组成•HTML文档9HTML文档是由HTML标记及内容组成的文本文件¾HTML标签★¾HTML属性★¾HTML元素HTML文件的元素、标签与属性•HTML标签★（HTMLTag）9告诉浏览器如何显示内容9两端有两个包括字符：“”和“”，如html，body9大小写无关9标签的种类¾成对出现的标签。前一个标签为开始标签，后一个标签为结束标签¾单标签，如hr/HTML文件的元素、标签与属性•标签属性★9标签可以拥有属性，来具体描述标签的特征9属性能够为页面上的HTML元素提供附加信息，如：bodybgcolor=“red”bgcolor属性告诉浏览器，你的页面的背景色是红色的tableborder=“0”border属性告诉浏览器，这个表格是没有边框的9属性是附加给HTML元素的开始标签的9属性通常由属性名和属性值成对出现，形式为name=“value”9属性值本身就含有引号，会考虑使用单引号，如name=‘John”ShotGun”Nelson’HTML文件的元素、标签与属性•元素-标识标记•属性-描述标记•值-分配给属性的内容TAGATTRIBUTE=value内容/TAGHTML文件的元素、标签与属性•HTML文档是由一系列的HTML元素组成的•元素（HTMLElement)：一组HTML标签及其中包含的一段文字9以一个开始标签开始9中间为元素的内容9以一个结束标签终止htmlheadtitle标题内容/title/headbodyp这是一个段落hr/ahref=“”一个超链接/a/p/body/html元素元素HTML文件的编写工具•手工编写9文本编辑器，如UltraEdit9记事本、写字板、word•HTML的编辑器9Dreamweaver、FrontPage、AptanaStudio¾可以直接看到显示效果¾有提示信息¾错误提示HTML文件的基本结构•HTML文件通常由4个主要的元素构成，基本结构如下★htmlheadtitleHTML文件标题/title/headbodyHTML文件内容/body/html9html…/html¾设置HTML文件的开始和结束9head…/head¾设置HTML文件的一些信息，如标题、层叠样式表单、脚本程序等，又称为头信息¾在浏览器窗口中，头信息是不被显示的9title…/title¾设置HTML文件的标题¾在浏览器的窗口标题栏显示9body…/body¾设置HTML文件的主体内容¾显示在浏览器中运行/获取HTML•如何运行HTML文档9打开文本编辑器9编写内容9保存文档，将后缀名写为“.html”或“.htm”9选择“浏览器”为打开方式，进行浏览•如何获取HTML源码9浏览器工具栏中点击“查看”9选择源文件注意事项•建议9使用小写标签9扩展名使用.html9属性值使用双引号括起•标签属性的引号样式9属性值应该被包含在引号中bodybgcolor=“red”9双引号是昀常用的，但是有时也会使用单引号。在很少的情况下，比如说属性值本身就含有引号，会考虑使用单引号，如name=‘John”ShotGun”Nelson’主体•设置主体：body…/body★9所有要显示的页面元素都要包含在主体内9示例：body_sample.html9可以设置以下属性：属性含义bgcolor设置页面背景颜色。★background设置页面的背景图片的URL。bgproperties取fixed值时设置背景不随滚动条滚动，不设此属性时背景随滚动条滚动。text设置页面非超链接文字基本颜色。link设置超链接文字的颜色。alink设置鼠标按下时的超链接（activelink）的颜色。vlink设置已访问过的超链接（visitedlink）的颜色。注释•设置注释：!--…--9浏览器不解释显示其中的内容!--本句不会被解释显示--第二章：表格★目标:本章旨在向学员简要介绍表格标记的使用，学员应该掌握如下知识：1）可以在HTML页面中插入表格2）能够做出不同样式的表格，能够合并多行、多列教学方法：讲授ppt＋课堂演示+上机练习表格•表格（Table）9显示数据表9网页内容的排列9Table的基本结构tablecaption成绩单/captiontrth姓名/thth语文/th/trtrtd张三/tdtd23/td/trtrtd李四/tdtd45/td/tr/table列行列标题表格•设置表格：table…/table9table可以设置以下属性属性含义align设置表格位置，可以为left、center、right。width设置表格的宽度。height设置表格的高度。border设置表格外框的粗细。☆bordercolor设置表格外框的颜色。表格9table可以设置以下属性-续属性含义cellspacing设置两个单元格之间的间距。cellpadding设置单元格内文字与单元格边框的间距。background设置表格的背景图像的URL。bgcolor设置表格的背景颜色。☆表格•设置表格行：tr…/tr9可以设置以下属性属性含义bgcolor设置表格行的背景色。align设置水平对齐方式，可取left、center、right。☆valign设置垂直对齐方式，可取top、middle、bottom。☆☻练习：表格•设置单元格：td…/td、th…/th9可以设置以下属性，如果单元格为空，用 填充，否则单元格没有边框属性含义width单元格宽度。height单元格高度。rowspan单元格占用表格行数。★colspan单元格占用表格列数。★background设置单元格背景图像。bgcolor设置单元格背景色。align设置内容水平对齐方式，可选left、center、right。valign设置内容垂直对齐方式，可选top、middle、bottom。表格•设置单元格：td…/td、th…/th9colspan:单元格占用表格列数9rowspan:单元格占用表格行数tableborder=“1”bordercolor=“blue”trthName/ththcolspan=“2”Telephone/th/trtrtdMichaelPhelps/tdtd123456/tdtd653321/td/tr/table表格•注意9一般情况下，每个行的单元格数量要相等9没有任何内容的单元格，必须进行特殊处理9高度要设置到表格的第一列单元格上，宽度要设置到表格的第一行单元格上9在td/td之间不要出现不必要的空白符第三章:基本标记目标:本章旨在向学员简要介绍HTML的各种常用标记，学员应该掌握如下知识：学员应该掌握如下知识：1）使用各种基本标记完成简单页面教学方法：讲授ppt＋上机练习HTML常用标签多媒体文字表现行控制列表标签•多媒体9img9a9marquee9bgsound9embed•文字表现9font9em9strong9sub9sup9b9I9u•行控制9div9hi9p9center9pre9hr9br•列表标签9ul9li9dl9dt9dd9ol文字表现—字体•设置字体：font…/font9可以设置以下属性：☻示例属性含义size设置文字的大小，可取1、2、3、4、5、6、7。取+3表示字体大小为默认字体大小+3取-3表示字体大小为默认字体大小-3color设置文字的颜色。face设置文字的字体列表，第一种字体是首选的，如果用户机器上没有第一种字体，就用第二种字体显示，依次类推。如果列表中的字体都没有，就用用户机器上的默认字体显示。fontsize=“7”color=“#ff0000”face=“楷体_GB2312,宋体”东软集团/font文字表现—物理字体/逻辑字体•设置字体：标签物理字体逻辑字体含义b…/bstrong…/strong设置标记间的文字为粗体（boldface）i…/iem…/emcite…/cite设置标记间的文字为斜体（italics）u…/u设置标记间的文字带下划线（underline）sup…/sup设置标记间的文字为上标（superscript）sub…/sub设置标记间的文字为下标（subscript）s…/sstrike…/strike设置标记间的文字带删除线（strike）文字表现—实体•实体9有些字符在HTML中有特殊的含义，不能在文本中使用，如””字符9想要在HTML中显示一个小于号””，需要用到字符实体9一个字符实体由三个部分组成¾一个&符号¾一个实体名或者一个实体号（即ASCII码）¾一个分号（;）¾例如：小于号，需要写为<或者<，在HTML页面中显示为文字表现—常用实体•实体-----无间断空格（Non-breakingSpace）–在HTML中，昀常见的字符实体就是不可拆分空格–通常，HTML会合并你文档中的空格。如果在你的HTML文本中连续输入了10个空格，其中的9个会被去掉。想要在HTML文档中插入空格，可以使用实体 •实体-----昀常用的字符实体显示结果描述实体名实体号无间断空格  ☆小于<<大于>>&and符号&&☆双引号""文字表现—常用实体•实体-----其他一些常用的字符实体显示结果描述实体名实体号¢分¢¢£英镑££¥人民币元¥¥§章节§§©版权©©®注册®®×乘号××÷除号÷÷行控制—标题•设置标题：hn…/hn9n的取值由1到6，代表一级标题到六级标题9可以设置以下属性：☻示例：hn_exercise.html属性含义align设置标题的位置，可取left、center、right。行控制—水平线•设置水平线：hr9hr是horizontalrule的缩写9可以设置以下属性属性含义align设置水平线的位置，align的参数有left、center、right。width设置水平线的宽度，可以用百分数，也可以用像素数。size设置水平线的粗细。color设置水平线的颜色。noshade无取值，设置为无阴影。行控制—换行•设置换行符：br9强制进行换行操作•br示例第一行br新起一行行控制—段落•设置段落：p…/p9将标记间的