HTML概述 

什么是网页? 网页，是网站中的一个页面，通常是网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站 就是由网页组成的。 通常我们看到的网页都是以htm或html后结尾的文件，俗称 HTML文件。

 1.2 HTML特点 1.3 HTML的发展  1.3 HTML基本结构 1.HTML页面包含头部head和主体body2.HTML标签通常是成对出现的，有开始就有结束，这样的标签称为成对标签、没有结束标签称为空标 签。

 3.HTML通常都有属性，格式:属性名＝“属性值”(多个属性之间空格隔开) 

4.HTML标签不区分大小写,建议小写 

5.文件名后缀为.html或.htm HTML全称：Hyper Text Markup Language(超文本标记语言) 超文本标记语言是标准通用标记语言（SGML）下的一个应用，也是一种规范，一种标准，它通过标记符号来标 记要显示的网页中的各个部分。

 HTML是一门用户创建网页文档的标记语言，网页文件本身是一种文本文件，通过在文本文件中添加标记符。 HTML可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示、包括音频、视 频等等如何播放）。 简单一句话：HTML是一门用来创建网页的标记语言。其主要特点如下：

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

 2 可扩展性：超文本标记语言采取子类元素的方式，为系统扩展带来保证。

 3 平台无关性：超文本标记语言可以使用在广泛的平台上，这也是万维网（www）盛行的另一个原因。

 4 通用性：HTML是网络的通用语言,一种简单、通用的标记语言。超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布(并非标准) HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时 HTML 3.2——1997年1月14日，W3C推荐标准 HTML 4.0——1997年12月18日，W3C推荐标准 HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准   W3C : XHTML1.0 -> XHTML1.1 -> XHTML2.0-->(XML) 死路 WHATWG:HTML 5 HTML 5——2014年10月29日，W3C推荐标准

<img/> 独立标签   属性: src：图片地址： 相对路径 （同一个网站） 绝对路径 （不同网站）     width:宽度     height:高度     border:边框     align:对齐方式，代表图片与相邻的文本的相当位置（有三个属性值：top middle bottom）     alt:图片的文字说明     title:图片的悬停显示     hspace 和 vspace 设定图片边沿上下左右空白，以免文字或其它图片过于贴近

超链接可以是文本，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某 个部分。

<a>文本或图片</a> 属性： href:跳转页面的地址(跳转到外网需要添加协议)       target:_self(自己) _blank(新页面，之前页面存在) _parent _top 默认_self _search相等于给页面起一个名字，如果再次打开时，如果页面存在，则不再打开新的页面。可以是任 意名字。 name:名称，锚点(回到锚点: 顶部，底部，中间)，在访问锚点的书写格式:#name的值  

文本格式化标签

<b> 定义粗体文本。   <big> 定义大号字。   <em> 定义着重文字。   <i> 定义斜体字。   <small> 定义小号字。   <strong> 定义加重语气。   <sub> 定义下标字。   <sup> 定义上标字。   <ins> 定义插入字。   <del> 定义删除字。

form标签

常用属性：action：表示动作，值为服务器的地址，把表单的数据提交到该地址上处理         method:请求方式：get 和post         enctype:表示是表单提交的类型   默认值：application/x-www-form-urlencoded 普通表单           multipart/form-data 多部分表单(一般用于文件上传)           text/plain 普通文本           get:   1.数据存在地址栏中,请求参数都在地址后拼接 path?name=张三&password=123456   2.不安全   3.效率高   4.get请求大小有限制，不同浏览器有不同，但是大约是2KB 使用情况：一般情况用于查询数据。 post：   1.地址栏没有数据：请求参数单独处理。   2.安全可靠   3.效率低   4.post请求大小理论上无限。 使用情况：一般用于插入修改等操作 put delete header

input标签

type: 以下为type可能要取的值：    

1.1   text 文本框 输入内容     

 1.2   password 密码框   密文或者掩码   

  1.3   radio 表示是单选，name必须一致；value：提交给服务器的数据                 表示同一组中只能选中一个( checked ="checked" 表示选中)   

  1.4 checkbox 表示多选 ，name必须一致，                 表示同一组中可以选多个，返回值是个数组( checked ="checked" 表示选中)    

 1.5   file ：表示上传控件         以上具有输入性质的必须要有name属性,初始开始写value表示是默认值(以后获取输入框的内容要根 据name来取) 以下按钮不具有输入性质，不需要name属性，但是按钮上的文字提示使用value属性  

   1.6 submit   提交     

 1.7 reset   重置  

   1.9 image   图片提交按钮 

 1.10 button 普通按钮     

  1.11 hidden 表示隐藏域，该框的内容服务器需要，但是不想让用户知道(不想清楚的显示在界面 上)   

  1.12 email 表示邮箱格式的数据   

  name属性：表单元素名字，只有name属性才能提交给服务器。   value属性：提交给服务器的数据 placeholder：提示信息 高级属性： disabled:禁用 readonly:只读

特殊字符

&lt; 小于号         &gt; 大于号       &amp; 与字符       &quot; 引号       &reg; 己注册       &copy; 版权       &trade; 商标       &nbsp; 空格

CSS :

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应 用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各 种脚本语言动态地对网页各元素进行格式化。 多个样式可以层层覆盖叠加，如果不同的css样式对同一个html标签进行修饰，样式有冲突的,应用优先级高的，不 冲突的样式规则共同作用。

内联方式

把CSS样式嵌入到html标签当中，类似属性的用法，示例如下：       <div style="color:blue;font-size:50px">This is my HTML page. </div> 好处:可以单独设置某个元素样式，缺点：不利于样式重用

内部样式

在head标签中使用style标签引入css,示例如下:       <style type=“text/css”> //告诉浏览器使用css解析器去解析           div {color:red; font-size:50px}       </style> 好处：可以控制页面中多个元素样式，缺点：只能一个页面使用

外部样式

将css样式抽成一个单独文件，谁用谁就引用，好处：多个页面可以同时使用。 示例如下：       单独文件div.css: 内容示例：div{color:green;font-size:50px}       引用语句写在head标签内部，       链接式：       <link rel="stylesheet" type="text/css" href=“div.css"></link>     rel:代表当前页面与href所指定文档的关系     type:文件类型，告诉浏览器使用css解析器去解析     href:css文件地址       导入式：

  <style type="text/css">       @import url("div.css")  </style> 该内容放在head标签中

备注:link和@import区别：           1.link所有浏览器都支持，@import某些版本低的IE不支持           2.@import是等待html加载完成才加载，link解析到这个语句，就加载           3.@import不支持js动态修改

优先级：

内联样式>内部样式>外部样式，就近原则。注意：内部样式和外部样式的位置

 CSS选择器

主要用于选择需要添加样式的html元素

基本选择器

把CSS样式嵌入到html标签当中，类似属性的用法，示例如下：       <div style="color:blue;font-size:50px">This is my HTML page. </div> 好处:可以单独设置某个元素样式，缺点：不利于样式重用      

在head标签中使用style标签引入css,示例如下:       <style type=“text/css”> //告诉浏览器使用css解析器去解析            div {color:red; font-size:50px}       </style> 好处：可以控制页面中多个元素样式，缺点：只能一个页面使用      

将css样式抽成一个单独文件，谁用谁就引用，好处：多个页面可以同时使用。 示例如下：       单独文件div.css:  内容示例：div{color:green;font-size:50px}       引用语句写在head标签内部，        链接式：       <link rel="stylesheet" type="text/css" href=“div.css"></link>      rel:代表当前页面与href所指定文档的关系      type:文件类型，告诉浏览器使用css解析器去解析      href:css文件地址       导入式：

  <style type="text/css">       @import url("div.css")  </style> 该内容放在head标签中

备注:link和@import区别：           1.link所有浏览器都支持，@import某些版本低的IE不支持           2.@import是等待html加载完成才加载，link解析到这个语句，就加载           3.@import不支持js动态修改

<link href="mycss.css" rel="stylesheets" type="text/css"> <style type="text/css">    </style>

<body>    </body>

标签选择器

<style type="text/css">         span{color: red;font-size: 100px} </style>

class选择器 

创建class选择器：       <div class="s1">hello,everyone!</div>   <div class="s2">hello,everyone!</div>   <div class="s3">hello,everyone!</div> 根据id选择器进行html文件修饰 <style type="text/css">  .s1{color: purple;font-size: 100px}  .s2{color: pink;font-size: 100px}  .s3{color: yellow;font-size: 100px} </style>

CSS盒子模型

盒子模型的实际的宽度：width+2*（padding+border+margin）

盒子模型的实际的高度：height+2*（padding+border+margin）

JavaScript

第一节 JavaScript概述

1.1 JavaScript简介

JavaScript(LiveScript)一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支 持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，早是 在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

1.2 JavaScript发展史

它初由Netscape的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript 为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程。完整的JavaScript实 现包含三个部分：ECMAScript，文档对象模型（DOM Document Object Model），浏览器对象模型(BOM Browser Object Model)。

Netscape在初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为 JavaScript。JavaScript初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类 似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。JavaScript 与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取得技术优 势，微软推出了JScript来迎战JavaScript的脚本语言。为了互用性，Ecma国际（前身为欧洲计算机制造 商协会）创建了ECMA-262标准（ECMAScript）。两者都属于ECMAScript的实现。尽管JavaScript作为给非 程序人员的脚本语言，而非作为给程序人员的脚本语言来推广和宣传，但是JavaScript具有非常丰富的 特性。

        padding  内边距        margin  外边距                宽度=width+ 2*margin+2*padding+2*border        高度=height+ 2*margin+2*padding+2*border            CSS3扩展        border-radius 圆角        box-shadow 盒子阴影        background-size        background-image        text-shadow

1、JavaScript概述 2、JavaScript数据类型 3、JavaScript运算符 4、JavaScript条件语句 5、JavaScript循环语句 6、JavaScript函数

1、了解JavaScript概述 2、掌握JavaScript数据类型 3、掌握JavaScript运算符 4、掌握JavaScript条件语句 5、掌握JavaScript循环语句 6、掌握JavaScript函数

发展初期，JavaScript的标准并未确定，同期有Netscape的JavaScript，微软的JScript和CEnvi的 ScriptEase三足鼎立。1997年，在ECMA（欧洲计算机制造商协会）的协调下，由Netscape、Sun、微软、 Borland组成的工作组确定统一标准：ECMA-262。

在JavaScript中，任何变量都用var关键字来声明，var是variable的缩写。

var num; //声明变量 num=10;//赋值

var s="zhangsan";//声明的同时赋值

变量的基本类型有number、string、boolean、undefined、null五种。 u n n s b

第一种方式：在标签中，script可以放在网页中任何位置。

<script type="text/javascript"> var num=10; var d=new Date(); document.write(num); </script>

第二种方式：使用外部JavaScript文件，把js代码放入单独的文件中  ，这个文件的扩展名.js

<script type="text/javascript" src="js/myjs.js"></script>

第三种方式： 放在标签中的事件属性中,常见事件 ,onclick

<input type="button" value="你点我啊" onclick="alert('你点我干嘛')" />

函数定义

用function关键字来声明，后面是函数名字，参数列表里不写var。整个方法不写返回值类型。

function functionName(parameters){    //执行的代码 }

RegExp 对象

Regular Expression 正则表达式

正则表达式是描述字符模式的对象。

正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

语法：

var patt=new RegExp(pattern,modifiers);

或者更简单的方式:

var patt=/pattern/modifiers;

如：

var re1 = new RegExp("^1[3589]\\d{9}$"); var re2 = /^1[3589]\d{9}$/;