什么是前端
- 解决GUI人机交互问题
- 跨终端
-
2.1 PC/移动浏览器 -
2.2 客户端/小程序 -
2.3VR/AR等
- Web技术栈
前端工程师是使用web技术栈，解决多端图形用户界面交互问题的工程师。
前端技术栈
前端应该关注哪些方面？
功能 美观 无障碍 安全 性能 兼容性 体验
前端的边界？
只有不断地学习才能跟上前端技术的更新。
开发环境
HTML（HyperText Markup Language）
HyperTedt:图片，标题，链接，表格
Markup Language: <h1> 标题 </h1>
<img src="photo.jpg" /> src是属性名，photo.jpg 是属性值
完整的HTML代码
显示
浏览器拿到HTML代码后会解析出DOM树（每一个节点称为DOM节点）
HTML语法
- 标签和属性不区分大小写，但推荐小写
- 空标签可以不闭合，比如：input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如：required、readonly
标题 h1~h6
列表
- 有序列表
<h2> 世界电影票房排行榜</h2>
<ol>
<li>阿凡达</li>
<li>泰坦尼克号</li>
<li>复仇者联盟</li>
</ol>
- 无序列表
<h2>购物清单</h2>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
- 键值对列表
<h2>霸王别姬</h2>
<dl>
<dt>导演：</dt>
<dd>陈凯歌</dd>
<dt>主演：</dt>
<dd>张国荣</dd>
<dd>张丰毅</dd>
<dd>巩俐</dd>
<dt>上映日期：</dt>
<dd>1993-01-01</dd>
</dl>
解释：
<dl> 定义一个列表
<dt> 可以理解为键(key)
<dd>可以理解为值(value)
一个键可以对应多个值
链接
<a href="链接地址" target="以什么方式打开"></a>
图片
<img src="转存失败，建议直接上传图片文件 地址" alt="替代文本转存失败，建议直接上传图片文件" width="宽度"> alt是当图片显示不出来使显示alt对应的值
音频
<audio src="地址" controls></video> controls属性规定浏览器为音频提供播放控件
视频
<video src="URL" controls>\</ video>
输入
placeholder 是占位符
输入多行文字用： <textarea>Hey</textarea>
引用
<blockquote cite="URL"></blockquote>
<cite></cite>
<q></q>
代码
<code></code>
多行代码
<pre>
<code>
代码
</code>
</pre>
强调
<strong>强调</strong>
<em>倾斜·</em>
内容划分
语义化
HTML中的元素、属性及属性值都有某些含义
开发者应该遵循语义来编写HTML
有序列表用ol，无序列表用ul
lang属性表内容所用语言
谁在使用我们写的HTML
开发者-修改、维护页面
浏览器-展示页面
搜索引擎-提取关键词、排序
屏幕阅读器(等)-无障碍性
语义化好处
代码可读性
可维护性
搜索引擎优化
提升无障碍性
HTML传达内容，而不是样式
如何做到语义化
了解每一个标签和属性的含义
思考什么标签最适合描述这个内容
不使用可视化工具生成代码
