前端
何为前端？
使用Web技术栈，解决多端图形用户界面交互问题。
前端技术栈
比较新颖的一点是这里提到了服务器端，这三件套就不说了，前端主要的代码都是围绕这三件套完成的。同时要知道前端解决的交互，那么交互肯定会涉及到通信，通信就涉及到协议了，所以会用到网络协议。当然这里还有很重要的中间应用--浏览器。
前端关注方面
功能、美观、无障碍（考虑特殊群体如红绿色盲）、性能、兼容（网页端、移动端）、安全、使用体验
HTML
定义
HyperText Markup Language(超文本标记语言)，超文本指不仅包含纯文字还有音视频、图片等等。标记语言指<h1>balabala</h1>或者中间不需要放其他内容的<image src="path" />
语法
- 标签和属性不区分大小写，推荐小写（后面的框架有自定义的标签，那些一般会用大写表示，原生的标签一般小写）
- 空标签可以不闭合
- 属性值推荐用双引号包裹
- 某些属性值可以省略，例如他们的值为True或False，直接写个required就代表值为True
标签
标题h1~h6
列表
1、有序列表
<ol> orderedlist
<li>a</li>
<li>a</li>
<li>a</li>
</ol>
2、无序列表
<ul> unordered list
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
3、key-value列表
<dl> defination list
<dt>key: </dt> defination title
<dd>value </dd> defination description
</dl>
链接（anchor锚）
<a href="https://www.baidu.com">百度一下你就知道</a>
href:hyper reference
图音视频
<img src="path" alt="当图片展示不出来时，显示该内容" />
<audio src="path" controls />
<video src="path" controls />
controls代表采用默认组件显示
表单控件
<input placeholder="请输入">
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2018-02-10">
<textarea>Hey</textarea>
<input type="checkbox" />
<input type="radio" name="sport" />
<input type="radio" name="sport" />
通过控制name属性值是否相同，来决定是单选还是多选
<select>
<option>a</option>
<option>a</option>
<option>a</option>
</select>
给定一个下拉选项框
<input list="countries" />
<datalist id="countries">
<option>Greece</option>
<option>Greece</option>
<option>Greece</option>
</datalist>
提供一个补全的作用
内容划分
语义化
将HTML中的元素、标签、属性遵循其语义，其实就是规范化。
谁在使用我们写的HTML
- 开发者
- 浏览器
- 搜索引擎
- 屏幕阅读器
牢记一个原则
HTML传达的是内容而不是样式
比如说：你想要让一个内容作为标题，那么你应该选择<h1>balabala</h1>而不是<p style="font:20px">balabala</p>，想一想如何把语义化融入进去，而不是为了达到所谓的显示效果。
