这是我参与「第五届青训营」伴学笔记创作活动的第 1 天

本节课所学内容

什么是前端？
前端的技术栈和边界
前端的关注点
HTML基本语义标签

何为前端？

前端，即网站前台部分，运行在PC端、移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5、CSS3、前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验。

前端解决 GUI 人机交互问题，它可以跨终端，不仅可以实现PC/移动浏览器的效果，还可以在客户端、小程序以及 VR/AR 做出实现。

前端技术栈和边界

技术栈

前端的代码主要由基本的 HTML、CSS、JavaScript 实现效果，并通过 “网络协议(HTTP)” 实现与服务端的联系，通过访问获取服务端的数据实现页面数据的动态效果。

HTML 负责页面的内容结构，CSS 负责页面的样式，Javascript 负责页面元素的行为。

边界

现在前端不仅仅是网页的范畴，比如：

        1. 使用 Node.js 开发服务端的应用
        2. 使用 Electron 或者 React Native 开发客户端的应用
        3. 使用 WebGL 开发3D游戏
        4. 使用 WebAssembly 将其他的语言转为可在浏览器中运行的代码
        ......

前端的关注点

功能：做出一个产品，它主要解决的问题以及是否满足用户需求
美观：网站界面是否美观
无障碍：网站是否适合所有人使用，比如有色盲症的用户
安全：是否能保证所有用户数据的安全
性能：网站的流畅度，用户体验放在第一位
兼容性：网页是否适配所有设备

HTML

HyperText Markup Language，超文本标记语言。超文本，顾名思义，不是简单的纯文本，它包括图片、标题、链接、表格等。通过不同的标签标记不同的内容，浏览器能够识别这些标签并渲染出最终效果。

简单的HTML代码：

<!doctype html> 表示当前 HTML 文件使用的 HTML 版本，浏览器会根据该标记决定渲染模式。如果没有该标记，浏览器会以默认的渲染模式渲染文件。

<html></html> 是文件的跟标签，其他所有的标签都会写在该标签里。

<head></head> 存储一些页面的元信息，标题、编码格式等等

<title></title> 页面的标题信息

<body></body> 标签内编写展现给用户的内容，如 <h1> 标题，<p> 段落

浏览器得到 HTML 文件后会对文件内容进行解析，将解析的结果生成 DOM 树。

<input placeholder="请输入用户名">

<input type="range">

<input type="number" min="1" max="10">

<input type="date" min="2018-02-10">

<textarea>Hey</textarea>

<p>
  <label><input type="checkbox" />🍎</label>
  <label><input type="checkbox" checked />🍏</label>
</p>

<p>
  <label><input type="radio" name="sport" />⚽</label>
  <label><input type="radio" name="sport" />🏀</label>
</p>

<p>
  <select>
    <option>🥑</option>
    <option>🥩</option>
    <option>🥓</option>
  </select>
</p>

<input list="countries" />
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>

文本相关

<blockquote cite="http://t.cn/RfjKO0F">
  <p>天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。</p>
</blockquote>

<p>我最喜欢的一本书是<cite>小王子</cite>。</p>

<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>

<p><code>const</code>声明创建一个只读的常量。</p>

<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>

<p>在投资之前，<strong>一定要做风险评估</strong>。</p>

<p>Cats <em>are</em> cute animals.</p>

内容划分

<header>
  <nav></nav>
</header>
<main>
  <article></article>
  <article></article>
</main>
<aside></aside>
<footer></footer>

语义化

指用合理HTML标记以及其特有的属性去格式化文档内容。

好处：1. 代码可读性高 2. 可维护性高 3. 有利于 SEO 4. 提升无障碍性

总结

通过整节课的学习，了解到

如今的前端已不再是简单的网页范畴，它可以涉及到移动端App、客户端App、服务端应用以及 AR/VR 等，应用范围更宽更广。
浏览器通过解析 HTML 文件中的不同标记渲染不同的内容。
开发过程中应该遵循 语义 来编写 HTML，比如，有序列表用 ol，无序列表用 ul。

前端与HTML｜青训营笔记