什么是前端
前端是一种以web技术栈，解决跨终端的GUI人机交互问题的工程师。
前端技术栈
前端的开发技术主要分为三层
- html (内容)
- css （样式）
- JavaScript （交互） 这三种技术都是运行在浏览器里面的，而浏览器可以和HTTP协议和服务器通信。它把前端的这些代码从服务器拿到渲染到浏览器里面。浏览器也可以把用户行为通过http添加到服务器端。
前端需要关注到哪些问题呢？
功能、美观、无障碍、安全、性能、兼容性
用户对产品直观的感受部分都是源自前端，所以前端非常重要。
前端的边界
随着新的技术不断发展，前端能做的东西已经远远超出页面这样的范畴。比如我们可以使用node.js开发服务器端的应用、再比如说我们可以使用ELECTRON开发客户端的应用。也可以用WEBRTC 进行P2P的这种在线的传输多人的会议。也可以用WEBGL开发出一些非常流畅的3D游戏。我们可以可以用WEBASSEMBLY把C++等一些语言写的代码开发成可以在浏览器里运行的一些代码。
总之呢前端在这种互联网行业里面，是一个发展非常快的领域。我们的技术呢在不断的跟新。我们也需要不断的学习才可以跟上技术的发展。
开发环境
用什么都可以啦
HTML
那么什么是HTML呢。它其实是四个单词组合而成。叫HyperText Markup Language。
HyperText ：超文本 - 它是一种很厉害的文本，能表示的不光只有图片。
它是通过 Markup Language （标记语言） 的方式做到的。
<h1>一个标签</h1>
上方这串代码就是一个标签，我们也可以在标签内部加上一些属性。比如下方这段代码表示一串图片图片，它用了src这个属性来表示了一个图片的url。
<img src = "./img.png"></img>
src就是属性名，"./img.png"就代表属性值。
一份完整的html代码
<!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>
hedad标签可以放一些页面的原数据，一些页面需要的数据，但是又不需要直接呈现给用户的。比如用户的标题是什么，页面用了什么样的编码
<body></body>
body标签内部放的就是我们需要呈现给用户的正在的内容，可以是一段文字，一个标题或者是一个图片。
像这个简单的html在浏览器打开是这个效果：
浏览器拿到html代码后会对html代码进行解析，会解析到一个DOM树，像下面那样：
HTML的羽凡本身是非常简单的
标题
在html中标题有h1~h6一共6种，我们在这个例子里面可以看到h1最大，然后h2、h3会稍微小一些。
列表
html中存在三种列表、分别是有序列表，无序列表和Key-Value列表
我们使用ol代表有序列表、ul代表无序列表，K-Y列表一般都有一些属性名和属性值。
链接
链接是一个非常重要的元素，互联网之所以互联互通，可以通过链接点到别的页面。链接用用''标识因为非常常用就只用一个字母表示。它最长用的属性就是href就是超链接的引用地址。我们可以把href作为点击后可以跳转到的地址。点了之后就可以跳转。
多媒体
alt代表当这张图片加载不出来时，所显示的替代性的文本。
audio 代表音频，src代表音频的路径
controls 代表这个音频是需要默认显示在浏览器页面上的。
video 标签和audio标签是相似的，只不过它显示的是视频。
输入
html里面也可以提供一些控件让用户输入或者选择一些值，因为现在很多网站不光只能看，你也可以去交互提供一些信息。
所以表单类的控件就是用来让用户提供一些输入信息的。
最简单的就是一个input标签，一个文本输入框。 input里面有一个placeholder书信表示用户没有输入的时候里面默认存在的内容。
我们也可以使用input输入一些其他值。 例如input type = "range" 之后界面上会显示一个滑动块。
需要让用户输入数字的时候可以使用 type = "number" 用 min 和 max 去指定它的最小值和最大值
也可以用type = "date" 让用户去选择日期。
可以用textarea 标签让用户输入多行文字
选择
除了输入之外也可以让用户在已有的选项里选择一个或多个值。
如果我们限制用户只能在众多选项里面选一个可以写上type="radio"属性。
也可以在用户输入的时候利用datalist给用户提供一些辅助的选项。但是本质上这操作还是input,所以并不会限制用户的输入自由。
文本标签
blockquote标签
每一个文本标签他有不同的含义，比如说关于引用的值就有三种不同的标签。最常见的就有 blockquote 代表块级引用。它表示一个比较长的引用，所以我们也叫长引用。一般它是直接引用别人的一段话。比如说在这个例子里面我直接引用了鲁迅的某个文章里面的一整段文字，那么我们可以直接用块级引用写出来。块级应用里面有cite属性，代表我引用的这段文字来源于哪里。
cite标签
cite标签它是短引用，我们一般用短短的几个字来去表示我们引用了别人的作品的名字或者章节。
q标签
上文讲的cite一般是指引用的某个章节或名字，q一般值具体的引用内容。
code标签
上面是关于引用的三个标签，比如说code标签。code标签顾名思义，就是代码。比如说我们页面中提到了代码的一些东西。可以用code标签去把它引用起来。 在引用多行代码通常使用pre标签于code标签嵌套使用。
strong与em
strong与em标签那么这两个标签有什么区别呢？对于strong来说它更多的是突出内容的重要、紧急。em更多的是突出语气上的强调。
内容划分
这是一个经典的常见的页面布局结构体。 它有一个页头一般都是使用hader。 页面主体放在main标签中。 文章正文可以放在article aside一般属于和main相关但是不是文章的重点比如：广告、目录、推荐。 footer标签，footer一般是放在页面尾部的标签，可以放版权，参考链接，备案信息等等。
语义化
HTML从1.0到HTML5中间迭代新增加了很多标签也删除了很多标签，为什么要进行添加或者删除某些标签。做这样的改动有什么样的意义呢？它的一个点就在于html的作用就是用来表述内容和结构的，我们能不能清晰的去表达出来这个内容和结构这就是我们要考虑增加或者删除一个html标签的目的。
假如说我们有必要去引入一个新的标签去表述这种内容或结构。那么HTML就会多这样一种标签,所谓的语义具体是指什么呢？
就是说HTML所有的元素、属性或者属性的值都有一定特定的含义，这些含义其实就是叫语义。我们开发的其实是需要去遵循HTML的语义来编写HTML。比如有序列表就用ol,无序列表就用ul。在lang语言那么我们就应该用应该配置正确的语言。
比如说浏览器会有一些自动翻译，它有可能去自动猜测当前页面是否是英文是否需要翻译成中文等。
那么有时候这种翻译的时机不是这么准确，那么我们如何准确的去标记出来页面是什么语言呢，我们就可以在页面上写lang标签，内部填写正确的语言，这样我们都说清楚了就不用浏览器去猜了。
那么我们为什么一定要强调让大家用语义化的方式去写HMLT呢？我们在回答这个问题之前，我们先了解一下我们写的代码是给谁用的。
谁在使用我们写的html
开发者
首先作为开发者，写代码的可能就不止你一个人 就是你写的代码最后还是会交给别人去维护，在一个团队里面，大家都去维护同样的代码，我们要有一些规范。就是说每一块的内容是什么。比如说你看见一个标题，写了h3这个标题，我们就知道它是个标题。 假如说有一个开发者它在表述一个标题的时候他不用h3或者h4，就随便写了一个div或者什么别的。作为一个维护人员，看到这个div的时候就不能一眼get到它是一个标题了，对于协作来说，一个标准化的规范是非常重要的。
浏览器
浏览器会读我们的页面是什么。
搜索引擎
很多搜索引擎会抓取我们的html页面，那么抓取的时候会把html拿过来去做一些关键词的提取、排序。 那么建立索引排序的依据是什么？ 比如说同样去搜索引擎去搜JavaScript关键字。有个页面里出现了三次，有另外一个页面里出现在正文里。这个权重肯定是不一样的。肯定是出现在标题里会认为相关性更好，会优先展示。 对于搜索引擎优化是非常重要的
屏幕阅读器
还有一部分就是我们刚刚所讲到的无障碍性，无障碍性就是说我们写的这些页面，我们在完全的、完整的、有能力的设备上他认为正常能用。 有些场景下你访问的条件可能会不那么好比如说图片，我们在网速非常好的情况下图片会很快加载出来，没有问题。但有些情况下就是受制于流量或者网络不好的情况这个图片没有加载出来，是不是要有一个替代性的方案用来传达图片所需要传达的内容。 在我们之前的理解里无障碍性总是和残疾人相关的，其实这个概念理解的是有一点窄的。我们可以把这个概念放的更宽泛一些。
