html课件(全)

HTML全部内容基本概念HTML基本标识符基本概念HTTP：超文本传输协议HTML：超文本标记语言网页：用于存储网页信息的文件网络服务器：用于存储网络文件的计算机客户端：用于浏览网页的一端的计算机浏览器：用于浏览网页的软件平台浏览器类型：IE、NetscapeNavigator、MyIE等用户如何从浏览器获得资源internet输入地址请求HTTP传输基本概念网络分类：按照范围分：广域网(WAN)、城域网(MAN)、局域网(LAN)按拓扑结构：总线型结构,星型结构,环形结构,网状结构网络的拓扑结构是指网络中通信线路(揽线)和计算机、以及其他组件的物理布局。概述当我们畅游Internet时，我们透过浏览器所看到的网站，是由HTML(HyperTextMarkupLanguage)语言所构成。HTML(超文件标记语言)是一种建立网页文件的语言，透过标记式的指令(Tag)，将影像、声音、图片、文字等连结显示出来。概述HTML标记是由和所括住的指令，主要分为:单标记指令、双标记指令(由起始标记，/结束标记所构成)。它是一种介于前台和后台的语言。HTML网页文件可由任何文本编辑器或网页专用编辑器编辑，完成以.htm或.html为文件后缀保存将HTML网页文件由浏览器打开显示，若测试没有问题则可以放到服务器(Server)上，对外发布信息。如何保存一个HTML文件HTML网页文件可由任何文本编辑器或网页专用编辑器编辑，完成后以.htm或.html为文件后缀保存编辑工具FrontPageDreamweaver记事本……关于设计模式的解释C/S模式B/S模式MVC模式C/S模式C/S（Client/Server）结构，即大家熟知的客户机和服务器结构。将任务合理分配到Client端和Server端来实现，降低了系统的通讯开销。目前大多数应用软件系统都是Client/Server形式的两层结构B/S模式B/S（Browser/Server）结构即浏览器和服务器结构。它是随着Internet技术的兴起，对C/S结构的一种变化或者改进的结构。在这种结构下，用户工作界面是通过浏览器来实现，极少部分事务逻辑在前端（Browser）实现，但是主要事务逻辑在服务器端（Server）实现，形成所谓三层3-tier结构。这样就大大简化了客户端电脑载荷，减轻了系统维护与升级的成本和工作量，降低了用户的总体成本（TCO）。MVC模式MVC是一种目前广泛流行的软件设计模式，早在70年代，IBM就推出了Sanfronscisico项目计划，其实就是MVC设计模式的研究。近来，随着J2EE的成熟，它正在成为在J2EE平台上推荐的一种设计模型，也是广大Java开发者非常感兴趣的设计模型。MVC英文即Model-View-Controller，即把一个应用的输入、处理、输出流程按照Model、View、Controller的方式进行分离，这样一个应用被分成三个层——模型层、视图层、控制层。HTML语法示例1：HTMLHEADTITLE欢迎学习HTML/TITLE/HEADBODYH3我的第一个HTML文档/H3/BODY/HTML运行结果基本结构标识htmlhead/headbody/body/html注意：在HTML中是不分大小写的。标记要书写规范，包括标记的缩进!HTML基本标识符HTML文件基本架构单标识特殊标识排版标识字体标识列表标识表格框架表单标识其他标识HTML文件基本架构HTML文件开始HEAD标头区开始TITLE.../TITLE标题区/HEAD标头区结束BODY本文区开始本文区内容/BODY本文区结束/HTML文件结束HTML网页文件格式。HEAD标头区:记录文件基本资料，如作者、编写时间。TITLE标题区:文件标题须使用在标头区内，可以在浏览器最上面看到标题。BODY本文区:文件资料，即在浏览器上看到的网站内容单标识!----注意：c语言中的两种注释brhrlinkimgframeinputbgsoundmetabase特殊标识P12-13空格 <>&&“"‘'©©®®排版标识p/pbrh1/h1----h6/h6pre/prehrnobr不强行换行HTML的文本编辑标记p：段落标记pre：预定标记•原封不动的保留空白区域br：换行标记blockquote：缩进标记div,span：区块标记hr：水平线标记strong,em：强调标记h1…h6：标题标记dldtdd：列表标记HTML的文本编辑标记实例pThisismyHTMLpage.brHaha/ppalign=centerThisismyHTMLpage.brHaha/pHTML的文本编辑标记实例pThisismyHTMLpage.brblockquoteemHaha/em/blockquotestrongHahaend!/strongbr/p缩进标记HTML的文本编辑标记实例preThisismyHTMLpage./prep一般的格式，忽略多余的回车换行和Tab、空格pre格式化文本，保留所有空格、回车和Tab一般用于书写代码或诗歌HTML的文本编辑标记实例p这是一个span元素spanstyle=color:red123_Span/spanbr下面是一个div元素divstyle=color:green456_Div/div/phrwidth=50%内嵌样式SPAN和DIV的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN是行内元素，SPAN的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。spanSPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，span标识符允许你将一个段落分成不同的部分。还有一个标识符具有类似的功能，divDIV也被用来在HTML文件中建立逻辑部分。但与divSPAN不同，div工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。列表标识有序列表olli/li/ol无序列表ulli/li/ul自定义列表dldt条目dd内容/dl表格框架表单标识表格tabletrtd/td/tr/table框架framesetframe/frameset表单fromselectinputoption/option/form/selecttextarea/textarea其他标识链接标识a/a字幕标识marquee/marquee多媒体标识embed/embed图片标识imgHead标记Head标记包含的元素有：title/title标题meta描述非html标准的一些文档信息link描述当前文档与其他文档间的链接关系script/script脚本程序内容style/style样式表内容base设置打开链接的方式Body标记属性：attribute每个标记中用于修饰标记的一些描述信息。属性值：用来设置属性的值。如：bodybackgrond=1.giftopmargin=50leftmargin=30text=#33FFFFalink=#000000link=#FF0000vlink=#33FF00/bodyBody标记Bgcolor背景色Background背景图片Text文本颜色Link链接文字颜色Alink活动链接文字颜色Vlink已访问链接文字颜色Topmargin页面顶部留白距离Letfmargin页面左侧留白距离Bottommargin页面底部留白距离Rightmargin页面右部留白距离补充内容颜色的设定：三种方法#FFFFFF#六位十六进制数RGB(255,255,255)rgb码White英文单词名长度单位绝对长度：单位为像素相对长度：单位为百分比hx标题标记HTMLHEADTITLEHTML简介/TITLE/HEADBODYH1HTML简介/H1H2HTML简介/H2H3HTML简介/H3H4HTML简介/H4H5HTML简介/H5H6HTML简介/H6/BODY/HTML可显示六种大小的标题，即H1到H6，H1为最大，H6为最小hx标题标记h1align=“center“我的网页/h1Align的属性值有：left（默认）rightcenterp段落标记P的属性有align如：palign=“right”你们好/pfont标记属性：color定义文字的颜色face定义文字的字体size定义文字的大小fontcolor=“#3300CC”face=“黑体”size=“3”文字内容/fonthr标记属性：align对齐方式color线条颜色size线条的粗度width线条的宽度如：hralign=centercolor=#99FF00size=3width=50%img图片标记在网页中插入图片属性：src指定图片的路径alt用于描述图片的文字width图片的宽度height图片的高度border图片的边框align图片的对齐方式img图片标记Align的属性值top图片和文字顶部对齐middle图片和文字居中对齐bottom图片和文字底部对齐left图片居左对齐文字沿图片绕排right图片居右对齐文字沿图片绕排absmiddle图片对齐到目前文字的绝对中央absbottom图片对齐到目前文字的绝对底部插入图像HTMLHEADTITLE插入图像/TITLE/HEADBODYH1FONTSIZE=3COLOR=FORESTGREENB插入图像/B/FONT/H1HRPIMGALIGN=bottomSRC=cats.jpg底部对齐/PP图2.15：示例15的输出结果IMGALIGN=topSRC=cats.jpg顶部对齐/PPIMGALIGN=middleSRC=cats.jpg居中对齐/P/BODY/HTMLIMG标记用于将图像插入到HTML文档中。可以将IMG标记放置在要显示图像的位置。语法为：IMGSRC=URL其中SRC是属性，而值是指定图像文件位置的URL。IMG标记的ALIGN属性可以用于调整图像相对于周围文本的对齐方式。语法为：IMGALIGN=topSRC=PICTURE.GIFBORDER=0a超链接标记通过链接可以调用另一个页面或是同页面某一区域的资源。属性：align对齐方式target目标窗口的显示形式title链接提示href设置要连接的地址targetTarget的属性值_blank打开一个新窗口_self在当前窗口打开_pa