01 前端与 HTML | 青训营笔记

wjsy
85 阅读2分钟

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

课程重点内容

  1. 前端工作的定义
  2. 前端技术栈拆解与分析
  3. HTML 作用解析
  4. HTML 语义化

前端

解决多端用户图形界面下的人机交互问题

我们常说的前端三件套：HTML（内容），CSS（样式），JavaScript（行为）。他们和网络协议构成了前端技术栈。

前端需要注意：美观，功能，安全，性能，无障碍，兼容，用户体验。

HTML

HTML的全称是：HyperText Markup Language

文档结构

<!doctype html>
<html>
  <head>
    <title>网页的标题</title>
  </head>
  <body>
    网页主体内容
  </body>
</html>

<!doctype html>：标记html版本,决定浏览器渲染模式

html标签：文档根标签

head标签：文档的描述信息

body标签：呈现给用户的内容

DOM树结构： image.png

语法

一些我们需要知道并尽量遵循的书写习惯

  1. 标签和属性不区分大小写，推荐小写
  2. 空标签可以不闭合，指不存在成对的情况。比如：
<br />
<img />
  1. 属性值推荐用双引号包裹，虽然单引号在编译上不会出错
  2. 某些属性值可以省略，比如required

标签

关于HTML的标签学习，我之前整理了相关笔记，今天也查漏补缺了一些内容，将在另一个文章中逐步更新，这里不再过多叙述，链接：01-HTML - 掘金 (juejin.cn)

语义化

HTML中的元素、属性及属性值都拥有某些含义，而语义化就是我们要用合理、正确的标签来展示内容。

所以我们要知道html的本质是传达内容，而不是样式。

开发者应该遵循语义来编写HTML，比如：有序列表用ol标签，无序列表用ul标签

语义化的好处：

  1. 代码可读性高
  2. 可维护性强，便于团队开发维护
  3. 搜索引擎优化，有助于爬虫抓取更多的有效信息（爬虫依赖于标签来确定上下文和各个关键字的权重）
  4. 提升无障碍性，方便其他设备解析渲染网页，如盲人阅读器等，使用户有良好浏览体验

对于我们而言，做到语义化需要了解每个标签和属性的含义，思考什么标签时候描述这个内容，不建议用可视化工具生成代码

avatar
文章
阅读
粉丝