xhtml和css概述

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了xhtml和css概述相关的知识,希望对你有一定的参考价值。

Xhtml和css概述

1、html的过渡到xhtml

html与xhtml不是两种语言,它们是一种语言的不同阶段,有点类似于文言文和白话文之间的关系。
因为网络技术的日新月异,html的不断改进,所以说xhtml是html的“严谨版”。

详情了解html介绍:http://baike.baidu.com/link?url=XZg9Djt-snnwAICod0SKPbXVhm7BqfTrnEUE2As9E201oL8X7mGbLp7hIsXGV5M6hkcb7gBqWY2NTF-d3dY6Za

(1)<!DOCTYPE>的含义与选择
由于同时存在不同的规范和版本,因此为了使游览器能够兼容多种规范,规范中规定可以使用DOCTYPE指令来声明使用哪种规范解释该文档。
举个例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

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

 

<head>

 

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

 

<title>无标题文档</title>

 

</head>

 

<body>

 

主体
</body>

 

</html>

**上面有两行红色字体关于DOCTYPE(文本类型)的声明,它是告诉浏览器使用XHTML 1.0的过渡规范来解释这个文档中的代码。
**第三行中,<html>标记带有一个xmlns属性,它称为“xml命名空间”,具体含义不用深究,不用修改,只要照抄即可。
**注意这段声明的位置在哪。

(2)实际上,XHTML 与 HTML 4.01 标准没有太多的不同。

它们最主要的不同:

*“标签名称”、“属性名称”必须用小写字母。

错误:<P>this is example.<P>

正确:<p>this is example.</p>

*XHTML 元素必须被正确地嵌套。

错误:<p><span>this is example.</p></span>

正确:<p><span>this is example.</span></p>

*XHTML 元素必须被关闭。

错误:<p>this is example.

正确:<p>this is example.</p>

*空标签也必须被关闭。

错误:<br>

正确:<br/>

 

*XHTML 文档必须拥有根元素。

 所有的 XHTML 元素必须被嵌套于 <html> 根元素中。

 

*XHTML 中属性值必须用双引号括起来。
错误:<p class="heading">
正确:<p class="heading">

 

2、CSS 概述

 

** CSS (中文名):层叠样式表 (Cascading Style Sheets)

 

** css的引入就是为了使html语言更好地适应页面的美工设计
(1)
** 传统的html语言要实现页面的美工设计是十分麻烦的

 

例如:<h1><font color="red" face="黑体">css标记1</font><h1>

 

html:

 

<!doctype html>

 

<html >

 

<head>

 

<meta charset="UTF-8">

 

<meta name="Generator" content="EditPlus®">

 

<meta name="Author" content="">

 

<meta name="Keywords" content="">

 

<meta name="Description" content="">
<title>html的缺点</title>

 

</head>

<body>

<h1><font color="red"size="5" >css简介</font><h1>
<p>
<font color="red"size="3" >
HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签,HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成,而不使用任何的格式化标签。
</font>
</p>
<p>
<font color="red"size="3" >
由于两种主要的浏览器(Netscape 和 Internet Explorer)不断地将新的 HTML 标签和属性(比如字体标签和颜色属性)添加到 HTML 规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难。为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命,并在 HTML 4.0 之外创造出样式(Style)。
</font>
<p>

</body>

</html>

css的优势:

<!doctype html>

<html >

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus®">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">
<title>css的优势</title>

<style type="text/css">

h1{

color:red;

font-size:5px;

}

p{

color:red;

font-size:3px;

}

p{

color:red;

font-size:3px;

}

</style>
</head>

<body>


<h1>css简介<h1>

<p>
HTML 标签原本被设计为用于定义文档内容。通过使用 h1、p、table 这样的标签,HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成,而不使用任何的格式化标签。
</p>

<p>
由于两种主要的浏览器(Netscape 和 Internet Explorer)不断地将新的 HTML 标签和属性(比如字体标签和颜色属性)添加到 HTML 规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难。为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命,并在 HTML 4.0 之外创造出样式(Style)。
</p>

</body>

</html>

   从上面这个很简单的例子中可以明显看出,css对于网页的整体控制单纯的html语言有了突破性的进展,并且后期修改和维护都十分的方便。(上面用到的是标记选择器)

 

以上是关于xhtml和css概述的主要内容,如果未能解决你的问题,请参考以下文章

前端html+css面试题个人总结

学无止境的CSS(xHTML+CSS技巧教程资源大全)

CSS 没有图像的圆角 - 有效的xhtml / css

网页模板-HTML,CSS和JS准备开始编码(1KB 960px mod,Yahoo Reset,jQuery,XHTML str)

css:cdata

jQuery和CSS的拍摄效果