前端与HTML｜青训营笔记

前端与HTML｜青训营笔记

我的图图呢 706 2022-07-23

前端

前端解决的最重要的问题：GUI人机交互问题。
在Web技术栈，无论使用哪种技术栈，最终都会回归到HTML、CSS、JS分别定义内容、样式、行为，通过网络协议与服务端进行交互，完成特定的需求。

前端可以覆盖程序员的大多场景：

  • 通过nodejs完成服务端
  • 通过electron封装应用
  • 通过react native技术栈完成手机端应用
  • 通过WebGL完成流畅的3D渲染
  • 通过WebAssembly加载c++等其他语言的程序

HTML

HTML: 超文本标记语言，用来结构化Web网页和内容的标记语言。

HTML由一系列元素组成，用来生成不同的内容。元素一般由开始标签、结束标签、内容组成，属性放在开始标签中，允许元素之间互相嵌套。

<p class="class-a">
  <span>Ababa</span>
</p>

元素中一些特别的语法：

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

在MDN上可以找到各个HTML元素完整的描述，会看到很多有意思的标签，类似 del 标签 和 ins 标签等等。

各个元素进行嵌套，构建出一个html页面

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    <h1>一级标题</h1>
    <p>段落内容</p>
  </body>
</html>

有一些比较关键的元素：

  • html 元素，包含整个页面的内容。
  • head 元素，用户不可见，包含面向搜索引擎的搜索关键字、页面描述、CSS样式表等等。
  • title 元素，设置页面标题，显示在标签页上。
  • body 元素，用户可见的内容。

浏览器在解析HTML文件时，会将其解析为一个DOM树，后续js也会有针对DOM节点进行的操作。

HTML语义化

HTML中有一类元素，将文档内容从逻辑上进行组织划分，如 nav 、header等等。同时，HTML的元素、属性、属性值也都拥有着特定的含义，比如 button, <input type="date">。
因为我们越来越多的依赖框架去完成前端项目，往往会出现div一把梭的情况，因此HTML语义化的概念出现了，它提倡开发者遵循HTML元素、属性的语义编写HTML，这么做有以下好处：

  • 方便开发者后续维护页面，代码的可读性会变得更高
  • 方便搜索引擎完成SEO、爬取内容
  • 方便屏幕阅读器提取页面内容