这是我参与「第五届青训营 」笔记创作活动的第1天
1.什么是前端？
解决人机交互问题；跨终端（PC/移动浏览器；客户端/小程序；VR/AR等）；Web技术栈。
2.前端技术栈
服务器端->（网络协议）js(行为）;CSS（样式）;HTML（内容）
3.前端应关注的方面
1.美观；2.兼容；3.性能；4.安全；5.体验；6.无障碍
4.前端的边界
Node；Electron；React Native；Web RTC；web GL；WebASSEMBLY
5.开发环境
1.浏览器：IW/Edge，Chrome，Firefox，Safari；
2.编辑器：VSCode，Vim，WebStrom
6.DOM树
document->html->head->mate document->html->head->title--"Page Title" document->html->body->h1--"Heading" document->html->body->p--"Page Content"
7.标题h1~h6
eg.<h1>字体排印学</h1>
8.链接
eg.1.<a href="https://www.bytedance.com/">
字节跳动官网
</a>
2.跳转的时候开启新窗口
<a href="https://www.bytedance.com/" target="_blank">
字节跳动官网
</a>
9.插入
1.插入图片
<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg" alt="Metal movable type" width="400"/>
2.插入音乐
<aduio src="/asssets/music.ogg" controls></audio>
3.插入音频
<video src="/assets/video.mp4" controls></vidoe>
10.输入
eg.1.输入框（包含提示语）<input placeholder="请输入用户名">
2.可拉动的进度条<input type="range">
3.限制输入数字范围<input type="number" min="1" max="10">
4.输入年/月/日<input type="date" min="2018-02-10">
5.文本域输入（默认Hey）<textarea>Hey</textarea>
11.选择
eg.<p>
<label><input type="checkbox"/>苹果</label>
<label><input type="checkbox" checked />梨
</label>
</p>
(效果：多选，默认选梨)
<p>
<label><input type="radio" name="sport" />足球</label>
<label><input type="checkbox" checked />篮球
</label>
</p>
（效果：单选）
12.下拉菜单
1.<p>
<select>
<option>牛油果</option>
<option>苹果</option>
<option>梨</option>
</select>
</p>
(效果：下拉菜单，不能输入，默认第一个，如果想要默认其他，在option里面加上selected)
<input list="countries" />
<datalist id="countries">
<option>Greece</option>
<option>United Kingdom</option>
<option>United States</option>
</datalist>
(效果：下拉菜单，可以输入，没有默认选择)
13.引用
1.多行引用
eg.<blockquote cite="#">
<p>#</p>
</blockquote>
2.引用（字体变斜）
eg.<p>我最喜欢的一本书是<cite>小王子</cite>
<q></q>(引号)
<code></code>(引用代码)
<pre><code>#(引用代码段)
14.语义化
1.HTML中的元素、属性及属性值都拥有某些含义；
2.开发者应该遵循语义来编写HTML：
a.有序列表用ol；无序列表用ul；
b.lang属性表示内容所使用的语言。
15.语义化的好处
1.代码的可读性；
2.可维护性；
3.搜索引擎的优化；
4.提升无障碍性。
