前端与 HTML | 青训营笔记

480 阅读2分钟

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

课堂笔记

本堂课重点内容

  • 前端工作的定义
  • 前端技术栈拆解与分析
  • HTML 作用解析
  • HTML 语义化

详细知识点介绍

前端工作的定义

前端工程师是使用Web技术栈解决多端的图形界面交互问题的工程师。专注于人机交互,能够实现的跨终端有PC/移动浏览器、客户端/小程序、VR/AR等。

前端应该关注功能、美观、性能、安全、兼容、体验、无障碍。

前端技术栈

主要包含HTML(内容)、CSS(样式)、Javascript(行为)+网络协议(HTTP/Web Socket)

  • 使用Node.js开发服务端;
  • 使用Electron开发客户端;
  • 使用WebRTC实现P2P在线传输(例:多人会议);
  • 使用WebGL实现3D场景可视化;
  • 使用WebAssembly使得C++编写的代码可以高效的运行在浏览器上。

开发环境

浏览器 + 编辑器

HTML

HyperText Markup Language

浏览器会对HTML进行解析生成DOM树

HTML 的主要工作之一就是给予文本意义(也被叫做语义,在编程中,语义指的是一段代码的含义),以让浏览器知道如何正确的显示文本。

语义化的好处

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

如何做到语义化?

  • 了解每个标签和属性的含义
  • 思考用什么标签对内容进行描述最合适
  • 不使用直接生成代码的工具,而是自己的去写

课后个人总结

发现了自己以前没有注意到的地方

HTML是传达内容,而不是样式

<!--错误示范-->
<p style="font-size:32px">我在青训营学到了好多知识</p> 
<!--正确示范-->
<h1>我在青训营学到了好多知识</h1>

这是第一节课,学到后面CSS的时候应该是可以加id或者类选择器进标签里的,而不是一味的把样式写进标签里,观感不好的同时会造成冗余。

语义化方面

我对语义化的了解停留在了浅层,之后需要加强对每个标签和属性的含义的认识,以及思考用什么标签对内容进行描述最合适。

引用参考