第一节 前端与HTML | 青训营笔记

雪琰焦糖
74 阅读2分钟

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

什么是前端
  • 解决GUI人机交互问题
  • 跨终端
    • PC/移动浏览器
    • 客户端/小程序
    • VR/AR等
  • Web技术栈
前端技术栈
  • 前端：HTML（内容） CSS（样式） JavaScript（行为）
    • 网络协议
  • 服务器端
前端应该关注哪些方面
  • 功能
  • 美观
  • 无障碍
  • 安全
  • 性能
  • 兼容
  • 体验
开发环境
  • 浏览器：IE/Edge、Chrome、Firefox、Safari
  • 编辑器：VSCode、Vim、WebStorm
HTML是什么
  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HyperText：图片、标题、链接、表格
  • Markup Language：
<!doctype html>
<!-- <!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前
它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令 -->
<html>
  <head>
    <meta charset="UTF-8">
    <!-- <meta> 标签的属性定义了与文档相关联的名称/值对 -->
    <title>页面标题</title>
  </head>
  <body>
    <h1>一级标题</h1>
    <p>段落内容</p>
  </body>
</html>
DOM树

HTML/XML 文档在浏览器内均被表示为 DOM 树。

  • 标签（tag）称为元素节点，并形成文档结构。
    • <html> 在根节点，<head> 和 <body> 是其子项
  • 文本（text）称为文本节点，被标记为 ＃text。一个文本节点只包含一个字符串。它没有子项，并且总是树的叶子。
  • 一共有 12 种节点类型。实际上，我们通常用到的是其中的 4 种：
    1. document — DOM 的“入口点”。
    2. 元素节点 — HTML 标签，树构建块。
    3. 文本节点 — 包含文本。
    4. 注释 — 有时我们可以将一些信息放入其中，它不会显示，但 JS 可以从 DOM 中读取它。
  • 如果浏览器遇到格式不正确的 HTML，它会在形成 DOM 时自动更正。
  • 我们可以使用开发者工具来检查（inspect）DOM 并手动修改。
HTML语法
  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如 input、meta、img
  • 属性值推荐用双引号包裹
  • 某些属性值可以忽略，比如 required、readonly

标签

标题h1~h6

image.png

列表

image.png

链接

image.png

多媒体

image.png

输入

image.png image.png

内容划分

image.png

语义化
  • HTML中的元素、属性、属性值都拥有某些含义
  • 开发者应该遵循语义来编写HTML，如：
    • 有序列表用ol；无序列表用ul
    • lang属性表示内容所使用的语言
HTML的使用
  • 开发者：修改、维护界面
  • 浏览器：展示界面
  • 搜索引擎：提取关键词、排序
  • 屏幕阅读器：给盲人读页面内容
语义化的好处
  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性
如何做到语义化
  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码
avatar
文章
阅读
粉丝