Html规范培训

Html规范培训前言：这次培训的内容是围绕HTML规范来的，具体焦点在怎么规范。目录Catalog1.说明:需要注意的标签关于标签的规范性表单相关2.Table结构规范基础嵌套3.DIV+CSS结构规范基础嵌套前言在每一个页面的顶端，需要文档声明。这是必须的。假如不指定文档类型，你的HTML不是合法的HTML，并且大部分浏览器会用“怪癖模式（quirksmode）”来处理页面，这意味着浏览器认为你自己也不知道究竟做什么，并且按浏览器自己的方式来处理你的代码。XHTML1.0Strict（严格）的文档声明是这样的：!DOCTYPEhtmlPUBLIC\-//W3C//DTDXHTML1.0Strict//EN\\下面的是XHTML1.1的文档声明，作为XHTML的最新版本，看起来更完美，但还是有一些问题，随后我们会稍微讲解„„!DOCTYPEhtmlPUBLIC\-//W3C//DTDXHTML1.1//EN\\假如你不愿放弃HTML4或者你还有Netscape4死忠用户，你可以使用XHTML1.0Transitional（过渡型）：!DOCTYPEhtmlPUBLIC\-//W3C//DTDXHTML1.0Transitional//EN\\你使用这的唯一理由是你还要兼容老版本的，少用的浏览器。过渡型XHTML1.0答应HTML4的表现元素，其也可能在如Netscape4的浏览器中表现更好。但使用这些元素将对你网页的效率和可用性有害。最后，假如你是使用框架的怪人之一，可以使用像下面一样的XHTML1.0Frameset（框架）文档类型声明：!DOCTYPEhtmlPUBLIC\“-//W3C//DTDXHTML1.0Frameset//EN\”\“”注重DOCTYPE标签必须大写和前置一个英文半角感叹号!。它是唯一一个打破规则的标签，它不需要关闭。•语言声明：即使HTTP头或者在html起始标签内设置了xml:lang属性，你也必须为文档指定一个主要语言。尽管处理一个合法的XHTML文档这不是必须的，但也是一个易用性的考虑。值是缩写的，比如en（English，英语），fr（French，法语），de（German，德语）或者mg（Malagasy，这是什么语？译者也不知道，呵呵。声明一个主要用英语内容的文档，例子是这样的：htmlxmlns=\“”xml:lang=\“en\”在声明主要语言之后，假如还需要使用其他语言，你还可以在内联中使用xml:lang属性（比如spanxml:lang=\“de\”HTMLHund/span）。•内容声明：HTML文档的媒体类型和字体集也许要指定，可以使用HTTP头来完成，比如：Content-Type:text/html;charset=UTF-8HTTP头部的第一部分（如text/html)是文件MIME类型，让浏览器知道文件的媒体类型因此可以知道怎么处理。所有的文件都有MIME类型。JPEG图像是image/jpeg，CSS文件是text/csss和HTML一般使用text/html。HTTP头部的第二部分（如UTF-8部分）是字符集。也许设置HTTP头的最简易方法是在HTML中使用“HTTP同义（HTTP-equivalent）”的头标签，像这样：metahttp-equiv=\“Content-Type\”content=\“text/html;charset=UTF-8\”/些微复杂当更好的方法是使用服务器端脚本语言来发送头。这里就不多作介绍了。•关于CSS的引用：html页面中引用样式大致分为3种情况：1.在页面里面直接写styletype=text/cssbody{margin:0;padding:0;}/style2.用link进行引用linkrel=stylesheettype=text/csshref=my.css3.用import进行引用styletype=text/css@importurl(my.css);/style第一种是直接在html页面上进行css书写，而第二种和第三种是采用外部引用样式单独提取文件。问题1.到底link和@import有什么区别？我们先来看看他们的定义link元素HTML和XHTML都有一个结构，它使网页作者可以增加于HTML文档相关的额外信息。这些额外资源可以是样式化信息（CSS）、导航助手、属于另外形式的信息（RSS）、联系信息等等。@import指定导入的外部样式表及目标设备类型。其实link和@import的最根本区别就是，link是一个html的一个标签，而@import是css的一个标签,link除了调用css外还可以有其他作用譬如声明页面链接属性，声明目录，rss等等，而@import就只能调用css。如果单独从外部引用css来说，他们的作用是基本一样，只不过上面的老大不一样而已。：）问题2.link合import到底那个更好？上面说了不同之处，所以在使用上就会有一些细节的区别，不能说总体谁好谁坏，只能说具体情况具体分析。1）我要用javascript进行样式选择；这个时候就要用link,因为link是html元素，可用javascript去控制dom元素最后达到改变样式的效果。看下列代码linkrel=stylesheethref=/css/styles.csstype=text/cssmedia=screen/linkrel=stylesheethref=/css/orange.csstype=text/cssmedia=screentitle=orange/linkrel=alternatestylesheethref=/css/blue.csstype=text/cssmedia=screentitle=blue/linkrel=alternatestylesheethref=/css/pink.csstype=text/cssmedia=screentitle=pink/linkrel=“alternatestylesheet”href=“/css/slate.css”type=“text/css”media=“screen”title=“slate”/这是一段很经典的改变页面风格的代码，因为我们今天主要讲的是link和import，所以我这里只列出了引用css部分。我们先来看看link里面个个属性都是表达了什么意思：[1]rel:用来声明链接对象的作用或者类型。譬如上面的的代码：“stylesheet”表示链接一个默认的css,而“alternatestylesheet”则表示备选的css[2]href:这个就不用我说了吧，引用css的文件路径。[3]tyle:文件类型[4]media:应用的设备，screen是说明应用在屏幕上。[5]title:是css的名称。这段代码中一共有5个css,第一个是基本样式，而其他四个是风格样式,利用javascript去控制默认显示的样式title就ok了。2）我要在应用打印样式；打印样式顾名思义就是打印页面时候的样式。这个样式在普通浏览下是没有效果的，只有在打印的时候生效。如果要为页面单独引用打印样式的话，link和@import都可以的。link代码linkrel=stylesheethref=/css/styles.csstype=text/cssmedia=print/@import代码styletype=text/css@importurl(foo.css)print;/style另外对于css来说还有一种方式@media：@mediaprint{@importprint.css}用@media先制定设备为print,然后再用@impor链接3）我要引用多个样式；如果要在一个页面上引用多个样式组合产生效果的话，link和@import也是都可以的。link代码linkrel=stylesheethref=/css/styles.csstype=text/cssmedia=screen/linkrel=stylesheethref=/css/orange.csstype=text/cssmedia=screen/@import代码styletype=text/css@importurl(../css/base/my.layout.css);@importurl(../css/base/my.typo.css);/style不过个人觉得，用@import引用多文件的时候更加清晰一些另外对于多样式还有一种link于@import的组合用法。先用link引用一个css文件linkrel=stylesheethref=/css/styles.csstype=text/cssmedia=screen/然后在这个css文件里面再引用。styletype=text/css@importurl(../css/base/my.layout.css);@importurl(../css/base/my.typo.css);/style这样做的好处是，如果你一个站点所有页面引用的样式都是一样的，而有又多个css，如果你每个页面都加4,5个一样的css样式，却是浪费代码和精力，所以莫不如这样做，所有一个页面都引用一个css，然后一个css在引用多个css，方便管理和维护。我们很多SEO的文章都提到把CSS定义的样式都放在样式文件表里，然后用前面的第二种方式进行引用，一是为了减少用户重复加载同样的代码，提高访问速度，二是便于管理。可是我浏览了很多大型门户站，，他们都把CSS样式都放在当前文件里，而且每个页面都用的是一样的，，这样用户每次访问都要下载同样的样式，觉得是不是有点浪费啊，，他们的用意何在呢？回答这个问题需要结合他们网站的性质，门户型的网站讲究的是速度。如果网速慢，首页HTML代码下载完了，CSS没下载完的话，就over了！新浪等门户流量很大，尤其是首页访问非常厉害，并且同一页面要加载好多东西如果把CSS放在外部，浏览器需要另外开一个线程去读取这个CSS文件对于新浪首页这种高负载页面，有可能造成部分用户因为延迟和线程的问题，没有正确把CSS文件加载进来。虽然这只是小概率事件，在小型网站只会偶然出现。但没有CSS的页面是很丑很乱的，造成影响是很恶劣的。把CSS放在首页就没有这个问题了，尽管多了十几KB的大小。需要注意的标签1.关于标签的规范性在XHTML中所有的标签都必须小写和关闭。没有闭合标签的（如br和img）必须用英文半角正斜杠“/”在后面自关闭（如br/）。注重在斜杠前应该有一个英文半角空格。标记也必须是合式的，使元素正确嵌套（比如strongemthis/em/strong，而不是strongemthis/strong/em）。所有的文档都要有html，head，title和body元素。也必须从文档类型声明开始。文档主体应该从p，h1，h2，h3，h4，h5，h6，div，pre，address，ins或者del开始。所有的属性必须是小写的，它们的值也要用英文半角引号括（）起来。精简属性是不答应的（比如inputtype=“checkbox”checked/）。按惯例，精简属性必须给出跟属性名称一样的值（如inputtype=checkboxchec