HTML设计与应用-LAMP兄弟连PHP培训

LAMP兄弟连PHP培训配套课件LAMP兄弟连PHP培训配套课件HTML设计与应用网址：电话：4007001307电话：4007001307咨询QQ：1020824692HTML设计与应用HTML设计与应用1.网页制作概述2.XHTML语言的语法2.XHTML语言的语法3.XHTML文件的主体结构4.文字版面的编辑5.创建图像和链接5.创建图像和链接6.使用XHTML表格7.XHTML框架结构8.XHTML表单设计格式标签8.XHTML表单设计格式标签一、网页制作概述一、网页制作概述™1.1什么是HTML？™1.2HTML的历史™1.2HTML的历史™1.3什么是XHTML？1.1什么是HTML1.1什么是HTML™HTML是用来制作网页的标记语言™HTML是HypertextMarkupLanguage的英文缩写,HTML是HypertextMarkupLanguage的英文缩写,即超文本标记语言™HTML语言是一种标记语言,不需要编译,直接由浏HTML语言是一种标记语言,不需要编译,直接由浏览器执行™HTML文件是一个文本文件,包含了一些HTML元素,HTML文件是一个文本文件,包含了一些HTML元素,标签等.HTML文件必须使用html或htm为文件名后缀™HTML是大小写不敏感的,HTML与html是一样的™HTML是由W3C的维护的HTML是由W3C的维护的HTML示例HTML示例html!--HTML开始标记--head!--HTML头信息开始标记--head!--HTML头信息开始标记--title本页面的标题/title!--网页标题标记--/head!--HTML头信息结束标记--!--HTML中可以使用空行调整编码格式--bodybgcolor=“black”text=“#ffffff”!--网页主体标记--center!--HTML格式标记中的居中标记--center!--HTML格式标记中的居中标记--h1这是第一个HTML实例/h1!--HTML内容1号标题标记--/center!--HTML居中格式的结束标记--hrwidth=“80%”!--HTML中输出分隔线标记--p本页显示黑色背景，白色的文本/p!--HTML段落的标记对--p本页显示黑色背景，白色的文本/p!--HTML段落的标记对--/body!--页面体中内容结束标记--/html1.2HTML的历史1.2HTML的历史™HTML1.0--1993年6月,IETF发布™HTML2.0--1995年11月,发布™HTML2.0--1995年11月,发布™HTML3.2--1996年1月,W3C推荐标准HTML4.0--1997年12月,W3C推荐标准™HTML4.0--1997年12月,W3C推荐标准™HTML4.01--1999年12月,W3C推荐标准™HTML5.0--2008年8月,W3C工作草案1.3什么是XHTML？1.3什么是XHTML？XHTML指扩展超文本标签语言（EXtensibleHyperText™XHTML指扩展超文本标签语言（EXtensibleHyperTextMarkupLanguage）。XHTML与HTML4.01几乎是相同的，可以说就是HTML一个™XHTML与HTML4.01几乎是相同的，可以说就是HTML一个升级版本。™XHTML是更严格更纯净的HTML版本。™XHTML是更严格更纯净的HTML版本。™XHTML是作为一种XML应用被重新定义的HTML。™XHTML是一个W3C标准,基于XML的应用，语言更简洁更严™XHTML是一个W3C标准,基于XML的应用，语言更简洁更严紧。™XHTML的目标是取代HTML,建立XHTML的目的就是实现XHTML的目标是取代HTML,建立XHTML的目的就是实现HTML向XML的过渡。™XHTML是大小写敏感的,XHTML与xhtml是不一样的.标准的XHTML标签应该使用小写。XHTML标签应该使用小写。二、XHTML语言的语法二、XHTML语言的语法™2.1HTML标签™2.2HTML标签属性™2.2HTML标签属性™2.3HTML元素™2.4HTML文档2.5HTML注释™2.5HTML注释™2.6特殊字符2.1HTML标签2.1HTML标签™标签是HTML中最基本单位,也是最重要组成部分。™通常要用两个角括号括起来:“”和“”。™标签都是闭合的（两种形式：成对与不成对）™标签都是闭合的（两种形式：成对与不成对）标签名内容/标签名如：table/table标签名/如：br/™标签是大小写无关的,body跟BODY表示意思是一样的，标准推荐使用小写，这样符合XHTML标准标签名/如：br/常用HTML标签使用小写，这样符合XHTML标准html--定义html文档body--定义文档体bodyhead--定义文档头信息headtitle--定义文档的标题titlehtl链接标签ihtl图像标签i常用HTML标签a--html链接标签aimg--html图像标签imgdiv--html层divtable--定义html表格tabletr--定义表格行trtd--定义表格列tdform--html表单标签forminput--定义表单的输入域inputformhtml表单标签forminput定义表单的输入域input2.2HTML标签属性2.2HTML标签属性™HTML属性一般都出现在HTML标签中,是HTML标签的一部分。™标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中。标签可以拥有多个属性。™标签可以拥有多个属性。™属性由属性名和值成对出现。™语法：™语法：™示例：标签名属性名1=属性值属性名2=属性值...属性名N=属性值/标签名ahref=“”兄弟连网址/a!–定义一个兄弟连网站的超级链接--imgsrc=images/linux_logo.jpgwidth=80height=40!–插入一张“linux_logo.jpg”图片,并设置图片显示的高度和宽度--2.3HTML元素2.3HTML元素™HTML元素是构建网页的一种单位,是由HTML标签和HTML属性组成的,HTML元素也是网页中的一种基本单位。™HTML文档就是由元素和标记组成的文件。™HTML文档就是由元素和标记组成的文件。™示例：ahref=“”这是个HTML链ahref=“”兄弟连网址/a这是一个HTML链接元素p这是我的第一个网站，欢迎来到ahref=“”兄弟连这是一个HTML段落元素它包含兄弟连/a社区。/p段落元素,它包含了一个HTML链接元素.2.4HTML文档2.4HTML文档HTML文档就™HTML文档就是HTML页面,也就是网页,也就是网页,是由HTML元素组成的™互联网的所有内容都是由一个个由一个个HTML文档体现的，如右现的，如右侧页面。2.5HTML注释2.5HTML注释HTML注释,我们经常要在一些代码旁做一些HTML注释,HTML注释,我们经常要在一些代码旁做一些HTML注释,这样做的好处很多,比如:方便查找,方便比对,方便项目组里的其它程序员了解你的代码,而且可以方便以后你对自里的其它程序员了解你的代码,而且可以方便以后你对自己代码的理解与修改等等.语法!被注释的内容imgsrc=images/linux_logo.jpgalt=这是Linux图标!使用alt属性的图片语法：!--被注释的内容--!--使用alt属性的图片--imgsrc=images/linux_logo.jpgborder=2!--设置图片的边框宽度2px--ii/liljidth80imgsrc=images/linux_logo.jpgwidth=80!--只设置宽度高度自动适应--imgsrc=images/linux_logo.jpgwidth=80height=40!图片高度和宽度起设置!--图片高度和宽度一起设置--2.6特殊字符2.6特殊字符™特殊字符：用数值码和引用代码效果代码效果™特殊字符：用数值码和引用实体两种方式表示„例如：代码效果代码效果"“&&<>©©在什么情况下需要用&qout表示？<> 空格©©§§¤¤™如果属性值中同时有单引号和双引号，该如何处理呢？假设p标签的title属性值为‘z’x”x,那么，„不使用引号的写法为：ptitle=‘z’x”x/p„不使用引号的写法为：ptitle=zxx/p„使用单引号的写法为：ptitle=‘‘z’x”x’/p有错„使用双引号的写法为：ptitle=“‘z’x”x”/p有错„特殊字符的写法为：ptitle=“‘z’x"x”/p正确™思考题：„人们为什么要对&、、字符安排一个HTML编码文本代码呢？„人们为什么要对&、、字符安排一个HTML编码文本代码呢？三、XHTML文件的主体结构三、XHTML文件的主体结构™3.1HTML文档的结构™3.2HTMLhead标签™3.2HTMLhead标签™3.3HTML规范与版本™3.4DTD文档类型3.1HTML文档的结构3.1HTML文档的结构!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.1//EN“!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.1//EN网页标题head头部headtitle我的第一个网页/title/headhead头部HTML网页bodyh3欢迎来到LAMP兄弟连！/h3/bodybody主体部HTML网页/body/html网页内容，可以是文本、图像等™文档结构中的标签„html/htmlhead/headhtml/htmlhead/head„title/titlebody/body™html标签--代表HTML文档的开始htmlxmlns==zh-CNdir=ltrhtmlxmlns==zh-CNdir=ltr™说明：„xmlns：代表使用做为命名空间„xml:lang=zh-CN:代表使用中文作为页面文字„xml:lang=zh-CN:代表使用中文作为页面文字„dir=“ltr”:代表左到右(left-to-right)的文字对齐方式™body标签--代表HTML文档的主体,常见属性如下。™body标签--代表HTML文档的主体,常见属性如下。bodytext=#ff0000bgcolor=#fffee7link=#3300ffvlink=#9900ff™说明：说明：„text：设定页面文字的颜色„bgcolor：设定页面背景的颜色„link：设置页面默认的链接颜色„link：设置页面默认的链接颜色„vlink：设定访问后的链接颜色„alink：设定鼠标正在单击时的链接