1 什么是前端

• 解决 GUI 人机交互问题
• 跨终端
  • PC/移动浏览器
  • 客户端/小程序
  • VR/AR 等
• Web 技术栈

HTML、CSS、JS关系

前端应该关注哪些内容： 美观、安全、兼容、功能、体验、性能、无障碍

1.1 HTML是什么

HyperText：图片、标题、链接、表格

Markup Language：<h1>文章标题</h1>

DOM树

1.2 HTML 语法

• 标签和属性不区分大小写，推荐小写
• 空标签可以不闭合，比如 input、meta
• 属性值推荐用双引号包裹
• 某些属性值可以省略，比如 required、readonly

（1）标题：h1~h6

（2）列表：ol、ul、li、dl、dt、dd

（3）链接：<a href=""></a>

（4）多媒体：图片：img；音频：audio；视频：video

（5）输入：input的type属性

（6）其他：label、select

（7）文本：p、code、strong、em

1.3 内容划分

1.4 语义化是什么？

• HTML中的元素、属性及属性值都拥有某些含义
• 开发者应该遵循语义来编写HTML
  • 有序列表用 ol；无序列表用 ul
  • lang 属性表示内容所使用的语言
• 谁在使用我们写的 HTML
  • 开发者-修改、维护页面
  • 浏览器-展示页面
  • 搜索引擎-提取关键词、排序
  • 屏幕阅读器-给盲人读页面内容
• 语义化的好处
  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性
• 如何做到语义化？
  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码