HTML基础知识总结.docx

1、HTML基础知识总结HTML基础知识总结常见通用的代码align 用于设置水平对齐方式，可用在， ，（即表格的标记中），（浮动框架属性），（图像与文字基准线），。background 用于设置背景图片，可用在，（无），。bgcolor 用于设置背景颜色，可用在，（即表格的标记中），（设置滚动字）。border 用于设置边框宽度，可用在，。bordercolor 用于设置边框颜色，可用在，（框架）。color 用于设置颜色，可用于，。height 用于设置长度，可用在，。hspase 用于设置空白水平间距，可用于，。hidden 用于设置隐藏域，可用于，。loop 用于设置循环次数，可用于，（循

2、环次数），（媒体文件是否循环播放）。name 用于设置名称，可用于（有好几种用法），。src 用于设置源文件地址，可用于，。text （1）用于设置字体颜色，仅用在中，设置整个网页；（2）用于设置表单当中的文字字段，仅用在中（前提有）。title （1）用于标题标记；（2）用于描述属性，为设置该属性的元素提供建议性的信息，title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签，可以为链接添加描述性文字。vspace 用于设置垂直空白间距，可用于，。valign 用于设置垂直对齐方式，可用于，。width 用于设置宽

3、度，可用在，（无），（框架属性），。窗口打开方式parent 在上一级窗口打开，一般常常用在分帧的框架页中blank 在新窗口打开self 在同一窗口打开，可以省略top 在浏览器的整个窗口打开，忽略任何框架3.模块总结2 主体 3文字与段落（1） 从大到小排列（2） （3）上下标、删除线、等宽 、变量声明、文字标注 被说明文字文字标注 （4）特殊符号“ "& & &qt;X × § © ® ™空格  4列表:无序和有序列表的区别在于和无序列表的type disc circle square有序列表的type，且还

4、可以通过start来设置起始值,type取值 列表项目的序号类型1 a i A（2）名称解释 名词解释 可以简化列表5超链接（1）基本超链接 链接文字（2）内部链接：对于上级目录为“=./文件名” ;下级目录为“文件夹/文件名”（3）书签链接：建书签文字书签与链接不同页面时，链接文字,反之不要前者。（4）电子邮件 链接文字6使用图像（1）（2）设置热区 需要定义热区图像以及热区的链接属性如下 7添加多媒体元素（1）滚动文字 （2）背景音乐 （3）添加多媒体 8表格的应用表格的基本格式 表格标题 （表头样式） 表头 （表主体样式） （表尾样式）层 9添加表单（1） (2)添加控件：type取值

5、取值的含义text 文字字段（显示长度size=”,最长maxlength=”，默认value=”）password 密码域，用户在页面中输入时不显示具体的内容，以*代替（同上）radio 单选按钮（checked 已选中，value=”按钮取值”）checkbox复选框（checked 已选中，value=”按钮取值”）button 普通按钮（onclick=”处理程序”，value=”按键取值”）submit提交按钮reset 重置按钮image 图像域，也称为图像提交按钮（src=”图像地址”）hidden 隐藏域，隐藏域将不显示在页面上，只将内容传递到服务器中file 文件域.菜单列表

6、下拉菜单 选项显示内容选项显示内容列表项选项显示内容选项显示内容10框架结构.框架的基本结构（无结构，新建一个HTML）： （同） （不支持框架标记）浮动框架（在中） 可定义文档中的分区或节（division/section）。 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 ，那么该标签的作用会变得更加有效。 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 固有的唯一格式表现。可以通过 的 class 或 id 应用额外的样式。不必为每一个 都加上类或 id，虽然这样做也有一定的好处。可以

7、对同一个 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。SPAN元素被加入到HTML中以允许网页制作者给出样式但无须附加在一个HTML的结构元素上。SPAN在样式表中作为一个选择符使用，而且它也能接受STYLE、CLASS和ID属性。 SPAN是一个内联元素，所以它可以作为HTML中的元素如EM和STRONG使用。最重要的差别在于虽然EM和STRONG带有结构的意义，但SPAN就没有这样的意义。它的存在纯粹是应用样式，所以当样式表失效时它就没有任何的

8、作用。 在行内定义一个区域，也就是一行内可以被划分成好几个区域，从而实现某种特定效果。本身没有任何属性。 与 在CSS定义中属于一个行内元素，而是块级元素，我们可能通俗地理解为为大容器，大容器当然可以放一个小容器了,就是小容器。CSS基础一、样式表定义CSS是Cascading Style Sheet 的缩写。译作层叠样式表。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。语法结构： Selector property: value 选择器可分为HTML选择器、类选择器、ID选择器。HTML选择器：使用HTML本来就固有的标签来标识。如P(段落)、SPAN（块）。语法

9、： HTML选择器 property:value; （2）类选择器(Class)：语法： . 类名样式规则（3）ID选择器:使用HTML元素的ID属性（不常用）。语法： #ID名样式规则二、样式表的结构和标签之间的所有内容都是样式规则。样式表一般位于与之间。三、样式表的分类：按其使用功能为分：行内样式表、内嵌样式表、外部样式表。（1）行内样式表：使用style属性来定义。如果希望某段文字和其它段落的文字显示风格不一样。可选用（2）内嵌样式表：内嵌样式只对某张网页起作用。它是写在里面的。 .p1color:Red; font-size:30px;.p2color:Blue我是中国人我是美国人（3

10、）外部样式表：如果希望多个页面甚至于整个网站所有页面都采用统一风格，可选用外部样式表。根据样式文件与网页的关联方式，又分为两种：链接外部样式表和导入样式表。A 链接外部样式表：B 导入样式表import mycss.css4、常用样式属性1 字体属性Font：（1）font-style：设置字体样式（2）font-size：设置字体大小（3）font-family：设置字体类型如:宋体（4）font-weight : normal | bold | bolder | lighter | number2 文本属性Text:（1）text-align :设置文本对齐方式。（2）text-decor

11、ation : 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

12、 : 将对象从文档流中流出，即将其转化为一个“层”，并使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义relative : 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置（2）z-index : auto | number设置对象的层叠顺序。auto : 遵从其父对象的定位number : 无单位的整数值。可为负数5 方框属性Box:常用的方框属性有：边界属性Margin、边

13、框属性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 设置对象右边框

14、之间的距离(1-3) padding -bottom设置对象下边框之间的距离(1-4) padding -left设置对象左边框之间的距离6 表格属性Table:（1）border-collapse : separate | collapse。separate : 边框独立（标准HTML）collapse : 相邻边被合并7 特殊样式A:linkcolor:red：未被访问的链接样式A:visitedcolor:green：已被访问的链接样式A:hovercolor:yellow：Mouse悬停在链接上时的样式A:activecolor:blue：Mouse正在按下时链接文字的样式 DOM D

15、ocument Object Model 的缩写 W3C DOM 被分为 3 个不同的级别：核心DOM:： 用于任何结构化文档的标准模型XML DOM： 用于 XML 文档的标准模型HTML DOM：用于 HTML 文档的标准模型 1. 什么是 XML DOM?XML DOM 是：用于 XML 的标准对象模型；用于 XML 的标准编程接口；中立于平台和语言；W3C 的标准。XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法（接口）。换句话说：XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。2. DOM 节点的规定：整个文档是一个文档节点、每个 XML 标

16、签是一个元素节点、包含在 XML 元素中的文本是文本节点、每一个 XML 属性是一个属性节点3. DOM 节点树XML DOM 把 XML 文档视为一种树结构。这种树结构被称为节点树。父节点、子节点和同级节点：父节点拥有子节点；位于相同层级上的子节点称为同级节点（兄弟或姐妹）。在节点树中，顶端的节点成为根节点；根节点之外的每个节点都有一个父节点；节点可以有任何数量的子节点；叶子是没有子节点的节点；同级节点是拥有相同父节点的节点。（结合上图即可理解）4. DOM 解析解析 XML：所有现代浏览器都内建了用于读取和操作 XML 的 XML 解析器。解析器把 XML 读入内存，并把它转换为可被 Ja

17、vaScript 访问的 XML DOM 对象。所有的解析器都含有遍历 XML 树、访问、插入及删除节点的函数。通过微软的 XML 解析器加XML： xmlDoc=newActiveXObject(Microsoft.XMLDOM); xmlDoc.async=false; xmlDoc.load(books.xml); /xmlDoc.loadXML(txt);代码解释：第一行创建空的微软 XML 文档对象；第二行关闭异步加载，这样可确保在文档完整加载之前，解析器不会继续执行脚本；第三行告知解析器加载名为 books.xml 的文档；注释：loadXML() 方法用于加载字符串（文本），而

18、load() 用于加载文件。解析XML文件- 一个跨浏览器的实例下面的例子把XML文档 (books.xml) 载入XML解析器。try xmlDoc=new ActiveXObject(Microsoft.XMLDOM);/Internet Explorer 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.m

19、essage); return(null);5. DOM 属性和方法典型的DOM属性：x.nodeName x 的名称 ；x.parentNode x 的父节点 ；x.nodeValue x 的值；x.childNodes x 的子节点；x.attributes x 的属性节点XML DOM 方法：x.getElementsByTagName(name) 获取带有指定标签名称的所有元素x.appendChild(node) 向 x 插入子节点x.removeChild(node) 从 x 删除子节点注：x 是一个节点对象。6. 访问节点第一种：通过使用getElementsByTagName(

20、)方法getElementsByTagName()返回拥有指定标签名的所有元素。语法：node.getElementsByTagName(tagname);实例：返回x元素下的所有元素：x.getElementsByTagName(title);请注意，上面的例子仅返回x节点下的元素。要返回XML文档中的所有元素，请使用：xmlDoc.getElementsByTagName(title); 因为xmlDoc 就是文档本身（文档节点）。第二种：通过循环（遍历）节点树：下面的代码循环根节点的子节点，同时也是元素节点。xmlDoc=loadXMLDoc(books.xml);x=xmlDoc.documentElement.childNodes;for (i=0;ix.length;i+) if (xi.nodeType=1) /Process only element nodes (type 1) document.write(x