HTML、css、javascript、DOM编程

时间 2019-12-09

标签 html css javascript dom 编程栏目 HTML 繁體版

原文原文链接

HTML、css、javascript、DOM编程javascript

1、Htmlcss

1.1html概述html

Html就是超文本标记语言的简写，是最基础的网页语言，其代码都是由标签所组成，是经过标签来定义的语言，代码不须要区分大小写，由<html>开始</html>结束，里面由头部分<head></head>和体部分<body></body>两部分组成，头部分的内容会先加载，里面的内容是给html页面增长一些辅助或者属性信息，体部分是真正存放页面数据的地方。java

1.2html书写规范编程

（1）多数标签都是有开始标签和结束标签，可是其中有个别标签由于只有单一功能，或者没有要修饰的内容，能够在标签内结束。例如< br/>api

（2）想要对被标签修饰的内容进行更丰富的操做，就用到了标签中的属性，经过对标签属性的改变，增长更多效果选择。数组

（3）属性与属性值之间用“=”链接，属性值能够用单引号或双引号或不用引号，通常都用双引号，或公司规定书写规范。浏览器

格式：<标签名属性名=‘属性值’>数据内容</标签名>安全

<标签名属性名=‘属性值’/>网络

1.3操做思想

为了操做数据，能够将数据进行不一样标签的封装，经过标签中的属性对封装的数据进行操做，标签就至关于一个容器，对容器中的数据进行操做就是在不断改变容器的属性值。

1.4经常使用标签

标签特色：对于数据进行封装，那么就有开始标签和结束标签，可是也有一些标签只体现单一功能，因此不须要结束标签，规范中要求标签必需要结束，因此这样的标签在内部结束，如：<br /> <hr /> <img /> <imput />

标签格式：<标签名属性名=“属性值”>数据</ 标签名>

<标签名属性名=“属性值” />

（1）字体标签<font>：例如<font size=”5” color=”red”>字体标签实例</font>

（2）标题标签：<h1><h2>.....<h6>，标题是文本中经常使用的内容，为了方便操做而定义，其实就是某个字号和粗体的组合。

（3）特殊字符：若是想在网页上显示一些特殊符号，例如<> &等，这些符号在代码中会被浏览器解析，因此要用一些特殊方式来表示。

（4）列表标签<dl>

<dt>：上层项目

<dd>：下层项目

例如：

　　<dl> 　　　　 <dt>游戏</dt> 　　 <dd>网络游戏</dd> 　　 <dd>单机游戏</dd> 　　 <dt>部门名称</dt> 　　 <dd>技术部</dd> 　　 <dd>培训部</dd> </dl>

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

<ol>：数字标签（a A 1 i I）

<ul>：符号标签（○●■）

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

例如：

<ol> <li>游戏名称 <ol> <li>阿斯顿发生地方</li> <li>阿斯顿发生地方</li> </ol> </li> <li>游戏说明 <ol> <li>说当发生</li> <li>说电发生</li> </ol> </li> </ol>

（5）图像标签：<img>

例：<img src="1.jpg" align="middle" border="3" alt="图片说明文字"/>

src：图片地址；align用来定义图片的排版方式；border用来设置图片的边框。

hr标签：加入一条水平线，可定义粗细和颜色等属性

（6）图像地图<map>

应用：当要在图像中选取某一部分做为链接的时候，如：中国每一个省所对应的区域。

map标签要和img标签联合使用，Href为超连接。

（7）表格标签：<table>

组成：标题标签：<caption>，给表格提供标题

表头标签：<th>，通常对表格的第一行或者第一列进行格式化，也就是粗体显示。

行标签：<tr>

单元格标签：<td>，加载在行标签的里面。能够理解为先有行，再在行中加入单元格。

格式：

<table border="1" width="40%"><!--width值为百分比可让表格的宽度随浏览器窗口的大小变化--> 　　 <caption>表格标题</caption> 　　 <tr><!--第一行--> 　　 <th>姓名</th> 　　 <th>年龄</th> 　　 </tr> 　　 <tr align="center"><!--第二行--> 　　 <td>张三</td> 　　 <td>23</td> 　　 </tr> </table>

（8）超连接标签<a>

a、超连接的几种用法：<a href=” ”>

一、超连接一个网址

二、启动发送邮件引擎

三、设置迅雷连接

b、定位标记<a name=” ”>

当网页内容过长，定位标记就比拖动滚动条方便快捷的多，通常在本页面中使用。

注意：定位标记呀和超连接结合使用才有效。

格式：

<a href=“#标记”>返回标记位置</a>

注意：使用定位标记时，必定要在href值的开始加入#号。

title：说明文字。

（9）表单标签<form>

表单标签是最经常使用的标签，用于与服务端的交互。

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

type属性：

text：文本框，输入的文本信息直接显示在框中；

password：密码框，输入的文本以圆点●或星号*的形式显示；

radio：单选框，例如用在性别选择上；

checkbox：复选框，如兴趣爱好的选择；

hidden：隐藏字段，不显示在页面上，可是会随着表单内容一块儿提交；

file：能够进行文件选择的组件，一般用于附件，或者文件上传；

submit：提交按钮，用于提交表单中的内容；

reset：重置按钮，用于将表单中的内容设置为初始值；

button：按钮，能够为其自定义事件；

image：图像，它能够替代submit按钮。

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

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

多行文本框<textarea>：如：我的信息描述

<label>：用于给个元素定义快捷键

for属性：指定快捷键做用的表单元素，必须与要做用的表单元素的id值相同。

accesskey属性：指定快捷键，此快捷键须要和alt键组合使用。

简例：

　　<label accesskey=“u” for=“userid”> 　　 <tr> 　　<td>用户名（u）：</td> 　　<td><input type=“text” name=“user” id=“userid”/></td> 　　 </tr> </label>

无论焦点在何位置，只要按下alt+u键就能够将焦点转移到用户名输入框上，label标签括住了一整行，用鼠标在这一行上的任何一个位置均可以将焦点转移到用户名输入框。

表单提交方式：默认为get

格式：<form action=“http://127.0.0.1:10009” method=“get”>...</form>

method值还能够为post

get提交和post提交表单方式的区别：

1.get提交会将表单信息都显示在浏览器地址栏里，而post提交不会显示；

2.浏览器地址栏有体积限制，若是表单信息太多，那么get提交方式就行不通了，只能用post提交；

3.两种提交方式对表单数据的封装形式不一样，get提交将表单数据存储在消息头前面，而post提交会将表单数据封装在数据体当中。

4.get提交对于敏感信息部安全，post提交方式对于敏感信息安全。

5.在提交中文时可能出现乱码，若是出现乱码时是用post提交的，那么能够在服务端经过修改编码形式(setCharacterEncoding(“gbk”)方法，指定编码为GBK)来使数据正常显示，若是使用get提交的，在服务端只能经过ISO8859-1将数据编码一次，再经过指定的码表如GBK解码，由于服务端的这个方法只能将数据体中的数据进行解码，而get提交时将表单数据存在了消息头前面，并且tomacat服务端默认的解码是ISO8859-1。

action：指定数据提交的目的地。

说明：使用表单组件不必定非要定义form标签，只有须要将数据向服务端提交时才会用到form标签。

（10）<pre>：能够将文本内容按照其在代码区的格式显示在网页上。

（11）<p>：段落标签

（12）<sub>：下标 <sup>上标

（13）<marquee>使文字动起来</marquee> ：direction属性控制文字移动方向，behavior 属性控制移动模式。

（14）<base>标签

href属性：指定网页中全部的超连接的目录，能够是本地目录，也能够是网络目录，地址值的结尾处必定要用/表示目录，只做用于相对路径的超连接文件。

格式：<base href=“f：\超连接网页\”/>

target属性：指定打开超连接的方式，如_blank表示全部的超连接都在新窗口打开。

（15）<meta>：

name属性:网页的描述信息，当取keywords时，content属性的内容就做为搜索引擎的关键字进行搜索。

http=equiv属性：模拟HTTP协议的响应消息头。

例如：

3秒钟后访问指定网址

若是不加网址，就表明3秒钟刷新一次页面。

（16）<link>标签

rel属性：描述目标文档与当前文档的关系。

type属性：文档类型

media：指定目标文档在那种设备上起做用。

例：<link rel="stylesheet" type="text/css" media="screen,print" href="1.css" />

2、CSS样式

1.CSS层叠样式表

定义：将网页中的样式分离出来，彻底由CSS来控制，加强样式的复用性以及可扩展性。

格式：选择器{属性名：属性值；属性名：属性值...}

2.CSS和Html代码相结合的四种方式：

（1）每个html标签都有一个style属性

（2）当页面有多个标签有相一样式时，能够进行复用，格式：

<style>

css代码

</ style>

（3）当有多个页面中的标签的样式相同时，还能够将样式单独封装成一个CSS文件。

经过在每一个页面中定义：

<style>

@import url(“1.css”);

</style>

（4）经过html中head标签中的link标签链接一个css文件。

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

p.css，div.css...

在一个css中使用css的import将多个标签样式文件导入，而后在html页面上，使用link标签导入这个总的css文件便可。

例如：

1.css

@import rul(“p.css”);

@import url(“div.css”);

选择器：其实就是样式要做用的标签容器。

选择器分类：1.标签选择器：其实就是html中的每个标签名；

2.类选择器：其实就是每个标签中的class属性，用 . 的形式表示。

只用来给css使用，能够对不一样标签进行相一样式设定。

3.ID选择器：其实就是每个标签中的ID属性，可是要保证ID的惟一性。

用#来标识，ID不只能够被css使用，还能够被javascript使用。

选择器优先级：ID>class>标签

扩展选择器：

1.关联选择器：其实就是对标签中的标签进行样式定义，选择器选择器...

2.组合选择器：对多个选择器进行相一样式定义，将多个选择器经过逗号隔开的形式；

3.伪元素选择器：其实就是元素的一种状态。

格式：a:link:超连接被点击前状态

a:visited:超连接被点击后状态

a:hover:悬停在超连接上时的状态

a:active：点击超连接时的状态

2.css滤镜

3、JavaScript

4、DOM（Document object model）文档对象模型

DOM树节点

DHTML：动态html

html css dom javascript

html：将数据进行封装

dom：将标签封装成对象

css：负责标签中数据的样式

javascript：将三个进行融合，经过程序设计方式来完成动态效果的操做

DOM其实就是将一些标记型文档以及文档中的内容当成对象，将这些文档以及其中的标签封装成对象后能够在对象中定义其属性和行为，能够方便操做这些对象。

html，xhtml，xml：这些都是标记型文档。

DHTML：是多个技术的综合体，叫作动态的html。

DOM在封装标记型文档时，有三层模型：

DOM1：针对html文档

DOM2：针对xhtml

DOM3：针对xml

html负责将数据进行标签的封装；

css：负责控制标签的样式；

dom：负责将标签以及标签中的数据封装成对象；

javascript：负责经过程序设计方式来操做这些对象。

标签之中存在着层次关系：

html

|--head

|--base

|--mata

|--link

|--style

|--body

|--table

|--tbody

|--tr

|--td

|--dh

|--div

|--form

|--span

|--a

|--dl

|--dt

|--dd

经过这个标签层次，能够形象的看作是一个树形结构，那么咱们也能够理解为标记型文档一加载进内存就是一个棵DOM树，这些标签以及标签的数据都是这棵树上的节点。

DOM对已标记型文档的解析有一个弊端就是文档过大，相对消耗资源，对于大型文档可使用SAX这种方式解析。

节点类型：

标签型节点：类型1

属性节点：类型2

文本型节点：类型3

注释型节点：类型8

document：类型9

节点之间的关系：

获取父节点：parentNode

获取子节点：childNodes

兄弟节点：上一个兄弟节点：previousSibling

下一个兄弟节点：nextSibing

获取能够经过节点的层次关系完成，也能够经过document对象完成：

getElementById：经过id属性值获取对应的节点对象，若是有多个id值相同，获取到的是第一个id所属对象，尽可能保证ID惟一性，返回的是一个对象；

getelementByName：经过标签的name属性值获取对象，返回的是一堆对象，其实就是一个对象数组。

getelementByTagName：既没有id也没有name值时，可经过

5、复习回顾

5.一、在网页里经过按钮建立一个表格。

思路：

1.建立一个table节点，document.createElement("table")；

2.经过table节点的insertRow()方法建立表格的行对象；

3.经过行节点的insertCell()方法建立单元格对象；

4.给单元格中添加数据

a.建立一个节点如文本节点，document.createTextNode(“文本内容”)，

经过单元格对象的appendChild方法将文本节点添加到单元格的尾部。

b.直接经过单元格的innerHTML方法添加单元格中的元素

5.创建好表格节点，添加到DOM树中，也就是页面的指定位置上。

代码以下：

　　<script type="text/javascript"> 　　function creatTab() 　　{ 　　 var tbNode = document.createElement("table"); 　　 var hs = document.getElementsByName("hs")[0].value; 　　 var ls = document.getElementsByName("ls")[0].value; 　　 for(var x=0;x<hs;x++) 　　 { 　　 var trNode = tbNode.insertRow(); 　　 for(var y=0;y<ls;y++) 　　 { 　　 var tdNode = trNode.insertCell(); 　　 tdNode.innerHTML = "<input type='button' value='button'/>"; 　　 } 　　 } 　　 　　 　　 　　 document.getElementsByTagName("div")[0].appendChild(tbNode); 　　} 　　</script>

5.2删除表格中的行和列

思路：

1.删除行：获取表格对象，经过表格对象中的deleteRow方法，将指定的行索引传入deleteRow方法中。

2.删除列：表格没有直接删除列的方法，要经过删除每一行中指定的单元格来完成删除列的动做：获取全部行对象，遍历，经过行对象的deleteCell方法将指定单元格删除。

5.3对表格中的数据进行排序

思路：

1.获取表格中全部的行对象；

2.定义临时容器，将须要进行排序的行对象存入到数组中；

3.对数组进行排序，经过比较每个行对象中指定的单元格中的数据，若是是整数须要parseInt转换，从新排列行顺序；

4.将排序后的数组经过遍历，经过tbody节点的appendChild方法将每个行对象从新添加回表格；

5.其实排序就是每个行对象的引用取出。

5.4表格的行颜色间隔显示，并在鼠标指定的航商高亮显示。

思路：

1.获取全部的行对象，将须要间隔显示颜色的行对象进行动态的className属性设定，须要提早定义好类选择器；

2.为了完成高亮显示，须要用到两个时间：onmouseover(鼠标进入) onmouseout(鼠标移出)；

3.为了方即可以在遍历对象时，将每个行对象都进行两个事件属性的设定，并经过匿名函数来完成该事件的处理；

4.高亮的原理就是将鼠标进入时的指定颜色改变，改变前要记录行原来的样式，这样才能够在鼠标离开时将行样式还原；

5.该样式须要在页面加载完后直接显示，因此使用的是window.onload事件完成。

5.5完成一个与css手册中同样的示例。

要求：经过下拉菜单的选择指定样式属性的使用效果

</pre><pre class="html" name="code" snippet_file_name="blog_20140201_6_8998507" code_snippet_id="176048"><style type="text/css"> #cssid{ background-color:#F93; width:300px; height:100px; } #textid{ background-color:#CCC; width:300px; } </style> <script type="text/javascript"> function change() { //获取select节点 var seNode = document.getElementById("selid"); //获取select中被选项的值 var value = seNode.options[seNode.selectedIndex].value; var divNode1 = document.getElementById("cssid"); var divNode2 = document.getElementById("textid"); divNode1.style.textTransform = value; divNode2.innerText = "text-transfom:"+value; } </script> </head> <body> <div id="cssid"> Good good study,day day up! </div> <p> </p> <select id="selid" onchange="change()"> <option value="none">--text-transform--</option> <option value="capitalize">首字母大写</option> <option value="uppercase">全部字母大写</option> <option value="lowercase">全部字母小写</option> </select> <div id="textid"> text-transform:none </div> </body>

5.6表单中的组件。

单选框和复选框都有一个属性来表示选中与否的状态：checked

要求：完成一个对多个复选框全选的操做

<script type="text/javascript"> function getSum() { //获取全部checkbox节点 var ckNodes = document.getElementsByName("item"); var sum=0; for(var x=0;x<ckNodes.length;x++) { //判断checkbox是否被选中，若是选中就累加其value值 if(ckNodes[x].checked) { sum+=parseInt(ckNodes[x].value); } } var spanNode = document.getElementById("sum"); var str = sum+"元"; spanNode.innerHTML=str.fontcolor("#ff0000").fontsize(7); } function method() { /* 获取该节点的三种方式： 1.在body节点的方法名里传入节点角标：onclick="method(0)" 在script代码里的方法名为：method(index); 在方法里经过这种方法获取节点：var qxNode = document.getElementsByName("qx")[index]; 2.在body节点的方法名里传入this：onclick="method(this)" 在script代码的方法里直接获取：method(qxNode); 3.body节点的方法里不传入任何东西，在script代码里直接经过此方法获取：var qxNode = event.srcElement; //谁调用此method就获取谁的节点，简单方便。 */ //var qxNode = document.getElementsByName("qx")[0]; var qxNode = event.srcElement; var ckNodes = document.getElementsByName("item"); for(var x=0;x<ckNodes.length;x++) { ckNodes[x].checked=qxNode.checked; } } </script>

5.7获取鼠标的坐标，让指定区域随着鼠标移动

获取鼠标坐标：event.x event.y

指定区域随鼠标移动其实就是改变了指定区域的left top属性值。

这里须要用到的事件：body对象的onmousemove事件。

还须要用到一个css样式，直接定义页面，全部的区域都在同一层次，为了对某一个区域进行定位，能够将该区域分离到另一个层次，用到了css中的position属性。

window.onload=function() { //图片跟着鼠标走 document.body.onmousemove=function() { var adNode = document.getElementById("ad"); adNode.style.left = event.x; adNode.style.top = event.y; } } function closed() { //点击广告后关闭样式 var adNode = document.getElementById("ad"); adNode.style.display="none"; }

6、DOM编程

1.定义界面：经过html的标签将数据进行封装。

2.定义一些静态的样式，用css。

3.须要动态的完成和用户的交互。

a.先明确事件源

b.明确事件，将事件注册到事件源上

c.经过javascript函数对象事件进行处理

d.在处理过程当中须要明确被处理的区域