网页开发基础

第一章
1.HTML技术2.CSS技术3.Java Spcript基础

内容简介：
1.HTML技术
HTML简介：HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的资源Internet连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音等。

超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（www）盛行的原因之一，其主要特点如下：

简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。

可拓展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。

平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。

通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

2.CSS技术
CSS 是Cascading Style Sheet的缩写，译作“层叠样式表单”，是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。在实际开发中，主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
CSS定义的规则具体如下：
选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
CSS 样式的引用方式
要想使用CSS修饰网页，就需要在HTML文档中引入CSS。引入CSS的方式有4种，分别为链入式、行内式(也称为内联样式)、内嵌式和导入式。下面对开发中常用的内嵌式和链入式这2种引入方式进行讲解，具体如下。
1.内嵌式
内嵌式是将CSS代码集中写在HTML文档的头部标记中，并用

链入式
链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文件中，其基本语法格式如下：

在上面语法中，<link /＞标记需要放在头部标记中，并且必须指定标记的3个属性，具体如下：
href:定义所链接外部样式表文件的地址，可以是相对路径，也可以是绝对路径。
type:定义所链接文档的类型，这里需要指定为“text/css”，表示链接的外部文件为CSS。
rel：定义当前文档与被链接文档之间的关系，这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
3、CSS 选择器和常用属性
要想将CSS样式应用于特定的HIML元素，首先需要找到该目标元素。在CSS中，执行这一样式任务的部分被称为选择器，本小节将对CSS基础选择器进行介绍，具体如下。
1.标记选择器
标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的样式。其基本语法格式如下：

标记名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
1
上述语法中，所有的HTML标记都可以作为标记选择器的标记名，例如标记、<h1s标记、

标记等。用标记选择器定义的样式对页面中该类型的所有标记都有效，这是它的优点，但同时这也是其缺点，因为这样不能设计差异化样式。
2.类选择器
类选择器使用“.”(英文点号)进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
1
上述语法中，类名即为 HTML页面中元素的class 属性值，大多数 HTML 元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式。
3. id选择器
id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

#id名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
1
上述语法中，id名即为HTML页面中元素的id属性值，大多数 HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
4.通配符选择器
通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

*{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

CSS常用属性

3.Java Spcript基础
1.DOM 相关知识
DOM是Document Object Model(文档对象模型)的简称，是W3C组织推荐的处理可扩展标志语言的标准编程接口，它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。
W3C 中将DOM标准分为3个不同的部分：核心 DOM、XMLDOM和HTMLDOM，其中，核心DOM是针对任何结构化文档的标准模型，XMLDOM是针对XML文档的标准模型，而HTMLDOM是针对HTML文档的标准模型。由于本章中主要讲解的是网页开发的基础知识，而主要涉及的DOM内容就是HTML DOM，所以本节将主要介绍HTMLDOM的知识。
HTML DOM模型被构造为对象的树，该树的根节点是文档(Document)对象，该对象有一个documentElement的属性引用，表示文档根元素的Element对象。HTML文档中表示文档根元素的Element对象是<html＞元素，<head＞和<body＞元素可以看作树的枝干。

JavaScript概述

JavaScript是一种基于对象和事件驱动的脚本语言，在客户端执行。虽然它是作为开发web页面的脚本语言而出名的，但是在很多非浏览器环境中也使用JavaScript

在前端，通过javascript可以实现更多的页面交互，与后台的数据交互，以及更为丰富的网页效果。在后台，借助node的运行环境，使用javascript一门语言，即可完成服务器端开发，我们会在后续的章节中讲解如何使用JavaScript做服务端开发，本章主要内容仍然面向前端开发。

JavaScript的数据类型

JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等。

变量
在JavaScript中，使用var命令声明变量，由于JavaScript是一种弱类型语言，所以在声用变量时，不需要指定变量的类型，变量的类型将根据变量的赋值来确定，其语法格式如下所示。

var number=27;
varstr="大数据”；

变量的命名必须遵循命名规则，变量名可以由字母、下划线(_)、美元符号($)，甚至中文组成，但中文命名的方式不建议使用，中间可以是数字、字母或下划线，但是不能有空格、加号、号等符号，不能使用JavaScript的关键字。

运算符
运算符是程序执行特定算术或操作的符号，用于执行程序代码运算。JavaScript中的运算符主要包括算术运算符、比较运算符、赋值运算符、逻辑运算符和条件运算符5种，具体介绍如下。
(1)算术运算符
算术运算符用于连接运算表达式，主要包括加(+)、减(一)、乘(*)、除(/)、取模(%)自增(++)、自减(–)等运算符。

(2)比较运算符
比较运算符在逻辑语句中使用，用于判断变量或值是否相等，返回布尔类型值true或false。

(3)逻辑运算符

(4)赋值运算符
最基本的解值运算将是等于号“=”，用于对变量进行赋值。其他运算符可以和暖值合使用，构成组合赋值运算符。

(5)条件运算符
条件运算符是JavaScript中的一种特殊的三目运算符，它与Java中的三目运算符的似，其语法格式如下

在上述js代码中，由于声明的变量a和b的值相同，所以通过使用比较运人运较结果为true，此时整个alert()语句的结果就为true；如果变量a与b的值不相等时，则整个语句的执行结果为false。
5.条件语句if
所谓条件语句就是对语句中不同条件的值进行判断，进而根据不同的条件执行不同的语句。
条件语句中最常用的是if判断语句，它的使用与Java语言中的f判断语句相似，是通过判断条件表达式的值为true或者false，来确定是否执行某一条语句。可将if语句分为单向判断语句双向判断语句和多向判断语句，具体讲解如下。
(1)单向判断语句
单向判断语句是结构最简单的条件语句，如果程序中存在绝对不执行某些指令的情况，就可以使用单向判断语句，其语法格式如下：

if(执行条件){
执行语句

}

在上面的语法结构中，if可以理解为“如果”，小括号“()”内用于指定f语句中的执行条件，大括号“(1”内用于指定满足执行条件后需要执行的语句，当执行语句只有一行时，也可以不写。
(2)双向判断语句
双向判断语句是if条件语句的基础形式，其基本语法格式如下：

if(执行条件){
执行语句1
}else{
执行语句2

双向判断语句的语法格式和单向判断语句类似，只是在其基础上增加了一个 else 从句。表示如果条件成立，则执行“执行语句1”，否则执行“执行语句2”。
(3)多向判断语句
多向判断语句是根据表达式的结果判断一个条件，然后根据返回值做进一步的判断，其基本语法格式如下：

if(执行条件1){
执行语句1
}
else if(执行条件2){
执行语句 2
}
else if(执行条件3){
执行语句3
}

在多向判断语句的语法中，通过else if语句可以对多个条件进行判断，并且根据判断的结果执行相关的语句。
JavaScript的使用
事件处理
常用对象
1、Wndow对象
表示整个浏览器窗口，它处于对象层次的顶端，可用于获取浏览器窗口的大小
位置，或设置定时器等。在使用时，JavaScript允许省略Window对象的名称。
在
(2)Date 对象
Date对象是一个有关日期和时间的对象。它具有动态性，必须使用new关键字创建一个实例，语法如下所示。
var Mydate=new Date();
Date对象没有提供直接访问的属性，只有获取和设置日期的方法
在
(3) String对象
Sting对象是JavaScript提供的字符串处理对象，创建对象实例后才能引用，它提供了对学数电进行处理的属性和方法。