HTML基础知识总结.docx

（3）外部样式表：

如果希望多个页面甚至于整个网站所有页面都采用统一风格，可选用外部样式表。

根据样式文件与网页的关联方式，又分为两种：

链接外部样式表和导入样式表。

A链接外部样式表：

B导入样式表@importmycss.css

4、常用样式属性1字体属性Font：

（1）font-style：

设置字体样式

（2）font-size：

设置字体大小（3）font-family：

设置字体类型如:

宋体（4）font-weight:

normal|bold|bolder|lighter|number

2文本属性Text:

（1）text-align:

设置文本对齐方式。

（2）text-decoration:

none||underline||blink闪烁||overline上划线||line-through贯穿线

3背景属性Background：

（1）background-color：

设置背景颜色。

（2）background-image：

设置背景图像。

background-image:

url（图像地址）（3）background-repeat：

设置一个指定的背景图像如何被重复显示。

4定位属性position

（1）position:

static|absolute|relative。

static:

默认值。

无特殊定位，对象遵循HTML定位规则absolute:

将对象从文档流中流出，即将其转化为一个“层”，并使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。

如果不存在这样的父对象，则依据body对象。

而其层叠通过z-index属性定义relative:

对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

（2）z-index:

auto|number设置对象的层叠顺序。

auto:

　遵从其父对象的定位number:

　无单位的整数值。

可为负数

5方框属性Box:

常用的方框属性有：

边界属性Margin、边框属性Border、填充属性Padding。

（1）边界属性Margin：

（1-1）margin-top设置对象的上边距（1-2）margin-right设置对象的右边距（1-3）margin-bottom设置对象的下边距（1-4）margin-left设置对象的左边距

（2）边框属性Border：

（2-1）border-style设置对象的样式

（2-2）border-width设置对象的宽度（3-3）border-color设置对象的颜色（3）填充属性Padding：

（1-1）padding-top设置对象与上边框之间的距离（1-2）padding-right设置对象右边框之间的距离（1-3）padding-bottom设置对象下边框之间的距离（1-4）padding-left设置对象左边框之间的距离

6表格属性Table:

（1）border-collapse:

separate|collapse。

separate:

　边框独立（标准HTML）collapse:

　相邻边被合并

7特殊样式A:

link{color:

red}：

未被访问的链接样式A:

visited{color:

green}：

已被访问的链接样式A:

hover{color:

yellow}：

Mouse悬停在链接上时的样式A:

active{color:

blue}：

Mouse正在按下时链接文字的样式

DOMDocumentObjectModel的缩写

W3CDOM被分为3个不同的级别：

核心DOM:

：

用于任何结构化文档的标准模型XMLDOM：

用于XML文档的标准模型HTMLDOM：

用于HTML文档的标准模型

1.什么是XMLDOM?

XMLDOM是：

用于XML的标准对象模型；用于XML的标准编程接口；中立于平台和语言；W3C的标准。

XMLDOM定义了所有XML元素的对象和属性，以及访问它们的方法（接口）。

换句话说：

XMLDOM是用于获取、更改、添加或删除XML元素的标准。

2.DOM节点的规定：

整个文档是一个文档节点、每个XML标签是一个元素节点、包含在XML元素中的文本是文本节点、每一个XML属性是一个属性节点

3.DOM节点树XMLDOM把XML文档视为一种树结构。

这种树结构被称为节点树。

父节点、子节点和同级节点：

父节点拥有子节点；位于相同层级上的子节点称为同级节点（兄弟或姐妹）。

在节点树中，顶端的节点成为根节点；根节点之外的每个节点都有一个父节点；节点可以有任何数量的子节点；叶子是没有子节点的节点；同级节点是拥有相同父节点的节点。

（结合上图即可理解）

4.DOM解析解析XML：

所有现代浏览器都内建了用于读取和操作XML的XML解析器。

解析器把XML读入内存，并把它转换为可被JavaScript访问的XMLDOM对象。

所有的解析器都含有遍历XML树、访问、插入及删除节点的函数。

通过微软的XML解析器加XML：

xmlDoc=newActiveXObject（"Microsoft.XMLDOM"）;xmlDoc.async="false";xmlDoc.load（"books.xml"）;//xmlDoc.loadXML（txt）;

代码解释：

第一行创建空的微软XML文档对象；第二行关闭异步加载，这样可确保在文档完整加载之前，解析器不会继续执行脚本；第三行告知解析器加载名为"books.xml"的文档；

注释：

loadXML（）方法用于加载字符串（文本），而load（）用于加载文件。

解析XML文件---一个跨浏览器的实例

下面的例子把XML文档（"books.xml"）载入XML解析器。

try{xmlDoc=newActiveXObject（"Microsoft.XMLDOM"）;}//InternetExplorer

catch（e）{try{xmlDoc=document.implementation.createDocument（"","",null）;}

catch（e）{alert（e.message）;}}try{xmlDoc.async=false;xmlDoc.load（dname）;return（xmlDoc）;}

catch（e）{alert（e.message）;}return（null）;

5.DOM属性和方法

典型的DOM属性：

x.nodeNamex的名称；x.parentNodex的父节点；x.nodeValuex的值；x.childNodesx的子节点；x.attributesx的属性节点

XMLDOM方法：

x.getElementsByTagName（name）获取带有指定标签名称的所有元素

x.appendChild（node）向x插入子节点x.removeChild（node）从x删除子节点

注：

x是一个节点对象。

6.访问节点第一种：

通过使用getElementsByTagName（）方法

getElementsByTagName（）返回拥有指定标签名的所有元素。

语法：

node.getElementsByTagName（"tagname"）;

实例：

返回x元素下的所有