✓前端与HTML|青训营笔记

是逸啊喂
65 阅读3分钟

这是我参与「第五届青训营」伴学笔记创作活动的第1天 (❤ ω ❤)
在这篇文章中我记录了HTML相关的一些小知识点，作为后续文章的铺垫，万丈高楼平地起！

image.png

  • HTML是什么

  • HTML 是用来描述网页的一种语言
  • 其全称为HyperText Markup Language（超文本标记语言）
  • HTML是一种标记语言，借助一套标记标签来描述网页

  • HTML 标签（HTML tag）

  • HTML 标签是由尖括号包围的关键词
  • HTML 标签通常是成对出现的
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 各种标签及其意义如下：

image.png

  • HTML语法tips

  • 标签和属性不区分大小写，但推荐小写
  • 空标签可以不闭合（无需闭合标签即单个出现，如meta）
  • 我们会在开始标签内为元素添加属性值，属性值推荐用双引号包裹
  • 某些属性值可以省略，如required
  • 在浏览器中直接输出中文会导致乱码，我们需要在头部将字符声明为 UTF-8 或 GBK

  • HTML基本结构

  • 其中main为正文部分，aside表示一个和其余页面内容几乎无关的部分

image.png

  • HTML编辑器

  • VSCode、Vim、WebStorm等
  • 目前我使用的是VSCode，这个软件较为主流，拓展库里也有很多好用的插件

  • Web 浏览器

  • 浏览器可以直接读取html文件，并将其作为网页显示出来。
  • 它借助文件内所写的标签来决定如何展现HTML的页面内容
  • 常见的”现代“浏览器有：谷歌浏览器、Edge、火狐浏览器、Safari等

  • 声明

  • 我们借助它来声明HTML的版本
  • 这有助于浏览器选择恰当的渲染方式来展现我们编辑的内容

  • HTML语义化

  • 定义：选择适合相应意义的标签对代码文本进行结构化，方便阅读与分析
  • 对于初探深浅的前端同学来说，在一个HTML文件中使用大量的span和div标签已经毫不新鲜，可是，在后期我们为这样的代码进行维护时，可谓是压力山大
  • 因此，语义化可以更加清晰地展现文档结构，方便开发者和智能程序顺利看懂，其表现如下：

image.png是不是很清楚直接呀！

  • 今日学习的感悟

  • 一入前端深似海，在大佬辈出的前端领域，我们都想快快吸纳各种先进知识，通过这节课我也明白了，在这广博的领域里，最初相识的HTML更是我们学海泛舟的根本。
  • 多多练习，把语法和各种巧妙的tips烂熟于心，我相信日后深入学习时，为debug而牺牲的头发会少掉些吧！

部分图片与知识点引用自字节青训营前端与HTML课程、菜鸟编程相关知识。

avatar
文章
阅读
粉丝