静态页面HTML
HTML（Hyper Text Markup Language）超文本标记语言，是做网站页面的最基础的开发语言
语法
a标签
<a href="" target="" name="" id=""></a>
<!-- _blank -> new window, 默认 _self -> this window -->
<a name="_top">java从入门到精通</a>
。。。
<a href="#_top">回到顶部</a>
<!-- 获取_top的位置,像书签 -->
input标签
<input type="text" /> <!-- 普通文本框 -->
<input type="password" /> <!-- 密码 -->
<input type="radio"/> <!-- 单选框 -->
<input type="number" /> <!-- 数字值 -->
<input type="week" /> <!-- 日历 -->
<input type="checkbox" /> <!-- 复选框 -->
<input type="button" value="点我一下"/>
<input type="submit" value="提交数据"/>
table标签
<table border="" cellspacing="" cellpadding="" align="center">
<tr><th>Header</th></tr>
<tr>
<td colspan="" rowspan="">Data</td>
</tr>
</table>
<!-- cellspacing外边距，cellpadding内边距，固有属性 -->
<!-- colspan是列合并，rowspan是行合并 -->
其他标签
<div>大家好</div>
<!-- 块元素，独占一行，初始无外边距 -->
<p> nice</p>
<!-- 块元素，独占一行，初始有外边距 -->
<span> hello</span>
<!-- 行内元素，不能设置宽高，初始啥都没 -->
H5播放视频
<!-- 加载mp3音频
注意::浏览器默认规定视频音频不会自动播放，因为自动播放会占用流量
-->
<audio controls="controls">
<source src="jay.mp3"></source>
</audio>
<!-- 加载mp4 视频
注意::不能按网站方式访问,无法打开视频,直接按本地文件打开方式可以正常播放
http://127.0.0.1:8848/demo/video.html
-->
<video controls="controls">
<source src="yibo.mp4"></source>
</video>
CSS技术
CSS全称叫做层叠样式表stylesheet，是用来修饰HTML网页的一门技术，增强网页的展示能力。
选择器
/* 标签名选择器 */
* {}
div {}
/* class选择器 */
.class {}
/* <p class="a b">123</p> <!-- b覆盖a--> */
/* id选择器 */
#id {}
/* 分组选择器 */
.a,.b,#p1 {}
/* 属性选择器 */
input[type='text'] {}
/* ps:任何选择器都能向内继续选择 */
.class1 .class2 #id {}
盒子模型
border（边框）
#div {
border: none;
outline: none;
border:10px solid yellow;/*实线*/
border:10px dashed yellow;/*点状*/
border:10px dotted yellow;/*虚线*/
}
块级元素
默认情况下，块级元素独占一行（div , p，h1~h6）
可以设置宽和高。如果不设置宽和高，其中宽是默认填满父元素，而高是由内容
外边距、边框、内边距都可以设置
行内元素
默认情况下，多个行内元素处在同一行
不能设置宽和高
左右外边距、边框、内边距都可以设置，上下外边距设置无效
行内块元素
既具备行内元素的特征，还具备块级元素的特征
JavaScript网页技术
实现浏览器用户和后台服务器进行交互
语法
基本数据类型
包括:number/string/boolean/null/undefined
2.4+3.6=6;
Infinity ： 正无穷大
-Infinity ： 负无穷大
NaN : Not a Number 非数字， 和任何值都不相等，包括它本身
var str = "Hello…";
var s = false;
var num; alert(num);
//声明了变量但是没有为变量赋值，该变量的值就是undefined。
//或者访问一个对象上不存在的属性时，也是undefined。
//或者访问数组中一个没有的元素的位置时，该位置处的值也是undefined。
null
//值也只有一个，就是null。表示空值或者不存在的对象。
变量
var a = 1;
a=true;
a=100;
alert(a);//100
运算符
var a = 3;
console.log(a==="3");
//false 如果两边比较的值不是同一种数据类型，===直接返回false，如果是同一种数据类型，==和===没有区别
console.log(a>b?a:b);//求两个数里的大数,三元运算符
var i = 3;
console.log(typeof i);//number
i=true;
console.log(typeof i);//boolean
i="hello";
console.log(typeof i);//string
console.log(typeof 123+"abc");//numberabc
console.log(typeof (123+"abc"));//string
//typeof运算符: 用于返回变量或者表达式 的数据类型
数组
//JS数组中可以存放任意的数据类型
//JS中的数组长度可以被改变
var arr1 = new Array();//声明一个空数组
var arr2 = new Array("abc", "hello", true);//声明一个具有初始值的数组
var arr4 = [];//声明一个空数组
arr4 = ["abc", "hello", true];//声明一个具有初始值的数组
//length属性 -- 获取数组的长度，还可以改变数组的长度
//遍历数组
for( var i=0; i< arr.length; i++ ){
console.log( arr[i] );
}
//for..in
for(var i in a){
console.log(i);
}
函数
//通过function关键字声明函数
声明：function 函数名称([参数列表]) { 函数体 }
调用: 函数名称([参数列表]);
案例：
function a() {}
//通过函数直接量声明函数
声明：var 函数名称 = function([参数列表]) { 函数体 }
调用: 函数名称([参数列表]);
案例：
var fn2 = function() {}
js对象
//方式一
function Person() { } /* 定义对象*/
var p1 = new Person(); /* 创建对象*/
p1.name="张三";
p1.age=20;
console.log(p1);
p1.say = function() { /* 定义函数*/
console.log("haha");
}
p1.say(); /* 函数调用*/
//方式二
var p2 = {
"pname":"李四",
"page":100,
"psay":function(){
/* this使用p2里定义的 */
console.log(this.pname+this.page);
}
}
console.log(p2);
p2.psay(); /* 函数调用*/
DOM树
--获取对象: window.document
--调用方法:
getElementById("元素的id的属性的值")--返回1个元素
getElementsByName("元素的name属性的值")--返回多个元素(用数组)
getElementsByClassName("元素的class属性的值")--返回多个元素(用数组)
getElementsByTagName("元素的标签名的值")--返回多个元素(用数组)
write()--向文档写 HTML 表达式 或 JavaScript 代码
title--返回网页的标题
id--设置或返回元素的id
innerHTML--设置或返回元素的内容
//获取页面元素的4种方式:
//getElementsByTagName 标签名称，得到数组
//getElementsByName name属性，得到数组
//getElementsByClassName class属性，得到数组
//getElementById id属性，单个值
json
JSON 是存储和交换文本信息的语法。
//JSON数据:
var a =' "firstName" : "John" '
//JSON 对象:
var a = '{ "firstName":"John" , "lastName":"Doe" }'
//JSON 数组:
var a = '[{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName":"Bush" }]';
//转换工具
//使用JS里的内置对象JSON.用来把以 JSON 格式写的字符串 和 原生 JavaScript 对象互转.
//给服务器发送数据: 将JS对象转成JSON字符串
JSON.stringify(Js对象)
//接受服务器的数据: JSON字符串转成JS对象
JSON.parse("json字符串")