前端与HTML

什么是前端

• 解决GUI人机交互问题
• 跨终端
  • PC/移动浏览器
  • 客户端小程序
  • VR/AR
• Web技术栈
• 前端技术栈：
  • HTML（内容）
  • CSS（样式）
  • JavaScript（行为）
  • 通过网络协议与服务器端进行通信
• 前端应该关注哪些方面：
  • 功能
  • 美观
  • 无障碍
  • 安全
  • 性能
  • 兼容性
  • 用户体验
• 前端的边界
  • nodejs
  • electron
  • react native
  • WebRTC
  • WebGL
  • WebAssembly
• 开发环境
  • 浏览器：Edge；Chrome；Firefox；Safari
  • 编辑器：VSCode；Vim；WebStorm

HTML

HyperText Markup Language

• 浏览器拿到代码后解析为一个DOM树
• 
• 标题h1~h6
• 列表：ul，li，dl，dt，dd
• 链接：a href=""，target=blank
• img：src，alt（Metal moveable type）替代性的文本
• audio video：controls
• 输入：input type="range""number""date" placeholder="" textarea
• input type="checkbox"，多选；type="radio" name=""，单选
• 下拉菜单：select option
• 文本类标签：
  • blockquote cite
  • 短引用：cite，q
  • code：代码标签
  • pre：代码标签
  • strong：粗体
  • em：斜体

内容划分

语义化

• HTML中的元素、属性、属性值拥有某些含义。遵循语义来编写HTML。