这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
什么是前端
解决人机交互问题
前端技术栈
基础：HTML(内容) -> CSS(样式) -> JavaScript(行为)->HTTP协议
都是运行在浏览器里面，而浏览器通过HTTP协议与服务器通信，获取前端代码，而渲染页面
前端应该关注的方面
- 功能，是否满足需求
- 美观，界面是否好看
- 无障碍，是否满足多类用户的使用
- 安全，用户数据的安全
- 性能，页面反应是否快
- 兼容性，多种电子设备是否能使用
- 体验，用户体验是否好
前端的应用
服务端应用
客户端应用
多人会议
游戏
VR
HTML
超文本语言(图片，视频，音频，表格)，可分为单标签和双标签
<!doctype html> <!-- 告诉浏览器使用的HTML版本 -->
<html></html> <!-- 根标签 -->
<head></head> <!-- 头部标签，存放元数据和title标签 -->
<body></body> <!-- 存放主要内容 -->
标题h1~h6
列表
有序列表
<ol>
<li></li>
</ol>
无序列表
<ul>
<li></li>
</ul>
自定义列表
<dl>
<dt>
<dd></dd>
</dt>
</dl>
链接标签
<a href=""> <!-- target="_blank"表示另开另一网页 -->
图片标签
<img src="" alt="" width=""> <!--alt表示图片缓冲出来前显示的文字内容 -->
音频标签
<audio src="" controls></audio> <!--controls表示显示控件 -->
视频标签
<video src="" controls></video>
输入框标签
<input placeholder=""> 表示初始内容
<input type="number" min="" max="">表示输入数字
<input type="date" min="2018-02-10">表示输入日期
多文本框标签
<textarea></textarea>
下拉选择标签
<select>
<option></option>
</select>
块级引用标签
<blockquote cite="http://">
<p></p>
</blockquote>
短引用标签
<cite></cite>(引用名字或章节)<q></q>(表示以前面的段落)
表示代码
<code></code>
<pre></pre>
表示强调
<strong></strong>
<em></em>表示重音
页面整体划分标签
页头<header></header>
导航<nav></nav>
主要内容<main></main>
文章区域<article>
无关内容<aside></aside>
页尾<footer></footer>
HTML中的元素、属性及属性值都拥有某些含义，遵循HTML的语义化
写的HTML的使用：
- 开发者-修改，维护页面
- 浏览器——展示页面
- 搜索引擎——提取关键字、排序
- 屏幕阅读器——给盲人读页面内容
总结
总的来说HTML是传达内容而不是样式，需要合理的使用HTML的语义化标签
