这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
前端是什么
- 解决图形界面下的人机交互问题
- 跨端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等等
- web技术栈
- js/css/html
- 网络协议
- 服务端
前端关注点
- 美观
- 功能
- 安全
- 兼容
- 性能
- 无障碍
- 体验
开发环境
HTML（超文本标记语言）
标签
<img src="photo.jpg"/>
- 属性有些可以省略属性值
- 属性值用双引号包裹
- 标签闭合，有些不用
- 不区分大小写
<!doctype html>标签
决定浏览器以何种方式渲染
<head>标签
放置一些不在页面中显示，页面的一些元数据，如网页的图标，网页的标题，语言等信息
<title>页面标题
<meta charset="UTF-8">页面的用于解析的字符集
<h1>~<h6> 标题标签
列表标签(列表项{li})
- 有序列表（ol）
- 无序列表（ul）
- 表格（dl）
<a>超链接标签
属性值：
- href：链接url（#用于设置锚点，用于跳转指定标签）
- target: 新页面打开方式
多媒体
<img>图片<video>视频<audio>音频
输入框（input）
- placeholder 输入提示
- type
- date 日期
- password 密码
- number 数字
- text 文本
input常用于form的表单控件中，用于向服务器传递一些表单数据，如用户的登录信息等
语义化
header，footer，asider，main，blockquot，q，em，p，code，cite，etc...
在实际开发中要尽量使用正确的语义，而不是随意的使用div，span，这样不利于浏览器对页面内容的推送，开发者在维护时也无法快速的辨认出文档的基本结构，也不利于一些浏览器插件的使用，如文本阅读器。
要对语义化要有自己的理解
还有很多的标签未提及，要在mdn文档中将所有的标签过一遍，有个大致的印象，以便开发时使用
