前端

什么是前端？

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

前端技术栈

HTML（内容）网络协议
CSS（样式） <============> 服务器端
JavaScript（行为）

前端应该关注哪些方面？

功能：产品能解决什么问题，有没有满足用户某些方面的需求
美观：界面美观
无障碍：网站是否对于所有人都可用，例如：色盲症等
安全：产品能否保证用户数据的安全
性能：产品的速度是否够快，用户体验是否够好
兼容性：产品是否能在各种设备上正常使用，例如：PC 端、移动端

前端的边界

随着技术的发展，前端能够做得已经远远超出了页面这个简单的范畴。

NodeJS：开发服务端的应用
Electron、React Native：开发客户端的应用
WebRTC：P2P 的在线传输，开发多人会议应用
WebGL：开发 3D 游戏
WebASSEMBLY：把 C++ 或其他语言编写的代码编译成能够直接在浏览器上运行的代码

开发环境

浏览器：IE / Edge、Chrome、Firefox、Safari

编辑器：VSCode、Vim、WebSrorm

HTML

HTML是什么？

HTML（HyperText Markup Language）：超文本传输协议。

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

Markup Language：标记语言，例如：<h1>文章标题</h1>

可以在标签上添加一些属性，例如：<img src="photo.jpg" />

src：属性名
photo.jpg：属性值

完整的HTML文件例子

<!-- doctype：标识当前的页面是什么版本 -->
<!doctype html>
<!-- html：文档根标签 -->
<html>
  <!-- head：页面的元数据 -->
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <!-- body：页面的内容 -->
  <body>
    <h1>一级标题</h1>
    <p>段落内容</p>
  </body>
</html>

浏览器解析

浏览器将代码解析生成 DOM 树

HTML语法

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

标题 h1~h6

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

列表 ol、ul、dl

ol：有序列表
```
<ol>
  <li></li>
</ol>
```
ul：无序列表
```
<ul>
  <li></li>
</ul>
```

dl：自定义列表

<dl>
  <!-- dt：列表项标题 -->
  <dt></dt>
  <!-- dd：列表项内容 -->
  <dd></dd>
</dl>

链接 a

<!-- 替换本窗口 -->
<a href=[url]></a>

<!-- 开启新窗口 -->
<a href=[url] target="_blank"></a>

多媒体 img、audio、video

<!-- 图片标签 -->
<img src=[url] />

<!-- 音频标签 -->
<audio src=[rul] countrols></audio>

<!-- 视频标签 -->
<video src=[rul] countrols></video>

输入 input

<!-- 输入框 -->
<input type=[类型]>

<!-- 多行文本框 -->
<textarea></textarea>

<!-- 下拉框 -->
<select>
  <option></option>
</select>

<!-- 输入提示框 -->
<input list=[列表名] />
<datalist id=[列表名]>
  <option></option>
</datalist>

文本 blockquote、cite、q、code、pre、strong、em

<!-- 块引用：一段话 -->
<blockquote cite=[url]></blockquote>

<!-- 短引用：几个字（作品名等） -->
<cite></cite>

<!-- 前文引用 -->
<q></q>

<!-- 代码引用 -->
<code></code>

<!-- 保持代码缩进 -->
<pre></pre>

<!-- 加粗 -->
<strong></strong>

<!-- 斜体 -->
<em></em>

内容划分

语义化是什么?

HTML 中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写 HTML
- 有序列表用 ol；无序列表用 ul
- lang 属性标识内容所使用的语言

谁在使用我们写的HTML？

开发者——修改、维护页面
流览器——展示页面
搜索引擎——提取关键词、排序
屏幕阅读器——给盲人读页面内容

语义化的好处

代码可读性
可维护性
搜索引擎优化
提升无障碍性

如何做到语义化?

了解每个标签和属性的含义
思考什么标签最适合描述这个内容
不使用可视化工具生成代码

总结

前端从最初的做网页，到现在的各路开花，已经能够实现的功能远远不止于网页，在服务端、桌面端、移动端都有一席之地，因此，作为前端工程师，我们的眼界以及思维一定不要局限于做网页，而要跟随技术的发展，不断学习，尽可能地提升自己的能力。

关于标签语义化：用对语义化 > 不用语义化 > 用错语义化。

前端与HTML | 青训营笔记

前端