**Web前端开发http://radio.wuyiu.edu.cn 网页设计师、Web前端设计师与交互设计师、网站开发工程师等的区别： 网页设计师是指精通Photoshop、CorelDRAW、Flash、Illustrator、Dreamweaver等多项网页设计工具的网页设计人员NO.1Web前端开发设计？？* Web前端开发是从网页制作演变而来的，是web2.0的产物，包括三个要素：HTML、CSS和JavaScriptWeb前端开发NO.1Web前端开发设计？？*Web前端开发 网页设计师、Web前端设计师与网站开发工程师、交互设计师等区别： 交互设计师：秉承以用户为中心的设计理念，应用“以目标为导向的设计”方法，进行互联网产品的设计。NO.1Web前端开发设计？？*Web前端开发 网页设计师、Web前端设计师与网站开发工程师、交互设计师等区别： 网站开发工程师：掌握ASP、PHP、.NET、JSP等开发语言，熟悉运用Access、SQL语言、SQL数据库等；对IIS、Apache等服务器有一定的理解等NO.1Web前端开发设计？？* XHTML是更严谨更纯净的HTML版本。XHTML与HTML4.01标准没有太多的不同。（目前最新为HTML5） XHTML是HTML与XML（扩展标记语言）的结合物。 XHTML1.0在2000年1月26日成为W3C的推荐标准。（其标准应用为CSS+DIV）Web前端开发NO.2Web标准？Xhtml？例如：所有标签都必须小写在XHTML中，所有的标签都必须小写，不能大小写穿插其中，也不能全部都是大写。看一个例子。错误：<Head></Head><Body></Body>正确：<head></head><body></body>标签必须成双成对像是<p>...</p>、<a>...</a>、<div>...</div>标签等，当出现一个标签时，必须要有对应的结束标签，缺一不可，就像在任何程序语言中的括号一样。错误：大家好<p>我是muki正确：<p>大家好</p><p>我是muki</p>标签顺序必须正确标签由外到内，一层层包覆着，所以假设你先写div后写h1，结尾就要先写h1后写div。只要记住一个原则“先进后出”，先弹出的标签要后结尾。错误：<div><h1>大家好</div></h1>正确：<div><h1>大家好</h1></div>*因为XHTML的语法较为严谨，需要特别注意XHTML的规则。下面列出了几条容易犯的错误，供引用：所有标签都必须小写在XHTML中，所有的标签都必须小写，不能大小写穿插其中，也不能全部都是大写。看一个例子。错误：<Head></Head><Body></Body>正确：<head></head><body></body>标签必须成双成对像是<p>...</p>、<a>...</a>、<div>...</div>标签等，当出现一个标签时，必须要有对应的结束标签，缺一不可，就像在任何程序语言中的括号一样。错误：大家好<p>我是muki正确：<p>大家好</p><p>我是muki</p>标签顺序必须正确标签由外到内，一层层包覆着，所以假设你先写div后写h1，结尾就要先写h1后写div。只要记住一个原则“先进后出”，先弹出的标签要后结尾。错误：<div><h1>大家好</div></h1>正确：<div><h1>大家好</h1></div>4所有属性都必须使用双引号在XHTML1.0中规定连单引号也不能使用，所以全程都得用双引号。错误：<divstyle=font-size:11px>hello</div>正确：<divstyle="font-size:11px">hello</div5不允许使用target="_blank"从XHTML1.1开始全面禁止target属性，如果想要有开新窗口的功能，就必须改写为rel="external"，并搭配JavaScript实现此效果。错误：<ahref="http://blog.mukispace.com"target="_blank">MUKIspace</a>正确：<ahref="http://blog.mukispace.com"rel="external">MUKIspace</a>* 如何验证Xhtml？ http://jigsaw.w3.org/css-validator/ http://validator.w3.org/ 学习网站推荐： http://www.w3school.com.cn/index.html http://www.oschina.net/Web前端开发NO.2Web标准？Xhtml？*学习网站推荐：http://www.w3school.com.cn/index.htmlhttp://www.oschina.net/*@请叫我周某人@武夷学院广播台http://radio.wuyiu.edu.cn 如何新建Xhtml文件？（初期建议用记事本书写代码！）<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无标题文档</title></head><body></body></html>Web前端开发NO.2Web标准？Xhtml？W3C将XHTML1.0分为三种规范：transitional是过渡版（默认选择）strict是严格版、frameset为框架版*W3C将XHTML1.0分为三种规范：Strict（严格）、Transitional（过渡）和Frameset（框架）。XHTML1.0Strict（严格）XHTML1.0Strict是需求最苛刻的XHTML规范，但是它提供了最干净的结构化标记。Strict编码独立于任何定义外观的标记语言。它使用层叠样式
表
关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf
（CSS）来控制表示外观。这种与表示相独立的结构使得XHTMLStrict能够相当灵活地在不同的设备上显示。而其控制和表示对于CSS的依赖对于程序员来说又是一个麻烦，因为如果想要在那些不能识别样式表的设备或浏览器中显示Web
内容
财务内部控制制度的内容财务内部控制制度的内容人员招聘与配置的内容项目成本控制的内容消防安全演练内容
，它并不是一个好的选择。XHTML1.0（过渡）XHTML1.0Transitional是更加宽容的规范。Strict完全将结构与表示分离，而Transitional允许使用标签来控制外观。它的目的是要在允许用标记来控制表示的HTML页面和二者完全分离的XHTMLStrict之间架起桥梁。它最大的好处是克服了Strict对于CSS的依赖。Transitional页面对于使用旧式浏览器或不能识别样式表的用户来说也是可以访问的。如何选择？在Strict和Transitional之间进行选择的时候，要参考几个因素：用户。如果你的大多数用户都使用不能是别样式表的旧式浏览器，那就不能使用Strict——尽管我会举出支持标准比向后兼容更重要的例子。如果你的大多数用户使用的是最新版本的InternetExplorer、Netscape、Opera或者Safari，Strict就是最佳的长期选择。当前代码。如果已经使用了CSS而且HTML中并不包含很多控制外观的标记，那么也可以上一个层次使用Strict。*@请叫我周某人@武夷学院广播台http://radio.wuyiu.edu.cn Xhtml（html）语法规则： 元素必须被正确地嵌套 元素必须被关闭（如<p></p>）、非空标签必须使用结束标签（<br/>） 元素必须小写（标签名和属性对大小写敏感）（<body><a></a></body>） 属性值必须加引号（<tablewidth="100%"></table>）Web前端开发NO.2Web标准？Xhtml？*@请叫我周某人@武夷学院广播台http://radio.wuyiu.edu.cn Xhtml（html）语法规则： 属性不能简写（<inputchecked="checked"/>） 用id属性代替name属性（<imgsrc="picture.gif"id="picture1"/>） 在"/"符号前添加一个额外的空格，以使你的XHTML与当今的浏览器相兼容 <imgsrc=""alt="……"title="……"/>Web前端开发NO.2Web标准？Xhtml？* Xhtml（html）语法规则： 不要在注释内容中使“--”，如（<!--这里是注释-----------这里是注释-->是不行的！） <ahref="http://radio.wuyiu.edu.cn/"title=""></a> 把所有<和&特殊符号用编码表示，如（大于号用>；小于号用<；）Web前端开发NO.2Web标准？Xhtml？* Xhtml（html）语法规则： <divid="header"><divid="nav"><ul><li><ahref="">首页</a></li><li><ahref="">节目</a></li></ul></div><divid="ad"><ahref=""target="_blank"><imgsrc=""alt=""title=""/></a></div></div>（结构化代码）Web前端开发NO.2Web标准？Xhtml？*Web前端开发NO.3纠结的浏览器兼容问题*Web前端开发NO.3纠结的浏览器兼容问题IE7/IE8IE9* 这些浏览器算什么？？？Web前端开发NO.3纠结的浏览器兼容问题*Web前端开发NO.3纠结的浏览器兼容问题* 浏览器兼容测试：（除了IE其他都可以下载测试） 在火狐浏览器中安装插件Firebug、CompatibilityDetectorforFirefox（两个插件非常强大！！）Web前端开发NO.3纠结的浏览器兼容问题* CSSHack（解决兼容问题）： 由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。 1、IE6能识别下划线"_"和星号"*"；IE7能识别*+html和星号"*"；background-color:red\0IE8能识别\0；background-color:blue\9\0仅IE9支持Web前端开发NO.3纠结的浏览器兼容问题*http://radio.wuyiu.edu.cn CSSHack（解决兼容问题）： 火狐和IE7能识别"!important"；#divcss1{background:blue;/*Firefox背景变蓝色*/*+background:green!important;/*IE7背景变绿色*/_background:orange;/*IE6背景变橘色*/background:black\0;/*IE8背景为黑色*/background:red\9\0;/*IE9背景为红色*/body:nth-of-type(1)background:red;/*ChromeSafari背景为红色*/}@请叫我周某人@武夷学院广播台Web前端开发NO.3纠结的浏览器兼容问题* CSSHack（解决兼容问题）：<html><head><metahttp-equiv="x-ua-compatible"content="ie=7"/></head></html>（使ie8、ie9使用ie7模式显示）Web前端开发NO.3纠结的浏览器兼容问题* CSSHack（解决兼容问题）：<!--[if!IE]>除IE外都可识别<![endif]--><!--[ifIE]>所有的IE可识别<![endif]--><!--[ifltIE6]>IE6以下版本可识别<![endif]--><!--[ifgteIE6]>IE6以及IE6以上版本可识别<![endif]-->结语：积累经验解决兼容问题Web前端开发NO.3纠结的浏览器兼容问题* HTML指的是超文本标记语言(HyperTextMarkupLanguage) HTML不是一种编程语言，而是一种标记语言(markuplanguage) 标记语言是一套标记标签(markuptag) HTML使用标记标签来描述网页 HTML标签是由尖括号包围的关键词，比如<html> HTML标签通常是成对出现的，比如<p>和</p>Web前端开发NO.4html标签/元素和属性*<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="keywords"content="武夷学院广播台,武夷学院,……"/><metaname="description"content="没有旋律也能为你深情地歌唱……"/><title>武夷学院广播台官方网站！</title></head><body></body></html>Web前端开发NO.4html标签/元素和属性<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。<html>标签可告知浏览器其自身是一个HTML文档。<html>与</html>标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。这些标签可用在head部分：<base>,<link>,<meta>,<script>,<style>,以及<title>。<title>定义文档的标题，它是head部分中唯一必需的元素。<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。<meta>标签永远位于head元素内部。必须属性为content，可选属性有http-equiv、name、scheme*http://radio.wuyiu.edu.cn 1、<meta/>标签：<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>http-equiv：content-type、expires、refresh、set-cookie；name：author、description、keywords、generator、revised、…；content="text/html;charset=gb2312":charset=gb2312/GBK/utf-8①<metahttp-equiv="Refresh"content="5;url=http://www.w3school.com.cn">（5秒刷新）②<metaname="Robots"contect="all/none/index/noindex/follow/nofollow">（搜索引擎）③<metahttp-equiv="Cache-Control"content="max-age=0"/>@请叫我周某人@武夷学院广播台Web前端开发NO.4html标签/元素和属性*http://radio.wuyiu.edu.cn 2、常见使用的标签：<div></div>①<h1></h1>……<h6><h6/>（标题标签）②<p></p>（段落）;<br/>（换行）;<hr/>（水平线）③<!--注释内容-->，不支持任何属性④<ahref=""target=""title="">…</a>（文本）⑤<imgsrc=""alt=""title=""/>（图像）⑥<span></span>（来组合文档中的行内元素）⑦<linkrel="stylesheet"type="text/css"href=""/>（链接CSS样式表，在<head></head>插入）⑧<script></script>（定义客户端脚本，如javascript）；如:<scriptlanguage="javascript"src="common_files/js/jquery-1.7.1.min.js"></script>（链接JS文件）@请叫我周某人@武夷学院广播台Web前端开发NO.4html标签/元素和属性*http://radio.wuyiu.edu.cn 3、表单标签：①<formmethod="get/post"action=""name=""enctype="multipart/form-data"></form>（创建一个html表单）<formaction=""method="post">②<inputtype="button/text/file/hidden/password/radio/reset/submit/checkbox"value=""></input>（用于搜集用户信息）③<textareacols=""rows=""></textarea>（定义多行的文本输入控件）④<select><optgrouplabel="dd"><optionvalue="volvo">Volvo</option>……</optgroup></select>（select创建单选或多选菜单；optgroup定义选项组；option定义下拉列表中的一个选项）</form>（input等表单元素必须在<form></form>之间）@请叫我周某人@武夷学院广播台Web前端开发NO.4html标签/元素和属性*http://radio.wuyiu.edu.cn 3、表单标签<input></input>： <inputtype="button/text/file/hidden/password/radio/reset/submit/checkbox"checked="checked"/disabled="disabled"readonly="readonly"maxlength="55"name=""value=""></input>@请叫我周某人@武夷学院广播台Web前端开发NO.4html标签/元素和属性*http://radio.wuyiu.edu.cn 4、列表标签：①无序列表：<ul><li>咖啡</li><li>茶<ul><li>红茶</li><li>乌龙茶</li>...</ul></li>...</ul>@请叫我周某人@武夷学院广播台Web前端开发NO.4html标签/元素和属性*http://radio.wuyiu.edu.cn 4、列表标签：②有序列表：<ol><li>咖啡</li><li>茶</li><li>牛奶</li>...</ol>注：基本都使用无序列表！列表标签自带的属性很少，基本不使用@请叫我周某人@武夷学院广播台Web前端开发NO.4html标签/元素和属性③定义列表：<dl><dt>计算机</dt><dd>用来计算的仪器......</dd><dt>显示器</dt><dd>以视觉方式显示信息的装置......</dd></dl>*http://radio.wuyiu.edu.cn 5、表格标签<table></talbe>：<tableborder="1"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr></table>@请叫我周某人@武夷学院广播台Web前端开发NO.4html标签/元素和属性tr元素定义表格行，th元素定义表头，td元素定义表格单元。*http://radio.wuyiu.edu.cn 5、表格标签<table></talbe>： ①<caption>表格标题</caption>：caption元素定义表格标题。caption标签必须紧随table标签之后。通常这个标题会被居中于表格之上。 ②<col/>：<col/>标签为表格中一个或多个列定义属性值。只能在table或colgroup元素中使用<col/>标签。 ③<colgroup></colgroup>：<colgroup>标签用于对表格中的列进行组合，以便对其进行格式化。只能在table元素中使用。 ④<thead></thead>：标签定义表格的表头。thead元素应该与tbody和tfoot元素结合起来使用。但不使用！@请叫我周某人@武夷学院广播台Web前端开发NO.4html标签/元素和属性*http://radio.wuyiu.edu.cn 6、其他标签：①<b></b><strong></strong>:加粗；<em></em>:倾斜加粗②<styletype="text/css">（创建样式）h1{color:red}p{color:blue}</style> 7、html5新标签：①<videowidth="320"height="240"controls="controls"autoplay="autoplay"loop="loop"><sourcesrc="movie.ogg"type="video/ogg"><sourcesrc="movie.mp4"type="video/mp4"></video>@请叫我周某人@武夷学院广播台Web前端开发NO.4html标签/元素和属性* 7、html5新标签：②<audiocontrols="controls"autoplay="autoplay"loop="loop"><sourcesrc="song.ogg"type="audio/ogg"><sourcesrc="song.mp3"type="audio/mpeg"></audio>③<inputtype="email/url/number/range/date,month,week,time,datetime,datetime-local/search/color"/>(min="1"max="10")④<nav></nav>（导航）⑤<p>我在<timedatetime="2008-02-14">情人节</time>有个约会。</p>：<time>标签定义公历的时间（24小时制）或日期，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。Web前端开发NO.4html标签/元素和属性* CSS指层叠样式表(CascadingStyleSheets) 把样式添加到HTML4.0中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在CSS文件中Web前端开发NO.5CSS禅意花园+DIV别具光芒* CSS有外部样式表、内部样式表（位于<head>标签内部）、内联样式（在HTML元素内部） 内联样式具有最高优先权，但不建议使用内部样式表和内敛样式！ 如何导入外部样式表（在<head></head>之间）？<title>武夷学院广播台官方网站——首页</title><linkhref="common_files/webCss/top_common.css"type="text/css"rel="stylesheet"media="screen"/>Web前端开发NO.5CSS禅意花园+DIV别具光芒* CSS基本语法: 如果值为若干单词，则要给值加引号：p{font-family:"sansserif";} 多重声明，需要用分号(;)将每个声明分开，在每条声明的末尾都加上分号。尽可能小写，使用空格。p{text-align:center;color:red;}Web前端开发NO.5CSS禅意花园+DIV别具光芒* CSS高级语法: ①选择器的分组：h1,h2,h3,h4,h5,h6{color:green;font-family:"sansserif";} ②继承及其问题（根据CSS，子元素从父元素继承属性）：body{font-family:Verdana,sans-serif;}p{font-family:Times,"TimesNewRoman",serif;} ③派生选择器：lia{font-size:14px;line-height:22px;color:blue;}Web前端开发NO.5CSS禅意花园+DIV别具光芒* CSSid选择器（常与js结合使用）: id属性只能在每个HTML文档中出现一次！？ id值必须以字母或者下划线开始；不能以数字开始，下划线也不是个好主意！ id选择器以"#"来定义： 即使被标注为header的元素只能在文档中出现一次，这个id选择器作为派生选择器也可以被使用很多次： #headerp{text-align:right;margin-top:5px;} #headera{line-height:24px;font-size:14px;}Web前端开发NO.5CSS禅意花园+DIV别具光芒* CSSid选择器（常与js结合使用）:div#top_linka:link{border:1pxsolid#000;padding:1px;text-decoration:underline;} （只对<divid="top_link"><ahref="http://www.radio.com.cn/">www.radio.com.cn</a></div>起作用）Web前端开发NO.5CSS禅意花园+DIV别具光芒* CSS类选择器（用法与id选择一样）： 在CSS中，类选择器以一个点号显示：.news_main{text-align:center}选择id还是class?？？两者的区别？？？Web前端开发NO.5CSS禅意花园+DIV别具光芒* CSS属性（千变万化的网页样式）： (1)CSS背景属性（Background）: background-color（背景颜色）、background-image（背景图片）、background-repeat（背景重复）、background-attachment（背景固定与否）、background-position（背景位置）#nav{background:#00FF00url(bgimage.gif)no-repeatfixedtop;}repeat:X轴及Y轴重复;repeat-x:X轴重复;repeta-y:Y轴重复;scroll:不固定随内容滚动;fixed:固定不滚动;top/left/bottom/right/center（可组合使用）;0px-36px;(csssprite)Web前端开发NO.5CSS禅意花园+DIV别具光芒* CSS属性（千变万化的网页样式）： (2)CSS边框属性（Border）： border-width(边框宽度)、border-style(边框样式)、border-color(边框颜色)p{border:2pxsolidred;} border-bottom/top/left/right(上下左右边框) solid(实线)/dotted(点状)/double(双线)/dashe(虚线);Web前端开发NO.5CSS禅意花园+DIV别具光芒* CSS属性（千变万化的网页样式）： (3)CSS文本属性（Text）： color(颜色)、line-height(行距)、text-align(水平对齐方式)、text-decoration(下划线)、text-indent(首行缩进)、text-shadow(阴影效果,IE不支持)、text-transform(大小写)、white-space(空白设置)、word-spacing(单词间距)p{color:#00ff00;line-height:24px;text-align:left/right/center;text-decoration:underline/none/overline/line-through/blink;text-indent:200px;text-shadow:0px0px1pxwhite;white-space:normal/pre/nowrap/;}Web前端开发NO.5CSS禅意花园+DIV别具光芒* CSS属性（千变万化的网页样式）： (4)CSS字体属性（Font）： font-weight(字体粗细)、font-size(字体大小)/line-height(字行距)、font-family(字体系列,如:宋体;)p{font-size:14px;line-height:24px;font-weight:normal/bold/bolder/lighter;font-family:"TimesNewRoman",Georgia,Serif;}Web前端开发NO.5CSS禅意花园+DIV别具光芒* CSS属性（千变万化的网页样式）： (5)CSS尺寸属性（Dimension）: height、max-height/min-height、width、max-width/min-widthp{height:100px/100%;width:125px/100%;} (6)CSS内外边距属性（Padding,Margin）： padding-bottom/top/left/right(内边距) margin-bottom/top/left/right(外边距)Web前端开发NO.5CSS禅意花园+DIV别具光芒* CSS属性（千变万化的网页样式）： (6)CSS内外边距属性（Padding,Margin）：p{padding:6px8px10px5px;marin:10px5px;}Web前端开发NO.5CSS禅意花园+DIV别具光芒假设元素有10px的外边距和5px的内边距。如果希望这个元素框达到100px，就需要将内容的宽度设置为70pxIE6会把border、margin、padding计入width值* CSS属性（千变万化的网页样式）： (6)CSS内外边距属性（Padding,Margin）：p{padding:6px8px10px5px;marin:10px5px;}Web前端开发NO.5CSS禅意花园+DIV别具光芒假设元素有10px的外边距和5px的内边距。如果希望这个元素框达到100px，就需要将内容的宽度设置为70pxIE6会把border、margin、padding计入width值* CSS属性（千变万化的网页样式）： (7)CSS列表属性（List）应用于ul和li: list-style-type、list-style-position、list-style-image li{list-style:none/disc/circle/square/decimalinside/outsideurl('img/nav_bg.gif');} 基本都只是使用list-style:none;（通过其他方式定义列表样式,如:background等）Web前端开发NO.5CSS禅意花园+DIV别具光芒* CSS属性（千变万化的网页样式）： (8)[难点]CSS定位属性（Positioning）: bottom/top/left/right、cursor(光标形状)、display、float(浮动)、overflow(内容溢出时)、position(定位类型)、vertical-align(垂直对齐方式)、visibility(元素可见性)、z-index(堆叠顺序) ①bottom/top/left/right:100px/-100px;(需设置position) ②cursor:pointer/crosshair/wait/help/text ③display:none/block/inline/inline-blockWeb前端开发NO.5CSS禅意花园+DIV别具光芒* CSS属性（千变万化的网页样式）： (8)[难点]CSS定位属性（Positioning）: ④float:left/right; ⑤overflow:hidden/scroll/auto; ⑥position:abosolute/fixed/relative; ⑦vertical-align:sub/super/top/text-top/middle/bottom/text-bottom; ⑧visibility:hidden; ⑨z-index:999/-1;仅在定位元素上有效Web前端开发NO.5CSS禅意花园+DIV别具光芒* CSS属性（千变万化的网页样式）： (8)[难点]CSS定位属性（Positioning）:#all{height:auto;width:910px;margin:0pxauto;overflow:hidden;margin-top:10px;}#left{float:left;width:600px;height:auto;}#right{float:right;width:300px;height:auto;}<divid="all"><divid="left"></div><divid="right"></div></div>Web前端开发NO.5CSS禅意花园+DIV别具光芒* CSS属性（千变万化的网页样式）： (9)CSS伪类（Pseudo-classes）:a:link{color:#FF0000}/*未访问的链接*/a:visited{color:#00FF00}/*已访问的链接*/a:hover{color:#FF00FF}/*当有鼠标悬停在链接上*/a:active{color:#0000FF}/*被选择的链接*/Web前端开发NO.5CSS禅意花园+DIV别具光芒*因为XHTML的语法较为严谨，需要特别注意XHTML的规则。下面列出了几条容易犯的错误，供引用：所有标签都必须小写在XHTML中，所有的标签都必须小写，不能大小写穿插其中，也不能全部都是大写。看一个例子。错误：<Head></Head><Body></Body>正确：<head></head><body></body>标签必须成双成对像是<p>...</p>、<a>...</a>、<div>...</div>标签等，当出现一个标签时，必须要有对应的结束标签，缺一不可，就像在任何程序语言中的括号一样。错误：大家好<p>我是muki正确：<p>大家好</p><p>我是muki</p>标签顺序必须正确标签由外到内，一层层包覆着，所以假设你先写div后写h1，结尾就要先写h1后写div。只要记住一个原则“先进后出”，先弹出的标签要后结尾。错误：<div><h1>大家好</div></h1>正确：<div><h1>大家好</h1></div>4所有属性都必须使用双引号在XHTML1.0中规定连单引号也不能使用，所以全程都得用双引号。错误：<divstyle=font-size:11px>hello</div>正确：<divstyle="font-size:11px">hello</div5不允许使用target="_blank"从XHTML1.1开始全面禁止target属性，如果想要有开新窗口的功能，就必须改写为rel="external"，并搭配JavaScript实现此效果。错误：<ahref="http://blog.mukispace.com"target="_blank">MUKIspace</a>正确：<ahref="http://blog.mukispace.com"rel="external">MUKIspace</a>*学习网站推荐：http://www.w3school.com.cn/index.htmlhttp://www.oschina.net/*W3C将XHTML1.0分为三种规范：Strict（严格）、Transitional（过渡）和Frameset（框架）。XHTML1.0Strict（严格）XHTML1.0Strict是需求最苛刻的XHTML规范，但是它提供了最干净的结构化标记。Strict编码独立于任何定义外观的标记语言。它使用层叠样式表（CSS）来控制表示外观。这种与表示相独立的结构使得XHTMLStrict能够相当灵活地在不同的设备上显示。而其控制和表示对于CSS的依赖对于程序员来说又是一个麻烦，因为如果想要在那些不能识别样式表的设备或浏览器中显示Web内容，它并不是一个好的选择。XHTML1.0（过渡）XHTML1.0Transitional是更加宽容的规范。Strict完全将结构与表示分离，而Transitional允许使用标签来控制外观。它的目的是要在允许用标记来控制表示的HTML页面和二者完全分离的XHTMLStrict之间架起桥梁。它最大的好处是克服了Strict对于CSS的依赖。Transitional页面对于使用旧式浏览器或不能识别样式表的用户来说也是可以访问的。如何选择？在Strict和Transitional之间进行选择的时候，要参考几个因素：用户。如果你的大多数用户都使用不能是别样式表的旧式浏览器，那就不能使用Strict——尽管我会举出支持标准比向后兼容更重要的例子。如果你的大多数用户使用的是最新版本的InternetExplorer、Netscape、Opera或者Safari，Strict就是最佳的长期选择。当前代码。如果已经使用了CSS而且HTML中并不包含很多控制外观的标记，那么也可以上一个层次使用Strict。*
浙公网安备 33021202002483