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语言有了突破性的进展,并且后期修改和维护都十分的方便。(上面用到的是标记选择器)

时间: 2024-10-29 10:45:48

xhtml和css概述的相关文章

CSS学习笔记一:CSS概述

一.CSS概述 CSS指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素 样式通常存储在样式表中 把样式添加到HTML中,是为了解决内容与表现分离的问题 外部样式表可以极大的提高工作效率 外部样式表通常存储在CSS文件中 多个样式定义可层叠为一 注意:层叠次序 当同一个HTML元素被不止一个样式定义时,所有的样式将会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4的优先级最高 1.浏览器缺省设置 2.外部样式表 3.内部样式表(位于<head>标签内

HTML、XHTML、css速记

一.HTML 以下内容记录常用的html元素,可另存为html文件以查看效果: <!doctype html> <html lang="zh-cn"> <head> <!--meta属性提供页面元信息,不显示--> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus"/> <

#前端杂谈 【Web 建站技术中,HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么?via知乎 张秋怡】

先附上链接:Web 建站技术中,HTML.HTML5.XHTML.CSS.SQL.JavaScript.PHP.ASP.NET.Web Services 是什么? 这是分享自知乎用户张秋怡的一个回答,用通俗形象的语言解释了关于前端的一些基本概念,比较适合像我这种刚入门的小白阅读.

Css3之基础-1 Css 概述、样式表使用方式、语法规范

一.CSS 概述 CSS概述 - CSS作用 CSS概念 - CSS (Cascading Style Sheets): 层叠样式表,又叫级联样式表,简称样式表 - 用于 HTML 文档中元素的样式定义 - 实现了将内容与表现分离 - 提高代码的可重用性和可维护性 CSS与HTML之间的关系 - HTML 用于构建网页的结构 - CSS 用于构建 HTML 元素的样式 - HTML 是页面的内容组成,CSS是页面的表现 HTML 属性与CSS样式的使用原则 - W3C 建议尽量使用CSS样式取代

Web 建站技术中,HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么?

建站有很多技术,如 HTML.HTML5.XHTML.CSS.SQL.JavaScript.PHP.http://ASP.NET.Web Services.浏览器脚本.服务器脚本等.它们的区别是什么?新手一点不懂,想理清所有这些技术之间的关系和应用范围. 一个学期前我也和楼主差不多不知道这些都是啥,一个学期之后差不多都弄懂了,来讲讲自己的理解吧! 大概是什么个过程:假设你在浏览器地址栏输入这个问题的地址http://www.zhihu.com/question/22689579访问过程和下图差不

Unit02: CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明

Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!-- 2.内部样式:在head元素内部的style标签内 写样式,这种样式

css概述

前言 1.CSS    cascading   stylesheet  级联样式表 ,外观显示(页面内容显示的方式).CSS文档以.css作为后缀 2.w3c推荐页面文件定义 数据和结构   html 样式             css 行为             javascript 正文 CSS(cascading style sheets,层叠式样式表) 作用:设置HTML页面的布局和样式 css的语法 选择器{样式属性;样式属性} HTML中引入样式  a.外部样式(外部文件),li

HTML和xhtml,CSS

索引: 初学者入门书籍 高级进阶书籍 W3C官方手册 网站架构 移动平台网站开发 视频资源 开发工具 初学者入门书籍: 中文电子书    深入浅出html pdf中文版 魅丽的网页设计 JAVA WEB程序设计 Web程序设计(第5版)完整版 HTML & XHTML 权威指南(英文+中文版) Web编程入门经典:HTML.XHTML和CSS (第2版) HTML5与CSS3权威指南第1章~第3章 CSS商业网站布局之道(朱印宏著)pdf HTML与CSS入门经典(第7版) Eric Meyer

HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 这些标签是什么?

1.HTML - 超文本标记语言(英文:HyperText Markup Language,HTML)是为「网页创建和其它可在网页浏览器中看到的信息」设计的一种标记语言.HTML 2.HTML5 - HTML下一个主要的修订版本,现在仍处于发展阶段. 3.XHTML - 可扩展超文本标记语言(eXtensible HyperText Markup Language,XHTML),是一种标记语言,表现方式与超文本标记语言(HTML)类似,不过语法上更加严格. 4.CSS - 层叠样式表(英语:Ca