Day01：前端与 HTML ｜青训营笔记本节课程的主要内容为“前端要解决的基本问题”，HTML基础语法、基本功能与常

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

什么是前端？

前端工程师：使用Web技术栈（HTML、CSS、JavaScript、HTTP协议等）解决多端（PC/移动浏览器、客户端/小程序、VR/AR等）图形用户界面交互问题的工程师

前端技术栈

HTML定义内容
CSS定义样式
JavaScript定义行为
网络协议（如HTTP、Websocket）负责上述代码文件在客户端与服务端之间的传输交付

前端应该关注的方面

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

前端的边界

随着技术发展更新，前端技术已经远远不止用于网页开发：

Node.js：服务端应用
Electron、React Native：客户端应用
WebRTC：P2P传输（实现多人会议等场景）
WebGL：开发3D游戏
WebAssembly：使用其他语言（如Rust、C++）开发浏览器可以运行的代码

开发环境

浏览器
编辑器

HTML简介

全称：HyperText Markup Language（超文本标记语言）

超文本：文本、图片、标题、链接、表格……
标记语言：使用开始标签/结束标签来表示内容的语义
```
<h1>一级标题</h1>
```
标签可以设置属性（属性名=属性值的形式）
```
<img scr="image.png" />
```

完整HTML示例

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    <h1>一级标题</h1>
    <p>段落内容</p>
  </body>
</html>

!doctype标注了本文件使用的HTML版本，从而使得浏览器以正确的解析模式识别标签。

参考：怪异模式和标准模式 - HTML（超文本标记语言） | MDN (mozilla.org)

head标签存放了页面的元数据（页面的属性信息，通常情况下不会直接呈现给用户），如页面标题、文本的编码方式。

body标签存放真正呈现给用户的内容。

DOM树

浏览器在读取解析完HTML文件后，会对应生成一个名为DOM树的数据结构。这个结果根据HTML文件中的标签嵌套关系生成DOM节点，例如上述HTML示例对应的DOM树如下所示：

可以在浏览器里打开开发者工具（按F12调出）来查看。

HTML语法

标签和属性不区分大小写，推荐小写
空标签可以不闭合（如input、meta）
属性值推荐用双引号包裹
某些属性（通常是逻辑值的属性）的属性值可以省略（如required、readonly）

HTML常用标签

标题

h1、h2、……、h6

列表

有序列表ol、无序列表ul（有/无序列表的列表项均是li）

项目列表dl（用于描述属于/项目名称以及其对应的详细信息这样的场景，名称用dt、详情用dd，一个dt可以对应多个dd，一个dd也可以对应多个dt）

链接

a标签（取anchor之意），这个标签需要设置href属性来标注其链接的URL或URL片段，还可以设置target属性为_blank来指明在新标签页中打开。

参考：a标签 - HTML（超文本标记语言） | MDN (mozilla.org)

图片、音频、视频

图片img、音频audio、视频video

通用属性：

src：资源所在位置URL。对于img是必填属性。

图片img属性：

alt：对图像的文本描述，非必填。
屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。
如果由于某种原因无法加载图像，普通浏览器也会在页面上显示此文本。

音频audio、视频video属性：

controls：如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的默认控制面板，让用户可以控制音频的播放。

输入/表单

input标签：为基于 Web 的表单创建交互式控件，以便接受来自用户的数据，其工作方式相当程度上取决于type（类型）属性的值（不指定type时，type默认为 text）。

常用属性：

类型为text、search、tel、url或email时，placeholder（占位符）属性可以提示用户输入框，不能包含回车或换行。
类型为text、search、url等类型（详见MDN文档）时，可以指定list属性，其值是位于同一文档中的datalist标签元素的id属性值。datalist提供了一个预定义的值列表，建议用户进行此输入（但不是强制的），用户可以从这个预定义列表中进行选择，也可以提供不同的值。
```
<input list="countries" />
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>
```

参考：input标签：输入（表单输入）元素 - HTML（超文本标记语言） | MDN (mozilla.org)

select标签：下拉选单，每个菜单选项由select中的各个option标签定义。

textarea标签：一个多行纯文本编辑控件，用于输入一段相当长的、不限格式的文本。

文本

blockquote：块级引用

cite：行内引用（表示一个作品的引用，必须包含作品的标题）

q：行内引用（表示封闭的、短的文本）

code：代码

pre：在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。通常和code标签连用表示多行代码。

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

strong：内容意义的强调

em：句子语气（重读）的强调

HTML内容块划分

header和head是不同的，前者是页面内容的一部分，用户可见。

一般来说一个页面只能有一个main。

语义化

HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML
使用语义化的标签
使用语义化的属性

尽量不用使用span或者div这样没有意义的容器标签来表示内容块，而是尽量用footer这样的语义化标签来表示。

要意识到，不止是用户和Web开发人员会读取HTML，搜索引擎、屏幕阅读软件等工具同样需要读取HTML，语义化标签方便这些工具理解页面的内容，从而更好地完成工作。

原则：传达内容，而非传达样式

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

Day01：前端与 HTML ｜ 青训营笔记