这是我参与「第四届青训营 」笔记创作活动的的第1天
一、本堂课重点内容:
1. 简述了前端是什么，用到了哪些技术?
HTML(内容)，CSS(样式)，JavaScript(行为)
2. 前端开发应该注意哪些方面？
美观，安全，兼容，功能，体验，性能，无障碍
3. 当下前端有哪些主流的前端框架和技术？
Node.js，ELECTRON，React Native，WebRTC，WebGL，WebASSEMBLY
Node.js
Node.js也称Node，是一个可以让JavaScript运行在服务端的平台。它可以让JavaScript脱离浏览器的束缚运行在一般服务器环境下。
ELECTRON
ELECTRON是利用web前端技术进行桌面应用开发的一套框架，能够开发兼容多平台的桌面应用，相比使用其它框架进行开发，开发成本相对较低。
React Native
React Native是一款开源的跨平台移动应用开发框架，语法基于React，React中需要使用JSX语法， JSX是对JavaScript的扩展。JSX可以将CSS，HTML，表达式进行一起书写，简化了HTML代码。
WebRTC
WebRTC是一项网页实时通讯技术，是一个支持网页浏览器进行实时语音对话或视频对话的API。
WebGL
WebGL是一项用来在网页上绘制和渲染复杂三维图形，并允许用户与之交互的技术。
WebASSEMBLY
WebASSEMBLY被称作是一种浏览器字节码技术，它具有良好的跨平台特性，其他语言代码可通过它编译成浏览器能够运行的代码。
二、详细知识点介绍：
HTML一些扩展标签：
媒体标签
- 音频
<audio src="music.mp3" controls> </audio>
- 视频
<video src="video.mp4" controls> </video>
**
对于媒体标签，controls属性表示是否显示控制面板
输入标签
- 普通输入框
<input placeholder = "请输入用户名" />
- 滑块
<input type = "range" />
- 数字增减框
可指定最小值和最大值
<input type = "number" min="1" max="10"/>
- 日历
<input type = "date">
- 可选输入框
list的值是datalist的id
<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>
显示为
`
`天才并不是自生自长在深林荒野里的怪物
-
短引用
<cite>小王子</cite>显示为：小王子 -
引用一段话
<q>字符串是不可变常量</q>显示为：“字符串是不可变常量”
代码标签
-
代码
<code>const add = (a,b) => a + b;</code>显示为：const add = (a,b) => a + b; -
代码块
pre表示预格式化文字，保留换行，空格等
<pre><code>
const add = (a,b) => a + b;
const multiply = (a,b) => a * b;
</code></pre>
显示为：
const add = (a,b) => a + b;
const multiply = (a,b) => a * b;
强调标签
-
粗体
<strong>一定要做风险评估</strong>显示为：一定要做风险评估 -
斜体
<em>are</em>显示为：are
HTML语义化
从使用HTML者的角度而言，有其他开发者，浏览器，搜索引擎以及屏幕阅读器等。 做到语义化能够方便其他开发者去修改，维护页面；同时也便于搜索引擎去提取关键词、 进行排序推荐。
什么是语义化?
HTML中元素、属性以及属性值都拥有某些含义，开发者应该遵循语义来便携HTML
语义化的好处
基于HTML不同使用者，语义化具有代码可读性，可维护性，搜索引擎优化，提升无障碍性等好处。
如何做到语义化?
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
三、实践练习例子：
浏览器翻译：
通过语义化，能够让浏览器对页面准确的进行翻译
搜索引擎关键词提取：
搜索引擎在建立索引时，标题和正文的权重会有所不同。通过语义化，能够更好的让搜索引擎提取关键词。
四、课后个人总结：
通过课程的学习，我了解到前端的一些主流技术，知道它们大概是做什么的，也方便以后对这些内容进行深入学习；同时也收获到了HTML的一些规范，像语义化等。虽然课程中只提及了部分的HTML标签进行介绍，但老师也建议我们课下通过MDN或W3C文档补充HTML的详细规范和标签使用。
五、引用参考：
- 引用位置：百度百科，简书，CSDN，博客园
- 引用内容：前端主流框架和技术概述
