大前端趨勢分析14 編程語言 HTML Tag Attribute Video Audio Canvas Label Button Context2D

大家好，让我们继续谈论大前端技术的趋势。 在上一个视频中，我们谈到了 WebAssembly 。 我在本节中添加了一些编程语言。 您可以看到它现在支持的编程语言并不是全部。 您可以直接将其他编程语言转换为 WASM 。 WASM 可以由您当前的 JavaScript 调用。 你可以直接使用它。 这是一种逻辑关系。 在本视频中，我们将讨论 HTML 。 前端网页开发三款车，HTML，CSS 和 JavaScript 。 以上都是 JavaScript 和 TypeScript 。 我们可以回到 JavaScript 。 我们还可以将 WASM 返回到 JavaScript 。 这是合乎逻辑的，对吧 ？ 通过 JavaScript 传输一些 WASM 接口是没有问题的。 让我们进入 HTML 。 我们主要看 HTML 中需要注意的内容。 首先，让我们想想 HTML 是什么意思。 它指的是我们的内容。 它通常是一个标签。 我们用什么 ？ HTML 是根，对吗 ？ HTML 是一个标签。 还有什么? 有一具尸体，对吧 ？ 通常有一个头，对吗 ？ 我们还需要注意什么 ？ 可能有一些标题等。 我们可以设置这些。 在头之后，我们需要一个脚本，对吗 ？ 我们有一些逻辑。 我们可以把它放进去。 例如, 当前单页应用通常具有索引。 你可以在里面放一些三元组。 这是旧的工作方式。 如果您现在使用它，则可以在 package. js 中安装 NodeModules 。 就这样. 这是我们在 HTML 中可能会注意的一些语言。 另一个是风格，对吧 ？ 您定义了一些样式。 你可能需要这个。 此样式可能是块。 这是一个代码块。 它直接插入 HTML 。 你可以做一个链接。 文件链接。 相对路径或绝对 HTML 或 HTTP 路径是好的。 这是风格。 我们现在在这里。 另一部分在里面。 当我们进入下一部分时，我们将讨论 CSS 。 我们可以注意这部分。 例如，我们把它放在身体里。 它必须在身体上。 我们进去后，要注意元素。 基本上，我们不关心后面的部分。 我们将讨论元素。 例如，我们经常使用组。 我们使用哪些其他元素 ？ 跨度，对吗 ？ 我们可以用这个来输入一些文本。 我们使用什么列表 ？ OLL, 对吧? 我们将这些用于列表。 OLL 是订单。 ULL 是为... 里面是李。 我们可能需要了解这些列表。 我们经常使用的标签有哪些 ？ 你可以考虑一下. 因为这些标签是我们用的。 我们可能会注意它。 还有一些我们用作组件的标签。 这些是 HTML 中的一些基本元素。 你可以考虑这个名单。 我们可能无法在实际操作中使用它。 对吧? 然后你想到巴顿。 我们在上面放了一个按钮。 这是它的基本要素。 您可以注意复选框。 然后会有一个标签。 这些标签具有代表性。 我们现在将谈论他们。 除了这些标签 ， 我们还可以在每个标签中添加什么 ？ 属性。 我们把它们放在同一层。 没问题. 当我们添加标签时 ， 我们可以修改一些属性。 这些属性 … 例如 ， 我添加了一个类。 添加样式。 修改标记。 更改背景颜色等。 这是属性的概念。 它与标签不一样。 在 HTML 中 ， 我们可能会注意画布。 这是干什么用的 ？ 是用来渲染的. 标签现在不是一些标准元素吗 ？ 有些内容是标准的。 如果我们注意画布 ， 它可以做一些定制。 例如，画一条线。 画一个圆圈。 你可以画一条折线。 它必须需要一个画布元素。 什么是 canvas ？ Context2D 。 我们需要获取画布元素。 我们需要获取 context2D 实例。 它被称为 context2D 。 当然，对于不同的平台可能会有所不同。 在单页应用程序中可能会有所不同。 但现在, 可以使用 context2D 。 你可以画一条线后，你得到它。 画一个矩形。 您可以设置背景颜色。 您可以设置笔触颜色。 你可以添加一些东西。 我们可以在这一层画一条线。 Then, 画一条线。 当然, 有许多风格的线条。 我们不需要全部检查。 它是一个矩形。 这是一个基本要素。 显示文本没有问题。 您可以绘制文字。 我们在画布上关心什么 ？ 当我们画画的时候, 例如, 我们关心的是改造。 C5 是当前的。 你在上面添加了许多样式和颜色。 你可能会想, 在我处理这些颜色之前, 我应该保存当前的吗 ？ 保存当前状态。 有一种风格。 你画完之后, 您将恢复当前状态。 你需要改头换面。 在设置新样式之前，将恢复样式。 这是一个非常有用的 API 。 你画一个红色的圆圈。 你把它设置为红色。 在你开始之前, 保存画布。 你可以重新启动它。 你可以继续画画。 我们可能会关心重新设计。 让我想想. 风格是关于你画的。 你可以画一些很酷的东西。 它可能需要数学知识。 画布可以是图表的补充。 图表中有一条折线。 有些客户想这样画一条线。 在这种情况下, 你需要得到线的坐标。 X 和 Y 坐标。 你可以画线的画布。 您可以将画布用作元素。 您可以将其用作标签。 获取标签实例后 ， 你可以得到 context2D 。 你可以渲染它。 让我们想想一些常用的标签。 我想播放一段视频。 我怎么玩 ？ 我使用视频。 我犯了个错误. 我添加了一个标签。 它在哪里 ？ 它可能需要时间来渲染。 我在标签上添加了一个视频。 给你. 对于视频 ， 如果你想播放视频 ， 我们在乎什么? 它需要传递一个 URL 。 URL 可以是相对路径或绝对路径。 它可以是 https 。 你可以给它一个标签。 它有一个 src 属性。 你可以给它。 你需要提到的形象。 图像是 EMG 。 我们写一个图像。 这个标签也是常用的。 你想展示一张照片。 这是必须的。 你需要一个音频。 你想演奏一首歌 ， mp3. 您可以使用音频标签。 对于一些直播平台 ， 你需要一个视频在网页上做直播。 在你上传视频之前, 你需要展示一张照片。 你需要使用图像。 我添加了图片的报价。 标签是 emg 。 我想一些其他的标签，我们可以使用。 事实上, 这些标签的一些特征 ， 包括渲染 ， 可以打包在一起。 我们可以把它理解为一个组成部分。 However, 它的成分比较轻。 你可能不知道。 因为它是由 html 带来的。 你可能不太注意它。 你可能没有意识到它是一个组件。 它与我们的组件基本相同。 在实际使用 html 时, 你可以把一个团队放在一个团队里。 你需要能够建立一个团队。 我们正在谈论基本元素组件。 如果你成立了一个团队 ， 这可能是一个非常复杂的 ， 和一些兼容的组件。 我们不会谈论它。 在编程中 ， 我们主要使用 html 来渲染内容。 这也是根据我们的具体场景。 我们要如何使用它 ？ 一般来说, html 必须用作一般输入。 在单页应用程序中 ， 这是一个一般的输入。 里面有一个根。 在根内 ， 有一些子组件。 每个子组件都有自己的 html ， 然后是 CSS ， JavaScript 逻辑层, etc. 有一个丰富多彩的网站程序。 好吧，让我们先谈谈它。 已经 12 分钟了. 我们将在这里讨论 html 。 我觉得几乎是一样的。 我们在工作中使用的内容也几乎相同。 有时你可能需要一些特别的东西。 例如，有时您使用一个小标签。 其中一些组件名称可以由我们自己定义。 你也可以说 html 文件系统本身有很多。 如果你需要的话, 你可以跟着它。 好的，这个视频将在这里结束。 下次见.