前端要解决的基本问题？
前端工程师使用Web技术栈解决多端GUI人机交互问题
- 解决GUI人机交互问题
- 跨终端（PC/移动浏览器、客户端/小程序、VR/AR）
- Web技术栈
前端基础技术栈： HTML+CSS+Javascript
前端关注： 美观、功能、无障碍、安全、性能、兼容、体验
什么是HTML？
HyperText Markup Language:超文本标记语言
HTML标签
文档结构标签
<!doctype>：标记当前使用的HTML文件的版本
<html></html>：文档根标签
<head></head>：包含页面原数据，文档标题和编码
<body></body>：页面可视区显示的内容
HTML语法注意点：
- 标签和属性不区分大小写，推荐小写
- 空标签不闭合,eg:input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以忽略,eg:required、readonly
常见内容标签
标题标签h1~h6
列表标签
- 有序列表
<ol></ol> - 无序列表
<ul></ul> - 定义列表
<dl></dl>，里面的<dt></dt>表示属性标题，<dd></dd>表示值
链接标签<a href="链接"></a>
图片标签<img src="" alt="">，alt属性，图片不被加载时页面显示内容
音频标签<audio src="" controls></audio>
controls表示默认显示播放控件
视频标签<video src="" controls></video>
表单控件标签
<input>输入框
placeholder:占位符，用户没有输入时显示的内容
type=
range:滑动块
number：指定输入数字，可以限定最小最大值，达到限制输入的作用
date:日期选择框
checkbox:多选框
radio:单选框，通过相同的name属性指定
list： 提供快捷输入选项
<textarea>：多行输入框
<select></select>：下拉选择框
<option></option>：下拉选择框的选项
引用标签
<blockquote></blockquote>：快捷引用别人的内容
cite属性：引用内容来源
<cite></cite>：短引用，引用了书名、章节名等
<q></q>:短引用内容
代码标签
<code></code>：代码标签
比较长的代码内容在code标签外再加个<pre></pre>
强调内容的标签
<strong></strong>：紧急，着重注意的内容
<em></em>：语气上的强调
页面布局相关标签
<header></header>：放置页面logo、导航
<nav></nav>：导航
<main></main>:页面主体
<aside></aside>:跟页面内容相关，例如新闻网站旁边的广告
<article></article>：文字内容
<footer></footer>：页面尾部
语义化
自我理解：页面内容的含义
语义化的好处：提升代码可读性、可维护性，搜索引擎优化、阅读无障碍性
