Dhtml Html Css JavaScript Dom

最新推荐文章于 2020-10-12 14:38:20 发布

shantoo

最新推荐文章于 2020-10-12 14:38:20 发布

阅读量1.5k

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/shantoo/article/details/8981505

版权

Web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

DHTML

Dhtml是动态的html，是将Html Css Dom Javascript这四种技术进行融合产生的。

Html: 将数据进行封装。

Dom: 将标签封装成对象。

Css: 标签中数据的样式。

Javascript: 将三者进行融合，通过程序设计方式来完成动态效果的操作。

HTML

在HTML中数据都是通过标签的形式进行封装的，类似Java中的对象，下面对HTML中的一些重要标签进行总结。

列表标签<dl>

子标签：

<dt>: 上层项目

<dd>: 下层项目

示例：

<dl> 效果:

<dt>游戏名称 </dd> 游戏名称

<dd>星际争霸 </dd> 星际争霸

<dd>红色警戒 </dd> 红色警戒

<dt>部门名称 </dd> 部门名称

<dd>技术部 </dd> 技术部

<dd>培训部</dd> 培训部

</dl>

列表中项目符号对应的标签：

<ol>: 定义有序数字标签

<ul>: 定义无序符号标签

<li>: 具体项目内容标签。此标签只在<ol><ul>中有效

通过type属性更改项目符号，如果想要做出效果更好的列表，如：黑色圆点用图片表示，需要使用CSS.

图像标签<img>

例：<img src=”1.jpg” align=”middle” border=”3” alt=”图片说明文字” />
Src: 用于连接一个文件
Align: 属性定义图片的排列方式
Border: 设置图像的边框
图像地图：<map>
应用：当要在图像中选取某一部分作为连接的时候。如：中国地图每个省所对应的区域。
Map标签要和img标签联合使用。Href是超连接
<img src=”sunset.jgp” alt=”图片说明文字” usemap=”#Map” />
<map>
<area shape=”rect” coords=”50,59,116,104” href=”1.html” />
<area shape=”circle” coords=”118,203,04” href=”2.html” />

</map>

表格标签<table>
组成：
<caption>：标题标签，给表格提供标题
<th>：        表头标签，一般对表格的第一行或第一列进行格式化，就是粗体显示。不常用。
<tr>：        行标签
<td>：       单元格标签，加载进行标签内。
<tbody>：可以控制表格分行下载，当表格内容很大时比较实用，在需要分行下载处加上<tbody>和</tbody>。

超链接标签<a>

用法一：用于定义一个超链接，如：<a href=””>

示例：
<a href=”http://www.sina.com.cn” target=”_blank”>新浪</a>
href属性值可以是url，也可以是本地文件。
Target属性指定在哪个窗口或者帧中打开。

用法二：用于定位标记，如<a name=””>

一般在本页面中使用，当网页内容过长，定位标记会比拖动滚动条方便快捷。
注：定位标记要和超连接结合使用才有效。
如：
<a name=”标记”>标记位置</a>
<a href=”#标记”>返回标记位置</a>

注：使用定位标记时一定要在href值的开始加入#标记名。

表单标签<form> 
表单标签是最常用的标签，用于与服务器端的交互。

表单标签的子标签：

<select>选择标签：提供用户选择内容，如用户所在城市，size属性为显示项目个数。

           <option>子项标签：属性selected没有属性值，加在其中一个子项上，该子项就变成默认被选项。

<textarea>: 多行文本框。如：个人信息描述。

<input>输入标签：接收用户输入信息，其中type属性指定输入标签的类型。

    Type属性类型：

                text:    文本框，输入的文本信息直接显示在框中。
            password: 密码框，输入的文本以原点或者星号的形式显示。
                   radio:    单选框，如性别选择。
            checkbox:    复选框，如兴趣选择。
                hidden:     隐藏字段，在页面上不显示，但在提交的时候随其他内容一起提交。
                submit:     提交按钮，用于提交表单中的数据。
                  reset:    重置按钮，将表单中填写的内容设置为初始值。
                 button:    点击按钮，可以为其自定义事件。
                      file:     文件上传，自动生成一个文本框，和一个浏览按钮。
                 image:     图像形式的提交按钮，它可以代替 submit 按钮。

<label>: 用于给各元素定义快捷键。

for 属性：指定快捷键作用的表单元素。必须与要作用的表单元素的 ID 值相同。
        accesskey 属性：指定快捷键，此快捷键需要和 alt 键组合使用。
例：
<label for= ” user ” accesskey= ” u ” > 用户名 (u)</label>
<input type= ” text ” id= ” user ” />
例：
<label for="userid">
    <tr>
        <td> 用户名 :</td>
        <td>
            <input type="text" name="user" id="userid"/>
   必须是字母数字或下划线 , 不能以数字开头
        </td>
    </tr>
    
</label>

表单提交：
1. 先定义 form 表单中的 action 属性值，指定表单数据提交的目的地 ( 服务端 ) 。
2. 明确提交方式，通过指定 method 属性值。如果不定义，那么 method 的值默认是 get

Get 和 post 的区别：
1  get 提交将数据显示在地址栏，对于敏感信息不安全
Post 提交不显示在地址栏

2   地址栏中存放的数据有限，所以 get 方式对提交的数据体积有限制。
Post 可以提交大体积数据。

3   对提交数据的封装方式不同
Get ：将提交数据封装到消息头前，请求行中。
Post: 将提交的数据封装到消息头后，数据体中。
注：通常表单使用 post 提交，因为编码方便。

对于 tomcat 服务器端，默认的解码方式是 ISO8859-1 ，那么中文会出现乱码。
      通过 post 提交，可以使用 request.setCharacterEncoding( “ GBK ” ), 来解决乱码问题，该方法只对数据体有效。

通过 get 提交， request.setCharacterEncoding( “ GBK ” ) 该方法对乱码解决不了，必须先进行 ISO8859-1 编码，然后在进行 GBK 解码。这种方式虽然对 post 提交的乱码也通用，但是麻烦。所以建立表单提交使用 post 。

其他标签

<p>: 段落标签，行与行之间有一行间距。

<b>: 加粗

<i>: 斜体

<u>: 下划线

<sub>: 下标

<sup>: 上标

<pre>: 将文本内容按原始样式显示在页面。

<marquee>:让内容动起来

direction属性：left right down up

behavior属性：scroll alternate alide

CSS

层叠样式表，可以将网页中的样式分离出来，完全由CSS来控制，增强样式的复用性以及可扩展性。

Css格式：

选择器{

     属性名：属性值;

     属性名：属性值;

     ......

}

Css和html代码相结合的四种方式：
1，每一个html标签都有一个style属性,通过style属性可以对html封装的数据进行样式设计。

2，当页面有多个标签有相同样式时，可以进行复用

方法:

<style>
        Css代码
</style>

3，当有多个页面中的标签的样式相同时，可以将样式单独封装成一个CSS文件。
通过在每个页面中引入这个CSS文件，即引入了相同的样式。
方法:

<style>
        @import url(“1.css”);
</style>

4,通过html中head标签中的link标签连接一个css文件。
    如：<link rel=”stylesheet” href=”1.css” />

技巧：为了提高相同的样式的复用性以及可扩展性，可以将多个标签样式进行单独定义，并封装成css文件。

如：

P.css,div.css...
在一个css文件中使用css的import将多个标签样式文件导入。
然后在html页面上，使用link标签导入这个总的css文件即可。
1.Css
@import url(“p.css”);
@import url(“div.css”);
<link rel “stylesheet” href=”1.css” />

选择器

选择器是样式要作用的标签容器，当样式分离后，html作用在于用标签封装数据，然后将css加载到指定标签上。

选择器的基本分类：
1，标签选择器：标签选择器用标签名表示。

2，类选择器：   类选择器表示每一个标签中的class属性，用（.）表示。
只用来给css所使用。可以对不同标签进行相同样式设定。

3，id选择器： id选择器表示每一个标签中的id属性，id选择器用（#）表示。
id不仅可以被css所使用，还可以被JavaScript所使用。
    使用id选择器需要保证id的唯一性。

选择器的优先级： id>class>标签

扩展选择器：

1，关联选择器：对标签中的标签进行样式定义。选择器选择器。。。

2，组合选择器：对多个选择器进行相同样式定义。将多个选择器通过( , )隔开的形式

3，伪元素选择器：表示元素的一种状态。

在定义这些状态时，有一个顺序：L V H A

    a: link :   超连接点击前状态。
      a: visited  :   超连接点击后状态。
       a: hover :   悬停在超链接上。
       a: active :   点击超链接时。

Div: 行级区域
Span: 块级区域
P: 行级区域。P中不能嵌套div

JavaScript

JavaScript 是基于对象和事件的脚本语言。

JavaScript的特点：
1. 安全性（不允许直接访问本地硬盘），它可以做的就是信息的动态交互。
2. 跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关）

JavaScript与Java不同点：
1    JS是Netscape公司的产品，Java是Sun公司的产品
2    JS是基于对象，Java是面向对象。
3    JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。
4    JS是弱类型，Java是强类型。

JavaScript与html的结合方式
1. JS代码存放在标签对<script type=”text/javascript”>...</script>中。

2. 使用script标签的src属性引入一个js文件（方便后期维护与扩展）
例：<script src=”test.js” type=”javacript”></script>

注：规范中 script 标签中必须加入 type 属性。

JavaScript语法

JavaScript语法与Java语法相似，基本由变量，数组，函数，对象，语句组成。

变量

通过关键字var来定义，js是弱类型语言，所以var不用指定具体的数据类型。

如：var x =3;

x = “hello”;

注：JS中特殊的常量值：undefined,当变量没有初始化就被使用，该变量的值就是undefined（未定义）。

语句

使用逻辑运算符进行布尔表达式连接的时候，需要短路( && )与和短路或( | | )。

Javascript中的语句大部分与Java的语法格式相同，如：

判断结构（if语句，if...else语句），选择结构（switch语句），循环结构（while语句，do...while语句，for语句）。

注意：

var x = 3;

if(x==4) //可以进行比较运算。

if(x=4) //可以进行赋值运算，而且可以同样进行判断，不报错。

因为在JS中0就是false，非0就是true(通常用1表示)，所以if(x=4)结果是true；

一个if...else语句经典示例：

<script type="text/javascript">

var d = new Date(), time = d.getHours()

if (time<12)

{

      document.write("<b>上午好</b>")

}

else if (time>=12 && time<18)

{

     document.write("<b>下午好</b>")

}

else

{

      document.write("<b>Hello World!</b>")

}

</script>

With语句

with语句是JS特有语句，用于确定对象所使用的范围，在该范围内，可以直接使用指定对象的属性和行为，

而不必用（对象. ）的形式进行调用，简化了对象的操作。

语法：with(对象){}

For...In语句

for...in语句是JS特有语句，用于遍历数组元素或对象的属性。

语法：For(变量 in 对象)

变量可以是数组元素，也可以是对象的属性.

JavaScript函数

定义：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

格式：function 函数名（形式参数。。。。。。）

{

执行语句；

return 返回值；

}

函数定义在页面的起始位置<head>部分。

函数是多条语句的封装体，只有在被调用或者被事件激活时才会执行。

你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的 .js 文件，那么甚至可以从其他的页面中调用）。

注意：调用有参数的函数，但没有给其传值，函数一样可以运行，或者调用没有参数的函数，给其传值，该函数也一样运行，因为在函数中有一个参数数组对象(arguments)，该对象将传递的参数都封装到一个数组中。

如：function demo() //定义函数

{

alert(arguments.length);

}

demo(“hello”,123,true); //调用函数。

弹出的对话框结果是3，如果想得到所有的参数值，可以通过for循环遍历该数组。

for(var x=0;x<arguments.length;x++)

{

alert(arguments[x]);

}

函数在调用时的其他写法：

Var show = demo(); //show变量接收demo函数的返回值

Var show = demo; //这种写法是可以的，意为show和demo代表同一个函数。所以该函数也可以通过show（）的方式运行。

动态函数

通过JS的内置对象function实现。

特点：可以将参数列表和方法体作为参数传递。

如：var demo = new Function(“x,y”;”alert(x+y);”);

demo(4,6);

如同：

Function demo(x,y)

{

alert(x+y);

}

demo(4,6);

不同的是，动态函数，参数以及函数体都可以通过参数进行传递，可以动态指定。

匿名函数
匿名函数是一般函数的简写格式。
格式： function(){...}
如： var demo = function(){...}
   demo();
通常在定义事件属性的行为时较为常用。
如：
      function test()
        {
          alert("load ok" );
        }
        Window.onload = test;

可以写成匿名函数的形式：

Window.onload = function()
        {
          alert("load ok" );
        }

使用函数的注意事项：
      function show()
        {
          return “ show run ” ;
        }
      var method = show();
      var method = show;

两句代码都是正确的，
第一句表示的是 show 方法运行后的结果赋值给 method 变量。
第二句表示的是将 show 指向的对象的地址赋值给 method 。那么 method 也指向了该对象。
所以也可以通过 method(); 的形式来调用这个 show 方法。

数组

JavaScript中的数组结合了Java中的数组和集合的特点：

1 可以对数组中的元素进行编号，

2 数组中可以存储任意类型的数据，

3 数组的长度是可变的。

定义方式一：

var arr = new Array();
arr[0] = “ hello ” ;
arr[1] = 123;

定义方式二：
var arr = [ ‘ hello ’ ,123, true , ” abc ” ];

定义二位数组
var arr = [[3,1,5],[1,2,3],[1,33,22]];

通过遍历即可对数组进行基本操作。
for( var x=0;x<arr.length;x++ )
{
alert(arr[x]);
}
为了增强阅读性，最好按照规范，按定义好的形式参数传递实际参数。

对象

JS 可以通过对象的形式将数据进行封装。
首先对对象进行描述，通过函数来完成。
function person(name,age)
{
this.name = name;
this.age = age;
}

var p = new peron( “ lisi ” ,33);

P.show = function()

{

alert( “ show run ” );

}

条件运算符
JavaScript 包含了基于某些条件对变量进行赋值的条件运算符。

语法 variable_name = (condition)?value1:value2
例子 greeting = (visitor=="PRES")?"Dear President ":"Dear ";

如果变量 visitor 中的值是 "PRES"，则向变量 greeting 赋值 "Dear President "，否则赋值 "Dear"。

JavaScript消息框

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

警告框警告框经常用于确保用户可以得到某些信息。

当警告框出现后用户需要点击确认按钮才能继续进行操作。

语法： alert("文本") 单行警告框

alert("文本"+'\n'+"文本") 带有折行的警告框

确认框确认框用于使用户可以验证或者接受某些信息。

当确认框出现后用户需要点击确认或取消按钮才能继续进行操作。

如果点击确认，则反悔true。如果点击取消则反悔false.

语法： confirm("文本")

提示框提示框用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操作。

如果用户点击确认，则返回输入的值，如果点击取消，则返回null.

语法： prompt("文本","默认值")

JavaScript事件

事件是可以被 JavaScript 侦测到的行为，通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

Javascript中一些常用事件

鼠标事件
onclick 鼠标单击某个对象
ondblclick 鼠标双击某个对象
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移动到某元素之上
onmousedown 某个鼠标按键被按下
onmouseup 某个鼠标按键被松开

键盘事件
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住
onkeyup 某个键盘的键被松开

加载事件
onabort 图像加载被中断
onload 某个页面或图像被完成加载
onerror 当加载文档或图像时发生某个错误

其他事件
onreset 重置按钮被点击
onselect 文本被选定
onsubmit 提交按钮被点击
onresize 窗口或框架被调整尺寸
onfocus 元素获得焦点
onblur 元素失去焦点
onunload 用户退出页面

onchange 用户改变域的内容

onload 和 onUnload

当用户进入或离开页面时就会触发 onload 和 onUnload 事件。

onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。

onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。

例如，当某用户第一次进入页面时，你可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼："Welcome John Doe!"。

onFocus, onBlur 和 onChange

onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。

下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容，checkEmail() 函数就会被调用。

OnSubmit

onsubmit用于在提交表单之前验证所有的表单域。

下面是一个使用onSubmit事件的例子。当用户单击表单中的确认按钮时，checkForm()函数就会被调用。假若域的值无效，此次提交就会被取消，checkForm()函数的返回值是true或者false。如果返回值为true，则提交表单，反之取消提交。

onMouseOver 和 onMouseOut

onMouseOver 和 onMouseOut 用来创建“动态的”按钮。

下面是一个使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦测到时，就会弹出一个警告框：

DOM

DOM（document object model）文档对象模型
dom就是将一些标记型文档（如html,xhtml,xml）以及文档中的内容封装成对象，以后可以在对象中定义属性和行为，

方便操作这些对象。

Dom在封装标记型文档时，有三层模型：
Dom1: 将html文档封装成对象。
Dom2: 将xml文档封装成对象。
Dom3: 将xml文档封装成对象。

dom树结构：

window
|--
document
|--

节点的类型：
  标签型节点：       类型：1
  文本型节点：      类型：3
  注释型节点：     类型：8
  document节点：类型：9
  属性节点：          类型：2

标签之间存在空行时，会出现一个空白的文本节点，在获取节点时一定要注意。
节点的关系：
  父节点: 通过parentNode获取
  子节点: 通过childNodes获取
  兄弟节点：
    上一个兄弟节点：通过previousSibling获取
    下一个兄弟节点：通过nextSibling获取

获取节点对象的几种方式：
1   通过节点的层次关系来获取
2   通过document对象获取
     2.1 getElementById:   通过标签的id属性值获取对应的节点对象，如果有多个ID值相同，获取到的是第一个ID属性所对应的对象。
     2.2 getElementsByName:  通过标签的name属性值获取对象，返回的是一个对象数组。
     2.3 getElementsByTagName:   即没有id属性也没有name属性时可通过标签名来获取节点对象，返回一个对象数组，通常情况下容器型标签具备该方法，因为容器型标签不需要定义id属性和name属性，比如table，div

通过节点操作实现动态效果的基本步骤：
1   定义数据封装的标签（定义界面）
2   确定事件源
3   注册事件
4   事件处理