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

一、本堂课重点内容：

本堂课的知识要点有哪些？

认识前端
前端技术栈
前端关注点
前端边界
开发环境
认识HTML
HTML语法
HTML语义化

二、详细知识点介绍：

本堂课介绍了哪些知识点？

认识前端：前端是人机交互的主页面，我们生活中见到的网页都是属于前端范畴的。前端是跨端的，PC端、移动浏览器、客户端、小程序，以及VR/AR都是其载体。
前端技术栈:
HTML——网页内容生成的前端程序语言
CSS——网页样式生成的前端程序语言
Javascript——网页行为操作交互的前端程序语言
他们三者协作通过HTTP协议与服务器端交互，返回页面内容给用户端。

前端技术栈

前端关注点
功能性美观性无障碍安全性性能兼容性体验感
前端边界
NodeJS:运行在服务端的 JavaScript。
Electron:是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。
React native:是一个基于 javascript 的框架。
WEBrtc:Web 实时通信（Real-Time Communication）的缩写，它既是 API 也是协议。WebRTC 协议是两个 WebRTC Agent 协商双向安全实时通信的一组规则。开发人员可以通过 WebRTC API 使用 WebRTC 协议。目前 WebRTC API 仅有 JavaScript 版本。
WebGL:一种帮助我们在不使用插件的情况下在任何兼容的网页浏览器中开发交互式 2D 和 3D 网页效果。
WebASSEMBLY:一个可移植、体积小、加载快并且兼容 Web的全新格式。
开发环境
浏览器：Edge Chrome Firefox Safari
编辑器：VSCode Vim WebStrom
认识HTML
HTML——HyperText Markup Language(超文本语言)
HTML语法
img标签:

<img src = "地址" alt = "替换文本" />

HTML声明及基本结构：

<!-- 文档类型声明，作用告诉浏览器使用哪种HTML版本来显示网页 -->
<!DOCTYPE html>
<!-- 当前文档显示的语言 en英语 zh-CN中文 -->
<html lang="zh-CN">
<head>
    <!-- 字符集 -->
    <meta charset="UTF-8">
    <title>前端与HTML</title>
</head>
<body>
   <h1>前端与HTML</h1>
   <p>段落内容</p>
</body>
</html>

DOM树：是文档对象化模型（Document Object Model）的简称；DOM树是指通过DOM 将HTML 页面进行解析，并生成的HTML tree 树状结构和对应访问方法。

标题标签：

<h1>一级标签</h1> 
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4> 
<h5>五级标签</h5>
<h6>六级标签</h6>

实现效果：

列表标签：

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

<h2>购物清单</h2>
无序列表
<ul>
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>

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

实现效果：

链接标签：

a标签
href:表示要跳转到哪个页面（必填）
target:表示窗口在哪里打开
    _blank 在新的签页中打开
    _self  在自己的签页中打开
<a href="index.html" target="_blank">点击跳转到主页面</a>
<a href="https://www.bytedance.com" target="_self">点击跳转到字节跳动</a>

<img
  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg"
  alt="Metal movable type"
  width="400"
/>
音频文件
<audio 
  src="/assets/music.ogg"
  controls
></audio>
视频文件
<video
  src="/assets/video.mp4"
  controls
></video>

实现效果：

输入标签：

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