HTML5-零基础学习备忘录
iOS中经常涉及到与H5界面的交互，但是无奈不懂H5，每次交互都需要与前端人员交流；其次就是每次看到H5的代码总觉得有一种似曾相识的感觉。基于以上两种原因，遂花费7天学习H5，并完成以下Demo.
仿百度页面
仿百度首页.png
仿Mac桌面
仿Mac界面.gif
登录界面
登录界面JS.gif
Tab选项卡
Tab选项卡JS实现.gif
1 HTML
HTML标签类型：
HTML有很多标签，根据现实的类型，主要分为3大类：
-
块级标签：
独占一行的标签，能随时设置宽高的标签（div，p，h1，还，ul，li） -
行内标签（内联标签）：
多个行内标签能同时显示在同一行，可以使用
换行；根据内容确定标签的宽高（span，a，） -
行内-块级标签（内联-块级标签）：
多个行内-块级标签可以显示在同一行；可以随时设置宽高（input，button）
通过修改标签的显示类型可以满足不同的需求
延伸：
css中有一个display属性，可以用来修改标签的显示类型，该属性有4个值
none：隐藏标签；（相当于OC中的hidden，内容和布局都会消失）
block：让标签变为块级标签
inline：将标签变为行内标签
inline-block:将标签变为行内块级标签
2 CSS
CSS两大重点：选择器和属性
CSS样式：行内样式；业内样式；外部样式
2.1 CSS选择器：
2.1.1选择器的种类
- 1.标签选择器
- 2.类选择器
- 3.id选择器
- 4.并列选择器
- 5.复合选择器
- 6.后代选择器
- 7.直接后代选择器
- 8.相邻兄弟选择器
- 9.属性选择器
- 10.伪类 * 11.伪元素
- 12.通配符
2.1.2 CSS：选择器的优先级
- 相同级别的选择器：a.就近原则 b.叠加原则
- 优先级：
important >内联 > id选择器 > 类选择器 > 标签选择器 | 伪类 |属性 | 伪元素 >通配符 > 集成
id只能有一个，多个id时会失效，class可以有多个
选择器的针对性越强，它的优先级就越高 - 通过选择器的权值来量化选择器的优先级
- 1.通配选择器（*）：0
- 2.标签：1
- 3.类：10
- 4.属性：10
- 5.伪类：10
- 6.伪元素：10
- 7.id：100
- 8.important：1000（只要输入！important 其他一切都是渣）
例如：
div{
color：green !important
}
原则：选择器的权值加到一起，大的优先；如果相同，后定义的优先
2.2 css的常见属性
CSS有很多属性，根据继承性，可以分为可继承属性和不可继承属性。
2.2.1 可继承属性：
父标签的属性值可以传递给子标签，一般都是文字控制属性
- 所有标签可以继承的属性：
visibility：hidden，只隐藏内容，不隐藏尺寸
cursor：决定光标的类型样式，具体可以上w3school查看 - 内联标签可以继承的属性：
line-height，color，font-size，font-family，font-weight（是否加粗，normal，bolder），text-decoraion（是否设置下划线，none，underline，overline，line-throgth...)。 - 块级标签可继承：
text-indent(是否首行缩进，20px，10%),text-align（对齐样式） - 列表标签可继承：
list-style(none,circle,square)、list-style-type.....
2.2.2 不可继承属性：
父标签属性值不能传递给子标签，一般是区块控制属性（backgroundcolor，width，height）
1.display，margin，border，padding，background（设置图片：url：imageName 默认是平铺，不平铺可加no-repeat）
background-size：cover（把背景图片拉伸到足够大）
2.height，min-height，max-height，width...
3.overflow（对超出部分进行处理，文字多于背景色 hidden：截取；scroll（auto）：滚动条），position，left，right，top，bottom，z-index
4.float,clear
CSS属性补充(有待补充....)
水平居中：
行内标签以及行内-块级标签：text-align：cneter；
块级标签：margin：0 auto
垂直居中：
line-height
属性补充：box-sizing
以特定的方式定义匹配某个区域的特定元素，默认值为content-box，border-box，设置以后可以把边框和内边距放入盒子内部
2.3 CSS布局
默认情况下，所有的网页标签都在标准流布局里面，标准流：从上到下，从左到右;但是很多时候我们需要自定义布局，从而需要脱离标准流布局。
脱离标准流的方法：
- 1.float属性
取值为left（right）脱离标准流，浮动在父标签的最左（右）边 - 2.position属性 和left，right，top，bottom属性
配图：
盒子模型
网页其实就是标签嵌套标签，网页上的每一个标签都是一个盒子
盒子的四个属性：盒子结构图（此处应该有图片）
标准盒子模型：（配图）
IE盒子模型：
填充（padding，内边距）- 属性
3 JavaScript
JavaScript是一门广泛用于浏览器客户端的脚本语言（脚本语言：缩短传统的编写-编译-链接-运行过程，解释运行而非编译运行）
JS常见用途：
- 1.HTML DOM操作 （节点操作，比如添加、修改、删除节点）
- 2.给HTML网页增加动态功能，比如动画
- 3.事件处理，比如监听鼠标点击、鼠标滑动、键盘输入
Node.js:
Node是一个JavaScript运行环境（runtime），是对Google V8引擎进行了封装
V8引擎执行JS的速度非常快，性能非常好
Node.js优势:
可以作为后台语言;单线程：不新增额外线程的情况下，依然可以对任务进行并发处理（采用事件轮询）CPU在同一时间只能处理一件事
飞阻塞I/O、V8虚拟机，事件驱动
3.1 JS的书写方式
JS常见的书写方式有2种
- 页内JS：在当前网页的script标签中编写
<script type="text/javascript">
</script>
- 外部JS
<script scr="index.js"></script>
3.2 JS常用语法
3.2.1 JS的基本数据类型
调试输出：console.log('正在被调试') 审查元素-->console
声明变量使用var ，使用typeof可以打印出真实类型
字符串：
string类型与number类型相加时，从左往右，任何类型变量与string类型拼接时都会变为string类型。
var string1 = 10 + 10 + '10' + '10';//201010
var string2 = '10' + '10' +10 + 10;//10101010
var string3 = ('10' + 10) +'10' + 10;//10101010
数组：
var newArray = [10，2，age，['快输出我','CrabMan']];
JS中数组是一个object类型，通过遍历输出数组内容
//第一种方式
for(var i = 0;i<newArray.length;i++){
console.log(newArray[i]);
}
//第二种方式
for(var i in newArray){
console.log(newArray[i]);
}
//输出“快输出我”
console.log(newArray[newArray.length - 1][0]);
newArray.pop();删除数组中最后一个元素
newArray.push();为数组添加参数
//取出数组中的最小值
var newNumbers = [10,2,34,56];
//var minNumber = Math.min();
var minNumber = Math.min.apply(null,newNumbers);
console.log(minNumber)
3.2.2 JavaScript中的函数
-
有名函数
function 函数名（参数列表...）{
函数体
return 返回值
} -
匿名函数
var 变量名 = function （）{
return 返回值
}
函数例子：
<script type="text/javascript">
//命名一个求和函数
function sum(num1,num2){
return num1 + num2;
//调用函数
var result = sum(200,50);
console.log(result);
}
//万能加法函数 参数个数不固定
function sum1(numbers){
var count = 0;
for(var i = 0 ;i < numbers.length; i++){
count +=numbers[i];
}
return count;
}
//调用函数
var numbers = [12,334,'10'];
var result1 = sum1(numbers);
console.log(result1);
//结果为34610
//内置数组 arguments
function sum2(){
var count = 0;
for(var i = 0 ;i < arguments.length; i++){
count +=numbers[i];
}
return count;
}
//内置数组的调用
var result2 = sum2(10,20,30);
//匿名函数 ，需要使用一个变量来接收
var test = function (){
console.log('我是匿名函数')
}
//调用匿名函数
test();
</script>
3.2.3 JavaScript中的对象
OC中的类其实就一个结构体，里面的元素对应类不同的属性。对象就是结构体元素被赋值以后具体化得类。所以JS得中的对象就不难理解了。
<script type=text/javascript>
//this 在哪个对象中就代表该对象
var dog = {
name = 'wangcai';
age = 11;
height:1.21;
eat:function(something){
console.log(this.name+'吃'+something)
}
}
//调用狗对象的属性
console.log(dog.name);
//调用狗的方法
dog.eat('骨头');
</script>
批量生成🐶，需要一个构造函数,产生对象
<script type=text/javascript>
//构造函数
function Dog (){
this.name = null;
this.height = null;
this.firends = null;
this.age = null;
this.eat() = function(something){
console.log(this.name+'吃'+something)
}
}
//批量产生狗
var dog1 = new Dog();
dog1.name = '八戒';
......
var dog2 = new Dog();
dog2.name = '悟空';
.......
console.log(dog1,dog2);
</script>
3.2.3 JavaScript中的逻辑或 和 逻辑与
JS中的逻辑与 和 逻辑或比较灵活还有其他的用途
<script type = text/javascript>
//需求newName的取值，name1有值就为name1，否则就为name2....
var name1 = 'name1';
var name2 = 'name2';
var name3 = 'name3';
var name4 = 'name4';
//一般方法可以用if else判断
//JS中的方法 ||的灵活使用
var newName = name1 || name2 || name3 || name4;
console.log('newName');
//逻辑与的活用
var age = 22;
if(age > 18){
console.log('已经成年')
}
//如果前面条件为真，则执行后面的代码 条件 && {}
(age > 20) && console.log('真的已经成年了！！！')；
</script>
3.3 JavaScript中的内置对象（window 和 document）
因为JS中的window以及document比较重要，因此单独列出来一个标题。
window：
1.所有的全局变量都是window的属性
2.所有全局的函数都是window的函数
3.动态跳转
<script type=text/javascript>
function Dog (){
console.log(this);
}
Dog();//打印出来为window对象
var dog1 = new Dog();//打印出来为Dog();
//window实现动态跳转
location.herf = ....;
window.location.herf = 'http://baidu.com';
</script>
document用途：
1.动态的获取当前网页中的任意一个标签
2动态的对获取到的标签进行CRUD
增加(Create)；读取(Retrieve)（重新得到数据）；更新（Update）和删除（Delete）
<script type = text/javascript>
//动态插入
document.write('Hello World!');
//动态插入标签
document.write('<input type = date>')
//更改图片
function changeImg(){
// 拿到图片对象,根据id获取
var img = document.getElementById('icon');
console.log(img);
//更改图片,如果是自己的属性可以直接输入，若不是需要加style
img src = 'image/img02.jpg';
}
</script>
</head>
<body>
<img id='icon' src='image/img01.png'>
<p></p>
<button onclick = "changeImg();">更改图片</button>
</body>
//每次点击都更改图片逻辑，body里面，切记写在标签后面
//indexOf lastIndexOf 如果含有某参数，则返回任意正数，否则返回-1
<script type="text/javascript">
var img = document.getElementsByClassName('icon')[0];
var btn = document.getElementsByTagName('button')[0];
btn.onclick = function(){
if(img.src.lastIndexOf('image01.png') != -1){
img.src = 'image/img02.png';
} else{
img.src = 'image/img01.jpg'
}
//更改button的显示内容
if(btn,innerText == '更改图片'){
btn.innerText = '图片复原';
} else{
btn.innerText = '更改图片';
}
}
</script>
监听常用的事件
<body>
<input id= "int" type = "text" value="我是需要拷贝的内容">
<img scr="image/img01.png" name"icon">
<script>
//拿到对应的标签
var img = document.getElementsByName('icon')[0];
//常用事件
//鼠标进入图片
img.onmouseover = function(){
console.log('光标进入图片范围')；
}
//鼠标在图片上移动
img.onmousemove = function(){
console.log('光标在光标上移动')；
}
//鼠标移除到图片范围以外
img.onmouseout = function(){
console.log('光标移除图片')；
}
//当页面加载完毕,调用标签等
window.onload = function(){
alert('页面加载完毕');
}
//拿到对应的输入框，监听输入框
var input = document.getElementsById('int');
//输入框点击时,改变输入框状态
input.onfocus = function(){
input.width = '700px';
input.height = '60px';
//css中的属性要通过style
input.style.outline = 'none';
inpue.syle.fontSize = '30px';
}
//拿到选中的内容
input.onselect = function(){
alert('input.value')
}
</script>
</body>
3.4 DOM的CRUD--JS外部引用
3.4.1 C -- Create
//C -- Create
document.write('Hello World');
//因为JS是将下面的代码直接插入到body里面，所以src不使用../
document.write('<img src="image/img01.png">')
//定点插入
var div = document.createElement('div');
div.style.backgroud = 'red';
div.style.width ='500px';
div.style.height = '300px';
//添加到父标签中
document.body.appendChild(div);
//向div中插入一张图片
var img = document.createElement('img');
img.src = 'imgae/img01.png';
div.appendChild(img);
3.4.2 D--Delete
document.body.removeChild(p);
//拿到目标标签的父标签，然后删除
p.parentNode.removeChild(p);
//删除常用
p.remove();
改 ：拿到对应的标签，做出改变 ...
查：
find(document.body);
function find(object){
for (var i in object){
console.log(object[i])
}
}
//查节点
console.log(document.body.childNodes);
3.5 Canvas绘制图形标签
3.5.1 Canvas标签介绍
- 画板标签
<canvas id = "canvas"></canvas>
JS书写方式：context是一个回执图形的上下文环境，2d是二维图形
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
浏览器不支持画板标签时会显示画板内容，并且画板的默认尺寸为300x150
<canvas id='canvas' style='backgourd-color':black;>当前的版本不支持，请先更新版本</canvas>
3.5.2 Canvas绘制直线
起点
context.moveTo(100,100);
终点
context.lineTo(400,400);
绘制
context.stroke();
设置线条的颜色和宽度
context.strokeStyle='red';
context.lineWidth = 5;
设置填充色
context.fillStyle = 'blue';
//绘制多条线时 ,canvas是基于状态的，会以最后的颜色为准，所以当每条线颜色不一样时，需要在设置颜色后设置。
context.beginPath();
context.moveTo();
context.lineTo();
context.closepath();//自动将图形绘制为封闭图形
3.5.3Canvas绘制弧线
context.arc(
//原点和半径
centerX,centerY,radius,
//起始和终点角度
startingAngle,endingAngle,
Man.PI
//是否顺时针（可选，可以不设置）
anticlockwise=false
)
3.6 jQuery
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)
<script scr="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type = "text/javascript">
//拿到p标签
alert($('p'));
//查看p中的内容
console.log($('p').text());
//改变p标签的内容
$('p').text('我是段落');
//查看img的属性
console.log($('img').attr('src'));
//改变img的属性
$('img').attr('src','image/img02.jpg');
//改变图片的宽度
$('img').attr('width','200px');
//DOM操作 css选择器都可以用于jQuery,通过>定点查找标签
$('.test1>img').attr('src','image/img03.jpg';)
//点击按钮隐藏和显示图片
$('button').eq(0).on('click',function(){
$('p').show();
$('img').show();
});
$('button').eq(1).on('click',function(){
$('p').hide();
$('img').hide();
});
//切换按钮 图片显示和隐藏
$('button').eq(2).on('click',function(){
$('p').toggle();
$('img').toggle();
});
//遍历
var number = [10,20,332,19];
$.each(number,function(index,value){
console.log(index,value);
});
//取出对应数值的下标
var index = $.inArray(20,number);
console.log(index);
//使用jQuery写css
$('#main>p').css({
'border':'1px solid red'
'color' :'red'
});
</script>
