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

聊一聊前端：

什么是前端？

一句话来说：前端工程师是使用Web技术栈解决多端GUI人机交互的工程师。

针对浏览器的开发，浏览器呈现出来的页面就是前端。它的实质是：前端代码在浏览器端被编译、运行、渲染，浏览器端与服务器端通过网络协议进行通讯。前端代码主要由三个部分构成：HTML（超文本标记语言）、CSS（级联样式表）、JavaScript。这也是前端基础技术栈。

Web前端的发展历程（segmentfault.com/a/119000002…

前端应该关注那些方面？

功能、美观、无障碍、安全、性能、兼容、体验

前端的边界：

随着前端的不断更新，前端能做的事也更多，服务端、客户端、p2p、3D游戏等等，演化为一种趋势——大前端

就如Jeff Atwood所言：Any application that can be written in JavaScript, will eventually be written in JavaScript.

（大前端的故事不是一两句能聊完，将会放在另一篇笔记中）

HTML与HTML5

HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)

<head>头部标签</head>
<body>可视标签</body>
<title>页面标题</title>
<div>盒子标签</div>
<p>段落标签</p>
<h1>标题标签</h1>

一句话说出html作用

网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析，就可以显示给用户了

<!DOCTYPE html>
<html lang="en"><!--国家/地区代码-->
<head>
    <meta charset="UTF-8"><!--如需正确地显示 HTML 页面，浏览器必须知道使用何种字符集。-->
    <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>

DOCTYPE标签

<!DOCTYPE> 声明位于文档中的最前面的位置，处于<html> 标签之前。
<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。 HTML5 中仅规定了一种：<!DOCTYPE html>

meta标签

元数据（Metadata）是数据的数据信息。
<meta>标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。
通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。
元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

单双标签

<base /> base标签
<meta /> 元信息
<link /> 引入标签
<br /> 换行标签
<hr /> 水平线
<img /> 图片标签
<input /> 输入框

由<></>组成，有始有终，<>表示标签开始，</>表示标签结束，例如<div>...</div>。

<html>页面标签</html>
<head>头部标签</head>
<body>可视标签</body>
<title>页面标题</title>
<div>盒子标签</div>
<p>段落标签</p>
<h1>标题标签</h1>
<span>空元素</span>
<em>斜体字体</em>
<strong>加粗字体</strong>
<ul><li>无序列表</li></ul>
<ol><li>有序列表</li></ol>
<a href=””>超链接</a>
<iframe>内联框架</iframe>

XHTML的规范最严格，必须在自闭合标签中添加“/”来表明标签的结束。
在HTML4.01的规范中，不推荐在自闭合标签中添加“/”。
而HTML5最宽松，自闭合标签建议不要添加“/”，但在自闭合标签中添加“/”也是支持的。

HTML5新特性

HTML5 是 HyperText Markup Language 5 的缩写，HTML5技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。

1：语义化标签

通过语义化标签，可以让页面有更加完善的结构，让页面的元素有含义，同时利于被搜索引擎解析，有利于SEO（搜索引擎优化），主要标签包括下面的标签：

标签	描述
header	表示文档的头部区域
footer	表示文档的尾部区域
nav	表示文档导航部分
section	表示文档的某一节
article	表示文章
main	表示文档主要的内容区域

2：增强型表单

HTML5新增多个表单类型和属性。

输入类型	描述
color	主要用于选取颜色
date	从一个日期选择器选择一个日期
datetime	选择一个日期（UTC 时间）
datetime-local	选择一个日期和时间 (无时区)
email	包含 e-mail 地址的输入域
month	选择一个月份
number	数值的输入域
range	一定范围内数字值的输入域
search	用于搜索域
tel	定义输入电话号码字段
time	选择一个时间
url	URL 地址的输入域
week	选择周和年

placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
required 属性，是一个 boolean 属性。要求填写的输入域不能为空
pattern 属性，描述了一个正则表达式用于验证<input> 元素的值。
min 和 max 属性，设置元素最小值与最大值。
step 属性，为输入域规定合法的数字间隔。
height 和 width 属性，用于 image 类型的<input>标签的图像高度和宽度。
autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
multiple 属性，是一个 boolean 属性。规定<input> 元素中可选择多个值。

3. 媒体元素

新增了audio和video两个媒体相关的标签，可以让开发人员不必以来任何插件就能在网页中嵌入浏览器的音频和视频内容。

4. canvas绘图

canvas绘图指的是在页面中设定一个区域，然后通过JS动态的在这个区域绘制图形。

5. svg绘图

这一部分不详细展开，想要了解的小伙伴可以参考其他文章~

6. 地理定位

使用getCurrentPosition()方法来获取用户的位置，从而实现队地理位置的定位。

7. 拖放API

通过给标签元素设置属性draggable值为true，能够实现对目标元素的拖动。

8. Web Worker

Web Worker通过加载一个脚本文件，进而创建一个独立工作的线程，在主线程之外运行，worker线程运行结束之后会把结果返回给主线程，worker线程可以处理一些计算密集型的任务，这样主线程就会变得相对轻松，这并不是说JS具备了多线程的能力，而实浏览器作为宿主环境提供了一个JS多线程运行的环境。

9. Web Storage

使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能。数据以键/值对存在, web网页的数据只允许该网页访问使用。

10. Websocket

关于websocket协议，大家主要需要记住的就是websocket和HTTP的区别。

相同点: HTTP和Websocket都是基于TCP的应用层协议。

不同点: websocket是双向通信协议，模拟socket协议，可以双向发送和接受消息，HTTP是单向的，意思是说通信只能由客户端发起。 websocket是需要浏览器和服务器通过握手建立连接，但是HTTP是浏览器向服务器发送连接，服务器预先不知道这个连接。

联系: websocket建立握手时需要基于HTTP进行传输，建立连接之后呢便不再需要HTTP协议了。

参考文章：

www.jianshu.com/p/37c0b1eb4… www.cnblogs.com/vicky1018/p… blog.csdn.net/sinat_41696…

快速发展的前端与 HTML5新特性 | 青训营笔记