JEE_CSS_div_DOM

DOM：

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。

它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。DOM把网页和脚本以及其他的编程语言联系了起来。

一、DOM全称

文档对象模型（Document Object Model）

二、DOM是什么

DOM就是一个编程接口，就是一套API。

DOM是针对HTML文档、XML等文档的一套API。就类似于JDBC是针对数据库的一套API一样。

三、DOM的用途

DOM 是用来访问或操作HTML文档、XHTML文档、XML文档中的节点元素。

现在基本上所有的浏览器都都执行了W3C发布的DOM规范，所以在浏览器上就可以用DOM的这些API。

四、DOM与其他技术的联系

JavaScript 可以通过 DOM 来访问和操作HTML文档所有的元素。

JavaScript是一种脚本语言，DOM是用来获得和操作HTML文档的节点属性。JavaScript通常是通过DOM来获得和操作HTML属性的。这就是二者的区别与联系。

1.<script>   
2.    function test(){   
3.        window.alert("成功。");   
4.    }   
5.</script>   
6.<input type=button value="提交" onclick="test()">    
把上述代码复制到一个文件里，改成.html扩展名后，打开此html文档，点击"提交"按钮会弹出"成功"对话框。
其中：
第1，2，4，5行是JavaScript代码。
第3行是DOM代码（此行一定不要混淆成是JavaScript代码）。
 这就是JavaScript调用DOM的例子。
第6行是html代码。

五、DOM详细说明

HTML文档是树状结构，根为<HTML>；DOM也是树状结构，根为window或document对象。

所以DOM就可以把HTML以树状的形式呈现出来。

六、DOM的分类

核心 DOM：定义了一套标准的可以针对任何文档的对象。

HTML DOM：针对HTML文档的DOM。

XML DOM：针对XML文档的DOM。

七、DOM的级别Level

DOM0：不是W3C规范。

DOM1：开始是W3C规范。专注于HTML文档和XML文档。

DOM2：对DOM1增加了样式表对象模型

DOM3：对DOM2增加了内容模型 (DTD 、Schemas) 和文档验证。

（摘自http://tianhei.iteye.com/blog/850524）

DIV标记:

DIV是HTML中的标记，也称作层。DIV标记是用来布局的，可以说成是用层布局。

DIV标记主要用来布局，在布局中，可以作为容器使用，可包含其它对象如表格，表单，文本，图像等。

DIV标记还可以嵌套DIV标记，层数没有限制。

DIV布局与Table布局的不同，比用Table表格布局有更多好处。

例：如何使用DIV+CSS布局：

在CSS样式中，以“#”开头的选择符为ID选择符，与DIV中的id设置关联。以“.”开头的为类选择符，与DIV中的class设置关联。（如下代码中选择符都为空，没有CSS代码）

ID选择符在一个页面中只能出现一次。CLASS选择符在一个页面中可以出现多次。

CSS的style样式中的分号是不能省略的，用来代表本语句（名值对）的结束。

<html>
<head>
<title>使用DIV布局</title>
<style type="text/css">
#header{}
#logo{}
.ad468{}
#banner{}
#content{}
#newsad{}
#news{}
#bottom{}
</style>
</head>
<body>
<div id="header">
  <div id="logo">logo---图标网站</div>
  <div class="ad468">468像素广告</div>
</div>
<div id="banner">导航条</div>
<div id="content">
  <div id="newsad">新闻右边广告</div>
  <div id="news">新闻内容</div>
</div>
<div id="bottom">网页底部</div>
</body>
</html>

DIV+CSS网页布局中，可以用CSS样式控制选择符关系的DIV标记，设置外观效果。

DIV+CSS

<html>
<head>
<title>使用DIV布局</title>
<style type="text/css">
#header{
    width:778px;
    margin:auto;
    border:1px solid #bbbbbb;}
#logo{
    width:180px;
    height:100px;
    float:left;
    border:1px solid #ccce;}
.ad468{
    width:468px;
    height:60px;
    float:left;
    margin:20px 0px 0px 100px;
    border:1px solid #ccc;}
#banner{
    width:778px;
    height:30px;
    margin:5px 0px;
    text-align:center;
    border:1px solid #ccc;}
#content{
    width:778px;
    margin:auto;
    border:1px solid #ccc;}
#newsad{
    width:260px;
    height:260px;
    margin:5px;
    float:right;
    border:1px solid #ccc;}
#news{
    width:480px;
    height:260px;
    margin:5px;
    border:1px solid #ccc;}
#bottom{
    width:778px;
    margin:auto;
    height:80px;
    margin-top:10px;
    border:1px solid #ccc;}
</style>
</head>
<body>
<div id="header">
  <div id="logo">logo---图标网站</div>
  <div class="ad468">468像素广告</div>
</div>
<div id="banner">导航条</div>
<div id="content">
  <div id="newsad">新闻右边广告</div>
  <div id="news">新闻内容</div>
</div>
<div id="bottom">网页底部</div>
</body>
</html>

SPAN标记：

与DIV标记块级元素不同，span标记指行内元素，主要用于文本的容器。

span：宽度依照包围着的对象宽度而定，其内容宽度就是包含内容的宽度，不能设置span的宽度且span前后不会自动换行。

DIV：内容宽度是父对象的100%，不管包含内容有多少，都会占据一行，DIV会自动换行（如果不设置CSS则DIV类似与<p>的用法）。

所以，当在一行文本中，想要对其中某几个文字设置样式，而又不要这些文字换行的条件下，可以选择span标记。

当然，块级元素与行内元素可以通过定义CSS的display属性值互相转换，即转换换行和不换行。

span

<html>
<head>
<title>span标记</title>
<style type="text/css">
#span1{
    color:blue;}
#span2{
    font-size:15px;
    font-weight:600;}
</style>
</head>
<body>
    <span id="span1">HTML+CSS</span>完全<span id="span2">自学</span>手册
</body>
</html>

CSS：

CSS：Cascading Style Sheet的缩写，是控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。（style属性）

CSS选择符：HTML标记选择符，ID选择符，CLASS选择符。

CSS文件的链接方式：

内联定义: <p style="border:2px solid #000000">CSS内联样式</p>

链入内部CSS:

#p1{color:red;}

.p3{font-size:12px;}

</style>

……

<p id="p1">链入内部ID</P>

<P class="p3">链入内部CLASS</p>

链接外部CSS:

posted @ 2012-08-14 18:15 汤姆是一只猫阅读(320) 评论(0) 收藏举报

刷新页面返回顶部

JEE_CSS_div_DOM

公告