前端 与 HTML | 青训营笔记

bysimonluo
75 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的第 1 天。（第一篇笔记）

本篇笔记记录的是观看「前端与 HTML 」课程后记录的笔记，在其中的课程内容大纲中拓展出相关更多的内容。

前端的相关

定义：前端是利用 Web 技术栈解决 GUI 人机交互的问题。

前端技术栈分为：

  • JavaScript ：定义页面的行为。例如：用户点击按钮时，JavaScript 设置页面的响应行为方式。
  • CSS：负责页面的样式。可以设计 页面的多样化设计格式。
  • HTML：负责页面的内容和结构，开发 Web 应用的基础。

前端关注的几个方面：功能（⭐️最主要）、美观、无障碍、兼容、性能以及安全。

HTML

HTML 基础理解

HTML 理解：超文本标记语言。超越普通文本的格式，例如图片、表格、连接，标记语言指的是可以使用 开始标签和结束标签 表示。

🌰 例子 / 图片：

<img src='example.jpg' />

这是一个图片的标签。可以在其中设置属性，例如这里图片使用 src 设置图片的资源属性。

关于 HTML 的 DOM 树： 可以将 HTML 代码转化为对应的 🌲树形结构。（🍕 JavaScript DOM 树 | notebook (simon1uo.github.io) ）

  • 通过 DOM 接口可以改变网页的内容、结构和样式。

    • 文档：一个页面就是一个文档，DOM 中使用 document 表示
    • 元素：页面中的所有标签都是元素，DOM 中使用 element 表示
    • 节点：网页中的所有内容都是节点（标签、属性、文本、注释等） ， DOM 中使用 node 表示；

  • HTML 中的所有内容，甚至注释，都会成为 DOM 的一部分。

  • 当网页被加载时，浏览器会创建页面的 DOM。HTML DOM 会被构造为对象的树。

关于 HTML 语法：

  • 标签和属性不区分大小写。一般 标签原生使用小写。框架组件中可以使用大写（大驼峰命名）或者 kebab-case 命名法。
  • 空标签可以不用比克
  • 属性值使用双标签包裹。属性名不区分大小写。
  • 某些属性值可以忽略。

HTML 详解相关内容

由于在此前有详细学习过 HTML，这里贴上我之前学习的笔记连接：

HTML 语义化的相关理解

  • 语义化意味着 标签自身携带着一定的含义理解。HTML 中的大部分标签都有自身的语义，例如 <p> 标签表示 paragraph 一个段落， <h1> 标签表示 header1 最高级的标题。
  • 语义化的意义：在实际开发中，如果使用成千上万的 <div> 或者 <span> 来代替语义化标签，会给后期维护增加难度。使用语义结构良好的编码在实际开发中十分重要，利于开发调试和后期维护；利于搜索引擎的优化。
  • 实现语义化：了解每个标签的意义，同时多进行思考和选择合理化的标签，减少使用可视化共工具生成代码的行为，养成良好的控制代码标签习惯。

相关阅读链接

总结

在本次学习前端 与 HTML 课程之后，又回顾了一下之前学习 HTML 的笔记。希望能常看常新，每次学习一遍有新的理解。更多的内容再慢慢学习和补充吧。

avatar
文章
阅读
粉丝