前端与 HTML｜青训营前端工程师可以被理解为使用Web技术栈解决多端图形用户交互问题的工程师前端技术栈 HTML

前端工程师可以被理解为使用Web技术栈解决多端图形用户交互问题的工程师

前端技术栈

HTML 内容（页面结构内容）
CSS 样式（位置大小颜色）
JavaScript 行为（用户点击按钮的反映）
HTTP协议
- 从服务器获取文件（代码图片等）
- 将数据提交到服务器（表单用户行为等）

前端关注的方面

功能（提供了什么功能，解决了用户什么需求）
美观
无障碍（如是否有考虑到对视力缺陷的人群[色盲症等]的适配）
安全（用户数据是否存在漏洞等）
性能（速度流畅度用户体验）
兼容性（是否能在不同平台上正常使用）
用户体验

前端能做什么

不止是页面

后端 node
客户端
- Pc: Electron
- 移动端: React Native
Web RTC (多人会议等)
WebGL（3D游戏等）
WebAssembly (让其他语言编写的代码可以在浏览器环境下运行)

开发环境

门槛低

最基本的情况下有个编辑器浏览器就能开始写代码并看到实际运行结果了

HTML是什么(HTML重点在传达内容而不是样式)

HyperText Markup Language

超文本 -> 不只是文字，还可以是图片标题链接表格等
标记语言 -> 成对出现的标签来表示内容 <h1>文章标题<h1/>

标签也可以设置相应属性如<img src="photo.jpg" />

基本结构

html结构.jpg

这里的第一行是告诉浏览器以何种方式来解析HTML文件，否则会以一种较为老旧的方式来解析，可能会导致一些问题
<html></ html>根标签其他的标签都在它里面声明
<head></ head>存放一些元数据，页面需要但无需直接呈现给用户的数据，如页面的标题，页面使用的编码(UTF-8等)
<body></ body>存放的是需要呈现给用户的数据（文字，标题，图片等）

HTML -> Dom树

浏览器在拿到HTML文件后会将其解析为DOM树（一种树形结构），每个节点会被称为Dom节点，网页可通过右键检查来查看它的Dom节点

对上文提到的HTML文件将会被解析为：

Dom树.jpg

HTML语法

html语法.jpg

第一点是因为开发中使用框架编写自定义组件时，通常使用大写来使用，而原生的会使用小写来使用，以此来做个区分
第四点比如required = "true"可以简写为required

HTML部分标签演示

出来使用标签包裹住内容，还有一类是使用key,value(键值对)的方式来表示

如definitionList(dl), definitionTitle(dt), definitionDescription(dd)

<dl><dt>导演:</dt><dd>陈凯歌</dd></dl>

注：这里的dt 与 dd并不只是一对一的关系，也可以是多对多的关系
img标签的alt属性比如加载失败、用户开了省流量模式或视障人群使用屏幕阅读器时，alt能提供降级的，替代的体验

<img src="xxx" alt="这是一张xxx的图片">
input 标签让用户可以输入信息可以通过type来更改输入的数据类型常见的有 range(范围)、number(数字)、date(日期)等

textarea 标签支持输入多行的文字

input标签结合 datalist标签实现输入提示

<input list="countries">
<datalist id="countries">
    <option>Greece</option>
    <option>United Kingdom</option>
    <option>United States</option>
</datalist>

文字相关的标签
- 引用相关三标签
  - blockquote 标签通常用于较长的引用，其cite属性用于定义引用来源
  - cite 标签通常用于书名章节等的短引用
  - q 标签通常用于段引用，比如一小句话
- code 标签可用来包裹代码, 引用多行代码可通过 pre标签和 code标签的组合
```
<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
<code></pre>
```
- 强调两标签
  - strong 标签偏向强调事情的重要紧急
  - em 标签偏向语气上的强调重读
内容划分注意语义化

内容划分.jpg

语义化原则

语义化.jpg

合适地选择标签可以使HTML结构更加清晰易懂（比如 aside 表示这里放一些与文章相关但并不那么重要地信息比如目前阅读到文章的那一部分又或是广告）

语义化的受益群体

语义化的好处2.jpg

注：无障碍(Accessibility)并不只是针对残疾人士有帮助，很多情况下对普通人也会有帮助，做好这项，对大家都是很有益处的

如果做到语义化

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

前端与 HTML｜ 青训营