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

本文主要对青训营课程 “前端与 HTML” 进行归纳与总结。

1. 前端简介

前端解决问题

• 解决 GUI 人机交互问题
• 跨终端
  • PC/移动浏览器
  • 客户端/小程序
  • VR/AR 等
• Web技术栈

前端技术栈

• 前端技术： HTML（内容） + CSS（样式） + JavaScript（行为）
• 前端与服务器端通过网络协议进行沟通

前端关注点

• 功能
• 美观
• 无障碍
• 安全
• 性能
• 兼容性
• 体验（用户体验）

开发环境

• 浏览器
• 编辑器

2. HTML

• HTML 全称 HyperText Markup Language
• 第一段 HTML 代码 代码举例
• 浏览器会对前端代码进行渲染 下图所示为对于上面的例子所渲染的 DOM 树 DOM 树中包括文档的各个节点，称为 DOM 节点。

HTML 语法

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

HTML 标签

• 标题标签 h1~h6
• 列表标签
  • ol > li 表示有序列表
  • ul > li 表示无序列表
  • dl > dt + dd 表示定义列表（dt 表示标题，dd 表示具体描述）
• 链接 a 标签（锚点）

  <a href="https://www.bytedance.com" target="_blank">字节跳动官网</a>
  

• 图片 img（alt 表示加载不出来展示的文字）
• 音频 audio
• 视频 video（controls 表示添加控件）
• 输入 input / textarea（多行文本）
  • placeholder 表示在未输入时的占位提示文本
  • type 表示输入框的类型
• 选择
  • input（也是 input，不过 type 不同）
    • radio 表示单选
    • checkbox 表示多选
  • select 下拉选择
    • option 选择项
  • datalist 可输入的下拉选项
• 文本标签
  • blockquote 块级引用
    • cite 属性表示来源
  • cite 短引用（作品名字或章节）
  • q 对于之前的内容进行短引用
  • code 代码标签
    • 多行代码可以添加 pre 标签
  • strong 和 em 表示强调标签
    • strong 表示重要、严重、紧急
    • em 在语气上强调（重读）
• 内容划分
  • header 页头
    • 内部可以添加 LOGO、导航（nav）
  • main 内容、正文
    • article 文章（可以有多个）
  • aside 广告等内容
  • footer 底部，参考信息、备案信息等

HTML 语义化

• HTML中的 元素、属性 及 属性值 都拥有某些含义
• 开发者应该遵循 语义 来编写 HTML
  • 有序列表用 ol;无序列表用 ul
  • lang 属性表示内容所使用的语言
• 好处
  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性
• 如何做到语义化？
  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码

HTML 谁在用？

• 开发者 - 修改、维护页面
• 浏览器 - 展示页面
• 搜索引擎 - 提取关键词、排序
• 屏幕阅读器 - 给盲人读页面内容

注：HTML 是在传达内容，而不是样式！

PS：不当之处欢迎批评指正！