本节课的两个基本问题：“前端要解决的基本问题”及“什么是 HTML”
1.前端要解决的基本问题
首先，什么是前端？
- 解决GUI人机交互问题
- 跨终端
- Web技术栈：HTML（最基础，负责基本内容）；CSS（设计样式、大小、颜色、位置等信息）；Javascript（定义用户的行为）
前端应该关注哪些方面？
- 功能：产品解决了用户的需求吗
- 美观
- 无障碍 access ability
- 安全
- 性能：速度、流畅、体验
- 兼容性：在各种设备上使用
- 体验：前端对于用户体验来讲很重要
前端的边界？
- node js
- ELECTRON
- React Native
- Web RTC
- WebGL
2. 什么是HTML？
HyperText Markup Language
- HyperText：图片、标题、链接、表格
- Markup Language：文章标题
- html：页面设置
- head：页面中需要这个信息但又不需要呈现给用户
- body：真正需要呈现给用户的
HTML语法：
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如input、meta
- 属性值推荐用双引号包裹
- 某些属性可以忽略
排序列表
- ol：order list 有序列表，有一二三
- ul：unoder list 无序列表
- dl：definition list 定义列表，多对多
链接
a链接表示，跳转页面
输入
input标签
- placeholder=" "
- type="range"
语义化是什么？
- HTML中的元素、属性以及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
谁在使用我们写的HTML
- 开发者：修改、维护页面
- 浏览器：展示页面
- 搜索引擎：提取关键词、排序
- 屏幕阅读器：给盲人读页面内容
语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
如何做到语义化？
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
