狠狠撸

狠狠撸Share a Scribd company logo
解读HTML

单东林   2012年07月
内容:
1,选择什么样的顿翱颁罢驰笔贰
2,什么是名字空间
3,定义语言编码
4,调用样式表
5,丑别补诲区的其他设置
6,齿贬罢惭尝代码规范
7,校验及常见错误
1,选择什么样的顿翱颁罢驰笔贰
先看几个网页



         <!DOCTYPE html PUBLIC "-//W3C//DTD
         XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/x
         html1-transitional.dtd">




         <!Doctype html>
DOCTYPE是什么

DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。
其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义,里面包含了文档的规则,浏
览器就根据你定义的DTD来解释你页面的标识,并展现出来。
XHTML 1.0 提供了三种DTD声明可供选择:
过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合
xhtml的写法)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采
用这种DTD。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
回过头再看看


         <!DOCTYPE html PUBLIC "-//W3C//DTD
         XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1
         -transitional.dtd">




          <!Doctype html>
我们应该选择什么样的DOCTYPE


对于XHTML1.0来说,理想情况当然是严格的DTD,但对于我们大多数刚接触web标
准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择。因为这种
DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。

注:“表现层的标识、属性”是指那些纯粹用来控制表现的tag,例如用于字体的
font、背景颜色标识等。在XHTML中标识是用来表示结构的,而不是用来实现表
现形式,我们过渡的目的是最终实现数据和表现相分离。

HTML5 的出现,让我们有了新的选择,可以直接像淘宝一样选择:


<!Doctype html>
2,什么是名字空间
名字空间


 <html xmlns="http://www.w3.org/1999/xhtml" >


 这个"xmlns"是XHTML namespace的缩写,叫做"名字空间"声明。
 名字空间是什么作用呢?
 由于xml允许你自己定义自己的标识,你定义的标识和其他人定义的标识有可能
 相同,但表示不同的意义。当文件交换或者共享的时候就容易产生错误。为了
 避免这种错误发生,XML采用名字空间声明,允许你通过一个网址指向来识别
 你的标识。
 XHTML是HTML向XML过渡的标识语言,它需要符合XML文档规则,因此也需要
 定义名字空间。又因为XHTML1.0不能自定义标识,所以它的名字空间都相同,
 就是http://www.w3.org/1999/xhtml。
3,定义语言编码
编码语言


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

为了被浏览器正确解释和通过W3C代码校验,所有的XHTML文档都必须声明它们所使用的
编码语言,根据你的需要定义。
但是要补充说明的是,XML文档并不是这样定义语言编码的,XML的定义方式如下:
<?xml version="1.0" encoding=“utf-8" ?>


 注意:这是W3C推荐使用的定义方法。那为什么我们不直接采用这种方法呢?原因是一些
 浏览器对标准的支持不完善,不能正确理解这样的定义方法,比如IE6/windows。所以在
 目前过渡方案下,我们依然推荐使用meta方式。
4,调用样式表
调用样式表

                  是指将CSS样式编码写在HTML标签中,利用 HTML 属性 style 来设一个
                  行内样式,格式如下:
                  <h1 style="font-size:12px;color:#000FFF">
?   行间样式表         它是最基本的形式,但是它没有实现表现与内容分离且不能灵活的控制
                  多个页面,所以我们只是在调试CSS代码的时候使用。

                  把CSS代码写在HTML页面中,格式如下:
?   内部样式表         <style type="text/css">
                  h1{font-size:12px; color:#000FFF }
                  </style>
                  <h1>Test</h1>
?   外部样式表         内部样式表不能达到跨页面使用所以不适合使用,但首页有时可以用。


      将CSS样式代码单独放在一个外部文件中,可由多个网页调用。
      <link rel="stylesheet" rev="stylesheet" href="style.css">
5,丑别补诲区的其他设置
head区的其他设置

1、收藏夹小图标
首先制作一个16x16的icon图标,命名为favicon1.ico,放在根目录下。然后将下面的代码嵌入
head区:
<link rel="icon" href="/favicon1.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon1.ico" type="image/x-icon" />

2、为搜索引擎准备的内容
允许搜索机器人搜索站内所有链接:<meta content="all" name="robots" />
设置站点作者信息:<meta name="author" content="ajie@netease.com,阿捷" />
设置站点的简要介绍(推荐):
<meta name=“description” content=“web标准的教程站点" />
设置站点的关键词(推荐):
<meta content="designing, with, web, standards, xhtml, css, graphic, design, layout,
usability, ccessibility, w3c, w3, w3cn, ajie" name="keywords" />
head区的其他设置---移动终端

3、<html manifest="my.manifest">
my.manifest:
# Version 1                          注意:为了离线缓存,你还需要修改服务器
my.html                              上的 content-type 头文件。在 Apache 中,
my.css                               你要么将这些放在设置文件中,要么放在一
my.js                                个 .htaccess 文件中。
my.png                               AddType text/cache-manifest manifest

4、<meta name="viewport“ content="width=device-width, initial-scale=1,
maximum-scale=1“ >
width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width
为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放
head区的其他设置—兼容性


<meta http-equiv="X-UA-Compatible"
content="IE=EmulateIE7" />
 X-UA-Compatible是针对ie8+新加的一个设置,为了避免制作出的页面在IE8+下
面出现错误,建议直接将IE8+使用IE7进行渲染。
6,齿贬罢惭尝代码规范
XHTML代码规范

1.所有的标记都必须要有一个相应的结束标记

<br>               <br />

2.所有标签的元素和属性的名字都必须使用小写

<BODY>              <body>

3.所有的XML标记都必须合理嵌套

<p><b></p>/b>                <p><b></b></p>

4.所有的属性必须用引号“ “ 括起来

<input type=button />          <input type=“button” />
XHTML代码规范

5.把所有<和&特殊符号用编码表示

任何小于号(<),不是标签的一部分,都必须被编码为& l t ;
任何大于号(>),不是标签的一部分,都必须被编码为& g t ;
任何与号(&),不是实体的一部分的,都必须被编码为& a m p;

6.给所有属性赋一个值

<input type="checkbox" checked>

<input type="checkbox" checked=“checked”>

7.不要在注释内容中使“--”

<!--注释-----------注释-->        <!--注释======注释-->
7,校验及常见错误
XHTML代码校验


校验网址:http://validator.w3.org/

校验方式:网址校验、文件上传校验

XHTML校验常见错误原因对照表:
No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定义DOCTYPE。
No Character Encoding Found! Falling back to UTF-8.--未定义语言编码。
end tag for "img" omitted, but OMITTAG NO was specified--图片标签没有加"/"关闭。
an attribute value specification must be an attribute value literal unless SHORTTAG YES is
specified--属性值必须加引号。
element "DIV" undefined---DIV标签不能用大写,要改成小写div。
required attribute "alt" not specified---图片需要加alt属性。
required attribute "type" not specified---JS或者CSS调用的标签漏了type属性。
Q&A
感谢聆听

More Related Content

Viewers also liked (20)

Email Risk, by Albert Kassis
Email Risk, by Albert KassisEmail Risk, by Albert Kassis
Email Risk, by Albert Kassis
Albert Kassis
?
Metadata Strategies by Albert Kassis
Metadata Strategies by Albert KassisMetadata Strategies by Albert Kassis
Metadata Strategies by Albert Kassis
Albert Kassis
?
Presentation To Liaison Panel
Presentation To Liaison PanelPresentation To Liaison Panel
Presentation To Liaison Panel
Mike Henshaw
?
Ppt Portfolio Jan 2011
Ppt Portfolio Jan 2011Ppt Portfolio Jan 2011
Ppt Portfolio Jan 2011
jeffdevo
?
Neighborhood America & Microsoft at Convergence 2009: CRM 2.0
Neighborhood America & Microsoft at Convergence 2009: CRM 2.0Neighborhood America & Microsoft at Convergence 2009: CRM 2.0
Neighborhood America & Microsoft at Convergence 2009: CRM 2.0
KristiGNA
?
Et s'il existait un lien entre Big Data et Ressources Humaines ?
Et s'il existait un lien entre Big Data et Ressources Humaines ?Et s'il existait un lien entre Big Data et Ressources Humaines ?
Et s'il existait un lien entre Big Data et Ressources Humaines ?
Jean-Noel CHAINTREUIL
?
Pinterest for Brand (E. Vivier / JN. Chaintreuil)
Pinterest for Brand (E. Vivier / JN. Chaintreuil)Pinterest for Brand (E. Vivier / JN. Chaintreuil)
Pinterest for Brand (E. Vivier / JN. Chaintreuil)
Jean-Noel CHAINTREUIL
?
It Sector Presenter
It Sector PresenterIt Sector Presenter
It Sector Presenter
dawnhotchen
?
New Marketing
New MarketingNew Marketing
New Marketing
vginsburgslide
?
Refco Case Study
Refco Case StudyRefco Case Study
Refco Case Study
Albert Kassis
?
JQuery 学习
JQuery 学习JQuery 学习
JQuery 学习
cssrain
?
R E C R U I T F I T
R E C R U I T  F I TR E C R U I T  F I T
R E C R U I T F I T
Gopinath Venkata
?
Protocolo nucleo ii (1)Protocolo nucleo ii (1)
Protocolo nucleo ii (1)
karito4
?
Castillo de chapultepecCastillo de chapultepec
Castillo de chapultepec
DianaMartinez93
?
Q3 pitch
Q3 pitchQ3 pitch
Q3 pitch
Kellock Irvin
?
Medic-History by Irregular Expressions
Medic-History by Irregular ExpressionsMedic-History by Irregular Expressions
Medic-History by Irregular Expressions
Gaurav Saini
?
Captive Insurance Basics
Captive Insurance BasicsCaptive Insurance Basics
Captive Insurance Basics
pacificrisk
?
Captive Insurance Presentation
Captive Insurance PresentationCaptive Insurance Presentation
Captive Insurance Presentation
The Law Office of Hale Stewart
?
3 morfologia bacteriana y_fungica_20133 morfologia bacteriana y_fungica_2013
3 morfologia bacteriana y_fungica_2013
July Becerra Gálvez
?
Email Risk, by Albert Kassis
Email Risk, by Albert KassisEmail Risk, by Albert Kassis
Email Risk, by Albert Kassis
Albert Kassis
?
Metadata Strategies by Albert Kassis
Metadata Strategies by Albert KassisMetadata Strategies by Albert Kassis
Metadata Strategies by Albert Kassis
Albert Kassis
?
Presentation To Liaison Panel
Presentation To Liaison PanelPresentation To Liaison Panel
Presentation To Liaison Panel
Mike Henshaw
?
Ppt Portfolio Jan 2011
Ppt Portfolio Jan 2011Ppt Portfolio Jan 2011
Ppt Portfolio Jan 2011
jeffdevo
?
Neighborhood America & Microsoft at Convergence 2009: CRM 2.0
Neighborhood America & Microsoft at Convergence 2009: CRM 2.0Neighborhood America & Microsoft at Convergence 2009: CRM 2.0
Neighborhood America & Microsoft at Convergence 2009: CRM 2.0
KristiGNA
?
Et s'il existait un lien entre Big Data et Ressources Humaines ?
Et s'il existait un lien entre Big Data et Ressources Humaines ?Et s'il existait un lien entre Big Data et Ressources Humaines ?
Et s'il existait un lien entre Big Data et Ressources Humaines ?
Jean-Noel CHAINTREUIL
?
Pinterest for Brand (E. Vivier / JN. Chaintreuil)
Pinterest for Brand (E. Vivier / JN. Chaintreuil)Pinterest for Brand (E. Vivier / JN. Chaintreuil)
Pinterest for Brand (E. Vivier / JN. Chaintreuil)
Jean-Noel CHAINTREUIL
?
It Sector Presenter
It Sector PresenterIt Sector Presenter
It Sector Presenter
dawnhotchen
?
JQuery 学习
JQuery 学习JQuery 学习
JQuery 学习
cssrain
?
Protocolo nucleo ii (1)Protocolo nucleo ii (1)
Protocolo nucleo ii (1)
karito4
?
Castillo de chapultepecCastillo de chapultepec
Castillo de chapultepec
DianaMartinez93
?
Medic-History by Irregular Expressions
Medic-History by Irregular ExpressionsMedic-History by Irregular Expressions
Medic-History by Irregular Expressions
Gaurav Saini
?
Captive Insurance Basics
Captive Insurance BasicsCaptive Insurance Basics
Captive Insurance Basics
pacificrisk
?
3 morfologia bacteriana y_fungica_20133 morfologia bacteriana y_fungica_2013
3 morfologia bacteriana y_fungica_2013
July Becerra Gálvez
?

Similar to 解读丑迟尘濒 (20)

Inside the browser
Inside the browserInside the browser
Inside the browser
otakustay
?
Html&css培训 舒克
Html&css培训 舒克Html&css培训 舒克
Html&css培训 舒克
jay li
?
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am i
Twinsen Liang
?
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染
Ailsa126
?
网易相册前端页面开发规范2010版
网易相册前端页面开发规范2010版网易相册前端页面开发规范2010版
网易相册前端页面开发规范2010版
昌里大金猪 Luke
?
Inside the-browser
Inside the-browserInside the-browser
Inside the-browser
jy03845581
?
Inside the-browser
Inside the-browserInside the-browser
Inside the-browser
jy03845581
?
NextGen
NextGenNextGen
NextGen
potatongy
?
不一樣的Web server... coServ
不一樣的Web server... coServ不一樣的Web server... coServ
不一樣的Web server... coServ
Ben Lue
?
一淘新首页总结
一淘新首页总结一淘新首页总结
一淘新首页总结
jieorlin
?
网页制作基础
网页制作基础网页制作基础
网页制作基础
loo2k
?
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development FundamentalsExam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
?
顿颈惫+肠蝉蝉培训
顿颈惫+肠蝉蝉培训顿颈惫+肠蝉蝉培训
顿颈惫+肠蝉蝉培训
pan quanjin
?
高性能网站最佳实践
高性能网站最佳实践高性能网站最佳实践
高性能网站最佳实践
longhao
?
Browser Object Model
Browser Object ModelBrowser Object Model
Browser Object Model
jay li
?
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)
ziggear
?
网页制作基础
网页制作基础网页制作基础
网页制作基础
loo2k
?
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
jeannewoo
?
Inside the browser
Inside the browserInside the browser
Inside the browser
otakustay
?
Html&css培训 舒克
Html&css培训 舒克Html&css培训 舒克
Html&css培训 舒克
jay li
?
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am i
Twinsen Liang
?
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染
Ailsa126
?
网易相册前端页面开发规范2010版
网易相册前端页面开发规范2010版网易相册前端页面开发规范2010版
网易相册前端页面开发规范2010版
昌里大金猪 Luke
?
Inside the-browser
Inside the-browserInside the-browser
Inside the-browser
jy03845581
?
Inside the-browser
Inside the-browserInside the-browser
Inside the-browser
jy03845581
?
不一樣的Web server... coServ
不一樣的Web server... coServ不一樣的Web server... coServ
不一樣的Web server... coServ
Ben Lue
?
一淘新首页总结
一淘新首页总结一淘新首页总结
一淘新首页总结
jieorlin
?
网页制作基础
网页制作基础网页制作基础
网页制作基础
loo2k
?
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development FundamentalsExam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
?
顿颈惫+肠蝉蝉培训
顿颈惫+肠蝉蝉培训顿颈惫+肠蝉蝉培训
顿颈惫+肠蝉蝉培训
pan quanjin
?
高性能网站最佳实践
高性能网站最佳实践高性能网站最佳实践
高性能网站最佳实践
longhao
?
Browser Object Model
Browser Object ModelBrowser Object Model
Browser Object Model
jay li
?
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)
ziggear
?
网页制作基础
网页制作基础网页制作基础
网页制作基础
loo2k
?
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
jeannewoo
?

解读丑迟尘濒