《HTML课程.ppt》由会员分享,可在线阅读,更多相关《HTML课程.ppt(46页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、HTML12/21/20221HTML基础计算机及软件技术发展史n计算机硬件发展史n计算机操作系统的发展史n计算机程序语言的发展史n计算机软件体系结构发展史nB/S结构软件体系结构的特点12/21/20222HTML基础HTML简介 nHTML-Hyper Text Markup Language,超文本标记语言,是网页制作的基本语言,所有的网页都是由HTML语言或将其它的脚本语言嵌入HTML语言中编写而成的 nHTML的特点及浏览器的工作原理12/21/20223HTML基础HTML特点 n描述性语言,结构语言,用于决定网页内容以什么样的形式显示n通过标签来控制网页的文档、字符和段落等的格式
2、,以及对脚本语言等的调用 n纯文本文件,可以使用各种文本编辑器编写 n文件扩展名:.htm 或.html nhtml文件必须在Web浏览器上运行n目前常用的浏览器:IE、FireFox、Mozilla等 n具有跨平台性 12/21/20224HTML基础HTML文件结构 n起始标记:表示HTML网页的起始 n文件头部:设置初始化文档信息和文档管理标注 n文件主体:设置格式化的浏览器显示的文档(内容)n注释部分:可以放在任何位置;12/21/20225HTML基础HTML文件示例nHTML超文本标记语言在线教程 12/21/20226HTML基础n该节点是HTML文档的根节点n告诉浏览器其节点中
3、的内容是HTML文档n该节点必须成对出现,表明开始和结束12/21/20227HTML基础HEAD和TITLE元素nHEAD没有属性nHEAD中可以包含其它元素,可以包含的元素如下:ntitle meta script nstyle linkn如:title.html12/21/20228HTML基础meta元素n设置文档的编码方式:n设置关键字、描述以及作者的信息12/21/20229HTML基础body元素n你想让浏览器显示什么样的内容?n核心两个方面:页面的显示效果 数据提交的方式12/21/202210HTML基础HTML注释 12/21/202211HTML基础复习HTML模板you
4、r site:location within site:topic title 12/21/202212HTML基础使用HEADERSnHTML定义了六个级别的标题n分别是:.n例:headers.html 12/21/202213HTML基础使用段落n定义段落元素:n注意:在使用该元素的时候,HTML中允许没有回标签,但是为了能将现有的HTML迁移到XHTML中建议大家在使用该标签的时候将回标签加上。n例:UsingParagraph.html12/21/202214HTML基础使用换行元素nHTML中的换行元素是或者n注意:尽量不要在文本中加入换行控制符,最好采用外部的显示控制方式来进行显
5、示的控制。n例:PageBreaks.html12/21/202215HTML基础顺序列表元素n在.中添加.构成n会自动在li标签中的文字前加上序号nLi标签在使用的时候可以没有回标签,但是建议大家使用回标签n例:OrderedList.html12/21/202216HTML基础非顺序列表元素n在.标签中加入.的方式n会在li标签中的字符串内容前加上项目符号n如果要改变项目符号,可以通过CSS来设定n例:UnorderedList.html12/21/202217HTML基础嵌套列表n可以在一个列表中的某一个项中再嵌套一个列表,形成嵌套列表n建议:不要使用更多层次的嵌套,因为如果层次过多,说
6、明你使用的表现方式不好。n例1:nOrderedNestingList.htmln例2:nMixedOrderedList.html12/21/202218HTML基础定义列表元素n用来定义概念n构成:三个标签.(definition list).(definition term).(definition description)n例:DefinitionList.html12/21/202219HTML基础超链接元素n连接到Google n连接到Google n例:Link.html12/21/202220HTML基础电子邮件连接元素n蝈蝈Email n例:EmailLink.html12/
7、21/202221HTML基础table元素n n例:TableExample.html12/21/202222HTML基础在table中添加行n利用来添加一个行 n例:AddRowInTable.html12/21/202223HTML基础在表格中添加标题n使用 标签n例:TableHeadersOne.htmln例:TableHeadersTwo.html12/21/202224HTML基础给表格添加说明n使用.标签n例:AddingCaptionToTable.html12/21/202225HTML基础表单n什么是表单nHTML表单是HTML页面与浏览器端实现交互的重要手段,利用表单可
8、以收集客户端提交的有关信息。它是网站实现互动功能的重要组成部分。n表单的主要功能是收集信息。12/21/202226HTML基础表单的组成n表单的组成:n一是描述表单元素的HTML源代码;n二是客户端的脚本,或者服务器端用来处理用户所添信息的程序。n表单的形式:单行输入、多行输入、单选框和多选框等。12/21/202227HTML基础表单n表单信息的处理过程如下:n当单击表单中的提交按钮时,输入在表单中的信息就会上传到服务器中,然后由服务器的有关应用程序(例如CGI、ASP、PHP、JSP等)进行处理,处理后将用户提交的信息存储在服务器端的数据库中,或者将有关信息返回到客户端浏览器上以供用户确
9、认。12/21/202228HTML基础表单头及其属性n表单的通用格式是:nxxn表单的元素包含在以开始到结束中的。n有两个重要的属性:method=post或是getn这两个选择的区别是:post是一种邮寄的方式,在浏览器的地址栏不显示提交的信息,但是这种方式传送的数据是没有限制的;get是一种手把手的提交到服务器上,最大的信息量是2K,而且提交的信息显示在浏览器上。12/21/202229HTML基础表单中包含的标记n表单输入标记n 菜单和列表标记n 菜单和列表项标记n 文字域标记12/21/202230HTML基础输入标记nn表单中最常用的标记之一,常用的文本域、按钮等都使用这个标记。n
10、基本语法:nnn12/21/202231HTML基础文字域TEXTnTEXTnText属性值用来设定在表单的文本域中,输入任何类型的文本、数字或字母,输入的内容以单行显示。n基本语法:n12/21/202232HTML基础密码域 PasswordnPasswordn密码域是一种特殊的文本域,输入到文本域中的内容均以*星号显示。n基本语法:n12/21/202233HTML基础单选框 radionRadion单选框能够进行项目的单项选择,以一个圆框表示。n基本语法:n12/21/202234HTML基础复选框 checkboxnCheckboxn复选框能够进行项目的多项选择,以一个方框表示。n基
11、本语法:n12/21/202235HTML基础按钮n表单中的按钮起着至关重要的作用,按钮可以激发提交表单的动作,按钮可以在用户需要修改表单的时候将表单恢复到初始的状态,还可以依照程序的需要发挥其他的作用。n类型n提交按钮,重置按钮,普通按钮。12/21/202236HTML基础提交按钮nSubmitn单击提交按钮后,可以实现表单内容的提交。n基本语法:n12/21/202237HTML基础重置按钮nResetn单击重置按钮后,可以清除表单的内容,恢复成默认的表单内容设定。n基本语法:n12/21/202238HTML基础普通按钮nButtonn普通按钮主要配合JavaScript脚本来进行表单
12、的处理。n基本语法:nn button-text12/21/202239HTML基础隐藏域nHiddenn隐藏域在页面中对用户是不可见的,在表单中插入隐藏域目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器。n基本语法:n12/21/202240HTML基础图象域nImagen图象域是指可以用在提交按钮位置上的图片,这幅图片具有按钮的功能。我们可以使用图象域,创建和网页整体效果相统一的图象提交按钮。n基本语法:n12/21/202241HTML基础文件域nFilen文件域可以让用户在域的内部填写自己硬盘中的文件路径,然后通过
13、表单上传,这是文件域的基本功能,如在先发送E-mail时的附件功能。文件域的外观是一个文本框加一个浏览按钮,用户即可以直接将要上传给网站的文件路径填写在文本框中,也可以单击浏览按钮,在自己的电脑中找到要上传的文件。n基本语法:n12/21/202242HTML基础文字域标记nTextarean这个标记用来制作多行的文字域,可以在其中输入更多的文本。n基本语法:n12/21/202243HTML基础菜单和列表标记n菜单n一种最节省空间的方式,正常状态下只能看到一个选项,单击按钮打开菜单后才能看到全部选项。n列表n可以显示一定数量的选项,如果超出了这个数量,回自动出现滚动条,浏览者可以通过拖动滚动条来查看选项。12/21/202244HTML基础菜单和列表标记n通过和标记可以设计页面中的菜单和列表效果。n基本语法:nn选项一n选项二nn12/21/202245HTML基础 Thanks12/21/202246HTML基础
限制150内