html入门介绍.ppt

HTML语法,1HTML基础,HTML建立与测试网页标记符Web页的结构设置页面属性添加注释显示特殊字符,一、HTML（HyperTextMarkupLanguage）超文本标记（标签）语言，是表示网页的一种规范一组影响网页内容显示的标记符的集合使用HTML语言描述的文件，能独立于各种操作系统平台（如UNIX，WINDOWS等），访问它只需要一个WWW浏览器，我们所看到的网页，是浏览器对HTML文件进行解释的结果。,二、测试和创建Web页1.网页编辑工具纯文档编辑工具记事本所见即所得工具FrontPage、Dreamweave2.网页创建步骤(使用“记事本”创建网页)打开“程序/附件/记事本”在“记事本”的窗口中输入HTML代码选择“文件”菜单的“另存为”命令在“文件名”框中输入网页的名称，文件名必须以.html或.htm为后缀名单击保存3.网页测试IE工具即现,三、标记符1.标记符的定义：HTML语言通知浏览器如何显示网页内容的方式2.标记符的形式：所有标记符都用尖括号括起来绝大多数标记符是成对出现的，即包括开始标记符和结束标记符，个别是单一标记符。例如：、开始标记符和结束标记符定义了标记符所影响的范围，它们的区别是结束标记符多了一个斜线/，例如：好好学习天天向上不区分大小写，但为了可读性和维护性，使用大写,这是H1格式的字体这是默认格式的字体,3.标记符的属性作用位置形式红色一号的文字学习和掌握HTML的关键：HTML标记符及其属性,对标记符作用的内容进行更详细的控制,开始标记符的尖括号里，与标记符之间用空格隔开，属性值跟在相应的属性之后，用等号连接，不用属性之间用空格隔开,小写,四、Web页的结构HTML必须包含的基本结构标记符：HTML标记：头标记：标题标记：正文标记：三大结构：,HTML标记Web页的第一个和最后一个标记符Web页的其他所有内容都位于这对标记符之间HTML标记符告诉浏览器或其他阅读该页的程序，此文件为一个Web页不包含其它属性,首部标记位于Web页的开头，不包括Web页的任何实际内容，提供一些与Web页有关的特定信息通常包含一下标记符：标题标记符META标记符BGSOUND标记符,正文标记符包含Web页的具体内容，包括文字、图形、超链接及其他各种HTML对象。正文标记符中的文字如果没有其他标记符修饰，正文标记符中的文字将以无格式的形式显示如果浏览器窗口显示不下，则自动换行空格、回车这些格式控制在显示时都不起作用,标题标记符用于定义网页的标题,并在浏览器窗口的标题栏中显示网页标题可被浏览器用作书签和收藏清单这是网页标题请看浏览器的标题栏。,例子：网页标题正文，正文，正文，正文，正文，正文，正文，正文，正文,META标记符用于描述不包含在标准HTML里的一些文档信息，例如开发工具，作者，网页关键字，网页描述等。这些定义的内容并不在网页页面中显示，但是一些搜索引擎可以检索这些信息，浏览者可以根据这些关键字或描述查找到该网页。常用功能是设置自动转址功能使浏览器自动从一个地址跳转到另一个地址位置META标记符的常用属性包括：name、content和http-equivname属性给出特性名content属性给出特性值http-equiv属性指定HTTP响应名称，通常用于替换name属性，HTTP服务器使用该属性值为HTTP响应消息头收集信息,例1设置客户端行内程序的语言是JavaScript例2设置行内样式的样式语言为CSS例3META示例再过10秒钟，我就上学校的网站了！,我的第一个网页,例4,五、设置页面属性,正文标记符包括一些常用属性，可以用于设置网页背景颜色和图案，以及设置文档中文字和超链接的颜色设置页面背景颜色bgcolor设置页面背景图像background使用背景图案时，如果图案小于浏览器窗口的大小，则浏览器会自动象铺地板砖一样平铺背景图案。可以同时设置背景图案和背景色，以便在不能显示图像的浏览器上显示背景色,页面基本属性定义在中background=背景图片文件名bgcolor=背景颜色text=文本默认颜色link=未被访问链接源文字的颜色alink=被激活链接源文字的颜色vlink=访问过链接源文字的颜色topmargin=信息内容的顶边距离leftmargin=“”信息内容的左边距离背景音乐标记符用于指定网页的背景音乐属性src，用于指定背景音乐的源文件。loop，用于指定背景音乐重复的次数，如果不指定该属性，则背景音乐无限循环例子,表1-116种标准颜色,浏览器将采用默认的设置bgcolor白色或灰色text黑色Link蓝色vlink紫色alink红色例子：,背景图案示例背景图案示例,注释的作用HTML注释的格式由开始标记符构成标记符之间的任何内容都将被浏览器解释为注释，而不在浏览器中显示例子：网页标题正文，正文，正文注释可插入在Web页的任何位置,六、添加注释,七、显示特殊字符,特殊字符参考字符（附录2）参考字符以“isapopularVCDprogram.isapopularVCDprogram,小结,WWW由无数的Web服务器构成，通过浏览器访问这些服务器上的网页，不同的网页通过超链接联系在一起，构成了WWW的网状结构。HTML是表示网页的一种规范，它通过标记符定义了网页内容的显示。最基本的HTML标记符包括：HTML标记符和首部标记和正文标记和。BODY标记符包括一些常用属性，用于控制网页的基本显示效果。发布网页的基本过程为：制作本地站点、申请网页空间、上传网页。,2文本控制,字体控制标记符物理字符样式滚动文字效果文本分段文本对齐列表格式,一、字体控制标记符,size属性控制字符的大小size=字号从17,字号越大，默认值为3color属性控制字符的颜色color=使用颜色名称或十六进制值指定颜色face属性指定字体样式face=常用的英文字体有“TimesNewRoman”、“Arial”等常用的中文字体有“宋体”、“楷体”等例子：例子一例子二例子三例子四,二、物理字符样式指标记符本身就说明了所修饰文字的效果的字符样式使用方法：将设置格式的字符括在标记符之间由于带有超链接的文本下通常包含下划线，因此下划线格式易让人产生误解，建议使用时慎重常见的物理字符样式,物理字符样式效果示例此处为粗体显示文本此处为大字体文本此处为小字体文本此处为斜体文本此处为等宽字体文本此处为下划线文本此处为使用标记设置的删除线文本此处为上标示例：x2+y2=R2此处为下标示例：H2SO4,三、滚动文字效果作用：标记符之间的内容以滚动的方式显示属性：width和height滚动字幕滚动区域的宽度和高度align滚动字幕与周围对象对齐的方式behavior滚动字幕移动的方式bgcolor滚动字幕区域的背景色direction文本滚动的方向hspace和vspace滚动字幕四周水平和垂直方向上的间隙loop滚动重复的次数scrollamout文本滚动的步进象素间距scrolldelay两次文本重画之间的毫秒延时数,滚动字幕示例哈哈哈，我在滚动！图像也可以滚动哦！我滚动的很快！,四、文本分段1.段落标记符将文档划分为段落可以省略2.换行标记符在文档中强制断行区别：不能产生多个空行，而则可在内容之间设置多个空行，即形成空白是断段，而是断行,标记符可以产生多个空行效果此为最后一段,3.水平线标记符在网页内容中添加水平线，分隔文档内容属性：size：水平线的粗细程度，用整数表示，默认值为2width：水平线的长度，用像素长度或宽度的百分比表示noshade：去除水平线的3D样式color：水平线的颜色align：水平线的对齐方式例子：,水平线效果以下是默认水平线：以下是粗为5像素的水平线：以下是长度为100像素的水平线：以下是长度为屏幕宽度50%的水平线：以下是粗为5像素的实心水平线：以下是红色的水平线：,4.标题标记符标识文档中的标题和副标题浏览器在解释标题标记符时，会自动改变文字的大小，并且将字体改为黑体，同时将内容设为一个段落n是1至6的数字，表示最大的标题，表示最小的标题例子：标题效果此为一级标题此为二级标题此为三级标题此为四级标题此为五级标题此为六级标题此为正常文本,五、文本对齐1.align属性设置段落的对齐格式取值：right（右）、left（左）、center（居中）justify（两端）应用范围：多种标记符，最典型的是应用于P、Hn、HR、DIV不同的标记符，其align属性的默认值并不相同标记符P、Hn的align属性默认值为left标记符HR的align属性默认值为center2.DIV标记符为文档分节，以便为文档的不同部分应用不同的段落格式必须与align等属性联合使用位于DIV标记符中的多段文本将被认为是一个节，可为它们设置一致的对齐格式。3.CENTER标记符将和包括起来的内容定义为居中对齐,使用align属性本行为默认对齐的段落，相当于align=left本行为居中对齐的段落本行为右对齐的段落本行为居中对齐的一级标题以下为左对齐的水平线：,使用DIV标记符浣溪沙晏殊一曲新词酒一杯，去年天气旧池台，夕阳西下几时回？无可奈何花落去，似曾相识燕归来，小园香径独徘徊。,六、列表格式1.有序列表（Orderedlist）定义：一种在表的各项前显示有数字或字母的缩排列表列表项1列表项2列表项3OL标记符的属性：type设置数字序列样式start设置数字序列的起始值,值可以是任意整数当位于OL标记符内时，LI标记符的属性：type设置数字样式，取值与OL的type属性相同value设置一个新的数字序列起始值，以获得非连续性的数字序列,有序列表示例用大写罗马字母表示的有序列表：列表项1列表项2列表项3起始数字为3的有序列表：列表项1列表项2列表项3编号不连续的有序列表列表项1列表项2列表项3变换了数字样式的有序列表列表项1列表项2列表项3,有序列表的嵌套使用有序列表嵌套可以获得不同层次的编号列表。嵌套时，只需将内层列表作为外层列表的一个列表项即可。列表的嵌套层数没有限制。,嵌套的有序列表嵌套的有序列表列表项1子列表项1子列表项2子列表项3列表项2列表项3,2.无序列表（Unorderedlist）定义：一种在表的各项前显示有特殊项目符号的缩排列表。无序列表标记符UL标记符的type属性控制列表项前特殊符号的显示列表项标记符LI标记符的type属性的值如下表所示：,在InternetExplorer中，type的值是区分大小写的,无序列表示例默认无序列表：列表项1列表项2列表项3使用方块作为列表项标记的无序列表：列表项1列表项2列表项3,3.混合嵌套列表有序列表和无序列表也可互相嵌套，如以下HTML代码所示：列表项1列表项2子列表项1子列表项2列表项3,小结,HTML中用于进行文本分段的标记符包括：段落标记符P、换行标记符BR、水平线标记符HR、标题标记符Hn等在标记符中使用align属性，可控制内容的对齐方式FONT标记符是最常用的控制字体格式的标记符，它可控制文字的字号、颜色以及字体物理字符样式和逻辑字符样式可控制文字的不同显示效果，例如设置粗体、斜体等MARQUEE标记符可以用于创建滚动文字效果OL和LI标记符结合，可以创建有序列表UL和LI标记符结合，可以创建无序列表,3图像与超链接,Web页图像基础图像标记符统一资源定位器(URL)超链接标记符锚点链接图像映射,一、Web页图像基础1.位图与矢量图,位图，用点描述图像,矢量图，用线条等数学信息描述图像,2.Web页图像格式GIF格式GraphicsInterchangeFormat(图形交换格式)适用于颜色较少（小于256色）的图像压缩，并允许透明，也可以是动画JPEG格式JointPhotographicExpertsGroup(联合静态图形专家组)可控制图像的压缩比率,适用于颜色较为丰富的图像,不支持透明和动画PNG格式PortableNetworkGraphics(可移植网络图形)适用于矢量图像，并允许半透明,3.使用网页图像的要点确保文件较小使图像具有所需的像素大小采用正确的格式进行优化处理控制图像的数量和质量合理使用动画图像的处理工具PhotoshopFireworksFlashCorelDraw,二、图像标记符在网页中插入图像或动画元素具体属性：,插入图片插入图像示例我插入的第一幅图像：,插入视频插入视频示例插入动态视频,图像与周围内容垂直对齐aligntop、middle、bottom,文本与图像的垂直对齐示例此图像与文本顶部对齐此图像与文本中央对齐此图像与文本底部对齐,图文混排时的图像对齐alignleft、right,实现图文混排:left表示图像居左，文本在图像右侧；right表示图像居右，文本在图像左侧。解除在图像的左、右环绕文本:在插入标记的下一行文本将转入正常显示。,三、统一资源定位器1.URL(UniversalResourceLocator，统一资源定位器)表示Web上资源的一种方法，通常可以理解为资源的地址组成协议代码装有所需文件的计算机地址具体的文件路径和文件名。例如：使用形式：http:/webhostname.somedomain/path/filename.htm文件传输协议：FTP(FileTransferProtocol)。使用形式：ftp:/ftphostname.somedomain/path/filename.htm电子邮件协议：mailto。使用形式：mailto:usernamesomedomain新闻组协议：news(Usenet)。使用形式：news:/newshostname.somedomain,2.绝对URLInternet上资源的完整地址，包括完整的协议种类、计算机域名和包含路径的文档名其形式为：协议:/计算机域名/文档名例如：,3.相对URLInternet上资源相对于当前页面的地址，它包含从当前页面指向目的页面位置的路径例如：public/example.htm使用相对URL的好处在于当用户需要移植站点时，只要保持站点中各资源的相对位置不变，就可以确保移植后各页面之间的超链接仍能正常工作。用户在编写网页时，通常使用的都是相对URL(除非需要引用外部网页)如果在网页中需要指定内部资源，应使用相对URL相对URL本身并不能唯一地定位资源，但浏览器会根据当前页面的绝对URL正确地理解相对URL。,说明在URL中，总是使用正斜杠(/)作为路径分隔符，而不是使用Windows或DOS中的反斜杠()。在客户端，点击不同类型的链接时，会自动启动相应的客户端软件来访问相应的资源。句点(.)当前目录双重句点(.)上一级目录(父目录)例如./image.gif表示当前目录中的imagegif文件，相当于image.gif；./public/index.htm表示与当前目录同级的public目录下的index.htm文件，也就是当前目录上一级目录下的public目录中的index.htm文件,四、超链接标记符格式:链接点href属性：用于指定超链接的目标链接目标：要访问的目标页面或其他资源，使用URL来表示链接点：在和之间任何可单击的网页元素，如文字或图像我的大学？下载功能？电子邮件链接功能？,target属性,？下载功能？如果href属性指定的文件格式是浏览器能直接显示或播放，那么单击超链接时就会直接显示相应的文件如果如果href属性指定的文件格式是浏览器不能直接显示或播放，那么单击超链接就可以获得下载功能？电子邮件链接功能？链接点请按时交作业！,单击电子邮件链接后会启动邮件程序,五、锚点链接对同一网页的不同部分或不同网页的不同部分进行链接锚点链接必须先定义锚点，然后才能定义链接。锚点的定义：此处内容可省略定义链接链接点定义指向不同页面内锚点的链接，形式如下链接点,相对URL绝对URL,锚点链接,六、图像映射在一幅图中定义若干个区域，每个区域中指定一个不同的超链接，当单击不同区域时便可以跳转到相应的目标页面。应用：电子地图、页面导航图、页面导航条,热点hotspot,电子地图页面,页面导航图实例,步骤：找出要定义区域的坐标例如，在图3-31中就要定义两个矩形区域，它们的坐标分别是“30,152,366,218”和“171,256,228,288”定义出映射区域编写HTML文件，在其中定义出映射区域使用映射区域在IMG标记符中引用映射区域,rect、circle、poly、default,标识图像映射中的区域边界,图像映射效果,图像映射示例请单击以下图像中的不同区域，以便跳转到不同的文件,1.制作一个图文并貌的网页（?301）至少3张图片、一个视频文件文字不少于三段，字数不少于100字至少用到等标记符及align属性图片应分别满足以下排版要求：实现文本与图像的环绕文本居于图片左侧文字与图片在垂直方向上居中对齐2.制作一个具有锚点链接的网页（?302）内容具有文字与图片锚点不少于四个既有页内锚点链接，又有页外锚点链接3.制作一个具有超链接功能的网页（?303）具有绝对链接、相对链接、文件下载功能、电子邮件发送功能要求利用bgcolor、text、Link、vlink、alink等属性修改网页默认的文字、超链接信息的颜色4.制作一个简单的图像映射网页（?304）,实训作业,4Photoshop&Flash,PhotoshopFireworkGIF动画Flash动画,5表格,表格的定义表格的作用表格的构建步骤表格标记符网页布局,一、表格的定义：将按特定的行、列规则对内容进行排列,表格标题,表格的行,行列标题数据,普通数据,表格,二、表格的作用：,HTML表格模型使用户可以将各种数据（包括文本、预格式化文本、图像、链接、表单、表单域以及其他表格等）排成行和列，从而获得特定的表格效果用于设计网页的布局,使用TABLE标记符包括所有表格内容使用CAPTION标记符定义表格的标题从第一行开始，使用TR标记符分隔每一行表格有多少行，就应该有多少个TR标记符表格的行数应该是垂直方向上单元格的最大数在每一行(即TR标记符后)内，依次用TH或TD标记符标记每个单元格的内容按照步骤2的做法，顺次一行一行处理，直到表格结束如果遇到空单元格，只需使用空的TH或TD标记符即可,三、表格的构造步骤：,表格示例课程表星期一星期二星期三星期四星期五第1大节数学英语数学英语哲学第2大节物理计算机计算机计算机第3大节计算机英语计算机,标签符Width属性表格宽度可以为像素点值或百分比Border属性边线宽度具体数值，0表示不显示边线Frame属性控制表格边框表示表格最外层的四条框线，该属性的取值可以是：Void无边框。void是默认值，即默认时不显示边框Above仅有顶框Below仅有底框Hsides仅有顶框和底框（水平方向）vsides仅有左、右侧框（垂直方向）lhs仅有左侧框rhs仅有右侧框box包含全部四个边框border包含全部四个边框,二、表格标签符：,其它值2、3、4,rules属性控制是否显示以及如何显示单元格之间的分隔线，取值可以是：none无分隔线。none是默认值，即默认时不显示单元格间的分隔线rows仅有行分隔线cols仅有列分隔线all包括所有分隔线Align属性控制表格与页面其它内容的对齐方式，取值可以是：Left、center、rightBgcolor属性设置表格的背景颜色background属性设置表格的背景图案Cellspacing属性单元格之间的距离cellpadding属性分割线与数据之间的距离,表格的边框和分隔线示例我的日程表星期一星期二星期三星期四星期五MUDNBA2001联众军棋联众军棋笑傲江湖DiabloIIDiabloII联众军棋升级MUDMUD睡觉学习打篮球打篮球,cellspacing属性单元格之间的空白,cellpadding属性表格分隔线和数据之间的距离,表格单元格空白示例表格1大话西游大内密探008少林足球鹿鼎记喜剧之王九品芝麻官逃学威龙食神百变金刚表格2大话西游大内密探008少林足球鹿鼎记喜剧之王九品芝麻官逃学威龙食神百变金刚,标签符定义表格的标题align属性表格标题在网页中的对齐方式取值为：left、center、right成绩单标签符定义表格的一行align属性行中数据的水平对齐方式取值为：left、center、rightvalign属性行中数据的垂直对齐方式取值为：top、middle、bottomBgcolor属性整行单元格的背景颜色,表格数据的水平对齐表格数据的水平对齐本行数据右对齐右右左本行数据为默认左对齐左中中本行数据居中对齐,表格数据的垂直对齐表格数据的垂直对齐野蛮人barbarian女巫sorceress巫师necromancer,标签符定义行中的具体单元格align属性单元格内数据的水平对齐方式取值为：left、center、rightvalign属性单元格内数据的垂直对齐方式取值为：top、middle、bottombgcolor属性单元格的背景颜色width属性、height属性单元格宽度、高度具体数据值或百分比rowspan属性单元格所占的行数表示该单元格高度为三行colspan属性单元格所占的列数,合并单元格示例学生情况表学号个人信息入学信息姓名性别年龄班级入学年月007东方不败不详198888882001年9月008任我行男208888882001年9月,在网页中显示班级的功课表（?401）在网页中插入如下形式的表格（?402）,实训作业,五、使用表格设计网页布局善于运用嵌套表格善于运用背景色设置细线,图4-12表格布局综合实例1,图4-13表格布局综合实例2,图4-14表格布局综合实例3,图4-15表格布局综合实例4,图4-16表格布局综合实例5,6框架,框架的概念框架的作用框架标签符框架中的超链接页内（浮动）框架,框架结构的网页,框架结构的联机帮助系统,一、定义：能在同一个浏览器窗口中显示多个网页的页面布局控制容器二、作用：网站导航功能将浏览器窗口划分为不同的部分，每部分中装载不同的网页，通过为超链接指定目标框架，可以为框架之间建立起内容之间的联系，因而实现页面的导航和页面间的交互操作联机帮助,三、框架标记符及格式,框架集标记符，是框架容器，框架必须定义在框架集之内,定义浏览器不支持框架技术时所要显示的替代内容，必须包含在标记符之中，可选,框架标记符，定义一个框架，必须包含在标记符之中,也可以嵌套,框架不支持框架技术，很抱歉！,嵌套框架太遗憾了，您的浏览器不支持框架！/P,1.框架集标记符rows属性：设置横向框架cols属性：设置纵向框架例子：框架集网页,2.框架标记符name属性：框架的名称src属性：框架的初始页面frameborder属性：是否显示边框（1|0）marginwidth属性：边距宽度marginleft属性：边距高度noresize属性：禁止修改框架尺寸scrolling属性：是否有滚动条（yes|no|auto）例子：初始化框架,四、框架中的超链接链接：超链接点特殊框架名_top_self_blank_parent,多少个html文件？,第六周实训,作业1：利用框架结构将多个网页组织在一个浏览器窗口中（上/左右结构）标记符标记符右框架中的网页必须有图文排版的方式,四、页内框架浮动框架插入到网页中作为一个对象来使用的。属性，可以控制页内框架的显示：src指定要在页内框架中显示的网页的URL，即初始页面；widthx指定页内框架的宽heighty指定页内框架的高aligntopmiddlebottomleftright指定页内框架对齐方式frameborder10指定页内框架是否采用边框；name“.”指定页内框架的名字scrollingyesnoauto指定页内框架是否加滚动条；marginwidthx指定页内框架水平方向上内容与边框的间隔arginheighty指定页内框架垂直方向上内容与边框的间隔,页内框架示例李白静思怨情真可惜，您的浏览器不支持框架！,第七周,页内框架PhotoshopFlash,如何在网页中插入flash动画？,六、表单1.定义：用于实现网页