这是我参与「第四届青训营 」笔记创作活动的的第1天
什么是前端？
- 解决GUI人机交互的问题
- 解决跨终端适配问题
- PC移动浏览器
- 客户端小程序
- VR/AR等
-
Web技术栈
前端要关注哪些方面？
- 功能（核心点）：功能是否满足需求？
- 美观：好不好看，是不是简洁大方？
- 无障碍：能否满足部分群体的使用需求，例如有色盲症是否也能使用？
- 安全：如何保障用户的数据安全等？
- 性能：网站加载的速度是否够迅捷？动画是否流畅？
- 兼容性：网站能否在不同平台不同设备上能否使用？
- 体验：
HTML
HyperText（图片标题链接表格） Markup Language
超文本标记语言
- 标记了当前html文件是什么版本，浏览器以此决定使用何种渲染模式，如果没有，浏览器会使用老旧的渲染模式去渲染网页导致渲染效果有所出入。
- 根标签
- 放页面的元数据，页面的标题，用了什么编码，部分信息可以被搜索引擎所抓取，在此可以通过SEO优化来提高网站在搜索引擎中的优先级
浏览器拿到html代码会进行解析，解析出DOM树
-
h1-h6
列表标签
-
ol-li 有序
-
ul-li 无序
-
dl-dt-dd 属性列表
-
a标签：链接
标签添加target =“_blank”属性用于设置新建标签页打开网站
-
img, audio, video多媒体标签
img 中alt用于图片加载失败后显示的信息
video :
src 视频播放地址
muted 静音
controls 视频播放器的控制条
autoplay 自动播放(google浏览器禁用了)
loop 循环播放
preload: 缓冲视频文件，没有设置autoplay才会有效。 none就是不缓冲； metadata 缓冲视频文件的元数据 ；auto 缓冲整个视频文件。
poster : 视频封面图片。
audio :
src 视频播放地址
muted 静音
controls 视频播放器的控制条
autoplay 自动播放(google浏览器禁用)
loop 循环播放
preload: 缓冲视频文件，没有设置autoplay才会有效。 none就是不缓冲 ；metadata 缓冲视频文件的元数据 ；auto 缓冲整个视频文件。
- input，textarea输入标签
input 单行输入框
placeholder=“”输入框预设信息
type= range（滑条）
number(输入数字 minmax限定范围）
date(日期选择 min/max限定范围)
checkbox(多选）
radio（单选，添加name属性，同一个name只能选一个）
list（提示输入）
textarea 多行输入框
select 下拉列表
blockquote 长引用标签（快捷引用）属性cite表示引用的链接
cite 短引用：用来引用书名,章节名等较短文字
q 短引用：用来引用较短文字内容
code 代码引用标签
pre 多行代码引用标签
strong 强调标签：突出这个东西重要，紧急。
em 强调标签：一般指在话语中需要重音读的词
html语义化
优点： 有利于团队合作开发 ， 方便其他设备解析 ， 有利于搜索引擎优化（SEO）
lang属性标识内容所使用的语言
title：页面主体内容。
hn：h1~h6，分级标题， h1 与 title 协调有利于搜索引擎优化。
ul：无序列表。
li：有序列表。
header：页眉通常包括网站标志、主导航、全站链接以及搜索框。
nav：标记导航，仅对文档中重要的链接群使用。
main：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
article：定义外部的内容，其中的内容独立于文档的其余部分。
section：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
aside：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
footer：页脚，只有当父级是body时，才是整个页面的页脚。
small：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
strong：和 em 标签一样，用于强调文本，但它强调的程度更强一些。
em：将其中的文本表示为强调的内容，表现为斜体。
mark：使用黄色突出显示部分文本。
figure：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
figcaptio：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
cite：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
blockquoto：定义块引用，块引用拥有它们自己的空间。
q：短的引述（跨浏览器问题，尽量避免使用）。
time：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
abbr：简称或缩写。
dfn：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
address：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
del：移除的内容。
ins：添加的内容。
code：标记代码。
meter：定义已知范围或分数值内的标量测量。（IE不支持 meter 标签，不过它已经被时代所抛弃）
progress：定义运行中的进度（进程）。
我们写的代码是给谁用的？
- 开发者：修改、维护页面
- 浏览器：展示页面
- 搜索引擎：提取关键字、排序
- 屏幕阅读器：给盲人读页面内容（之前很少去思考的反向，思维盲点！）
