前端要解决的基本问题

• 解决 GUI 人机交互问题
• 跨终端
  • PC/移动浏览器
  • 客户端/小程序
  • VR/AR等
• Web 技术栈
• 关注点
  • 美观
  • 功能
  • 无障碍
  • 兼容
  • 安全
  • 性能
  • 体验

HTML

HTML 是什么

HyperText Markup Language（超文本标记语言）

HTML 基础语法和基本功能

标签

• 常用的2种布局标签 div span
• 标题标签 h1~h6
• 段落标签 p
• 强调标签 em strong
• 引用标签 q blockquote cite
• 换行标签 br
• 分割线标签 hr
• 图片标签 img
• 输入相关 input label select 等等

常见input标签

写法

标签对

<div>内容</div>

自闭和

<div/>

HTML5新技术

• 新标签、新属性
• 新的通信技术：WebSockets等
• 离线存储技术：LocalStorage、SessionStorage、indexedDB
• 多媒体技术：视频、音频
• 图像技术：Canvas，SVG，WebGL
• Web增强技术：History API、全屏
• 设备相关技术：摄像头、触摸屏
• 新的样式技术：CSS3新的Flex，Grid的布局方式

如何做到语义化

语义化标签

• header
• nav
• main
• article
• aside
• footer
• 有序列表 ol
• 无序列表 ul
• 语言 lang

个人感悟

HTML开发中注意点

• 语义化
• SEO优化
• 屏幕阅读器的 适配

文档： MDN W3C