前端与 HTML | 青训营笔记

天琴
76 阅读5分钟

讲师：赵文博

课件

课程介绍

本节课程围绕“前端要解决的基本问题”及“什么是 HTML ”两个基本问题展开，层层解析前端技术栈的构成，以及作为前端最为基础的技术 - HTML 基础语法和基本功能，在实际研发过程中如何做到 HTML 语义化？点击本节课程，字节工程师带你了解 HTML 高效的编写原则。

课程重点

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

什么是前端?

我们要解决的是图形界面下的人机交互的问题，无论我们面对的设备是 PC 浏览器、移动浏览器、 APP 小程序，甚至是一些 VR 的设备，那我们使用的技术栈都是 HTML、CSS、JavaScript，还有 HTTP 网络协议来解决人机交互的问题。所以我们一句话做一个总结，就是前端工程师就是使用 Web 技术栈解决多端图形用户界面交互问题的工程师。

那前端这一块它的技术是什么样的？

前端主要的技术分为三层，最基础的是HTML，负责页面结构还有内容页面中我们可以使用 CSS 来设置页面的样式，比如说位置大小、颜色里信息。我们使用 JavaScript来定义网页的行为，比如说用户点了一个按钮之后，页面该怎么响应？ HTML、CSS和JavaScript 都是运行在浏览器里边的，而浏览器它是可以通过 HTTP 协议和服务器进行通信，他把前面前端的这些代码通过HTTP协议从服务器上去拿到之后，把它渲染成我们看到的页面，那浏览器也可以把用户填写的内容或者用户的一些行为通过HTTP 这个协议提交到服务器端。所以我们说 HTML、CSS和JavaScript和网络协议，比如socket 的协议就构成了前端最基础的一个技术栈。所以我们把这一部分定义为前端的一个范畴。

前端应该关注哪些方面的问题？

前端要解决的根本问题是什么？就是图形界面下的一个人机交互的问题，那人机交互涉及到很多方面，所以作为前端其实你不仅要懂得技术，还要懂得其他的一些方面。

  • 最核心的就是你做这个产品它有哪些功能？它解决什么问题？有没有满足用户某些方面的一些需求。
  • 那第二个就是美观这一块，就是你做出来的界面是不是好看？还有就是无障碍，就是我们做的网站是不是对于所有人都可以用的，比如说有送盲症的这些人，那还有安全，其实这个不言而喻，就是我们做的产品能不能保证所有的用户数据的安全，有没有存在一些漏洞可能会被利用。
  • 还有就是性能，性能就是说我们的网站做出来是不是速度足够快，动画是不是流畅，用户体验是不是足够好？还有兼容性，就是我们做出来的这个网页是不是能够在各种各样的设备上正常去使用，比如说在电脑上可以使用，在手机上也可以使用，那用户对这些产品的一个直观的一个感受，其实是取决于前端，对于用户体验来说是非常重要的。

要做出来好的产品，要学习很多方面的一些东西。那随着新的技术不断发展，就是前端现在能做的东西也已经远远超出了就页面这样的一个简单的范畴

  • 可以用Node.js去开发服务器端的一些应用
  • 再比如说我们可以使用 ELECTRON或者 React Native 去开发客户端的应用
  • 我们也可以用 WebRTC 进行 ptp 的这种在线的传输，实现一个多人的会议。
  • 我们也可以用 WebGL 去开发出来一些非常流畅的 3D 的一个游戏。
  • 使用 WebASSEMBLY 可以把 C + + 和 rust 或其他的语言编写的一些代码，编译成直接在浏览器里边可以运行的一些代码。

总之就是前端在这个互联网行业里边是一个非常发展非常快的一个领域，技术在不断的更新，我们也要持续的去学习，才能跟上这个技术的发展。那前端其实入门还是非常简单的，就它非常容易上手。就我们使用编辑器，比如说那个Vscode，然后在里面编写一些 Html、CSS 代码，然后把保存成HTML，在浏览器里面打开我们就能看到效果，随时非常简单。你只要有一个浏览器，有一个编辑器，然后就可以去上手了。对它的入门的门槛其实非常低的。

什么的HTML?

HTML(Hyper Text Markup Language),超文本标记语言

  • Hyper Text 它不是简单的成文字的东西，它可以包含图片、包含标题、包含链接、表格这些更丰富的一些格式。
  • Markup Language 用一个开始标签和一个结束标签来表示一个内容,比如

    文章标题

可以在标签上去设置一些属性，比如说我们要表示一张图片

<img src = "photo.jpg"/>

我们用 img 这个标签表示一张图片，我们可以用 src 这个属性来表示这个图片的URL，对，那 src 在这个里边就是属性名，引号引起来的这一部分我们叫属性值

HTML语法

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

语义化

  • HTML中的元素、属性及属性值都拥有某些含义

  • 开发者应该遵循语义来编写HTML

    • 有序列表用 ol 无序列表用 ul
    • lang 属性表示内容所使用的语言
avatar
文章
阅读
粉丝