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/created
beforeMount/mounted
beforeUpdate/updated
beforeDestroy/destroyed

响应式原理:

Object.defineProperty 数据劫持
getter/setter 触发更新
Vue.set/Vue.delete 处理新增/删除属性

组件通信:

父子组件: props/$emit
兄弟组件: eventBus
插槽: slot
provide/inject
Vuex 状态管理

路由:

Hash 模式
History 模式
动态路由匹配
导航守卫
路由懒加载

Vuex:

单一状态树
state/getters
mutations/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