前端与 HTML | 青训营笔记

皮卡coder
383 阅读3分钟

前端与 HTML | 青训营笔记

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

详细知识点介绍:

什么是前端?

  • 解决 GUI 人机交互问题
  • 跨终端
    • PC/移动浏览器
    • 客户端/小程序
    • VR/AR 等
  • Web 技术栈

前端技术栈

image.png 前端的技术栈最底层的就是三件套, 分别用 HTML 书写内容, 用 CSS 书写样式, 用 JavaScript 书写行为. 最终构成一个个简洁美丽的界面.

前端应该关注哪些方面?

  • 功能
  • 美丽
  • 无障碍
  • 安全
  • 性能
  • 兼容
  • 体验

前端的边界

image.png

  • Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。
  • Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
  • React Native 将原生开发的最佳部分与 React 相结合， 致力于成为构建用户界面的顶尖 JavaScript 框架。
  • WebRTC（Web Real-Time Communications）是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。
  • WebGL（Web 图形库）是一个 JavaScript API，可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 非常一致的 API 来做到这一点，该 API 可以在 HTML5 <canvas> 元素中使用。这种一致性使 API 可以利用用户设备提供的硬件图形加速。
  • WebAssembly 是一种新的编码方式，可以在现代的网络浏览器中运行 － 它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如 C / C ++等语言提供一个编译目标，以便它们可以在 Web 上运行。它也被设计为可以与 JavaScript 共存，允许两者一起工作。

HTML 是什么?

image.png HyperText Markup Language, 超文本标记语言

DOM 树

image.png

HTML 语法

  • 标签属性不区分大小写, 推荐小写
  • 空标签可以不合并, 比如 input meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以忽略, 比如 required readonly

内容划分

image.png

  • header 头部区域
  • nav 导航栏区域
  • main 主体内容区域
  • article 文章内容区域
  • aside 侧边栏区域
  • footer 底部区域

语义化是什么?

  • HTML 中的元素 属性以及属性值都拥有某些含义
  • 开发者应该遵循语义来编写HTML
    • 有序列表用 ol; 无序列表用ul
    • lang 属性表示内容所使用的语言

语义化的好处

  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性

如何做到语义化?

  • 了解每个标签的属性和含义
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码

个人总结

因为接触过一段时间的前端, 所以今天讲的内容整体不难, 就介绍了一下前端还有HTML, 还将了一些HTML标签. 我感觉最难的还是标签的语义化和搜索引擎的SEO优化这些知识, 需要以后慢慢的积累经验才可以做好.

avatar
文章
阅读
粉丝