这是我参与「第五届青训营 」笔记创作活动的第1天。
今日要点：
-
前端：
- 什么是前端
- 前端的技术栈
- 前端的边界
- 前端的关注点
- 开发环境
-
HTML：
- HTML简介
- 常用标签
- HTML语义化
前端
什么是前端
前端的要点为：
-
解决GUI人机交互问题
-
跨终端
- PC移动浏览器
- 客户端/小程序
- VR/AR等
-
Web技术栈
因此，前端工程师就是使用Web技术栈解决多端图形界面交互问题的工程师。
前端的技术栈
HTML、CSS、JavaScript和网络协议构成了前端最基础的技术栈。
- HTML：HTML是网页的骨架，它决定了网页的整体结构。
- CSS：CSS样式为网页提供美化，使网页更加饱满。
- JavaScript：JavaScript为网页提供了行为，让网页能够”动“起来。
前端的边界
随着新的技术不断地发展，前端的范畴已经不局限于网页页面，例如：
- 通过node.js开发服务器端的内容
- 通过ELECTRON或者React Native开发客户端的应用
- 用webrtc进行在线传输，实现多人的会议
- 使用WebGL开发3D游戏
- 使用WebASSEMBLY把C++等其他的语言编译的代码转换成可以在浏览器运行的代码
前端的关注点
- 产品的功能有没有满足客户的需求
- 产品的美观
- 无障碍，即做出来的网站是不是所有人都可用
- 产品能否保护所有用户数据的安全，有没有存在可能被利用的漏洞
- 产品的性能
- 产品的兼容性，产品是否能在各种环境下流畅运行
- 用户的体验
开发环境
- 编辑器
- 浏览器
使用编辑器（如VSCode）将代码保存成html文件，然后在浏览器（IE/Edge、chrome、FireFox、Safari等）打开就能看到效果。
HTML
HTML简介
HTML（Hyper Text Markup Language），即超文本标记语言，它决定了网页的整体结构。
在VSCode中，我们可以通过输入“！”+回车或TAB快速生成一个如下的html基础框架。
<!DOCTYPE html>
/*告诉浏览器网页的HTML版本*/
<html lang="en">
/*文档根标签（开始部分），与</html>一起承载整个网页的数据，lang=“en”表示该网页语言使用的语言（lang）为英语(en)*/
<head>
/*网页头部（用来存放特殊的内容）的开始*/
<meta charset="UTF-8">
/*网页使用的字符编码为UTF-8*/
<meta http-equiv="X-UA-Compatible" content="IE=edge">
/*避免渲染时的兼容性问题*/
<meta name="viewport" content="width=device-width, initial-scale=1.0">
/*将视区设为设备的物理宽度相同的宽度*/
<title>Document</title>
/*网页标题*/
</head>
/*网页头部的结束*/
<body>
/*网页主体部分的开始*/
.../*网页主体部分内容*/
</body>
/*文档主体部分的结束*/
</html>
/*网页结束*/
常用标签
标签由<，>，/，英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名。
标签按照结构分为单标签（<a>，<img>,<hr>...）和双标签(<p></p>,<div></div>...)。
- 只有一个标签的是单标签。
- 有开始标签和结束标签，并且将内容包裹在开始标签与结束标签中的是双标签。
1. 排版标签
1.1 标题标签：
1~6级标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
特点：
- 文字都有加粗
- 文字都有变大，并且从h1->h6文字逐渐减小
- 独占一行
1.2 段落标签：
<p>内容</p>
每个段落之间存在间隙，但在本段中各行之间没有间隙独占一行
1.3 换行标签
<br>
1.4 水平线标签
<hr>
2. 文本格式化标签
加粗（2种写法）：
-
<b>内容</b>内容
-
<strong>内容</strong>内容
下划线（2种写法）：
-
<u>内容</u>内容
-
<ins>内容</ins>内容
倾斜（2种写法）：
-
<i>内容</i>内容
-
<em>内容</em>内容
删除线（2种写法）：
-
<s>内容</s>内容 -
<del>内容<del>内容
3. 媒体标签
图片标签：
<img src="" alt="图片加载中，请稍后...">
src：目标图片的路径
alt：图片未加载出时，显示的文字
音频标签：
<audio src=""></audio>
src：音频文件的路径
视频标签：
<video src=""></video>
src：视频文件的路径
4. 链接标签
<a href="">点击跳转</a>
href：目标网页的路径
5. 列表标签
5.1 无序列表
<ul>
<li>第1个li标签</li>
<li>第2个li标签</li>
<li>第3个li标签</li>
</ul>
<ul></ul>代表无序列表这个整体。
每个<li></li>标签对应无序列表的每一项，它们的开头默认有一 个圆点。
5.2 有序列表
<ol>
<li>第1个有序列表的标签</li>
<li>第2个有序列表的标签</li>
<li>第3个有序列表的标签</li>
</ol>
<ol></ol>代表无序列表这个整体。
每个<li></li>标签对应有序列表的每一项，它们的开头默认有数字排序。
5.3 自定义列表
<dl>
<dt>自定义列表的标题1</dt>
<dd>自定义列表的第1个dd标签</dd>
<dd>自定义列表的第2个dd标签</dd>
<dd>自定义列表的第3个dd标签</dd>
<dt>自定义列表的标题2</dt>
<dt>自定义列表的标题3</dt>
<dd>自定义列表的第4个dd标签</dd>
<dd>自定义列表的第5个dd标签</dd>
<dd>自定义列表的第6个dd标签</dd>
</dl>
<dl></dl>代表自定义列表这个整体。
<dt></dt>代表自定义列表的标题。
<dd></dd>代表自定义列表中的每一项，它们的开头默认有一段间距。
一个<dl></dl>标签可以有多个<dt></dt>标签，一个<dt></dt>标签可以有多个<dd></dd>标签。
6.表格标签
<table border="3">
<tr>
<td>第1个td</td>
<td>第2个td</td>
<td>第3个td</td>
</tr>
<tr>
<td>第4个td</td>
<td>第5个td</td>
<td>第6个td</td>
</tr>
</table>
<table></table>代表表格整体
<tr></tr>代表表格的每一行
<td></td>代表表格的每一项
（上图通过border="3"给表格添加了边框，table标签默认没有边框宽度）
7. 表单标签
7.1 input标签
<input type="text">
type属性的值为“text”时，生成一个可以输入内容的文本框。
<input type="password">
type属性的值为“password”时，生成一个可以输入内容的密码框，在密码框中输入的内容都显示为原点。
<input type="radio">单选框
type属性的值为“radio”时，生成一个单选框，默认没有选中。
<input type="checkbox">复选框
type属性的值为“checkbox”时，生成一个复选框，默认没有选中。
<input type="file">
type属性的值为“file”时，生成一个点击选择文件的标签。
7.2button按钮标签
<button type="submit">提交</button>
type属性的值为“submit”时，生成一个提交按钮，点击之后提交数据给后端服务器。
<button type="reset">重置</button>
type属性的值为“reset”时，生成一个重置按钮，点击之后回复表单默认值。
<button type="button">按钮</button>
type属性的值为“button”时，生成一个普通按钮，默认无功能，之后配合js添加功能。
7.3textarea文本域标签
<textarea></textarea>
生成一片可以输入文本的区域，拖拽右下角可以调节区域的大小。
HTML语义化
语义化是什么？
-
HTML中的元素、属性及属性值都拥有某些含义
-
开发者应该遵循语义来编写HTML
- 有序列表用ol；无序列表用ul
- lang属性表示内容所使用的语言
谁在使用我们写的HTML？
- 开发者-修改、维护页面
- 浏览器-展示页面
- 搜索引擎-提取关键字
- 屏幕阅读器-给盲人读页面内容
语义化的好处
- 提高代码可读性
- 提升代码可维护性
- 搜索引擎优化
- 提升无障碍性
如何做到语义化？
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不适用可视化工具生成代码
