前端学习 HTML5和CSS3新特性 高级技巧 JavaScript基础语法

##HTML5和CSS3提高
###HTML5的新特性
HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签，新的表单和新的表单属性等；
这些新特性都有兼容性问题，基本是IE9+以上的版本浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性；

1. HTML5新增的语义化标签
   之前布局，基本用div来做，div对于搜索引擎来说，是没有语义的；
   

   ：头部标签
   

   ：导航标签
   

   ：内容标签
   

   ：定义文档某个位置
   

   ：侧边栏标签
   

   ：尾部标签
   注意：
   这种语义化标签主要是针对搜索引擎的；
   这些新标签，页面中可以使用多次
   在IE9中，需要把这些元素转换为块级元素
   移动端更喜欢使用这些标签
   HTML5还增加了许多标签

2. HTML5新增的多媒体标签
   使用他们可以很方便的在页面中嵌入音频和视频，而不再使用flash和其他浏览器插件，主要包含两个：

   1. 音频标签
      当前标签支持三种视频格式：MP3，Wav，Ogg，尽量使用MP3格式
      

   audio常见属性：
   autoplay="autoplay" 音频就绪自动播放（谷歌禁用）
controls="controls" 向用户显示播放控件
loop="loop" 播放完是否继续播放该音频，循环播放
src="URL" 音频URL

   2. 视频标签
      当前标签支持三种视频格式：MP4，WebM，Ogg，尽量使用MP4格式
      

   video常见属性：
   autoplay="autoplay" 视频就绪自动播放（谷歌禁用，谷歌浏览器需要添加muted来解决自动播放问题）
controls="controls" 向用户显示播放控件
width="像素" 设置播放器宽度
height="像素" 设置播放器高度
loop="loop" 播放完是否继续播放该视频，循环播放
preload="auto/none" 预先加载视频/不预先加载（有autoplay属性时会忽略该属性）
src="URL" 视频URL
poster="imgURL" 加载等待的画面图片
muted="muted" 静音播放

3. HTML5新增的input表单
   验证的时候必须添加form表单域，点击提交按钮就可以验证表单；
   type="email"：限制用户输入必须为Email类型
   type="url"：限制用户输入必须为URL类型
   type="date"：限制用户输入必须为日期类型
   type="time"：限制用户输入必须为时间类型
   type="month"：限制用户输入必须为月类型
   type="week"：限制用户输入必须为周类型
   type="number"：限制用户输入必须为数字类型
   type="tel"：手机号码
   type="search"：搜索框
   type="color"：生成一个颜色选择表单

4. HTML5新增的input表单属性
   required="required"：必填，不能为空
   placeholder=""：提示文本，存在默认值时不显示
   修改颜色：
   input::placehoder { color: pink;}
autofocus="autofocus"：自动聚焦
   autocomplete="off/on"：当用户在字段开始输入时，浏览器基于之前输入过的值，应该显示出在字段中填写的选项。默认已打开，需要放在表单内，同时加上name属性，同时成功提交
   multiple="multiple"：可以多选文件提交

###CSS3的新特性

1. CSS3现状
   新增的CSS3特性有兼容性问题，ie9+才支持
   移动端支持优于PC端
   不断改进中
   应用相对广泛
   现阶段主要学习：新增选择器，盒子模型以及其它特性

2. 新增选择器

   1. 属性选择器（类选择器，属性选择器，伪类选择器，权重都是0.0.1.0）
      属性选择器可以根据元素特定属性来选择元素，这样可以不借助类或者id选择器。
      E[att]：选择具有att属性的E元素
      E[att="val"]：选择具有att属性且属性值等于val的E元素
      E[att^="val"]：选择具有att属性且属性值以val开头的E元素
      E[att$="val"]：选择具有att属性且属性值以val结尾的E元素
      E[att*="val"]：选择具有att属性且属性值含有val的E元素

   2. 结构伪类选择器
      结构伪类选择器主要根据文档结构来选择元素，常用语根据父级选择器里面的子元素
      E :first-child：匹配父元素中的第一个子元素E
      ul li:frist-chlid（权重0.0.1.2）
      E :last-child：匹配父元素的最后一个E元素
      E :nth-child(n)：匹配父元素中的第n个子元素E，n可以是数字（从1开始），关键字(even偶数/odd奇数)和公式（里面只能是n字母，从0开始，3n，2n，n+1（第一个后面），-n+5（前5个））
      E :first-of-type：指定类型E的第一个
      E :last-of-type：指定类型E的最后一个
      E :nth-of-type(n)：指定类型E的第n个
      区别：
      nth-child会把所有的子元素排序号，先看序号，之后看前面的E，全部匹配才能选择出来；
      nth-type-of会把指定元素的盒子排列序号；

   3. 伪元素选择器
      利用CSS创建新标签元素，而不需要HTML标签，简化HTML结构（遮罩层，等）
      ::before：在元素内部前面插入内容
      ::after：在元素内部后面插入元素
      注意：
      before和after创建一个元素，但是属于行内元素
      新创建的这个元素在文档树中找不到，所以称为伪元素
      语法element::before{}
      before和after必须有content属性
      before在父元素内容的前面创建元素，after在父元素内容后面插入元素
      伪元素选择器和标签选择器一样，权重为0.0.0.1

      1. 伪元素字体图标（记得加载字体文件）

      	p::before {
      		position: absolute;
      		right:20px;
      		top: 10px;
      		content: "\e91e"
      		font-size: 20px;
      	}
      

      2. 仿土豆效果

      	.demo::before {
      		content: '';
      		position: absolute;
      		top: 0;
      		left: 0;
      		width: 100%;
      		height: 100%;
      		display: none;
      		background-color: rgba(0,0,0,.3);
      	}
      
      	.demo:hover::before{
      		display: block;
      	}
      

      3. 清除浮动

      	.clearfix:agter {
      		content: "";
      		display: block;
      		height: 0;
      		clear: both;
      		visibility: hidden;
      	}
      

3. CSS3盒子模型
   box-sizing: content-box/boder-box;
   content-box：盒子实际大小等于原大小+padding+border（默认）
   boder-box：盒子实际大小等于指定大小

4. 图片模糊
   filter: 函数();滤镜
   eg: filter: blur(5px);：blur模糊处理，数值越大越模糊；

5. calc函数（计算）
   width: calc(100%-80px);'+-*/'：可计算

6. 过渡：
   不使用flash，JS，经常和:hover一起使用，
   transition:要过渡的属性 花费时间 运动曲线 何时开始;
   属性：想要变化的CSS属性，宽高，背景颜色，内外边距等，所有：all；
   花费时间：单位秒
   运动曲线：默认ease（渐慢），liner（匀速），ease-in（加速），ease-out（加速），ease-in-out（先加速后减速）（可以忽略）
   何时开始：延迟触发，默认0s（可忽略）
   谁做过渡给谁加

#JavaScript
JavaScript是一种运行在客户端的脚本语言（Script脚本）；
脚本语言：不需要编译 ，运行过程中由js解释器（js引擎）逐行进行解释并执行；
现在也可以基于Node.js技术进行服务器端编程；

##JavaScript的作用

• 表单动态校验（密码强度检测）（JS产生的最初目的）
• 网页特效
• 服务端开发（Node.js）
• 桌面程序（Electron）
• APP（Cordova）
• 控制硬件-物联网（Ruff）
• 游戏开发（cocos2d-js）

##HTML/CSS/JS的关系

1. HTML/CSS标记语言–描述类语言
   HTML决定网页结构和内容–身体
   CSS决定网页呈现给用户的模样–衣服
2. JS脚本语言–编程类语言
   实现业务逻辑和页面控制（决定功能）–动作

##浏览器执行JS过程
浏览器分为两部分：渲染引擎和JS引擎
渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit；
JS引擎：也称为JS解释器，用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8；
浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎来执行JS代码，JS引擎执行代码时逐行解释每一句源码，然后由计算机去执行，所以JavaScript语言归脚本语言，会逐行解释执行；

##JS的组成

1. JS基础
   1. ECMAScript（JavaScript语法）
      ECMAScript是由ECMA国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，往往被称为JavaScript（网景公司，艾奇）或JScript（微软公司），但实际上后两者是ECMAScript语言的实现和扩展；
      ECMAScript规定了JS的编程与法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准；
2. JSAPI
   2. DOM（页面文档对象模型）
      文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作（大小，位置，颜色等）；
   3. BOM（浏览器对象模型）
      浏览器对象模型（Browser Object Model，简称BOM），是指浏览器对象模型，它提供了独立于内容的，可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框，控制浏览器跳转，获取分辨率等；

##JS学习
###书写位置
JS有3种书写位置：

1. 行内
   直接写到元素内部
   
   1. 可以将单行或少量JS代码在HTML标签的事件属性中（以on开头的属性），如onclick；
   2. 在HTML推荐使用双引号，在JS中使用单引号；
   3. 可读性差，在html中编写大量Js代码时，不方便阅读；
   4. 引号易错，引号多层嵌套匹配时，非常容易搞混；
   5. 特殊情况下才使用；
2. 内嵌
   
   1. 可以将多行代码写到标签中；
   2. 内嵌JS是学习时常用的方式；
3. 外部
   
   1. 在标签中不能写代码
   2. 适合js代码比较大的情况
   3. 分离

###注释

1. 单行注释：//
2. 多行注释：/**/

###输入输出
alert(msg)：浏览器弹出警示框；
console.log(msg)：浏览器控制台打印输出；
var info = prompt(info);：浏览器弹出输入框；

###变量
申请空间存放变量；
先声明再赋值；
var name;
name = 10;
直接初始化；
var name = 18;
多个变量初始化：

var name = '',
	jaj = '',
	dfd = '';

默认值为undefined（未定义）；
字母，数字，_，$组成，区分大小写，不能以数字开头，不能是关键字，驼峰命名法（myFristName）

###数据类型
弱类型语言，动态语言：数据类型不确定，运行过程中动态分配，程序运行时同一个变量数据类型可变；
简单数据类型(默认值)：Number(0)，String("")，Boolean(false)，Undefined(undefined)，Null(null)；
复杂数据类型：object；

Number：
八进制：010;（0开头）
十六进制：0x1f;（0x开头）
最大值：Number.MAX_VALUE;//1.7976931348623157e+308
最小值：Number.MIN_VALUE;//5e-324
(负)无穷大：(-)Infinity;
非数值：NaN;
判断是否是数字：isNaN(参数);
String：
任意文本：’’（推荐）/""；
JS可以单引号双引号互相嵌套：外双内单，外单内双
转义符：
\n,\,’,",\t,\b（空格）
str.lenth;
str1+str2/Number;只要有一个字符串都可以拼接；
‘12’+12=‘1212’
Boolen：
true参与加法运算当1，flase：0；
Undefined，Null：
null+‘1’=null1

typeof var:得到数据类型；
prompt得到的是字符型；

转换数据类型：
num.toString();
String(num);
1+’’;隐式转换
parseInt(string);整数数值/取整/去掉字符单位（120px）
parseFlost(string);浮点数数值/去单位
Number(string);强制转换

• • / ‘12’-0;隐式转换