HTML补充

HTML补充内容divIFRAMEXHTML与HTML的区别META表单DIV123DIV概述DIV+CSS网页布局块级元素与内联元素DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。可定义文档中的分区或节。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。换行是div固有的唯一格式表现。可以通过div的class或id应用额外的样式。所有主流浏览器都支持div标签。对文字排放位置时常用到DIV标记。实例：BODYdivstyle=color:#00FF00h3Thisisaheader/h3好好学习pThisisaparagraph./p/div/BODY标准属性：IDCLASSTITLESTYLEDIRLANG事件属性：onclick,ondblclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout,onkeypress,onkeydown,onkeyup传统的table布局实际上是利用htmltable表格元素具有无边框特性。由于table元素可以在显示时使得单元格的边框和间距设置为0，即不显示边框，因此可以将网页中的各个元素按版式划分放入表格的各个单元格里，从而实现复杂的排版组合。表格布局的代码最常见的是在HTML标签之间加入一些设计代码，如width=“100%”。大量的样式设计代码混乱在其中，降低可读性，维护成本高.使用CSS布局可以从根本上改变这种情况CSS布局的重点不再放在table元素的设计上，取而代之的是html中的另一个元素div。DIV可以理解为图层或一个“块”DIV的功能仅仅是将一段信息标记出来用于后期的样式定义，这里的信息标记就是“网页结构”通过使用DIV，可以将网页中的各个元素划分到各个div中，成为网页的主体结构，而样式表现则有CSS来完成。divid=“main”内容/div#main{Float:left;/*左对齐*/margin-top:10px;/*上边界10px*/Margin-bottom:20px;Margin-left:10px;Background-color:#575757;/*背景色*/Text-align:center;/*文字居中显示*/Line-height：160%；Width:50%;}块级元素一般是其它元素的容器元素，它可以容纳内联元素和其它块级元素.内联元素一般都是基于语义级的基本元素。内联元素只能容纳文本或者其它内联元素。如果没有css，块级元素会顺序的以每次令起一行的方式一直往下排。如果有了css，会改变这种html的默认布局方式.块级元素特点：每个块元素都是一个新行的开始，一般可以包含其它的块元素和内联元素。在CSS中，可以给块元素加上浮动效果，控制块元素的显示位置，而不总是从新一行开始内联元素特点：不必在新的一行开始，同时，也不强迫其它的元素在第一行显示，内联元素可以做其它元素的子元素。在css中，给内联元素加上display:block属性，就有了块的特性。块级元素◎address-地址◎blockquote-块引用◎center-举中对齐块◎dir-目录列表◎div-常用块级容易，也是csslayout的主要标签◎dl-定义列表◎fieldset-form控制组◎form-交互表单◎h1-大标题◎h2-副标题◎h3-3级标题◎h4-4级标题◎h5-5级标题◎h6-6级标题块级元素：◎hr-水平分隔线◎isindex-inputprompt◎menu-菜单列表◎noframes-frames可选内容，（对于不支持frame的浏览器显示此区块内容◎noscript-可选脚本内容（对于不支持script的浏览器显示此内容）◎ol-排序表单◎p-段落◎pre-格式化文本◎table-表格◎ul-非排序列表内联元素◎a-锚点◎abbr-缩写◎acronym-首字◎b-粗体(不推荐)◎bdo-bidioverride◎big-大字体◎br-换行◎cite-引用◎code-计算机代码(在引用源码的时候需要)◎dfn-定义字段◎em-强调◎font-字体设定(不推荐)◎i-斜体◎img-图片内联元素◎input-输入框◎kbd-定义键盘文本◎label-表格标签◎q-短引用◎s-中划线(不推荐)◎samp-定义范例计算机代码◎select-项目选择◎small-小字体文本◎span-常用内联容器，定义文本内区块◎strike-中划线◎strong-粗体强调◎sub-下标◎sup-上标◎textarea-多行文本输入框◎tt-电传文本◎u-下划线◎var-定义变量IframeIFRAME：嵌入式框架与前面frameset创建的框架有所不同，前面的框架是将浏览器分为几个单独的窗口，每个窗口显示不同的文档。嵌入式框架更像在网页上开天窗，这个天窗可以加载文档。用iframe元素创建嵌入式框架。Iframe与img标签一样，可以放在body标签元素之内的任何一个位置。iframe元素会创建包含另外一个文档的内联框架（即行内框架）。IFRAME实例：DIValign=centerIFRAMEsrc==10marginwidth=0marginheight=0scrolling=nowidth=568height=200scrolling=noALLOWTRANSPARENCY=true/IFRAME/DIVIFRAME运行结果IFRAME浏览器不支持嵌入式框架的处理iframesrc=“sample.htm您的浏览器不支持ifame，请电击Ahref=“sample.htm”target=“_blank”这里/A/frameXHTML与HTML的区别HTML语言是我们建立网页的工具，从它出现发展到现在，规范不断完善，功能越来越强。但是依然有缺陷和不足，人们仍在不断的改进它，使它更加便于控制和有弹性，以适应网络上日新月异的应用需求。2000年底，国际W3C(WorldWideWebConsortium)组织公布发行了XHTMLXHTML1.0是一种在HTML4.0基础上优化和改进的的新语言，目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。XHTML是一门面向结构的语言，主要用于对网页内容进行结构化。XHTML严禁的语法结构有利于浏览器进行解板处理。XHTML另一方面也是XML的过渡语言，XML是完全面向结构的语言，XHTML能够帮助我们快速的适应这种文档设计。XHTML文件开始要声明DTD需要为HTML标签添加一个命名空间XHTML元素必须合理嵌套XHTML文档形式上必须符合规范标签必须使用小写所有的XHTML元素都必须有始有终属性值必须用英文双引号括起来不允许属性简写许多定义外观的属性都不允许使用DOCTYPE是documenttype(文档类型）的简写，用来说明xhtml或者html是什么版本。在xhtml中必须声明文档的类型，以便知道正在浏览的文档是什么类型的。使用Dreamweaver创建XHTML页面时，会在页面头部自动加上文档类型的声明代码。注：DOCTYPE声明不是XHTML文档的一部分,也不是文档的一个元素,所以没必要加结束标签一个命名空间是收集元素类型和属性名字的一个详细的DTD.命名空间声明允许通过一个URL绝对地址指向来识别的命名空间。在HTML中一些元素可以不使用正确的相互嵌套：biThistextisboldanditalic/b/i在XHTML中所有元素必须合理的相互嵌套：biThistextisboldanditalic/i/b所有的XHTML元素必须被嵌在html根元素之中。所有其它的元素可以有自己的子元素。位于父元素之内的子元素必须成对出现且使用正确的嵌套。文档的基本构架为：htmlhead.../headbody.../body/html因为XHTML文档是XML应用产物，XML是区分大小写的，所以br和BR会被认为是两种不同的标签。这就是错误的：BODYPThisisaparagraph/P/BODY这才是正确的：bodypThisisaparagraph/p/body注：属性值可以大写这是错误的写法：pThisisaparagraphpThisisanotherparagraph这是正确的：pThisisaparagraph/ppThisisanotherparagraph/p空标签同样也得关闭，可以是在开始标签后加上/这是错误的写法：ThisisabreakbrHerecomesahorizontalrule:hrHere'sanimageimgsrc=happy.gifalt=Happyface正确的是这样：Thisisabreakbr/Herecomesahorizontalrule:hr/Here'sanimageimgsrc=happy.gifalt=Happyface/注：“/”前要有空格错误写法：tablewidth=100%boder=0cellspacing=0trtd属性值必须用英文双引号括起来/td/tr/table正确写法：tablewidth=“100%”boder=“0”cellspacing=“0”trtd属性值必须用英文双引号括起来/td/tr/table在HTML文档中属性的简写checkeddisabledselectednoresize在XHTML文档中规范的写法checked=“checked”disabled=“disabled”selected=“selected”noresize=“noresize”如果使用的文档类型是严格的，XHTML文档中的许多定义外观的属性都不允许使用例如：不能在使用imgsrc=“****”border=0必须通过CSS来实现过渡的：一种松散的过渡型XHTML应用，允许用户使用一部分旧的XHTML。严格的：不能使用任何样式的标签及属性。框架的：针对框架页的应用方式。META在一个网页里，除了正文与标题外，还可以设置更多的附加信息。这些附加信息不会在浏览器里显示出来，但是却有着不可否认的作用，比如说声明网页的编写者身份，编写网页所用的浏览器，甚至还可以为搜索引擎提供关键字，提高网页的搜索命中率。由于这些信息不会在正文里显示，所以这些元素都放在HEAD标签内。设置网页编写者身份说明1增加搜索引擎的命中率2限制搜索引擎的搜索效果3设置HTTP头信息4在网页里可以使用META元素的NAME属性与CONTENT属性来指明编写者身份信息。metaname=“autor”content=“guoxue”mataname=“copyright”content=“本网页版权属于数媒07-2班”Meta元素的name属性与content属性还有一个重要的用法就是增加搜索引擎的命中率。要增加网页中搜索引擎的命中率，就必须将name属性的值设为description或keywords。metaname=“autor”content=“guoxue”搜索引擎通常可以通过一个网页上的超级链接索引到另一个网页上进行关键字的搜索，就好像是顺藤摸瓜一样，当对其中第一个网页的内容建立完索引后，就会顺着该网页的超级链接对下一个网页的内容创建索引，如此下去直至对整个网站创建完索引。有时不希望搜索引擎这么做