WEB开发基础-HTML

WEB应用开发基础-HTML特殊字符/实体学习网页设计的网站://基本概念HTTP：超文本传输协议HTML：超文本标签语言网页：用于存储网页信息的文件网络服务器：用于存储网络文件的计算机客户端：用于浏览网页的一端的计算机浏览器：用于浏览网页的软件平台浏览器类型：IE、NetscapeNavigator、MyIE等用户如何从浏览器获得资源internet输入地址请求HTTP传输概述当我们畅游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是一种目前广泛流行的软件设计模式，早在70年代，IBM就推出了Sanfronscisico项目计划，其实就是MVC设计模式的研究。近来，随着J2EE的成熟，它正在成为在J2EE平台上推荐的一种设计模型，也是广大Java开发者非常感兴趣的设计模型。MVC英文即Model-View-Controller，即把一个应用的输入、处理、输出流程按照Model、View、Controller的方式进行分离，这样一个应用被分成三个层——模型层、视图层、控制层。：HTMLHEADTITLE欢迎学习HTML/TITLE/HEADBODYH3我的第一个HTML文档/H3/BODY/HTML运行结果基本结构标识htmlhead/headbody/body/html注意：在HTML中是不分大小写的。标签要书写规范，包括标签的缩进!HTML文件基本架构HTML文件开始HEAD标头区开始TITLE.../TITLE标题区/HEAD标头区结束BODY本文区开始本文区内容/BODY本文区结束/HTML文件结束HTML网页文件格式。HEAD标头区:记录文件基本资料，如作者、编写时间。TITLE标题区:文件标题须使用在标头区内，可以在浏览器最上面看到标题。BODY本文区:文件资料，即在浏览器上看到的网站内容标签Head标签包含的元素有：title/title标题meta描述非html标准的一些文档信息link描述当前文档与其他文档间的链接关系script/script脚本程序内容style/style样式表内容base设置打开链接的方式base标签Target属性值有：_blank_parent_selfmeta标签Meta元素提供一些非html标准的用户不可见的信息。单标签作用：编码的说明metahttp-equiv=content-typecontent=TEXT/HTML;charset=GB2312定时刷新METAhttp-equiv=refreshcontent=5;URL=页面进入和退出的特效进入页面metahttp-equiv=Page-Entercontent=revealTrans(duration=x,transition=y)推出页面metahttp-equiv=Page-Exitcontent=revealTrans(duration=x,transition=y)这个是页面被载入和调出时的一些特效。duration表示特效的持续时间，以秒为单位。transition表示使用哪种特效，取值为0-23:页面进入和退出的特效0矩形缩小1矩形扩大2圆形缩小3圆形扩大4下到上刷新5上到下刷新6左到右刷新7右到左刷新8竖百叶窗9横百叶窗10错位横百叶窗11错位竖百叶窗页面进入和退出的特效12点扩散13左右到中间刷新14中间到左右刷新15中间到上下16上下到中间17右下到左上18右上到左下19左上到右下20左下到右上21横条22竖条23以上22种随机选择一种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英文单词名长度单位绝对长度：单位为像素相对长度：单位为百分比简介/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图片标签P17在网页中插入图片属性：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=0分隔图片将一整张图片分隔成几个部分。imgsrc=1.GIFalign=leftborder=3width=257height=240usemap=#planetmapmapid=planetmapname=“mymapareashape=rectcoords=0,0,129,126alt=sohuhref=“”areashape=rectcoords=0,125,128,239alt=sinaareashape=rectcoords=129,127,256,239alt=163areashape=rectcoords=128,0,256,126alt=chinaren/map