问题:html元素如何构成文档
解决方案:html是严格的元素层次嵌套结构,元素可以互相嵌套,但是不能重叠。Html将元素划分为3个主要类:结构化元素,块状元素,内联元素。
n 核心的结构化元素:<html><head><body>,<head>中放的是关于文档的信息,<body>放文档内容
n 块状元素:结构化的,多目标的,终端的。
n 内联元素:语义化,排列顺序,内联块状。
模式:HTML核心结构:
<!DOCTYPE DOCUMENT_TYPE_DEFINITION_USED_FOR_VALIDATION>
<html>
<head>METADATA</head>
<body>CONTENT</body>
</html>
问题:需要用XHTML创建一个文档
解决方案:XHTML跟HTML相似,只是有一些差异。
n DOCTYPE:xhtml和html有不同的文档类型
n XHTML区分大小写,HTML不分大小写。XHTML要求所有的标签,属性都必须小写。在XHTML中,CSS 选择符也是区分大小写的,class和id要大小写完全匹配,才能被css选择。(因此,建议在xhtml和css中属性和标签名都小写)
n Xhtml要求在<html>标签中包含xmlns属性,它的值是http://www.w3.org/1999/xhtml 。xhtml要求在每次使用html的lang属性时候都加上xml:lang属性, 例如xml:lang=”en“ lang=”en”
n XHTML要求所有的元素都要有开始和结束标签,所有属性都必须放在引号里而且其中必须有一个值,html没有这些要求
n Html允许你在以下几个元素忽略开始标签,<html><head><body><tbody>也允许你对某些元素忽略结束标签<html><head><body><p><li><dt><dd><tr><th><td>。在html中浏览器会默认他们的表现。在xhtml中,如果这些标签被忽略,文档就不能通过校验了。
n Html对一些元素禁止使用结束标签,<meta><link><base><br><hr><area><img><param><input><option><col>。Xhtml要求所有元素都有结束标签。因此规范的xhtml文档如果包含了其中的任何一个标签都会成为不规范的html文档,反而依然。在html浏览器中,有一个折中做法,他们并不要求文档必须成为规范的html,可以对空元素使用一种xml缩写法国法,只要在结束的斜杠或小于号前加一个空格即可。如<meta /> <link /><base />等,对于其他空元素,需要再加一个结束标签。如<span></span>
优势:xhtml严格的要求使得我们能够更好清晰的看清文档结构。在html中,浏览器假设没有结束标签的元素属于下一个块状元素的开始。在前面的例子中,XHTML会在段落后解析<br />,html会把它看成段落的一部分。这就是xhtml会存在一个额外的空行的原因。
在用css装饰文档时,规范的清晰的结构是非常重要的,因为css选择符在选择元素时会基于他们的结构。
规范的xhtml:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHMTL 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd “>
<html xmlns=” http://www.w3.org/1999/xhtml “ xml:lang=”en” lang=”en”>
<head><title>XHTML</title>
<meta http-equiv=”Content-type” content=”text/html charset=utf-8” />
<link rel=”stylesheet” href=”page.css” media=”all” type=”text/css” />
</head>
<body>
<h1>XHTML</h1> <p>段落</p> <br />断行
<ol> <li>有序列表项 </li> <li>有序列表项 </li> </ol>
<dl><dt>定义词汇</dt> <dd>定义数据</dd> </dl>
</body>
</html>
规范的html
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“ http://www.w3.org/TR/html4/loose.dtd” >
<html lang= en >
<head> < title> HTML</title>
<meta http-equiv=Content-type content=”text/html;charset=utf-8” >
<link ref=stylesheet href=page.css media=all type=”text/css” >
<body>
<h1>HTML</h1> <p>段落<br>断行
<ol> <li>有序列表项 <li>有序列表项 </ol>
<dl><dt>定义词汇<dd>定义数据 </dl>
</body>
</html>