HTML5 与前端开发要点 - 教程
HTML5 与前端开发要点
HTML5 新特性
新增语义化标签
header头部区域nav导航栏article独立内容区块section内容分区aside侧边栏内容footer页脚区域
多媒体标签
视频标签(video):
autoplay自动播放controls显示控制条loop循环播放muted静音模式poster视频封面图preload预加载设置(metadata/auto/none)src视频源地址width/height尺寸设置playsinline移动端非全屏播放controlslist自定义控制组件nodownload隐藏下载按钮nofullscreen隐藏全屏按钮use-credentials跨域凭证mediagroup视频分组控制
音频标签(audio):
autoplay自动播放controls显示控制条loop循环播放muted静音模式src音频源地址
图片标签(img)
src图片地址alt替代文本title提示文本width/height尺寸设置loading加载策略(lazy/eager)srcset响应式图片源decoding解码方式(async/sync/auto)
表单新特性
placeholder输入提示required必填项autofocus自动聚焦autocomplete自动补全datalist下拉选项- 新增输入类型：
date,time,month,week,email,url,tel,number,range,color,search
JavaScript 新特性
let/const块级作用域变量- 解构赋值
- 模板字符串
- 箭头函数
- 默认参数
- 扩展运算符
for...of循环class类语法Promise异步处理- 模块化(
import/export)
CSS 新特性
- 增强选择器
- 圆角边框
- 阴影效果
- 渐变背景
- 过渡动画
- 关键帧动画
- Flexbox 布局
- 多列布局
- 媒体查询
前端优化与安全
性能优化:
- 资源压缩合并
- CDN 加速
- 图片懒加载
- 减少 HTTP 请求
- 缓存策略优化
- 减少重绘回流
- 异步脚本加载
- 服务端渲染(SSR)
安全问题:
- XSS 跨站脚本攻击
- CSRF 跨站请求伪造
- SQL 注入
- 点击劫持
- 资源盗链
- 敏感信息泄露
Vue 相关
生命周期:
beforeCreate/createdbeforeMount/mountedbeforeUpdate/updatedbeforeDestroy/destroyed
响应式原理:
Object.defineProperty数据劫持- getter/setter 触发更新
Vue.set/Vue.delete处理新增/删除属性
组件通信:
- 父子组件:
props/$emit - 兄弟组件:
eventBus - 插槽:
slot provide/inject- Vuex 状态管理
路由:
- Hash 模式
- History 模式
- 动态路由匹配
- 导航守卫
- 路由懒加载
Vuex:
- 单一状态树
state/gettersmutations/actions- 模块化管理
前端工程化
- 模块化开发
- 打包工具: Webpack/Rollup/Parcel
- 任务运行器: Gulp/Grunt
- 包管理: npm/yarn
- 自动化测试: Jest/Mocha/Cypress
其他技术
PWA:
- 离线缓存
- Service Worker
- Manifest 应用清单
- 推送通知
- 后台同步
测试:
- 单元测试
- 集成测试
- 端到端测试
- 测试框架: Jest/Mocha/Jasmine
- 测试工具: Cypress/Puppeteer/Selenium
Web 组件:
- 自定义元素
- Shadow DOM
- HTML 模板
- 模块化组件
国际化:
- 多语言支持
- Vue-i18n/React-intl
- 语言动态切换
- 本地化日期/数字处理
可访问性:
- 无障碍设计
- WAI-ARIA 标准
- 语义化 HTML
- 键盘导航支撑
- 屏幕阅读器兼容
性能监控:
- 真实用户监控(RUM)
- 应用性能管理(APM)
- Lighthouse 评估
- 核心指标: FCP/LCP/CLS/TBT1 html5 新增的标签 header 头部标签 nav 导航标签 article 内容标签 section 内容标签 aside 侧边标签 footer 底部标签
2 视频标签 video autoplay controls loop muted 默认静音 poster 设置第一针 preload 加载模式 预加载 加载元内容 自动加载 src 视频地址 width height 宽高 palysinline 用于移动端不进入全屏属性 controlslisrt 自定义控制组件 nodownload 隐藏下载按钮 nofullscreen 隐藏全屏按钮 use credentials 带跨域凭证 mediagroup 将视频元素分组播放
3 音频标签 audio autoplay 自动播放 controls 显示控制控件 loop 循环播放 muted 默认静音 src音频地址
4 图片标签 img src 文件地址 alt 无法展示图片时展示的文字 title鼠标悬停的文字提示 width height 宽高 loading 加载图片时机 lazy懒加载 eager 预加载 srcset 设置多个图片根据不同的宽度显示对应的图片 decoding 图片解码方式 async 异步 decoding sync 同步 decoding auto 自动 decoding
5 表单新特性 placeholder 提示文本 required 必填 autofocus 自动获取焦点 autocomplete 自动完成 datalist 下拉选项 new date time month week email url tel number range color search
6 javascript 新增特性 let const 块级作用域变量 解构赋值 模板字符串 箭头函数 默认参数 扩展运算符 for of 循环 类 class promise 模块化 import export
7 块元素 行内块元素 行内元素 各有什么不同 块元素单独一行 行内块元素 能够设置宽高 不占一行 行内元素 不能设置宽高 不占一行
8 html 4 5有什么区别 html5 支持多媒体标签 语义化标签 表单新特性 本地存储localStorage 前端本地持久化 sessionStorage 会话存储 关闭消失 cookie 每次请求携带 同源窗口共享 用于做身份验证运行稍微有点麻烦 用于主流浏览器 地理位置 拖放API 画布canvas web workers SSE 离线应用
9 css3 新增特性 选择器 圆角 阴影 渐变 过渡 动画 弹性盒子 多列布局 媒体查询
10 前端性能优化 资源压缩 合并 CDN运用 图片优化 懒加载 减少HTTP请求 应用缓存 减少重绘回流 异步加载脚本 使用服务端渲染 SSR
11 前端安全 XSS CSRF SQL注入 点击劫持 资源盗链 敏感信息泄露
12 vue 生命周期 创建前 beforeCreate 创建后 created 挂载前 beforeMount 挂载后 mounted 更新前 beforeUpdate 更新后 updated 销毁前 beforeDestroy 销毁后 destroyed
13 vue 响应式原理 启用Object.defineProperty() 方式 劫持数据的get和set手段 数据变化触发视图更新 Vue.set() Vue.delete() 解决新增删除属性无法响应式更新疑问
14 vue 组件通信 父子组件 props $emit 兄弟组件 eventBus 插槽 slot provide/inject vuex
15 vue 路由原理 hash模式 history模式 监听路由变化 动态路由匹配 导航守卫 路由懒加载
16 vuex 原理 单一状态树 state getters mutations actions 模块化
17 axios 拦截器 请求拦截 响应拦截 取消请求 并发请求 上传下载进度
18 前端工程化 模块化 打包工具 webpack rollup parcel 任务运行器 gulp grunt 包管理器 npm yarn 自动化测试 jest mocha cypress
19 前端框架对比 vue react angular svelte ember backbone
20 PWA 渐进式网页应用 离线缓存 服务工作者 应用清单 推送通知 后台同步
21 前端测试 单元测试 集成测试 端到端测试 测试框架 jest mocha jasmine 测试工具 cypress puppeteer selenium
22 web组件 自定义元素 影子DOM HTML模板 模块化
23 前端国际化 多语言支持 vue-i18n react-intl 动态切换语言 本地化日期时间数字
24 前端可访问性 无障碍设计 WAI-ARIA标准 语义化HTML 键盘导航 屏幕阅读器支持
25 前端性能监控 RUM APM Lighthouse 性能指标 FCP LCP CLS TBT