这是我参与「第四届青训营」笔记创作活动的的第1天，今天的课程是「前端与 HTML」，老师主要讲解了什么是前端、前端技术栈、前端应该关注哪些方面、前端的边界、开发环境这几部分内容，以及详述了 HTML 、语义化等内容。

一些概念和铺垫

什么是前端

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

总结：前端工程师是使用Web技术栈解决多端图形用户界面交互问题的工程师。

前端技术栈

前端主要的技术分为三层：

HTML：负责页面的结构和内容。
CSS：用于设置页面的样式，如位置、大小、颜色等。
JavaScript：定义网页的行为，比如当用户点击后的响应。

这三者都是运行在浏览器里的，而浏览器是可以通过HTTP协议和服务器进行通信的。浏览器通过HTTP协议从服务器端拿到前端的代码并渲染成我们看到的页面，也可以把用户的行为和信息通过HTTP协议提交到服务器端。

前端应该关注哪些方面

功能
产品有什么功能，解决了什么问题，有没有满足用户某些方面的需求
美观
界面是否美观
无障碍
产品是否对所有人都可用
安全
能否保证用户数据的安全，有没有存在一些漏洞
性能
速度是否够快，动画是否流畅
兼容性
是否能在各种各样的设备上去使用
体验
用户体验是否足够好

前端的边界

随着新的技术不断发展，前端能做的东西也已经远远超出页面这样一个范畴。比如可以用Node.js去开发服务器端的一些应用，用Electron、React Native去开发客户端的应用，用WebRTC进行P2P的在线传输实现多人会议，用WebGL去开发一些流畅的3D游戏，用WebAssembly把C++和其他语言编写的一些代码编译成直接在浏览器里面运行的代码。

总结：前端在互联网行业里面是一个发展非常快的领域，因为前端的技术在不断更新，所以要进行持续地学习才能跟上技术的发展。

开发环境

常用浏览器：Edge，Chrome,Firefox,Safari 编辑器：VSCode，Vim，WebStorm

HTML

HTML是什么

HTML是HyperText Markup Language的缩写，意为超文本标记语言。
超文本并非单纯的文字，它包含图片、标题、链接、表格等更丰富的格式，并使用标签来表示。

一段简单的代码

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

第一行的<!doctype html>标记了当前文件的html版本，浏览器会根据这个来决定使用哪一种渲染模式。如果不写这一行，浏览器会用老旧的怪异模式来渲染这个页面。
<html>和</html>是文档的根标签，所有其他的标签都是写在html标签里面的
<head>和</head>里面会放一些页面的元数据，即页面需要的数据但又不需要呈现给用户的数据，比如页面的标题、页面的编码等。
<body>和</body>里面放的是真正呈现给用户的内容，比如标题、文字、图片等。

浏览器会把HTML文件的代码进行解析，解析出来一个DOM树，包含了文档中的各节点。这就是一个DOM树，其中的每一个节点称为DOM节点。

HTML语法

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

几种标签

标题

<h1>~<h6>分别是一级到六级标题，字体大小从最大的<h1>向最小的<h6>递减。

列表

1、有序列表ordered list
用<ol>和</ol>标签，内含多个<li>，呈现的效果是前有数字的有序列表。
2、无序列表unordered list
用<ul>和</ul>标签，内含多个<li>，呈现的效果是前有黑点的无序列表。 3、定义列表definition list 用<dl>和</dl>标签，自定义列表项始于<dt>标签，每个自定义列表项的定义始于<dd>。

链接

使用标签<a>和</a>
常用属性href，属性值为超链接的引用地址。
常用属性target，属性值有多种，如_self在当前页面显示，_blank在新页面显示等。

多媒体

1、图片使用<img />标签，src属性标识了图片的地址，alt属性标识了当图片无法加载时显示的替代文字。
2、音频使用<audio>和</audio>标签，src属性标识了音频的地址，controls属性为音频加上了控制面板。

输入

使用<input>标签，常用属性placeholder的值会显示在输入框中，常用属性type包含多种值： 1、range：输入框呈现的效果是一条滑动框
2、number：用户输入数字，可以指定极值
3、date：输入框呈现的效果是可以选择日期
4、checkbox：多选框
5、radio：单选框，互斥关系通过name属性来实现
多行文本可以用<textarea>和</textarea>标签
下拉选择可以用<select>和</select>标签，其中的选项用<option>和</option>标签
*辅助输入示例：

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

这样当用户输入时，会自动显示相近的选项可供选择。

文字与引用

1、快捷引用标签<blockquote>和</blockquote>，属性cite的值为引用地址
2、短引用标签<cite>和</cite>，呈现的效果是倾斜，一般表示引用作品的名字或章节
3、短引用标签<q>和</q>，呈现的效果是被引号包裹，一般表示具体的引用内容
4、代码标签标签<code>和</code>，呈现的效果与代码编辑器中相似，多行代码在代码标签外加<pre>和</pre>
5、强调加粗标签<strong>和</strong>
6、强调倾斜标签<em>和</em>

内容划分

语义化

HTML中的元素、属性以及属性值都拥有某些含义
开发者应遵循语义来编写HTML
语义化便于开发者的修改和维护，也便于浏览器的展示和搜索引擎的爬取

前端与HTML ｜ 青训营笔记