WEB前端（HTML、XML、CSS、JS）学习笔记
2016-01-24 10:24
846 查看
HTML
HTML： HyperText Markup Language 超文本标记语言。
HTML是最基础的网页语言。
HTML的代码都是由标签所组成。
HTML的基本格式
存放属性的信息，辅助性的信息
引入外部的文件（重要）
会先加载
存放的是真正的数据
多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。
想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。
属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范。
MyEclipse 提供了安装包
安装JDK，配置环境变量
安装MyEclipse。
配置
配置工作空间的编码（采用UTF-8编码）（安装了myeclipse，先去配置）
Window—preferences—General–workspace—选择UTF-8编码
创建HTML的文件后，如果不是UTF-8的编码，可以进行设置。
Window—preferences—MyEclipse—Files and Editors—HTML—修改成UTF-8的编码
创建HTML的文件后，可以选择打开方式，设置默认的打开方式。
Window—preferences—General—Editors—File Associations—选择*.html—选择MyEclipse HTML Editor—选择default—选择ok
（编写HTML）创建web的项目
创建web的项目
右键 – 选择web project – 其名称 – 完成就ok。
编写HTML的文件
在WebRoot目录下 – 右键 – new – myeclipse – web – 选择html的基本模板 – 其名称 – 完成。
HTML的真正的标签
排版的标签
HTML的注释
换行标签
一条水平线
排版标签
*
换行
*
一条水平线
* color: 颜色
* 值的写法：两种
1）直接写英文的单词（red green blue）
2）RGB三原色(red green blue) #ab1255
* width： 宽度
* 值两种写法： 1） 200px;
2） 可以写百分比
区别：百分比跟着浏览器的大小而改变，像素值不会。
字体标签
字体的内容
字体标签：
color: 颜色
size： 字体的大小
最大值和最小值
最小值是：1
最大值是：7
默认值： 3
值的写法 +2 （3+2）
face： 字体的类型
标题标签
…
特点：逐渐缩小
粗体
斜体
标签可以嵌套的
文本的内容
特殊字符
< <
> >
& &
滚动的字幕（忘了吧）
列表标签（*）
数据格式化列表
上层项目
下层项目
下层项目
* 自动对齐，缩进的
有序列表和无序列表
有序
数据的条目
数据的条目
数据的条目
ol的属性
type=”a”
start=”” 从哪开始
无序（用的最多）
数据条目
数据条目
数据条目
ul的属性
type=””
图片标签（*）
属性：
src=”图片的地址”
width=”图片的显示宽度”
height:图片显示的高度
alt：图片的说明文字
超链接标签（*）
写法：
链接资源
必须要指定属性：href=”链接的地址”
需要编写协议
HTTP
默认file文件的协议
如果浏览器可以解析文件，默认会打开文件。
如果浏览器不可以解析文件，弹出下载窗口。
支持自定义协议
浏览器解析不了的协议，默认找操作系统的引用程序。
定位资源
name 定义锚点
点击 href=”#锚点名称”
表格标签（*）
把数据封装成表格。
表格标签
用户列表
table的属性
* border: 边框
* width: 宽度
* height: 高度
tr的属性
* align:中间的文字的对齐方式
td获取th
区别：th中间的内容粗体显示。
th中间的内容默认居中。
th一般用来表格的表头
必须要写在table的中间
表单标签（****）
收集用户输入的数据
表单的标签
form的属性
action=”表单的提交路径”
http://www.baidu.com
html页面
method=”提交方式（默认是get方式）”（面试题）
form表单的提交方式有哪些？（get和post的区别）
答：form表单提交方式有很多，常用的有两种post和get
post和get提交方式的区别：
get方式会把参数列表显示在地址栏上，post方式不会（请求体）。
get方式说明网站安全级别较低，post安全级别较高。
get方式不支持大数据，post支持大数据。
推荐大家使用post方式。
用户输入的内容
name属性必须要指定，value可以看情况指定
type=”text” 普通的文本框
name必须指定
type=”password” 密码框
name必须指定
type=”radio” 单选按钮
name必须指定 value必须指定
name的属性，值要相同
默认值：checked=checked或者true
type=”checkbox” 多选按钮
name必须指定 value必须指定
默认值：checked=checked或者true
type=”reset” 重置：恢复到最初的状态
type=”submit” 提交表单
点击提交后，地址栏发生了变化（?sex=on）
在普通的文本框上添加name属性 name=”username”之后，点击提交，地址栏发生了变化（?username=haha&sex=on）
String str = “?username=haha&sex=on”;
?username=zhangsan&password=123&sex=nan&love=zq
type=”file” 选择文件
name属性指定
type=”hidden” 隐藏组件
name指定 value指定
type=”button” 按钮
value=”显示的文字”
和js（javascript） 绑定事件
type=”image” 图片
提交 引入外部的一个文件（图片）
声明选择框
文本域
rows=”行”
clos=”列”
name属性指定
selected=”selected” 代表默认值
框架标签（了解）
对网页进行布局
代表上半部分
代表下半部分
前提条件：不能写在标签的内部和下面
CSS
* CSS的简介
* CSS：cascading style sheet ：层叠样式表。
* 做什么用：设置网页的显示效果（设置样式）。
* CSS将网页显示的效果和内容分离。（耦合性）
JAVASCRIPT（JavaScript简写js，文件的后缀名也是 demo.js）（*）
javascript的简介
js是基于对象和事件驱动的脚本语言，作用在客户端（浏览器）上。
js的特点：
交互性
安全性：（不可以访问本地的硬盘）
跨平台性：因为浏览器就可以解析js的文件。
javascript和java不同（一点关系没有）（雷锋和雷峰塔）
Netscape（网景），静态的效果。livescript（javascript的前身）
java诞生了，升级了，改名（javascript），火了。
巨头：自己开发一套（jscript）
找一些公司推出的标准： SUN 微软 ECMA（欧洲计算机制造协会），联合推出现在的标准。
ECMAScript：标准。基础上扩展。
js的基于对象，java是面向对象。
js解析就可以执行，java先编译再执行。
js是弱类型的语言，java是强类型语言。
javascript语言的组成
ECMAScript 标准（js的语法，变量，函数）
BOM （Browser Object Model） 浏览器对象模型
DOM （Document Object Model） 文档对象模型
javascript的语法
把js和HTML的结合一起。（2两种方式）
js和HTML的结合
HTML的文件提供了一个标签 ，标签可以放在HTML文件的任意位置上。
引入外部的文件，有一个外部的文件。编写js文件。
如果script通过src的属性引入了外部的文件，里面的js代码就不会执行了。（*）
，标签可以放在HTML文件的任意位置上。
关键字
var 声明变量
标示符
和java一样
注释
和java一样
变量
声明变量，只使用一个关键字 var num = 12; var str = “abc”;
5种基本数据类型
Undefined、Null、Boolean、Number 和 String
5种基本数据类型
Undefined、Null、Boolean、Number 和 String
String 字符串类型
js中双引号和单引号都代表的是字符串
Number 数字类型
不区分整数和小数
Boolean 布尔类型
Null 空，给引用赋值的
Undefined 未定义（声明变量，没有赋值）
声明变量，使用var关键字
typeof() 判断当前变量是什么类型的数据
运算符
js的运算符
算术运算符
0或者null是false，非0或者非null是true，默认用1表示。
var num = 3710;
alert(num/1000*1000);
不区分整数和小数
赋值运算符
和java是一样的
比较运算符
== 比较值是否相同
=== 比较值和类型是否相同
逻辑运算符
和java中一样
三元运算符
条件?值1:值2
js的数组
js的数组
java String [] str = {};
声明数组
var arr = [12,34,55];
var arr = new Array(5); 声明数组，长度是5
var arr = new Array(2,3,4); 声明数组，元素是2 3 4
数组的属性
长度：length
数组的长度是可变的。
js的方法
java中 public String 方法名称(参数列表(int num,String str)){
方法体;
return null;
}
js中，通过关键字function 声明方法。
function 方法名称(参数列表 (num,str)){
方法体;
return;
}
参数列表：不能使用var关键字
返回值：可写可不写的，如果有写返回值，如果没有，返回值可以省略不写。
调用执行。
在函数的内部，有一个数组，装传过来的参数的
arguments
js的动态函数和匿名函数
js的动态函数和匿名函数
动态函数
function getSum(){
return 50;
}
js提供了内置对象 Function
匿名函数
没有名称的函数
js的全局变量和局部变量
全局变量：在
HTML： HyperText Markup Language 超文本标记语言。
HTML是最基础的网页语言。
HTML的代码都是由标签所组成。
HTML的基本格式
存放属性的信息，辅助性的信息
引入外部的文件（重要）
会先加载
存放的是真正的数据
多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。
想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。
属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范。
MyEclipse 提供了安装包
安装JDK，配置环境变量
安装MyEclipse。
配置
配置工作空间的编码（采用UTF-8编码）（安装了myeclipse，先去配置）
Window—preferences—General–workspace—选择UTF-8编码
创建HTML的文件后，如果不是UTF-8的编码，可以进行设置。
Window—preferences—MyEclipse—Files and Editors—HTML—修改成UTF-8的编码
创建HTML的文件后，可以选择打开方式，设置默认的打开方式。
Window—preferences—General—Editors—File Associations—选择*.html—选择MyEclipse HTML Editor—选择default—选择ok
（编写HTML）创建web的项目
创建web的项目
右键 – 选择web project – 其名称 – 完成就ok。
编写HTML的文件
在WebRoot目录下 – 右键 – new – myeclipse – web – 选择html的基本模板 – 其名称 – 完成。
HTML的真正的标签
排版的标签
HTML的注释
换行标签
一条水平线
排版标签
*
换行
*
一条水平线
* color: 颜色
* 值的写法：两种
1）直接写英文的单词（red green blue）
2）RGB三原色(red green blue) #ab1255
* width： 宽度
* 值两种写法： 1） 200px;
2） 可以写百分比
区别：百分比跟着浏览器的大小而改变，像素值不会。
* <p></p> 段落标签 * 段落标签的开始和结束位置留一空行。 * align：对齐方式 * 代表空格 * 在浏览器声明一块区域，区域中放入其他（文字，子标签） * <div></div> +CSS+DIV在网页进行布局（美工） * <span></span> * div块级元素（换行的符号） * span标签不会换行 行内元素
字体标签
字体的内容
字体标签：
color: 颜色
size： 字体的大小
最大值和最小值
最小值是：1
最大值是：7
默认值： 3
值的写法 +2 （3+2）
face： 字体的类型
标题标签
…
特点：逐渐缩小
粗体
斜体
标签可以嵌套的
文本的内容
特殊字符
< <
> >
& &
滚动的字幕（忘了吧）
列表标签（*）
数据格式化列表
上层项目
下层项目
下层项目
* 自动对齐，缩进的
有序列表和无序列表
有序
数据的条目
数据的条目
数据的条目
ol的属性
type=”a”
start=”” 从哪开始
无序（用的最多）
数据条目
数据条目
数据条目
ul的属性
type=””
图片标签（*）
属性：
src=”图片的地址”
width=”图片的显示宽度”
height:图片显示的高度
alt：图片的说明文字
超链接标签（*）
写法：
链接资源
必须要指定属性：href=”链接的地址”
需要编写协议
HTTP
默认file文件的协议
如果浏览器可以解析文件，默认会打开文件。
如果浏览器不可以解析文件，弹出下载窗口。
支持自定义协议
浏览器解析不了的协议，默认找操作系统的引用程序。
定位资源
name 定义锚点
点击 href=”#锚点名称”
表格标签（*）
把数据封装成表格。
表格标签
| 数据 | 数据 |
|---|---|
| 数据 | 数据 |
* border: 边框
* width: 宽度
* height: 高度
tr的属性
* align:中间的文字的对齐方式
td获取th
区别：th中间的内容粗体显示。
th中间的内容默认居中。
th一般用来表格的表头
td的属性 * width 宽度 * height 高度 * 合并单元格（值的写法：合并几个单元格，值就写几） * 行合并 rowspan="" * 列合并 colspan=""
必须要写在table的中间
表单标签（****）
收集用户输入的数据
表单的标签
form的属性
action=”表单的提交路径”
http://www.baidu.com
html页面
method=”提交方式（默认是get方式）”（面试题）
form表单的提交方式有哪些？（get和post的区别）
答：form表单提交方式有很多，常用的有两种post和get
post和get提交方式的区别：
get方式会把参数列表显示在地址栏上，post方式不会（请求体）。
get方式说明网站安全级别较低，post安全级别较高。
get方式不支持大数据，post支持大数据。
推荐大家使用post方式。
用户输入的内容
name属性必须要指定，value可以看情况指定
type=”text” 普通的文本框
name必须指定
type=”password” 密码框
name必须指定
type=”radio” 单选按钮
name必须指定 value必须指定
name的属性，值要相同
默认值：checked=checked或者true
type=”checkbox” 多选按钮
name必须指定 value必须指定
默认值：checked=checked或者true
type=”reset” 重置：恢复到最初的状态
type=”submit” 提交表单
点击提交后，地址栏发生了变化（?sex=on）
在普通的文本框上添加name属性 name=”username”之后，点击提交，地址栏发生了变化（?username=haha&sex=on）
String str = “?username=haha&sex=on”;
?username=zhangsan&password=123&sex=nan&love=zq
type=”file” 选择文件
name属性指定
type=”hidden” 隐藏组件
name指定 value指定
type=”button” 按钮
value=”显示的文字”
和js（javascript） 绑定事件
type=”image” 图片
提交 引入外部的一个文件（图片）
声明选择框
文本域
rows=”行”
clos=”列”
name属性指定
selected=”selected” 代表默认值
框架标签（了解）
对网页进行布局
代表上半部分
代表下半部分
前提条件：不能写在标签的内部和下面
CSS
* CSS的简介
* CSS：cascading style sheet ：层叠样式表。
* 做什么用：设置网页的显示效果（设置样式）。
* CSS将网页显示的效果和内容分离。（耦合性）
超<font>文本</font>标签语言
* HTML只需要把文本内容封装起来，不用属性，用CSS的代码来控制显示效果。
* 如果开发了多套CSS的代码，都不用修改HTML的代码。
* CSS和HTML的结合（*****）
* CSS与HTML的结合方式（4种）
* 在html的标签上，提供了一个(属性)，style="CSS的代码"
* 在HTML的文件，提供了一个(标签) <style type="text/css">CSS的代码</style>，这个标签放在<head></head>的中间
* 引入外部的文件的方式（引入CSS的文件，定义一个css文件（后缀名名 demo.css））（经常使用的方式）
* @import url("CSS文件的地址"); 属性必须要写<style></style>内部。大写和小写都没有问题。（注意：必须有;）
* 引入外部文件的方式，通过一个<link> 写在<head></head>中间， 不要放在<style>中间（经常使用）
* rel：代表当前和引入文件之间的关系
* type：
* href：引入CSS文件的地址
* CSS的优先级（*****）和规范
* 从上到下，由外到内，优先级是从低到高的。（一般情况下）（*****）
* 标签名选择器 < 类选择器 < ID选择器 < style属性 （特殊情况下）（*****）
* 规范
* CSS的写法： div{CSS的属性名:值;CSS的属性名:值;...}
* 如果一个属性有多个值，值与值之间使用空格隔开
* 例子 div{ xx:yy zz aa }
* CSS的选择器（*****）
* CSS的选择器
* 告诉CSS的代码作用在哪个标签上。
* 基本选择器
* 标签名选择器 div{} span{}
* 类选择器：在HTML的标签上，提供了属性 class，定位到div的标签（美工经常使用的方式）
* 写法： .class的名称 (.hehe{CSS的代码})
* 设置不同的标签，具有相同的样式
* ID选择器
* 在HTML的标签上，提供的属性 设置样式
* 写法： #id的名称 (#haha{CSS的代码})
* 一般情况下：设置不同的ID
* 一般情况下给js语言来使用。
* 扩展选择器
* 关联选择器：标签可以嵌套，标签与标签之间的关系。
* 写法： 中间用空格隔开 例子（div font{CSS的代码}）
* 组合选择器：对多个不同的选择器进行相同的样式
* 写法：在多个不同的选择器之间用 , 隔开
* 伪元素选择器： 定义好的一些选择器，用就ok。
* 如果使用超链接伪元素选择器：使用顺序： L V H A
* CSS的布局（了解）（CSS+DIV进行布局）
<div>
<div>
<img />
</div>
<div>
<font>领导很忙</font>
</div>
</div>JAVASCRIPT（JavaScript简写js，文件的后缀名也是 demo.js）（*）
javascript的简介
js是基于对象和事件驱动的脚本语言，作用在客户端（浏览器）上。
js的特点：
交互性
安全性：（不可以访问本地的硬盘）
跨平台性：因为浏览器就可以解析js的文件。
javascript和java不同（一点关系没有）（雷锋和雷峰塔）
Netscape（网景），静态的效果。livescript（javascript的前身）
java诞生了，升级了，改名（javascript），火了。
巨头：自己开发一套（jscript）
找一些公司推出的标准： SUN 微软 ECMA（欧洲计算机制造协会），联合推出现在的标准。
ECMAScript：标准。基础上扩展。
js的基于对象，java是面向对象。
js解析就可以执行，java先编译再执行。
js是弱类型的语言，java是强类型语言。
javascript语言的组成
ECMAScript 标准（js的语法，变量，函数）
BOM （Browser Object Model） 浏览器对象模型
DOM （Document Object Model） 文档对象模型
javascript的语法
把js和HTML的结合一起。（2两种方式）
js和HTML的结合
HTML的文件提供了一个标签 ，标签可以放在HTML文件的任意位置上。
引入外部的文件，有一个外部的文件。编写js文件。
如果script通过src的属性引入了外部的文件，里面的js代码就不会执行了。（*）
，标签可以放在HTML文件的任意位置上。
关键字
var 声明变量
标示符
和java一样
注释
和java一样
变量
声明变量，只使用一个关键字 var num = 12; var str = “abc”;
5种基本数据类型
Undefined、Null、Boolean、Number 和 String
5种基本数据类型
Undefined、Null、Boolean、Number 和 String
String 字符串类型
js中双引号和单引号都代表的是字符串
Number 数字类型
不区分整数和小数
Boolean 布尔类型
Null 空，给引用赋值的
Undefined 未定义（声明变量，没有赋值）
声明变量，使用var关键字
typeof() 判断当前变量是什么类型的数据
运算符
js的运算符
算术运算符
0或者null是false，非0或者非null是true，默认用1表示。
var num = 3710;
alert(num/1000*1000);
不区分整数和小数
赋值运算符
和java是一样的
比较运算符
== 比较值是否相同
=== 比较值和类型是否相同
逻辑运算符
和java中一样
三元运算符
条件?值1:值2
js的数组
js的数组
java String [] str = {};
声明数组
var arr = [12,34,55];
var arr = new Array(5); 声明数组，长度是5
var arr = new Array(2,3,4); 声明数组，元素是2 3 4
数组的属性
长度：length
数组的长度是可变的。
js的方法
java中 public String 方法名称(参数列表(int num,String str)){
方法体;
return null;
}
js中，通过关键字function 声明方法。
function 方法名称(参数列表 (num,str)){
方法体;
return;
}
参数列表：不能使用var关键字
返回值：可写可不写的，如果有写返回值，如果没有，返回值可以省略不写。
调用执行。
在函数的内部，有一个数组，装传过来的参数的
arguments
js的动态函数和匿名函数
js的动态函数和匿名函数
动态函数
function getSum(){
return 50;
}
js提供了内置对象 Function
匿名函数
没有名称的函数
js的全局变量和局部变量
全局变量：在
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html和css基础
- CSS float和absolute
- 第二章 选择器
- CSS权威指南 读书笔记 第一章 CSS和文档
- CSS背景；链接；文本
- CSS之盒子模型
- CSS之选择器与列表
- 二、CSS伪类和伪元素
- 学习笔记——sass(scss)
- css
- 每一个css样式写完都要写分号！！！
- css中div布局学习（1）
- CSS3 计数器
- css3中关于伪类的使用
- CSS的font-size属性
- CSS样式的优先级
- W3School-CSS 伪元素 (Pseudo-elements) 实例
- W3School-CSS 伪类 (Pseudo-classes) 实例
- CSS让图片垂直居中的几种技巧
- 我的网页搭建中篇01——网页背景02.使用渐变色做网页背景