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

一、本堂课重点内容：

前端的概念、HTML基本语法、前端语义化

二、详细知识点介绍：

1. 前端

1.1 什么是前端？

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

1.2 前端技术栈

通过三件套（JavaScript + css + html），通过网络协议与服务器端进行通信。

1.3 前端应该关注哪些方面？

美观、安全、功能、兼容、体验、性能、无障碍

1.4 前端的边界

Node.js

Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。

Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。

electron

兼容：Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。

开源：Electron是一个由OpenJS基金会和一个活跃的贡献者社区管理的开源项目。

跨平台：Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。

React Native

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

Web RTC

WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。

WebGL

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

Web ASSEMBLY

混合JavaScript和另外底层语言编译的模块，共同运行。将js的高级，易用及C/C++的高效底层优势结合起来。

1.5 开发环境

浏览器：IE（已寄）、Edge、Chrome、Firefox、Safari

编辑器：VSCode、Vim、WebStorm

2. HTML

HTML全称 HyperText Markup Language

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

Markup Language：<tags></tags>

2.1 语法

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

2.1.1 h1 ~ h6 标题

h1最大，h6最小

<h1>字体排印学</h1>
<h2>历史</h2>
<p>活字的雏形或可追溯至公元前两千年前后美
索不达米亚文明的乌鲁克和拉尔萨，砖块上面不
均匀的印花被视作有可能是活字思想雏形。</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术，公元868
年的《金刚经》是现存最古老的印刷品之一，使用
的技术即是木雕版印刷。</p>
<h2>应用</h2>
<p>...</p>

2.1.2 三种列表

2.1.2.1 有序列表 ol

<h2>世界电影票房排行榜</h2>
<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>

2.1.2.2 无序列表 ul

<h2>购物清单</h2>
<ul>
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>

2.1.2.3 定义列表

dl标签是HTML语言里的一个元素标签，dl是definition lists的英文缩写，中文是"定义列表"的意思。dl标签是成对出现的，以<dl>开始，</dl>结束。

<h2>霸王别姬</h2>
<dl>
  <dt>导演：</dt>
  <dd>陈凯歌</dd>
  <dt>主演：</dt>
  <dd>张国荣</dd>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
  <dt>上映日期：</dt>
  <dd>1993-01-01</dd>
</dl>

2.1.3 a标签

target="_blank" 代表新建窗口跳转

<a href="https://www.bytedance.com/">
  字节跳动官网
</a>

<a href="https://www.bytedance.com/" target="_blank">
  字节跳动官网
</a>

2.1.4 图片、音视频

2.1.4.1 img 图片

alt属性中的文字会在图片加载失败时出现

<img
  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg"
  alt="Metal movable type"
  width="400"
/>

2.1.4.2 audio 音频

<audio 
  src="/assets/music.ogg"
  controls
></audio>

2.1.4.3 video 视频

<video
  src="/assets/video.mp4"
  controls
></video>

2.1.5 input 标签

2.1.5.1 文本框

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

<input type="range">

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

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

2.1.5.2 复选框

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

2.1.5.3 单选框

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

2.1.6 textarea 文本域

<textarea>Hey</textarea>

2.1.7 html5新标签

为什么要使用H5新标签？为了语义化。

2.1.7.1 select 选择

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

2.1.7.2 datalist

<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。

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

Blockquote 对象代表着一个 HTML 引用(blockquote)块元素。

<blockquote> 标签定义摘自另一个源的块引用。

一个 <blockquote> 元素的内容通常展现为一个左、右两边进行缩进的段落。

在 HTML 文档中的每一个 <blockquote> 标签创建时，都会创建一个 Blockquote 对象。

<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>

2.2 布局

2.3 语义化

2.3.1 什么是语义化

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

2.3.2 HTML的使用者

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

2.3.3 语义化的好处

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

2.3.4 如何做到语义化

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

三、课后个人总结

基本上都学过，就当复习了。唯一一个没见过的是那个定义列表，看来自己还有很多知识盲区。

PS: 想直接快进到TypeScript和React

前端与HTML｜ 青训营笔记