前端语言串讲｜青训营笔记

我喝椰汁
104 阅读6分钟

前端基础第一节课：前端语言串讲

本次课程主要内容为：

  1. 前端语言的基本能力
  2. 前端语言的协作配合
  3. 你不知道的HTML5
  4. 拓展分享

01.前端语言的基本能力 HTML＋CSS+Javascript 前端三件套

image.png HTML：一种超文本标记语言。HTML官方定义为超文本标记语言，全称为Hypertext Markup Language。HTML是Web的核心语言，它是使用标记来描述网页的一种语言，它的语法简单、结构清晰。

所谓HTML页面就是我们常说的网页，也会称之为HTML文档。HTML文档中包含HTML标签和文本内容，浏览器会读取HTML文档，并将它们以网页的形式呈现给用户。在HTML页面中可以包含图片、文字、声音、视频、动画、超链接等等。

在网页文档中标签是构成网页的基本单位，也被称为标记、元素，是由尖括号包围起来的关键词，HTML标签分为单标签、双标签，单标签是在开始标签中直接闭合，而双标签由开始标签和结束标签组成，在标签的中间填入内容，大部分的HTML标签可以添加属性用以修饰该标签。

CSS：层叠样式表，网站的外表和体验最重要的一个工具。CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等。CSS 可以用于给文档添加样式 —— 比如改变标题和链接的颜色及大小。它也可用于创建布局 —— 比如将一个单列文本变成包含主要内容区域和存放相关信息的侧边栏区域的布局。它甚至还可以用来做一些特效，比如动画。

JavaScript：网页交互，处理复杂函数，可以保证更高的效率以及可用性。JavaScript 是一种脚本编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新——交互式的地图、2D/3D 动画、滚动播放的视频等等——JavaScript 就在其中。

image.png

这三个语言同等重要，类似于人的骨骼、皮脑、肌肉，缺一不可。

HTML：

最基本的语言。用<>包括起来可以称为标签，浏览器中称为元素。

image.png

全部标签分类：

  • 文档型

  1. <!DOCTYPE>

  2. <head>

  3. <body>

  • 闭合型
  1. 闭合标签<p></p>
  2. 空标签 <br> <img> <input>
  • 换行型
  1. 块级标签 <div> <h1><h2>...<h6>
  2. 行内标签 <span> <a>
  • H5新元素
  1. 语义化标签
  2. 媒体标签<vadio><audio><embed>
  3. 表单标签<input type="date"> <input type="color">
  4. 功能标签<canvas> <progress>

CSS:

语法简单，但使用较难，需与html打好配合。

image.png

JavaScript：

(1)借鉴C语言的基本语法

(2)借鉴Java语言的数据类型和内存管理的地位

(3)借鉴Scheme语言，将函数提升到"第一等公民”(first class)

(4)借鉴Self语言，使用基于原型 (prototype) 的继承机制

JavaScript在HTML中的应用 image.png

image.png

image.png

image.png

HTML在JavaScript中的应用

image.png

CSS在JavaScript中的应用 image.png

image.png

HTML5:

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。 HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。

image.png

HTML5语义化标签： <header> <nav> <main> <article> <section> <aside> <footer>...

HTML5语义化标签的推出很好的解决了满屏的 div 布局，语义化顾名思义就是能让人一眼就看出来每一个标签的作用和含义，使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。

HTML5表单增强： submit radio checkbox 下拉框...

HTML存储能力：

localStorage 和 sessionStorage 

客户端存储数据的两个对象为：

  • localStorage：用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
  • sessionStorage：用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

少见的有IndexedDB是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs）。该 API 使用索引实现对数据的高性能搜索。虽然在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。速度不理想但类似一个数据库的方式，为开发者提供很多访问数据的便利方式。

PWA是一个新的前端技术，全称：Progressive Web App，这是一个渐进式的网页应用程序。结合了一系列现代web技术，在网页应用中实现和原生应用相近的用户体验。

HTML——PWA AMP

PWA的三个关键词：

Reliable(可靠的)： 当用户从手机屏幕启动时，无需考虑网络状态，可以立刻加载出PWA

Fast(快速的)： 加载速度快

Engaging(可参与的)： PWA可以添加在用户的主屏幕上，无需从应用商店里下载，他们通过网络应用程序Manifest file提供类似于APP的使用体验（android上可设置全屏显示，由于Safari支持度的问题ios不可以），可以进行“推送通知”

HTML——audio

<audio>元素用于在文档中嵌入音频内容。<audio> 元素可以包含一个或多个音频资源，这些音频资源可以使用 src 属性或者<source>元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用MediaStream将这个元素用于流式媒体。

HTML——Web Worker

Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，他们可以使用XMLHttpRequest执行 I/O (尽管responseXML和channel属性总是为空)。一旦创建，一个 worker 可以将消息发送到创建它的 JavaScript 代码，通过将消息发布到该代码指定的事件处理程序（反之亦然）。

HTML——web component 可以自定义标签

SVG&Canvas

avatar
文章
阅读
粉丝