前端小零碎|【青训营笔记】

我有一个小胖仔
120 阅读5分钟

【青训营】-前端的一些小概念

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





今天第一天学到的知识点如下：

1.首先什么是前端?

老师的答案：解决图形界面下人机交互的问题。
我的理解是前端是介绍一个事物最前沿的部分，构建一个界面工具来体现产品。
用户对产品的一个直观感受来自于前端

2.谁在使用我们写的HTML

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

3.了解到了一些前端技术

可以使用node.js开发一些服务器端的应用

  • Electron、React Native 开发客户端的一些应用

Electron是使用JavaScript，HTML和CSS构建跨平台的桌面应用程序框架。 [1]  Electron兼容Mac、Windows和Linux，可以构建出三个平台的应用程序。 [1] 

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，支持iOS和安卓两大平台。

  • WebRTC可以进行P2P的多人视频会议

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

  • WebGL做一些比较流畅的3D效果或者游戏

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

  • WebASSEMBLY可以将C++/Rust写的一些代码编译成浏览器里可以运行的代码。

WebAssembly，简称wasm，是一种运行在现代网络浏览器中的新型代码，一种以安全有效的方式运行可移植程序的新技术，主要针对Web平台。

4.一些标签的补充

01-<blockquote>标签

HTML <blockquote> 元素（或者 HTML 块级引用元素），代表其中的文字是引用内容。通常在渲 染时，这部分的内容会有一定的缩进。若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 特性上，若要以文本的形式告知读者引文的出处时，可以通过 <cite>元素。
示例：

天才并不是自生自长在深野荒林里的怪物，是由可以使天才生长的民众产生，长育出来的，所以说没有这种民众，就没有天才。 

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

02- <q>标签 HTML<q>元素元素表明包含的文本是一个简短的内联引用。大多数现代浏览器通过将文本括在引号中来实现这一点。此元素适用于不需要分段的短引用.

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

03-<code标签 HTML <code> 元素呈现一段计算机代码。默认情况下，它以浏览器的默认等宽字体显示。

<p><code>const</code>声明创建一个只读的常量</p>
<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b
</code></pre>

5.一些标签的复习

input，audio，video，textarea属性的作用

01-input

<input type="color">

color.png

 <input type="image" alt="这是一个图片按钮" style="color: red;">

image.png

<input type="text">具有的属性如下图：

text.png

02-video

autoplay: 声明该属性后，视频会尽快自动开始播放，不会停下来等待数据全部加载完成。

autopictureinpicture: 用户在当前页面和另一个页面或应用程序之间来回切换时，会自动切换画中画（picture-in-picture）模式。

controls: 加上这个属性，浏览器会在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。

loop: 布尔属性；指定后，会在视频播放结束的时候，自动返回视频开始的地方，继续播放。

muted: 指明在视频中音频的默认设置。设置后，音频会初始化为静音。默认值是 false, 意味着视频播放的时候音频也会播放。

03-audio

duration只读: 

这是一个双精度浮点数，指明了音频在时间轴中的持续时间（总长度），以秒为单位。如果元素上没有媒体，或者媒体是不可用的，那么会返回 NaN。如果媒体找不到确切的结尾（比如不确定长度的直播流，网络电台，或者是通过 [WebRTC]连接的流），那么这个值将返回 +Infinity。

loop muted 作用与video相似。

avatar
文章
阅读
粉丝