一、html5
html：超文本标记语言 xhtml：更加严谨的 html html5：新一代语法规范，能够适配移动端产品 XML： 可扩展标记语言
- html5 新特性
- css3 新特性
- 移动端的事件、常用库
- 本地存储 localStorage
- geolocation
- websocket
html5 的文档声明：
标签语义化：合理的标签做合适的事情，有利于 SEO 搜索引擎优化推广
什么是 SEO：搜索引擎关键词的排名推广 Alex：排名 SEO 通过各种手段提高网站的排名
SEM：百度竞价，可以理解为谁出钱多谁的网站在前面
前后端技术分离的产品（数据绑定有前端JS或者模板引擎来渲染的），是不利于 SEO 优化的，因为基于 JS 动态绑定的数据，在网站的源代码中看不到信息
1. 新增的语义化标签
块级标签
header 头部区域 main 主体区域 footer 尾部区域 article 文章区域 nav 导航区域 figure 配图区域 figcaption 配图说明 aside 与主体无关（一般应用于侧边栏） section 普通区域 audio 音频 video 视频
行内标签
mark 文本标记：可以让文本高亮选中 time 日期标记
2. html5 的表单
传统的表单元素：
from 表单 input：text / radio / cheacbox / button / submit / reset / hidden / file… textarea 文本域 select 下拉框
html5中新增加的表单元素或者input中新增的类型
input：search / email / tel / number / date / time / color / range… 优势：
- 功能强大了
- 在移动端能够调取出对应的键盘，方便用户输入
- 内置表单验证
3. 条件注释语法
处理兼容（IE6~8）只需要导入一个JS：html5.min.js
<!--[if lt IE 9]><script src="js/html5.min.js"></script><![endif]-->
4. 前后端不分离的表单提交
<form action="/addUser.php"><input type="submit" value="提价"></form>
二、HTML5 新表单类型自带验证方式
<style>
.formBox input:invalid+p {
opacity: 1;
}
.formBox input:valid+p {
opacity: 0;
}
</style>
<div class="formBox">
<input type="email" id="emailInp" placeholder="请输入邮箱地址">
<p id="emailTip">输入的邮箱格式不正确~~</p>
</div>
<script>
// HTML5新表单类型自带验证方式
emailInp.onkeydown = emailInp.onkeyup = function () {
if (!this.checkValidity()) {
emailTip.style.opacity = 1;
return;
}
emailTip.style.opacity = 0;
}
emailInp.onkeydown = emailInp.onkeyup = function () {
let value = this.value.trim();
if (value.length > 0) {
let reg = /^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
if (!reg.test(value)) {
emailTip.style.opacity = 1;
return;
}
}
emailTip.style.opacity = 0;
}
</script>
三、zepto 和 jQuery 的区别
zepto 专门为移动端开发准备的，所以没有考虑 PC 端IE的兼容问题，所以 zepto 要比 jquery 小的多；而且还有一方面，也导致了 zepto 比 jquery 小：zepto 只实现了 jquery 中最常用的方法（例如slideDown / slideUp / slideToggle等快捷动画，在 zepto 中都没有）；
- JQ 中设置样式和实现动画的时候，不支持 CSS3 中某些样式属性的设置，例如：transform，但是ZP中支持了这样的处理
- ZP中单独提供了一些移动端常用的事件方法：tap / singleTap / doubleTap / longTap / swipe / swipeLeft / swipeRight / swipeUp / swipeDown / pinchIn / pinchOut…，而这些 JQ 中都没有
四、移动端能用 click 事件行为吗
PC 端 click 是点击事件，移动端的 click 是单击事件（所以在移动端使用 click 会存在 300ms 延迟的问题，在第一次触发后，会等待 300ms，看是否有第二次触发，存在则为双击，不存在才是单击） => 移动端的所有操作基本上都是基于 touch / gesture 事件模型模拟出来的
移动端的常用事件库：zepto / fastclick: 解决 click 的300秒延迟问题的 / hammerjs: 国际通用的移动端手势事件库
移动端键盘事件和 pc 端的区别：移动端是虚拟键盘，所以对于 keydown / keyup / keypress 兼容很差，想实现类似的需求，需要用input事件完成（input 事件：移动端文本框内容输入事件）
userInp.addEventListener(‘input’,function(ev){ });
$(document.body).tap(function (ev) {
console.log('ZP:我是点击');
});
document.body.addEventListener('touchstart', function (ev) {
// ev:TouchEvent
// touches vs changedTouches：存储每根手指的操作信息（它是一个集合，对于TOUCH单手指事件来说，集合中只有一项），changedTouches 存储的是手指发生改变操作的信息，但是最开始按下的时候和 touches 一样的，但是它可以在手机离开的事件中获取到手指离开瞬间的信息，而 touches 在离开的时候则没有，真实项目中一般用 changedTouches
let point = ev.changedTouches[0];
this.startX = point.clientX;
this.startY = point.clientY;
this.isMove = false;
});
document.body.addEventListener('touchmove', function (ev) {
let point = ev.changedTouches[0],
changeX = point.clientX - this.startX,
changeY = point.clientY - this.startY;
if (Math.abs(changeX) >= 30 || Math.abs(changeY) >= 30) {
this.isMove = true;
}
});
document.body.addEventListener('touchend', function (ev) {
if (this.isMove) {
console.log('这是移动操作~');
return;
}
console.log('这是点击操作~');
});
五、渐进增强和优雅降级
渐进增强
渐进增强 progressive enhancement；针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
若有收获，就点个赞吧
0 人点赞
