HTML DOM & JavaScript & CSS

通过 JavaScript，您可以访问并处理所有的 HTML DOM 对象来重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。
要改变页面的某个东西，JavaScript 就需要对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。

HTML DOM
HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。

HTML DOM  定义了访问和操作HTML文档的标准方法, 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）.

通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。

HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

 

JavaScript 创建动画: 通过不同的事件来切换不同的图像

1. 创建对象的实例
下列代码创建了一个对象的实例，并向其添加了四个属性：

personObj=new Object()
personObj.firstname="John"
personObj.lastname="Doe"
personObj.age=50
personObj.eyecolor="blue"向 personObj 添加方法也很简单。下列代码向 personObj 添加了名为 eat() 的方法：

personObj.eat=eat

 

 

DHTML是一种创建动态和交互 WEB 站点的技术集。
DHTML 是 HTML、CSS 和 JavaScript 的集合。DHTML 用于创建动态的交互式的网站。

通过 DOM查找并访问节点:
 1. 通过使用 getElementById() 和 getElementsByTagName() 方法
 2. 通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性
 
 

CSS 指层叠样式表 (Cascading Style Sheets)
 样式定义如何显示 HTML 元素, 通常存储在样式表中
 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
 外部样式表可以极大提高工作效率
 外部样式表通常存储在 CSS 文件中
 多个样式定义可层叠为一

CSS 语法由三部分构成：选择器、属性和值：selector {property: value}
选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：

body {color: blue}
上面这行代码的作用是将 body 元素内的文字颜色定义为蓝色。在上述例子中，body 是选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color 为属性，blue 为值。

id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义。

下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

#red {color:red;}
#green {color:green;}
下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。

CSS 背景处理:  1. 设置元素背景色; 2. 设置背景图像
CSS 文本属性可定义文本的外观: 改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进等等
CSS 字体 (font) 属性定义文本中的字体: 设置字体系列 (font-family) 和字体加粗 (font-weight)，还可以设置字体的大小、字体风格（如斜体）和字体变形（如小型大写字母）。
CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。
CSS 表格属性允许你设置表格的布局。

CSS 定位 (Positioning) 属性允许你对元素进行定位。
 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
 div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
 块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

 行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

CSS 浮动
 float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
 
 
padding : 内边距，也有资料将其翻译为填充。
border : 边框。
margin : 外边距，也有资料将其翻译为空白或空白边。

 

HTML <div> 标签:  可定义文档中的分区或节. <div> 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。