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

主要内容

什么是前端？

前端的常用技术

什么是HTML？

常用的HTML标签

HTML的语义化

1 前端

1.1 使用Web技术栈解决多端的人机交互问题

解决GUI人机交互问题
跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
Web技术栈
- HTML（内容）
- CSS（样式）
- JavaScript（行为）
- 通过网络协议与服务器端进行通信

1.2 前端需要关注：

功能（※）
美观
无障碍
安全
性能
兼容
体验
……

1.3 前端的边界？不止页面：

Node.JS（服务器端）
ELECTRON（客户端）
React Native（客户端）
WebRTC（P2P在线传输）
WebGL（3D游戏）
WebASSEMBLY（把C++/Rust等语言编写的代码编译成可以直接在浏览器中运行的代码）

1.4 开发环境

浏览器：IE/Edge、Chrome、Firefox、Safari
编辑器：VSCode、Vim、WebStorm

2 什么是HTML？

2.1 Hyper Text Markup Language

Hyper Text —— 图片、标题、链接、表格
Markup Language —— 标记语言，用成对出现的标签来表示一段内容的格式
<img src="photo.jpg" /> （src="photo.jpg"：属性名="属性值"）

<!doctype HTML> <!--标记当前文件使用的HTML版本，决定浏览器渲染模式-->
<html> <!--文档根标签-->
  <head> <!--包含页面不可见的元数据-->
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body> <!--包含页面中真实呈现给用户的内容-->
    <h1>一级标题</h1>
    <p>段落内容</p>
  </body>
</html>

DOM树：把HTML对应代码转换成树形结构

graph TD
document --> html
html --> head
html --> body
head --> meta
head --> title
body --> h1
body --> p

HTML语法：
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如img、input、meta
- 属性值推荐使用双引号包裹
- 某些属性值可以省略，比如required（必填）、readonly（只读）

2.2 HTML常用标签

标题：h1 ~ h6
列表：
- 有序列表 ol>li
- 无序列表 ul>li
- 定义列表 dl>(dt+dd)
链接：a

<a href="https://www.bytedance.com/" target="_blank">
  字节跳动官网（在新窗口中打开）
</a>

多媒体：img/audio/video
- src
- alt：加载失败显示替代文本
- width
- controls：默认显示audio/video的播放控件
输入：
- input
  - placeholder（占位符）
  - type="range/number/date/..."
  - min/max
- 多行输入：textarea

选择：

单选/多选：input（type="radio/checkbox"）
下拉选择：select>option
辅助输入：input（list="countries"）
datalist

<!-- 只能从下拉选项中选择 -->
<p>
  <select>
    <option>🥑</option>
    <option>🍎</option>
    <option>🍏</option>
  </select>
</p>
 <!-- 可以从下拉选项中选择，但本质是input，可以接受这之外的数据 -->
<input list="fruits" />
<datalist id="fruits">
  <option>🥑</option>
  <option>🍎</option>
  <option>🍏</option>
</datalist>

引用：

长引用
blockquote
短引用（名字） cite
短引用（具体内容） q
引用单行代码 code
引用多行代码pre>code

<blockquote cite="http://t.cn/RfjKO0F">
<p>天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。</p>
</blockquote>

<p>我最喜欢的一本书是<cite>小王子</cite>。</p>

<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>

<p><code>const</code>声明创建一个只读的常量。</p>

<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>

强调：

strong（强调重要性、紧急）
em（语气/语音上的强调、重读）

<p>在投资之前，<strong>一定要做风险评估</strong>。</p>

<p>Cats <em>are</em> cute animals.</p>

内容划分：
- header>nav
- main>article
- aside
- footer

2.3 语义化是什么？

HTML中的元素、属性及属性值都拥有某种含义
开发者应该遵循语义来编写HTML
- 有序列表用ol；无序列表用ul
- lang属性表示内容所使用的语言

2.3.1 谁在使用我们写的HTML

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

2.3.2 语义化的好处 —— 传达内容，而不是样式!

代码可读性
可维护性
搜索引擎优化
提升无障碍性

2.3.3 如何做到语义化？

了解每个标签和属性的含义
思考什么标签最适合描述这个内容
不使用可视化工具生成代码

（一）前端与HTML | 青训营笔记

主要内容

1 前端

1.1 使用Web技术栈解决多端的人机交互问题

1.2 前端需要关注：

1.3 前端的边界？不止页面：

1.4 开发环境

2 什么是HTML？

2.1 Hyper Text Markup Language

2.2 HTML常用标签

2.3 语义化是什么？

2.3.1 谁在使用我们写的HTML

2.3.2 语义化的好处 —— 传达内容，而不是样式!

2.3.3 如何做到语义化？