1.1 前端
1.1.1 前端的相关概念
- 解决GUI的人机交互问题。无论是PC、手机、app还是小程序，甚至是VR和AR
- 前端工程师使用web技术解决多端图形用户交互问题的开发人员
1.1.2 前端技术栈
基本技术：
HTML，CSS，JavaScript (都在浏览器上运行——> 通过网络协议请求/提交数据——> 服务器
HTML，CSS，JavaScript <—— 通过网络协议返回数据<—— 服务器
1.1.3 前端要注重的方面
除了技术，前端开发中还应该注意：
- 功能：产品能解决的问题，有没有满足用户的需求。
- 美观：界面是否好看，
- 无障碍：是否考虑特殊人群(例如红绿色盲)
- 安全：用户数据的安全，防止漏洞
- 性能：网站速度是否够快，动画是否流畅，
- 兼容：是否适配多种屏幕
前端直接与用户相接，直接影响产品体验，重要性不言而喻
1.1.4 前端的边界
随着技术发展，前端的范畴早已超出了单纯的界面范畴，比如：
- 使用nodejs构建服务器端应用
- 使用Electron开发客户端应用
- 使用webRTC进行P2P传输,实现多人联机
- 使用webGL开发3d游戏
- 使用WebASSEMBLY把C++/rust编写的代码转为直接在浏览器运行的代码 总之，前端是一个技术发展迭代快速的行业，我们只有不断学习和更新技术才能跟上时代的步伐
1.1.5 前端的开发环境
- 浏览器：IE/Edge、Chrome、Firefox、Safari等等
- 编辑器：VSCode、Vim、WebStorm等等
只要有一个浏览器和一个编辑器，我们就能进行前端开发，这里也可以看出前端的入门门槛比较低。
1.2 HTML
1.2.1 是什么
HTML（超文本标记语言——HyperText Markup Language），其中含义如下：
- 超文本：不是简单的、纯文字的东西，包括：图片、链接、标题和表格等等更丰富的格式
- 标记：使用标签：例如
<h1>我喜欢你</h1>、<img src="photo.jpg"/>
标签上可以设置属性，以键值对的形式出现。注意，有些标签不需要在标签直接拿写内容，所以直接设置成了单标签
1.2.2 HTML的结构
<!DOCTYPE html>: 标记当前使用的HTML版本，浏览器会根据其来选择渲染方式<html></html>：文档的根标签。所有标签都写在这里面<head></head>: 存放各类元数据（描述 HTML 的数据，比如作者和描述文档的重要关键词）等信息，但不会展现给用户。<body></body>：存放真正展现给用户的内容
1.2.3 HTML语法
- 标签属性不区分大小写但推荐小写
- 空标签可以不闭合，例如input
- 属性值使用双引号包裹
- 某些属性值可以忽略，如required，readonly
1.2.4 HTML标签
标题
h1~h6 一级标题到六级标题，从大到小
列表
- 有序列表 ol>li 展示出来会有数字
- 无序列表 ul>li 展示出来会有黑点
- dl标签，里面包括dt(标题)，dd；
这种列表类似于excel表格，dl是工作薄，dt是标题，dd是单元格
链接
a标签：<a href=""></a>。
- 链接最重要的属性是herf，代表链接跳转到的地址
- 设置target属性为_blank，点击链接会新开一个页面而不是替换原有的页面
媒体属性
img、audio、video。相关属性：
- alt：当图片加载失败时显示的文字
- controls：音频或视频是否显示控件
...等等
输入
input标签,相关属性：
- type:指定input类型。默认为text
| 值 | 属性 | 描述 |
|---|---|---|
| range | 滑块条 | 无 |
| number | 数字输入框 | 右侧显示上下可调节的按钮 |
| date | 日期 | 会弹出日期选择框 |
| checkbox | 多选框 | 无 |
| radio | 单选框 | 无 |
- placeholder：指定未输入时的文本提示
textarea文本框，它可以输入更多的文本信 select下拉多选择，子元素为option，为用户提供选项
文本类标签
| 标签 | 含义 | 补充 |
|---|---|---|
| blockquote | 长引用。 | 可以使用cite指定引用源，内部嵌套要引用的内容 |
| cite | 短引用 | 可以引用标题或者书名 |
| q | 为文字两头包上双引号 | 常常表示具体引入的内容 |
| code | 表示代码 | 可长可短，引用多行代码需要在code标签外部包裹pre标签 |
| strong | 加粗 | 主要用于语气的强调 |
| em | 斜体 | 主要 用于重读 |
内容划分标签
- header - 头部
- nav - 导航
- main - 主要内容部分
- aside - 侧边栏
- article - 文章内容，可以有多个
- footer - 底部导航栏
1.2.5 HTML语义化
- HTML中的元素、属性及属性值都有某种含义
- 开发者应该遵循语义来编写HTML
好处
- 提高代码可读性
- 提高可维护性
- 有利于搜索引擎优化
- 提升无障碍性
谁在使用HTML
- 开发者——修改、维护页面：要便于团队合作
- 浏览器——展示页面：要利于根据代码渲染页面
- 搜素引擎——会提取关键词或标签做推荐排序，要利于搜索引擎优化
- 屏幕阅读器——便于用户阅读，体验
可见，正确使用语义化可以使得各方便利，优化产品。
原则
传递内容，而不是样式。
例如如果你想写一个标题，就直接使用h1标签，不要写一个p标签再写样式放大它。
怎么做到语义化
- 了解每一个标签和属性的含义
多看MDN，W3C
- 思考哪个标签最合适
- 不建议使用可视化工具直接生成代码，但可以使用编辑器的插件进行辅助
没办法控制生成的标签
1.3总结感悟
HTML是页面的结构，也是人体的骨骼，想要做好一个页面深入了解HTML是不可避免的。这节课学习了的语义化和一些常用标签都会在往后的使用学习生活中反复使用。
