前端与HTML 笔记 ｜ 青训营

略略略62
64 阅读3分钟

第二天的课程阐述了“前端要解决的基本问题”及“什么是 HTML ”两个基本问题。课程内容相对基础，但是HTML语义化模块确实带给我许多思考。我的笔记将基于官方给出的课程重点展开：

前端工作的定义

什么是前端？

  • 解决GUI人机交互问题
  • 跨终端
    • PC/移动浏览器
    • 客户端/小程序
    • VR/AR等
  • Web技术栈（HTML,CSS,JavaScript,http网络协议）

前端工程师是使用Web技术栈解决多端图形用户界面交互问题的工程师。

前端技术栈拆解与分析

image.png 网络协议涵盖了多个层级，每个层级都负责不同的任务，共同构成了计算机网络的协议栈。常见的计算机网络协议栈是TCP/IP协议栈，它包含以下层级：

  1. 应用层：处理应用程序之间的通信，例如HTTP（用于网页浏览）、SMTP（用于电子邮件）、FTP（用于文件传输）等。
  2. 传输层：提供端到端的数据传输和错误处理，例如TCP（传输控制协议）和UDP（用户数据报协议）。
  3. 网络层：负责数据包的路由选择和寻址，例如IP（Internet协议）。
  4. 数据链路层：处理同一网络段内的数据传输，例如以太网协议。
  5. 物理层：处理物理媒介的传输，例如光纤、电缆等。

服务器端是指计算机网络中的一种角色或位置，主要负责处理客户端（如浏览器、移动设备等）发送的请求，并提供相应的服务或资源。服务器端通常是一台或多台运行特定软件的计算机，这些计算机被称为服务器。

用户通过浏览器发送请求，服务器接收并处理这些请求，然后返回相应的数据或网页内容给浏览器，浏览器再将内容渲染出来，供用户浏览和交互。

HTML 作用解析

“HTML”的来源 image.png

HTML的基本结构 image.png

DOM树（HTML代码->树形结构） image.png

在HTML中，<dl>标签用于创建一个定义列表（Description List）。<dl>标签包含一个或多个术语（<dt>标签）和相应的定义（<dd>标签）。每个<dt>标签表示一个术语，而每个<dd>标签表示该术语的定义。

<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
  
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
  
  <!-- More terms and definitions can be added here -->
</dl>

cite标签用来引用具体作品：小王子

q标签用来引用一段话：看我有引号

HTML 语义化

传达内容，而不是样式

我们知道，HTML语义化不仅仅能帮助开发者自身理清代码逻辑，还能便于团队中其他开发者修改、维护页面。但是老师还提到HTML语义化能够便于浏览器展示页面，便于搜索引擎提取关键字、排序，便于盲人使用屏幕阅读器读页面内容--这些便利的核心在于“无障碍化”。一个前端开发者需要注意自己的页面在网速不好、公交抖动、夜间白天的显示，其实是很有学问的。

语义化的好处：
  1. 代码可读性
  2. 可维护性
  3. 搜索引擎优化
  4. 提升无障碍性
如何做到语义化：
  1. 了解每个标签和属性的含义
  2. 思考什么标签最适合描述这个内容
  3. 不使用可视化工具生成代码

课后阅读材料（官方给出）

avatar
文章
阅读
粉丝