html和xhtml

问题: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创建一个文档

解决方案:XHTMLHTML相似,只是有一些差异。

n         DOCTYPExhtmlhtml有不同的文档类型

n         XHTML区分大小写,HTML不分大小写。XHTML要求所有的标签,属性都必须小写。在XHTML中,CSS    选择符也是区分大小写的,classid要大小写完全匹配,才能被css选择。(因此,建议在xhtmlcss中属性和标签名都小写)

n         Xhtml要求在<html>标签中包含xmlns属性,它的值是http//www.w3.org/1999/xhtml xhtml要求在每次使用htmllang属性时候都加上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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值