什么是前端
解决人机交互问题
跨终端
PC/移动浏览器 客户端小程序 VR/AR等
解决多端页面问题
前端技术栈
HTML，CSS，JavaScript 运行在浏览器中，浏览器通过网络协议与服务器进行通信。
前端应该关注哪些方面？
人机交互问题
功能 ：有哪些功能解决什么问题，有没有满足用户的一些需求
美观： 做出来的界面是不是好看
无障碍：做的网站是不是对所有人都可以用的，比如色盲症这些人
安全：能不能保障所以用户数据的安全，有没有存在一些漏洞被利用
性能：网站做出来速度是不是足够快，动画流畅，用户体验足够好
兼容性：做出来的网站是不是能在各种各样的设备上正常去使用，比如在电脑手机上可以使用
体验： 用户对产品直观的感受，前端对用户体验来说是非常重要的
前端的边界？
node.js：开发服务器端的一些应用
ELECTRON/React Native：开发客户端的应用
Web Rtc：开发在线传输 多人会议
WebGL：开发流畅3d的游戏
WewAssembly： c++ 其他的语言编写的一些代码直接编译在浏览器里面可以运行得一些代码
开发环境
编译器：VSCode Vim WebStorm
浏览器：IE Chrome Firefox Satari
HTNL是什么？
(HyperText Markup Language)超文本标记语言
<!doctype html>声明html当前版本
<hmtl>根标签
<head> 原数据
`<meta charset="UTF-8">`标签 实例 规定 HTML 文档的字符编码 `<title>页面标题</title>`页面的标题
</head>
<body>呈现给用户的真正内容
</body>
</html>
浏览器拿到html代码然后解析出来一个Dom树
HTML语法
1、标签和属性不区分大小写，推荐小写 2、空标签可以不闭合，比如input、meta、img... 3、属性值推荐用双引号包裹 4、某些属性值可以省略比如required、readonly...
标题标签
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
列表
有序列表
<ol>
`<li></li>`
</ol>
无序列表
<ul>
<li></li>
</ul>
自定义列表
<dl>
<dt></dt>
<dd></dd>
</dl>
链接
<a href="#">href链接地址
多媒体
<img src="#" alt="#> src图片地址，alt 图片显示不出来用文字代替
<audio>音频
<video>视频
输入
<input placeholder="未输入时显示">未输入时显示
type属性
type="ranqe"ranqe范围
type=“number”只能输入数字
type=“dete”日期
type=“checkbox”多选项
type=“redio”单选项
<textarea></textarea>文本框
<select>下拉选项
<option></option>
</select>
文本标签
<blockquote></blockquote>块级引用：表示比较长的引用直接引用别人的一段话
<cite></cite>短引用，比如引用作者的名字
<q></q>具体内容引用
<code></code>页面中提到代码引用
<pre></pre>多行代码引用
<strong></strong>加粗表示这个东西非常重要
<em></em>语气上的强调
内容划分
header 头部内容
nav 导航栏
main 主内容
aside 次内容
footer 页尾
语义化是什么？
1、HTML中的元素属性及属性值都拥有某些含义
2、开发者应该遵循语义来编写HTML
比如：有序列表用ol
无序列表用ul
lang属性表示内容所使用的语言
谁在使用我们写的HTML
1、开发者-修改、维护页面
2、浏览器-展示页面
3、搜索引擎-提取关键词、排序
4、屏幕阅读器-给盲人读页面内容
语言化的好处
1、代码可读性
2、可维护性
3、搜索引擎优化
4、提升无障碍性
如何做到语义化
1、了解每个标签和属性的含义
2、思考什么标签最适合描述这个内容
3、不使用可视化工具生成代码
