H5C3

一、什么是html5

html产生于1990年，1997年出来html4，现在我们用html5

二、语义化（面试）

<header></header>

<footer></footer>

<nav></nav>

好处：

有利于seo，爬虫抓取
方便团队开发和维护，可读性强
方便其他设备解析（移动设备）

坏处：

ie9以下的浏览器不兼容

三、新增常用标签

header：头部
footer：底部
section：区块
nav：导航

以上标签都是”块元素”

注意一：html5标签兼容问题

问题：html5在低版本浏览器如何兼容（ie8）？

解决：通过html5shiv.js文件

注意二：只要做移动端的项目，必须要加入meta

<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

四、新增input type属性值

类型	使用示例	含义
email	`<input type="email">`	输入邮箱格式
tel	`<input type="tel">`	输入手机号码格式
url	`<input type="url">`	输入url格式
number	`<input type="number">`	输入数字格式
search	`<input type="search">`	搜索框（体现语义化）
range	`<input type="range">`	自由拖动滑块
time	`<input type="time">`	小时分钟
date	`<input type="date">`	年月日
datetime	`<input type="datetime">`	时间
month	`<input type="month">`	月年
week	`<input type="week">`	星期年

<input type="email">

pc：会验证邮箱格式

移动端：会验证邮箱格式
<input type="tel>"

pc：没效果

移动端：纯数字的键盘
<input type="url">

pc：会验证完整url

移动端：会验证完整url
<input type="number">

pc：会验证必须输入的数

移动端：会验证必须输入的数
<input type="search">

pc：和普通text差不多，就是后面加了一个清空value的按钮

移动端：和普通text差不多，点击键盘的search搜索后会清空输入内容
<input type="range">

pc：自由滑块

移动端：自由滑块
<input type="time">

pc：显示选择小时和分钟

移动端：显示选择小时和分钟

五、【windows操作系统】安卓手机真机测试

连接和安装
- 电脑和手机要连同一个wifi
- 手机要插上数据线
- windows机器和安卓手机要下载软件
做真机测试
- 右击–新建–项目–5+App
- 点击运行–运行到手机或模拟器

六、新增常用属性

属性	用法	含义
placeholder	`<input type="text" placeholder="请输入用户名">`	占位符当用户输入的时候里面的文字消失删除所有文字，自动返回
autofocus	`<input type="text" autofocus>`	规定当页面加载时 input 元素应该自动获得焦点
multiple	`<input type="file" multiple>`	多文件上传
autocomplete	`<input type="text" autocomplete="off">`	规定表单是否应该启用自动完成功能有2个值，一个是on一个是off on代表记录已经输入的值 1、autocomplete首先需要提交按钮 2、这个表单必须给她名字
required	`<input type="text" required>`	必填项内容不能为空
accesskey	`<input type="text" accesskey>`	规定激活（使元素获得焦点）元素的快捷键采用 alt + s 的形式

placeholder

placeholder 怎么改变颜色

.user-name::-webkit-input-placeholder{
	color:red;
}
<input type="text" placeholder="请输入用户名" class="user-name">

autofocus 自动获取焦点
multiple 多文件上传
<input type="file" multiple>
required 必填项
autocapitalize='off'

输入框首字母大写取消

七、视频和音频

视频
<video src=""></video>
音频
<audio src=""></audio>

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
height	pixels	设置视频播放器的高度
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放
muted	muted	规定视频的音频输出应该被静音
poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示图像
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的视频的URL。
width	pixels	设置视频播放器的速度。

js的api：

play：播放

pause：暂停

八、本地存储

sessionStorage

localStorage

添加：

storageStorage|localStorage.setItem(key,value);
storageStorage|localStorage.key = value;
storageStorage|localStorage['key'] = value;

获取：

storageStorage|localStorage.getItem(key,value);
storageStorage|localStorage.key;
storageStorage|localStorage['key'];

删除：

// 全部删除：
storageStorage|localStorage.clear();
// 指定删除：
storageStorage|localStorage.removeItem(key);

区别：

sessionStorage 关闭页面就消失

localStorage 除非手动清空，否则就算关闭页面也不会清空

本地存储进去的value类型都是字符串

九、reset和Normalize

reset

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Normalize

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

十、CSS 预处理器

用专门的语言进行web页面样式设计，再通过编译器转换成正常的css文件

专门的语言：less、sass、stylus

less

官网：http://lesscss.cn/

语法格式：

变量

@变量名称:值

@bgColor:pink;
header {
    color:@bgColor;
}
section {
    color:@bgColor;
}
footer {
    color:@bgColor;
}

可以使用运算符

自定义函数

// 定义
.函数名(形参) {
	函数体
}
// 调用
.函数名(实参)

.fn() {
    background-color:red;
}
footer {
    .fn();
}

.fn(@fz:80px) {
    font-size:@fz;
    background-color:red;
}
footer {
    .fn(24px);
}

嵌套

div {
    color:red;
    ul {
        list-style:none;
        li {
            font-size:20px;
            span {
                background-color:red;
            }
            // 给li加的
            &:hover {
                font-size:50px;
            }
        }
    }
}

sass

基于Ruby语言

使用的时候用的是scss

变量

$变量名称:值;

$h:400px;
.main {
    width:300px;
    height:$h;
    background-color:red;
}

运算

自定义函数

@function 函数名称(参数) {
    @return 参数
}
函数名称(参数)

@function fn($fz:24px) {
    @return $fz;
}

.main {
    width:300px - 298;
    height:$h;
    background-color:red;
    &:before {
        content:'xxxxx';
    }
    ul {
        font-size:fn();
        li {
            font-size:20px;
        }
    }
}

十一、CSS3选择器和兼容

兼容


-webkit-	Safari，谷歌浏览器等使用Webkit引擎的浏览器
-moz-	火狐等使用Mozilla浏览器引擎的浏览器
-o-	Opera浏览器
-ms-	Internet Explorer浏览器

.user-name::-webkit-input-placeholder{
	color:red;
}
.user-name::-moz-input-placeholder{
	color:red;
}
.user-name::-o-input-placeholder{
	color:red;
}
.user-name::-ms-input-placeholder{
	color:red;
}
<input type="text" placeholder="请输入用户名" class="user-name">

十二、弹性盒布局-flex

弹性盒子
父元素 {
display:flex;
}
容器属性
- flex-direction
  参数：row（默认）、column（纵向）
  
  决定主轴的方向（即项目的排列方向）
  ul {
  display；flex；
  flex-direction:column;
  }
- flex-wrap
  默认情况下，项目都排在一条线上，如果一条线排不下，如何换行
  ul {
  display:flex;
  flex-wrap:wrap;
  }
- flex-flow
  direction 和 wrap 的集合
  ul {
  display:flex;
  flex-flow:row wrap;
  }
- justify-content
  参数：
  
  flex-start、
  
  flex-end、
  
  center、
  
  space-between、
  
  space-around
- align-items
  参数：
  
  flex-start：
  
  flex-end：
  
  center：
  
  stretch：
  
  baseline：
项目属性
- flex-grow
  定义了项目的放大比例，默认为0，即如果存在剩余空间，也放不大
  ul {
  display:flex;
  }
  ul li {
  flex-grow:1;
  }
  ul li.item2 {
  flex-grow:3;
  }
  <ul>
  <li>1</li>
  <li class='item2'>2</li>
  <li>3</li>
  </ul>
- flex-shrink
  定义了项目的缩小比例，默认为1，即空间不住，该项目将缩小
- flex
  flex属性是flex-grow、flex-shrink、flex-basis的简写，默认值为0 1 auto，后两个属性可选

十三、自适应布局

布局单位

px：固定单位

em、rem：相对单位

em：相对于父元素的font-size

rem：根（html）的font-size

<style>
.header {
	width:200px;
	height:200px;
	font-size:30px;
}
.content {
	width:1rem;     //30px
	height:1.1px;   //30px
}
</style>
<header>
	<div class="content">
        1111
    </div>
</header>

注意：移动端用的最多的是rem，好计算

自适应布局
引入 flexible.js 文件

十四、transform

transform：位移、缩放、旋转、倾斜

transform-2D

位移

translate(x,y)

translateX(x)

translateY(y)

<style>
    .main {
        width:100px;
        height:100px;
        background-color:red;
        /* transform:translate(50px,200px); */
        transform:translateX(100%);  /* 100*100% */
    }
</style>
<body>
    <div class="main"></div>
</body>

缩放

scale(x,y)

scaleX(x)

scale(y)

<style>
    img {
        transform:scale(2,0.5)  /* x,y */
    }
</style>
<body>
    <img src="1.jpg" alt="">
</body>

面试题：谷歌浏览器默认字体大小是16px，那么如何显示小于16px的字体呢？

p {
    font-size:20px;
    -webkit-transform:scale(.5); /* 20*0.5=10px */
}

旋转

rotate(angle)

<style>
    img {
        transform:rotate(180deg);
    }
</style>
<body>
    <img src="1.jpg" alt="">
</body>

倾斜

skew(x-angle,y-angle)

skewX(angle)

skewY(angle)

<style>
    img {
        transform:skew(45deg,10deg)  /* x,y */
    }
</style>
<body>
    <img src="1.jpg" alt="">
</body>

transform-3D（多了Z轴）

如果要用3d了，必须给”父元素”加入一个 perspective 属性规定3D元素的透视效果

perspective:400px 值越大，离我们越远，越小越近

perspactive-origin 规定中心位置

transform-origin 如果定义3d，让子元素都是3d空间

<style>
    div {
        width:500px;
        height:500px;
        perspective:500px;
        /* perspective-origin:5% 90%; */
    }
    img {
        transform:rotateY(45deg);
    }
</style>
<body>
    <img src="1.jpg" alt="">
</body>

十五、CSS动画

animation基本使用

参数	含义
`animation-name`	规定需要绑定到选择器的 keyframe 名称
`animation-duration`	规定完成动画所花费的时间，以秒或毫秒计
`animation-timing-function`	规定动画的速度曲线
`animation-delay`	规定在动画开始之前的延迟
`animation-iteration-count`	规定动画应该播放的次数
`animation-direction`	规定是否应该轮流反向播放动画

要用animation，必须要定义关键帧

@keyframes{
    0% {
        
    }
    ...
    100% {
        
    }
}

<style>
    .main{
        font-size:20px;
        animation-name:xxx;
        animation-duration:3s;
        animation-timing-function:ease-in-out;
        animation-delay:5s;
        animation-iteration-count:infinite;
    }
    @keyframes xxx{
        0%{
            font-size:20px;
        }
        50%{
            font-size:30px;
        }
        100%{
            font-size:50px;
        }
    }
</style>
<body>
    <div class="mian">
        随便
    </div>
</body>

简写：animation:名称时间速度曲线延迟次数反向

animation加载中动画

<style>
    ul{
        margin:50 auto;
        width:300px;
        height:80px;
        list-style:none;
    }
    ul li{
        display:inline-block;
        width:20px;
        height:100%;
        background-color:pink;
        animation:loading 1.2s infinite;
    }
    @keyframes loading{
        0%,40%,100%{
            transform:scaleY(.5);
        }
        20%{
            transform:scaleY(.8);
        }
    }
    ul li:nth-child(1){
        animation-delay:-1.1s;
    }
    ul li:nth-child(2){
        animation-delay:-1s;
    }
    ul li:nth-child(3){
        animation-delay:-0.9s;
    }
    ul li:nth-child(4){
        animation-delay:-0.8s;
    }
    ul li:nth-child(5){
        animation-delay:-0.7s;
    }
</style>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

animate动画库

class固定前缀：animate__animated

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 
		<title></title>
		<link rel="stylesheet" href="animate.min.css">
		<style>
		*{margin:0;padding:0;}
		html,body,.container{
			overflow: hidden;
		}
		.container{
			display: flex;
			flex-direction: column;
			width:100vw;
			height: 100vh;
		}
		header{
			width:100%;
			height: 80px;
			background-color: red;
		}
		section{
			position: relative;
			flex:1;
			background-color: #838384;
		}
		section>div{
			position: absolute;
			transform: translateX(100%);
		}
		.home{
			width:100%;
			height: 100%;
			background-color: pink;
			transform: translateX(0);
		}
		.my{
			width:100%;
			height: 100%;
			background-color: orange;
		}
		footer{
			width:100%;
			height: 80px;
			background-color: blue;
		}
		footer ul{
			display: flex;
			justify-content: space-around;
			align-items: center;
			list-style: none;
		}
		footer ul li{
			color:#fff;
			line-height: 80px;
		}
		</style>
	</head>
	<body>
	
	<div class='container'>
		<header>头部</header>
		<section>
			<div class='home animate__animated'>首页</div>
			<div class='my animate__animated'>我的</div>
		</section>
		<footer>
			<ul>
				<li>首页</li>
				<li>我的</li>
				<li>*学习路线*</li>
				<li>*在线课程*</li>
			</ul>
		</footer>
	</div>
	<script src='jquery-1.11.min.js'></script>
	<script>
	$(function(){
		
		$("footer ul>li").click(function(){
			
			var index = $(this).index();
			
			$('section>div').eq(index).removeClass('animate__slideInRight animate__slideOutRight').addClass('animate__slideInRight').siblings().removeClass('animate__slideInRight animate__slideOutRight').addClass('animate__slideOutRight');
			
		})
		
	})
	</script>
	</body>
</html>

transition

简写：transition:过渡的属性名称时间速度曲线延迟

.main{
    width:300px;
    height:300px;
    background:red;
    transition:all 2s; /*all过渡所有属性*/
}
.main:hover{
    width:600px;
    height:600px;
    background:blue;
    transform:translateX(100px);
}

animate 和 transition 有什么区别？

使用区别：

transition：交互驱动
animation：自己动，一般刷新页面就执行的动画

无宽高如何居中

面试题：一个盒子不给宽度和高度，如何水平垂直居中

弹性盒子flex

transform

<style>
    .container{
        position:relative;
        width:500px;
        height:500px;
        background-color:pink;
    }
    .main{
        position:absolute;
        left:50%;
        right:50%;
        transform:translate(-50%,-50%);
    }
</style>
<body>
    <div class="container">
        <div class="main">111</div>
    </div>
</body>

网格布局

<style>
    .container{
        display:grid;
        justify-content:center;
        align-items:center;
        width:500px;
        height:500px;
        background-color:pink;
    }
   
</style>
<body>
    <div class="container">
        <div class="main">111</div>
    </div>
</body>

十六、响应式布局(媒体查询)@media

优点：一个url（一套代码）可以响应多端（电脑、ipad、手机）

缺点：存在兼容性、体积大

响应式布局
@media

语法格式：
@media only screen and (max-width:400px){
代码体
}
@media only screen and (max-width:400px) and (max-width){
代码体
}
only：可以排除不支持媒体查询的浏览器

screen：设备类型

max-width|min-width：小于max-width、大于min-width

响应式图片

html5新增的标签

<pictrue>
	<source srcset="路径2" media='{max-width:800px}'>
    <img srcset="路径1" alt="">
</pictrue>

响应式和自适应
响应式：”一个url”可以响应多端（电脑、ipad、手机）

自适应：可以在移动设备上适应（ipad、手机）

十七、移动端插件

iScroll插件
中文网：http://caibaojian.com/iscroll-5/
- 引入iscroll.js文件
- 加入 id="wrapper"
  - 给滚动元素的父元素添加
- 实例化
  var myScroll = new IScroll('#wrapper',{
  scrollbars:true // 显示滚动条
  })

移动端300ms延迟

面试：在移动端使用click事件有300ms延迟的问题

点击两下会放大缩小页面会与点一下冲突，需要等待时间判断是否再点一下

解决方式

禁止双击缩放（加入meta）

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

插件：fastclick.js

<script src='fastclick.js'></script>
<script>
	// fastclick
    if('addEventListener' in document) {
        document.addEventListener('DOMContentLoaded', function() {
            FastClick.attach(document.body);
        }, false)
    }
    // end
</script>

touch事件与穿透问题

移动端事件（touch）

touchstart：开始触摸事件

touchmove：手指滑动事件

touchend：触摸结束事件

面试题：移动端touch事件有穿透（点透）的问题，该怎么解决

给整体页面加一个蒙层，同时在这个页面里面加一个链接，给蒙层给一个触摸事件，让蒙层消失，刷新页面触摸链接上面的蒙层时会穿透，跳转到链接网址

解决方式：

阻止默认行为（通过事件对象阻止）

事件名.ontouchstart = function(e) {
    e.preventDefault();
    其他代码
}

fastclick.js

<script src='fastclick.js'></script>
<script>
	// fastclick
    if('addEventListener' in document) {
        document.addEventListener('DOMContentLoaded', function() {
            FastClick.attach(document.body);
        }, false)
    }
    // end
</script>

zepto.js
是一个轻量级的、针对现代高级浏览器的 JavaScript 工具库，它兼容 jQuery 的 API

移动端触摸：tap
懒加载以及原理
优势：提升性能

实现原理：图片是通过img的src属性，当对src赋值时，基于这个问题，我们可以利用标签的自定义属性（data-xxx），来保存图片的路径，当我们需要加载图片的时候，将data-xxx赋值给src就可以实现按需引入，按需加载

插件：lazyload

问题一：移动端，input的键盘的右下角显示搜索（2个字）

解决：

<form action="">
    <input type="search" placeholder="搜索课程名称或者关键词">
</form>

问题二：如果我们在移动端点击了搜索，form表单有action就自动提交表单

解决： onsubmit="return false"

例子：

<form action="" id='goSearch' onsubmit="return false">
    <input type="search" placeholder="搜索课程名称或者关键词">
</form>

问题三：如何收起键盘

解决：document.activeElement.blur();

问题四：元素被触摸时产生的半透明遮罩怎么去掉（a、button、input、textarea）

解决：-webkit-tap-highlight-color:rgba(0,0,0,0);

问题五：如何关闭ios键盘的首字母自动大写

解决：<input autocapitalize='off'>

问题六：禁止ios&安卓长按保存（下载）图片

解决：

img{
    -webkit-touch-callout:none;
}

问题七：禁止ios&安卓长按选中文字

解决：-webkit-user-select:none;

一、什么是html5

二、语义化（面试）

三、新增常用标签

四、新增input type属性值

五、【windows操作系统】安卓手机真机测试

连接和安装

做真机测试

六、新增常用属性

七、视频和音频

八、本地存储

九、reset和Normalize

reset

Normalize

十、CSS 预处理器

less

sass

十一、CSS3选择器和兼容

兼容

十二、弹性盒布局-flex

弹性盒子

容器属性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

项目属性

flex-grow

flex-shrink

flex