HTML、css、javascript、DOM编程

时间：2021-08-23 10:17:44

HTML、css、javascript、DOM编程

一、Html

1.1html概述

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

1.2html书写规范

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

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

（3）属性与属性值之间用“=”连接，属性值可以用单引号或双引号或不用引号，一般都用双引号，或公司规定书写规范。

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

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

1.3操作思想

为了操作数据，可以将数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作，标签就相当于一个容器，对容器中的数据进行操作就是在不断改变容器的属性值。

1.4常用标签

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

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

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

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

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

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

HTML、css、javascript、DOM编程HTML、css、javascript、DOM编程​

（4）列表标签<dl>

<dt>：上层项目

<dd>：下层项目

例如：

　　<dl>

　　　　	<dt>游戏</dt>

　　		<dd>网络游戏</dd>

　　  		<dd>单机游戏</dd>

　　    <dt>部门名称</dt>

　　   		<dd>技术部</dd>

　　  	 	<dd>培训部</dd>

</dl>

HTML、css、javascript、DOM编程

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

<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>

HTML、css、javascript、DOM编程

（5）图像标签：<img>

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

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

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

<hr color=”red” size=”5” />

（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>

HTML、css、javascript、DOM编程

（8）超链接标签<a>

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

1、超链接一个网址

<a href="http://baidu.com">百度一下</a><br/>

2、启动发送邮件引擎

<!--向abc@sohu.com邮箱发送主题为biaoti的邮件，抄送地址为xyz@sina.com-->

<a href="mailto:abc@souhu.com?subject=biaoti&cc=xyz@sina.com">联系我们</a>

3、设置迅雷链接

<!--启动迅雷下载指定链接地址的资源-->

<a href="thunder://sdfsafoigajfl">资源下载</a>

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

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

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

格式：

<a name=“标记”>标记位置</a>

<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>

HTML、css、javascript、DOM编程

不管焦点在何位置，只要按下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协议的响应消息头。

例如：

<meta http-equiv="refresh" content="3;url=http://www.baidu.com"  />

3秒钟后访问指定网址

如果不加网址，就代表3秒钟刷新一次页面。

（16）<link>标签

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

type属性：文档类型

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

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

二、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文件。

<link rel=”stylesheet” href=”1.css”>

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

p.css，div.css...

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

例如：

1.css

@import rul(“p.css”);

@import url(“div.css”);

<link rel=”stylesheet” href=”1.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滤镜

三、JavaScript

HTML、css、javascript、DOM编程HTML、css、javascript、DOM编程​

HTML、css、javascript、DOM编程HTML、css、javascript、DOM编程​

四、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.1、在网页里通过按钮创建一个表格。

思路：

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>

HTML、css、javascript、DOM编程

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>

HTML、css、javascript、DOM编程

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>

HTML、css、javascript、DOM编程

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";

}

HTML、css、javascript、DOM编程

六、DOM编程

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

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

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

a.先明确事件源

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

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

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

相关文章