1.1 HTML技术
1.1.1 HTML简介
hyper text mark language，超文本标记语言，主要通过HTML标记语言对网页的文本、图片、声音等内容进行描述。文件后缀 .html或.htm。
1.<!DOCTYPE>标记，位于文档最前面，用于向浏览器说明当前文档使用哪种HTML标准规范，指定HTML文档的HTML版本和类型。
2.<html></html>标记，根标记，标志着 文档的开始和结束。
3.<head></head>标记，头部标记，定义HTML文档的头部信息，用来封装其他位于文档头部的标记
<title>文档的标题
<meta>标记可以提供有关页面的元信息
<link>定义文档与外部资源的关系
<style>用于为HTML文档定义样式信息
4.<body></body>标记，主体标记，定义文档所要显示的内容。
<!DOCTYPE html PUBLIC"-//w3c//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
这里是网页内容
</body>
</html>1.1.2
单标记：又叫空标记，用一个标记符号便可完整的描述某个功能，不需要选择内容来描述。
<标记名 /> 建议加空格
双标记：又叫体标记，
<标记名> 内容 </标记名>
1.1.3 文本控制与文本样式标记
1.为了使网页内容有条理的显示出来，HTML提供了段落标记<p></p>。
2.如果需要某段文本强制换行显示，要使用换行标记<br />。
3.使用<font></font>标记来控制网页文本的样式，如字体、字号和颜色。
<font 属性="属性值"> 文本内容 </font>
<font face="微软雅黑" size="7" color="green"></br>
我是7号绿色文本，我的字体是微软雅黑</font>1.1.4图像标记
在网页中显示图片<img />
<img src="图像url" />
src属性用来指定图像文件的路径，可以使绝对路径，也可以是相对路径。
<body>
显示图片:<img src="106.jpg" width="102" height="130" border="0" />
</body>1.1.5表格标记
是网页中的数据能够条理的显示出来，对网页进行规划。
<body>
<table border="1">
<tr>
<td>姓名</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>张三</td>
<td>90</td>
<td>91</td>
</tr>
</table>
</body>1.1.6表单标记
简单说，表单就是网页中用于输入信息的区域，它的主要功能是收集数据信息，并将这些信息传递给后台信息处理模块。
表单由三部分构成：
- 表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框提交按钮等。
- 提示信息：控件前的文字说明，提醒用户进行填写和操作。
- 表单域：相当于一个容器，用来容纳所有的表单控件和提示信息。
1.<from></from>标记用于定义表单域。即创建一个表单。
<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件 </from>
2.使用<input/>控件可以在表单中定义输入框<input type="text">、单选按钮<input type="radio">、复选框<input type="checkbox">、重置按钮<input type="reset">、提交按钮<input type="submit">、文本域<textarea>、密码框<input type="password">、邮件框<input type="email">、下拉菜单等<select><option> </option></select>、文件上传控件<input type="file">。
- 注意：name属性代表控件名，value属性表示该控件的值。单选框和复选框每一个选项的name必须相同，为了方便在处理页面数据时获得表单传递的值（表单所传递的值就是value的值）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实验一</title>
</head>
<body>
<h1 align="center"><u>请留下个人资料</u></h1>
<form>
<table align="center">
<tr>
<td a
<td align="lign="right">姓名：</td>
<td align="left"><input type="text" name="name" size="20px"></td>
</tr>
<tr>right">E-mail：</td>
<td align="left"><input type="email" name="email" size=" 50px" pattern="^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$"></td>
</tr>
<tr>
<td align="right">电话：</td>
<td align="left"><input type="telephone" name="phonenumber" size="25px" pattern="^[0-9]{11}$"> </td>
</tr>
<tr>
<td align="right">性别：</td>
<td align="left">
<input type="radio" name="sex" value="fmale" checked="checked">女
<input type="radio" name="sex" value="male">男
</td>
</tr>
<tr>
<td align="right">年龄：</td>
<td align="left"> <select name="age" >
<option value="1" selected>20以下</option>
<option value="2" >20</option>
<option value="3" >21</option>
<option value="4" >22</option>
<option value="5" >23</option>
<option value="6" >24</option>
<option value="7" >25</option>
<option value="8" >25以上</option>
</select>
</td>
</tr>
<tr>
<td align="right" >留言板：</td>
<td align="left"><textarea name="leave_word" rows="3" cols="50"></textarea></td>
</tr>
<tr>
<td align="right" rowspan="4">您的爱好：</td>
<td align="left"><input type="checkbox" name="hobby" value="">运动</td>
</tr>
<tr>
<td align="left"><input type="checkbox" name="hobby" value="">阅读</td>
</tr>
<tr>
<td align="left"><input type="checkbox" name="hobby" value="">听音乐</td>
</tr>
<tr>
<td align="left"><input type="checkbox" name="hobby" value="">旅游</td>
</tr>
</table>
<p align="center">
<input type="submit" value="提交">
<input type="reset" value="全部重写">
</p>
</form>
</body>
</html>
[点击并拖拽以移动]
1.1.7列表标记和超链接标记
1.无序列表<ul></ul>
为了使网页易读，列表项并列存在，无序列表最为常用。<li>标签的type属性用来指定列表项的符号disc实心圆,square实心矩形,circle空心圆三种，默认为disc。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>2.超链接标记<a></a>
<a href="跳转目标" target="目标窗口的弹出方式">文本或图片</a>
target的值self（默认）在原窗口中打开、blank在新窗口中打开、parent在父框架中打开被链接的文档、top在整个窗口中打开被链接的文档。
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
<!--定义链接 href 为属性 属性能够赋予标签含义和语境，提供有关HTML元素的更多信息-->
<!--target规定在何处打开连接-->
<p>使用图片来做链接</p>
<img src="D:\123.png">
<a href="http://www.baidu.com" target="_blank">
<img border="0" src="D:\11111111111111文档\图\火影\Screenshot_2017-09-26-00-11-37-65.png">
</a>
</body>1.1.8<div>标记
div是division的缩写，意为“分割、区域”，简单而言就是一个区块容器标记，可以将网页分为独立的、不同的部分，以实现网页的规划和布局。<div>中还可以套嵌使用<div>,一般与CSS搭配使用。
1.2 CSS技术
1.2.1 CSS简介
CSS是cascading style sheet 层叠样式表，是用于（增强）控制网页样式并允许将样式信息与网页内用分离的一种标记性语言。
定义规则：选择器{属性1：属性值1；属性2：属性值2；}
div{
border:1px solid red;
width:600px;
height:400px;
}border属性有三个值：表示该边框1像素、实心框线、红色。
在CSS中通常使用px为计量单位，px是相对于显示屏幕的分辨率而言的。二百分比是相对于父对象而言的，例如一个元素的宽度为400px，它的子元素设置为50%，则宽度为200px。
在CSS中颜色的取值方式有3种：
- 预定义颜色的值：如red、blue
- 十六进制：#FF0000、#FF6600（常用）
- RGB代码
1.2.2 CSS样式的引用方式
要使用CSS修饰网页，要在HTML文档中引入CSS文件，有4种方式
1.内嵌式：
<head>
<style type="text/css">
选择器{
属性1：属性值1；
属性2：属性值2；
}
</style>
</head>2.链入式：
<head>
<link href="css文件的路径" type="text/css" rel="stylesheet" />
</head>
- href：定义链入外部样式表的文件地址，可以使相对路径和绝对路径。
- type：定义链入文档的类型。
- rel：指定当前文档与链入文档的关系。
3.行内式
4.导入式
1.2.2 CSS选择器和常用属性
1.标记选择器：标记名{ } 所有标记都可以，缺点不能设计差异化样式。
2.类选择器： . 类名{ }
3.id选择器：#id { } id唯一，只能对应文档中的某一具体的元素。
4.通配符选择器：*{ } 范围最广匹配到页面中的所有元素。
1.3 JavaScript基础
1.3.1 DOM相关知识
DOM是文档对象模型的简称“document object model”，是w3c推荐的处理可扩展标志语言的标准编程接口，它可以以独立于平台和语言的方式访问和修改文档的内容和结构。
分为三个不同部分：核心DOM、XML DOM、HTML DOM。
HTML DOM模型被构造成对象树，该树的根节点就是document，有一个documentelement属性引用，表示文档根元素的element对象。HTML文档中的element对象是<html>元素，<head>、<body>元素可看成是树的枝干。概念：父节点、子节点、兄弟节点。
1.节点的访问
DOM中，HTML文档的各个节点被视为各种类型的Node对象，如：想要通过子节点找到父节点的元素，如下：
父节点对象=子节点对象.parentNode；
| 属性 | 类型 | 描述 |
| parentNode | node | 返回节点的父节点，没有则为null |
| childNode | nodelist | 返回节点到子节点的节点列表 |
| fistChild |
node | 返回节点的首个子节点，没有则为null |
| lastChild | node | 返回节点的最后一个子节点，没有则为null |
2.获取文档的指定元素
遍历获取节点的方法太麻烦，提供了直接获取的方法。
（1）通过元素ID属性获取
如：获取ID元素值为userid节点的代码：document.getElementById("userid");
（2）通过元素的name属性获得
由于具有相同name的元素不止一个，所以该方法返回的是一个数组，如果要获取其中一个，可以通过加下标的方法。
如：document.getElementByName("usename")[5];
1.3.2javascript概述
js是web中的一种功能强大的脚本语言，用来为网页添加各种动态功能，不需要进行编译，直接套嵌在HTML页面中，就可以吧静态网页转变为支持用户交互并响应事件的动态网页。
1.JavaScript的引用
（1）内嵌式：
<script type="text/javascript">
//此处为js代码
</script>js中有三种弹出对话框的方式：alert（）、confirm（）、prompt（）。如果不想弹出也可以直接用document.write（）直接将信息输出在页面上。
<!doctype html>
<html>
<head>
<title>标题</title>
<script type="text/javascript">
doucument.write("js引入演示");
</script>
</head>
<body>
学习JavaScript
</body>
</html>（2）外链式：
当一段js脚本代码要被很多页面引用时，放到一个.js文件中。
<script type="text/javascript" src="js文件的路径" ></script><!doctype html>
<html>
<head>
<title>标题</title>
<script type="text/javascript" src="demo01.js">
</script>
</head>
<body>
学习JavaScript
</body>
</html>2.数据类型
常用数据类型：
| 类型 | 含义 | 说明 |
| number | 数值型 | 不区分整型和浮点型 |
| string | 字符串类型 | 用单引号或双引号引起来的一个或多个字符 |
| boolean | 布尔类型 | true/false |
| object | 对象类型 | 一组数据和功能的键值对集合 |
| null | 空类型 | 没有任何值 |
| undefined | 未定义类型 | 指变量被创建但未赋值 |
3.变量
使用var声明变量，不需要声明变量类型。变量名由字母、下划线、美元符号组成。
var number="27";
var str="javascript学习";4.运算符
- 算术运算符：+ - * / ++ --
- 比较运算符：< > <= >= == !=
- 逻辑运算符：&& || ！
- 赋值运算符：= += -= *= /= %=
- 条件与算符：三目运算符 操作数/布尔表达式？结果1：结果2 如：alert((a==b)?true:false);
5.条件if语句
if( ){ } else { }
1.3.3JavaScript的使用
1.函数的定义及调用
函数定义：
function functionname(parameter1,parameter2){
tatements;
[return expression;]
}
2.事件处理
采用事件驱动是js的一大特征，事件就是用户在使用页面时执行的操作。
事件处理通常有三步：事件发生、启动事件处理程序、事件处理程序做出反应。
<body>
<input type="button" name="btn" value="点我" onclick="alert('hello');" />
</body>3.常用对象
（1）Window对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
- window.moveTo() - 移动当前窗口
- window.resizeTo() - 调整当前窗口的尺寸
- window.innerHeight - 浏览器窗口的内部高度
- window.innerWidth - 浏览器窗口的内部宽度
（2）Date对象
Date 对象用于处理日期和时间。
| 方法 | 描述 |
|---|---|
| Date() | 返回当日的日期和时间。 |
| getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
| getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
| getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
| getFullYear() | 从 Date 对象以四位数字返回年份。 |
| getYear() | 请使用 getFullYear() 方法代替。 |
| getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
| getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
| getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
| getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
| getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
| setDate() | 设置 Date 对象中月的某一天 (1 ~ 31)。 |
| setMonth() | 设置 Date 对象中月份 (0 ~ 11)。 |
| setFullYear() | 设置 Date 对象中的年份（四位数字）。 |
| setYear() | 请使用 setFullYear() 方法代替。 |
| setHours() | 设置 Date 对象中的小时 (0 ~ 23)。 |
| setMinutes() | 设置 Date 对象中的分钟 (0 ~ 59)。 |
| setSeconds() | 设置 Date 对象中的秒钟 (0 ~ 59)。 |
| setMilliseconds() | 设置 Date 对象中的毫秒 (0 ~ 999)。 |
| setTime() | 以毫秒设置 Date 对象。 |