标签：style c class blog code java
HTML <!DOCTYPE> 标签定义和用法
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
以下面这个 <!DOCTYPE> 标签为例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 在上面的声明中，声明了文档的根元素是 html，它在公共标识符被定义为 "-//W3C//DTD XHTML 1.0 Strict//EN" 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到，浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置。
提示和注释： 注释：<!DOCTYPE> 标签没有结束标签！
HTML HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
块元素(block element)
* address - 地址
*
blockquote - 块引用
* center - 举中对齐块
* dir -
目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl -
定义列表
* fieldset - form控制组
* form -
交互表单
* h1 - 大标题
* h2 - 副标题
* h3
- 3级标题
* h4 - 4级标题
* h5 - 5级标题
*
h6 - 6级标题
* hr - 水平分隔线
* isindex - input
prompt
* menu - 菜单列表
* noframes -
frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript -
）可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p -
段落
* pre - 格式化文本
* table - 表格
*
ul - 非排序列表
行内元素
* a - 锚点
* abbr - 缩写
* acronym -
首字
* b - 粗体(不推荐)
* bdo - bidi
override
* 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 - 定义变量
有这么一段HTML，请挑毛病：
<P> 哥写的不是HTML，是寂寞。<br><br> 我说：<br>不要迷恋哥，哥只是一个传说
考点1：html和 xhtml的区别
这行代码在html 4.01 strict下是完全正确的，在xhtml 1.0
strict下是错误一堆的。所以明显是一个考点。在xhtml下所有标签是闭合的，p,br需要闭合,
标签不允许大写，P要小写。同时nbsp和br必须包含在容器里。html下这些都不是错。p在html里是可选闭合标签，是可以不用闭合的。
这个考点告诉你xhtml是多么苛刻。这是基本考点，答对，你能拿到60分。
考点2：考样式分离
用nbsp控制缩进是不合理的。应该用CSS干这事。所以应该删掉nbsp
考点3：合理使用标签
br是强制折行标签，p是段落。原题用连续的br制造两个段落的效果，效果是达到了，但显然用的不合理，段落间距后期无法再控制。正确的做法是用两个p表现两个段落。“我说”后面是正常的文字折行用br是合理的。
上面全答对，你就能拿到100分。
对原题改进的结果：
html:
<p>哥写的不是HTML，是寂寞。<p>我说：<br>
不要迷恋哥，哥只是一个传说
xhtml:
<p>哥写的不是HTML，是寂寞。</p><p>我说：<br />
不要迷恋哥，哥只是一个传说</p>
加分：合理的用语义化标签
在前面的基础上合理的用语义化标签，对内容进行必要的标记，是加分的。但过度的使用标签，就画蛇添足了。如“我说”的话，可以用q标签标注。
<p>哥写的不是HTML，是寂寞。
<p>我说：<br>
<q>不要迷恋哥，哥只是一个传说</q>
我觉得这就够了，如果再进一步，“我”用cite标注，“HTML” 用abbr或acronym标注（至于再讨论abbr和acronym的区别就太较真了），也OK。再复杂就没必要了。
<p> 哥写的不是<abbr title=”Hyper Text Markup
Language”>HTML</abbr>，是寂寞。
<p><cite>
我</cite>说：<br> <q>不要迷恋哥，哥只是一个传说</q>
1 <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN" 2 3 "http://www.w3.org/TR/html4/strict.dtd"> 4 <htmllanghtmllang="en"> 5 <head> 6 <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"> 7 <title>CSSBrowserHacks</title> 8 <styletypestyletype="text/css"> 9 bodyp 10 { 11 display:none; 12 } 13 /*Opera*/ 14 html:first-child#opera 15 { 16 display:block; 17 } 18 /*IE7*/ 19 html>body#ie7 20 { 21 *display:block; 22 } 23 /*IE6*/ 24 body#ie6 25 { 26 _display:block; 27 } 28 /*Firefox1-2*/ 29 body:empty#firefox12 30 { 31 display:block; 32 } 33 /*Firefox*/ 34 @-moz-documenturl-prefix() 35 { 36 #firefox{display:block;} 37 } 38 /*Safari*/ 39 @mediascreenand(-webkit-min-device-pixel-ratio:0) 40 { 41 #safari{display:block;} 42 } 43 /*Opera*/ 44 @mediaalland(-webkit-min-device-pixel-ratio:10000), 45 notalland(-webkit-min-device-pixel-ratio:0) 46 { 47 head~body#opera{display:block;} 48 } 49 </style> 50 </head> 51 52 <body> 53 <pidpid="opera">我来自Opera7.2-9.5</p> 54 <pidpid="safari">我是神奇的Safari</p> 55 <pidpid="firefox">我来自Firefox</p> 56 <pidpid="firefox12">我是FF前辈Firefox1-2</p> 57 <pidpid="ie7">我是囧IE7</p> 58 <pidpid="ie6">我是残品IE6</p></body> 59 </html>
1.区别IE和非IE浏览器
#tip{ background:blue;/*非IE背景藍色*/ background:red\9;/*IE6、IE7、IE8背景紅色*/ }
2.区别IE6,IE7,IE8,FF
【区别符号】：「\9」、「*」、「_」
【示例】：
#tip{ background:blue;/*Firefox背景变蓝色*/ background:red\9;/*IE8背景变红色*/ *background:black;/*IE7背景变黑色*/ _background:orange;/*IE6背景变橘色*/ }
【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、GoogleChrome、Safari等)。
标签：style c class blog code java
原文地址：http://www.cnblogs.com/czpu/p/3746319.html
