这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
以下为今日课上的笔记内容
一、什么是前端?
1.解决 GUI人机交互问题
2.跨终端
1）PC/移动浏览器
2）客户端/小程序
3）VR/AR等
3.Web 技术栈
我们要解决的是图形界面下的人机交互的问题，无论我们面对的设备是PC浏览器，移动浏览器，APP，小程序，甚至是一些VR的设备，那我们使用的技术站，都是html css javascript，还有HTC网络协议来解决人机交互的问题。
所做一个总结，前端工程师就是使用web技术来解决多端图形用户界面交互问题的。
二、前端技术栈包括什么？
主要的技术分为三层，最基础的是HTML，HTML负责页面结构和内容，页面中我们可以使用CSS来设置页面的样式，比如说：位置，大小，颜色这些信息，我们使用javascript来定义网页的行为，比如说用户点了一个按钮之后，页面该怎么响应，HTMLCSS和javascript都是运行在浏览器里边的，而浏览器是可以通过HTTP协议和服务器进行通信，它把前面前端的这些代码，通过HTTP协议从服务器上去拿到，拿到之后把它渲染成我们看到的页面，浏览器也可以把用户填写的内容，或者用户的一些行为通过HTTP这个协议，提交到服务器端，所以我们说html css javascript和网络协议就构成了前端最基础的一个技术栈。
三、前端应该关注哪些方面?
1）兼容
2）美观
3）性能
4）功能
5）安全
6）无障碍
7）体验
所以我们要做出来好的产品，要学习很多方面的一些东西，那随着新的技术不断的发展，前端现在能做的东西，也已经远远超出了一个简单的范畴。
前端的边界是无止境的，比如说我们可以用nodejs去开发服务器端的一些应用，我们也可以使用election或者react native去开发客户端的应用，我们也可以用web rtc进行在线的传输，实现一个多人的会议，我们也可以用web gl去开发出来一些非常流畅的3D的一些游戏，使用web assembly，可以把C加加或其他的语言编写的一些代码，编译成直接在浏览器里边可以运行的一些代码。
总之，就是前端在这个互联网行业里边，是一个日新月异的一个领域，对我们的技术在不断更新，对我们也要持续的去学习，才能跟上这个技术的发展。
开发环境比较容易上手 浏览器+编辑器 即可。
四、HTML(HyperText Markup Language)
<!doctype html> //使用哪种渲染模式
<html> //根标签
<head> //需要信息但不需要呈现给用户
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body> //需要呈现给用户的信息
<h1>一级标题</h1>
<p>段落内容</p>
</body>
</html>
五、HTML 语法
1.标签和属性不区分大小写，推荐小写。
2.空标签可以不闭合，比如 input、meta。
3.属性值推荐用双引号包裹。
4.某些属性值可以省略，比如 required、readonly。
六、标题 h1~h6(越来越小字体）
代码：（h 表示标题 p 表示内容）
<h1>字体排印学</h1>
<h2>历史</h2>
<p>活字的雏形或可追溯至公元前两千年前后美
索不达米亚文明的乌鲁克和拉尔萨，砖块上面不
均匀的印花被视作有可能是活字思想雏形。</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术，公元868
年的《金刚经》是现存最古老的印刷品之一，使用
的技术即是木雕版印刷。</p>
<h2>应用</h2>
<p>...</p>
代码：(ol表示有序列表，li表示其列表项)（ul表示无序列表，展示时会有小黑点)（dl表示定义列表，dt表示该描述列表的标题，dd表示该描述列表的标题里的内容，dt与dd为多对多的关系）
<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="https://www.bytedance.com/">
字节跳动官网
</a>
<a href="https://www.bytedance.com/"
target="_blank">//不是替换原有页面而是用新窗口打开
字节跳动官网
</a>
多媒体 （img 图片，audio 音频，video 视频，src 地址，alt 当这个图片因为某些原因加载失败或不被加载所展现的替换性文字，width 表示图片的展示宽度 ，controls 默认显示播放空间）
<img
src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9675d7f08fc54c8bb5104f6111755eb4~tplv-k3u1fbpfcp-zoom-1.image"
alt="Metal movable type"
width="400"
/>
<audio
src="/assets/music.ogg"
controls
></audio>
<video
src="/assets/video.mp4"
controls
></video>
八、输入
<input placeholder="请输入用户名">
（placeholder 默认占用符）
<input type="range"> //范围
<input type="number" min="1" max="10"> //数字
<input type="date" min="2018-02-10"> //日期
（type 指定)
<textarea>Hey</textarea>
(textarea 多行输入)
<p>
<label><input type="checkbox" />🍎</label>
<label><input type="checkbox" checked />🍏</label>
</p>
(type="checkbox" 多选择)
<p>
<label><input type="radio" name="sport" />⚽</label>
<label><input type="radio" name="sport" />🏀</label>
</p>
(type="radio" 只能选择一个)
<p>
<select>
<option>🥑</option>
<option>🥩</option>
<option>🥓</option>
</select>
</p>
(select 下拉选择 option 所能选择的选项)
<input list="countries" />
<datalist id="countries">
<option>Greece</option>
<option>United Kingdom</option>
<option>United States</option>
</datalist>
(list 默认属性 option 默认属性的选项，给到提示，更快捷)
九、文本
<blockquote cite="http://t.cn/RfjK00F"> //blockquote 快捷引用或长引用
<p>天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长的民众产生长育出来的，所以没有 这种民众，就没有天才。</p>
</blockquote>
<p>我最喜欢的一本书是<cite>小王子</cite>。</p> //cite 短引用，常表示引用书名，章节...
<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p> //q 短引用，常表示引用的内容 有双引号
<p><code>const</code>声明创建一个只读的常量。</p>
<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre> //code 表示引用代码，长短皆可，字体会不同
<p>在投资之前，<strong>一定要做风险评估</strong>。</p>
<p>Cats <em>are</em> cute animals.</p>
//strong 更加紧急，严重 突出强调 ，em 语气上更加强调的词或句子
十一、内容划分
header 标题：包括大标志、标题、标语，从一个网页到另一个网页保持不变。
nav 导航栏 ：菜单按钮、链接或选项卡表示。
main 主体内容：包含给定网页的大部分独特内容，其代表一个文档，可包括视频，文章，地图等等
article 部分内容：主要是布局文章、内容方面内容。
aside 侧边栏：一些外围信息、链接、引用、广告等。
footer 页脚：通常包含版权声明，参考信息或联系信息。
十二、语义化
1.HTML中的元素、属性及属性值都拥有某些含义
2.开发者应该遵循语义来编写HTML
1）有序列表用 ol;
2）无序列表用 ul。
3.lang 属性表示内容所使用的语言
十三、谁在使用我们写的HTML
1.开发者- 修改、维护页面
2.浏览器- 展示页面
3.搜索引擎- 提取关键词、排序
4.屏幕阅读器- 给盲人读页面内容
十四、语义化的好处
1.代码可读性
2.可维护性
3.搜索引擎优化
4.提升无障碍性
十五、如何做到语义化?
1.了解每个标签和属性的含义
2.思考什么标签最适合描述这个内容
3.不使用可视化工具生成代码
十六、前端 传达内容，而不是样式
