1、什么是前端？
- 解决GUI人机交互问题
- 跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR
- Web技术栈
2、前端技术栈：HTML（内容）、CSS（样式）、JavaScript（行为）
以上运行在浏览器中 <—— 网络协议（http） ——> 服务端 （进行交互）
3、前端应该关注的方面： 功能、美观、无障碍、安全（用户数据）、性能、兼容性、体验
4、HTML格式
<!DOCTYPE html> //标记HTML版本
<html> //文档根标签
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<h1>一级标签</h1>
<p>段落内容</p>
</body>
</html>
5、标题 h1 ~ h6
6、列表
有序列表
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
无序列表
<ul>
<li>苹果</li>
<li>草莓</li>
<li>葡萄</li>
</ul>
带有属性名与属性值的列表
<dl>
<dt>导演：</dt>
<dd>陈XX</dd>
<dt>主演：</dt>
<dd>张XX</dd>
<dd>王X</dd>
<dd>李XX</dd>
</dl>
第三种情况运行结果图：
7、链接
<a href="https://www.baidu.com">百度</a>直接跳转链接
<a href="https://www.baidu.com" target="_blank">百度</a>产生一个新的窗口打开链接
8、图片、音频、视频
<img src="路径" alt="打不开时，显示的可替换文本">
<audio src="路径" controls></audio> //controls 浏览器默认显示供件
<video src="路径" controls></video>
9、输入（文本输入框）
<!-- 默认占位符，用户没有输入的时候显示 -->
<input placeholder="请输入用户名">
<!-- 显示滑动框 -->
<input type="range">
<!-- 指定最小值与最大值 -->
<input type="number" min="1" max="10">
<!-- 输入日期相关值（日期选择框） -->
<input type="date" min="2020-02-22">
<!-- 文本域 -->
<textarea >hey</textarea>
运行图示：
10、
单选框：
<label><input type="radio" name="水果" />苹果</label>
<label><input type="radio" name="水果" />菠萝</label>
<label><input type="radio" name="水果" />鸭梨</label>
复选框:
<label><input type="checkbox"/>篮球</label>
<label><input type="checkbox"/>足球</label>
下拉选择：
<select>
<option value ="">北京</option>
<option value ="">上海</option>
<option value ="">广州</option>
</select>
提示快捷输入方式：
<input list="countries" />
<datalist id="countries">
<option >guree</option>
<option >unite king</option>
<option >wwwwww</option>
</datalist>
11、引用
<blockquote cite="地址">块级引用........</blockquote>
<cite>短引用（书名、章节...）</cite>
<q>之前讲过的内容，再拿出来引用</q>
<code>const</code>声明创建一个只读的常量
<pre><code>
引入多行代码
</code></pre>
<strong>强调非常重要</strong>
<em>语气上强调</em>
12、语义化好处：
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
13、如何做到语义化？
- 了解每个标签和属性含义（mdn文档 W3C上HTML5规范）
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
