前端与 HTML | 青训营笔记

462 阅读3分钟

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

本次课程的知识点为:

  1. 前端工作的定义
  2. 前端技术栈拆解与分析
  3. HTML作用解析
  4. HTML语义化

1.前端工作的定义

课堂中给出了 “使用web技术栈解决多端图形用户界面交互的问题” 的简洁定义。

而我对于前端工作有一个通俗的定义:
前端工程师需要在合适的时间处理后端工程师提供合适的数据并将其布置在合适的位置展示。

程序猿.png

2.前端技术栈拆解与分析

前端最基础的技术栈:

  • 前端基础的三件套(HTML+CSS+JavaScript)
  • 网络协议(http和WebSocekt等)

随着前端技术的快速发展还包括了以下等多种技术: 技术栈.png

  • node.js

    • 是一个开源和跨平台的JavaScript运行时环境
  • Electron

    • 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架
  • React Native

    • 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架
  • WebRTC

    • 让Web开发者能够基于浏览器(Chrome\Edge...)轻易快捷开发出丰富的实时多媒体应用,而无需下载安装任何插件
  • WebGL

    • 是一个 JavaScript API,可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形,而无需使用插件
  • WebAssembly

    • 它提供了一条途径,以使得以各种语言编写的代码都可以以接近原生的速度在 Web 中运行

3.HTML作用解析

HTML5_sticker.png

HTML即HyperText-Markup-Language(超文本标记语言)
要是提到HTML的作用我认为应该把三件套(HTML+CSS+JavaScript)的作用放在一起看

  • HTML负责构成了web的基本骨架
  • CSS用来描述HTML的文档呈现
  • 是一种具有函数优先特性的轻量级、解释型或者说即时编译型的编程语言

通俗来理解:

  • HTML好比一栋楼的钢筋水泥的骨架
  • CSS是这栋楼的瓷砖玻璃等装饰
  • JavaScript是这栋楼水管电线电梯等实现用户交互的核心

4.HTML语义化

首先得知道什么是HTML的语义化

语义化.png

HTML5 中新引入的标签,以及其他现有的 HTML 标签,都应该语义化。
这意味着这些标签应该按照其功能或内容的意义命名,以便让人阅读代码时能够更容易理解。

这些是HTML语义化的优点:

1、有利于SEO,有利于搜索引擎爬虫更好的理解我们的网页,从而获取更多的有效信息,提升网页的权重。

2、在没有CSS的时候能够清晰的看出网页的结构,增强可读性。

3、便于团队开发和维护,语义化的HTML可以让开发者更容易的看明白,从而提高团队的效率和协调能力。

4、支持多终端设备的浏览器渲染。