【笔记】重学前端-winter
本⽂为：winter 发布在极客时间 【重学前端】系列课程的的笔记和总结
⽀持正版哦:
导语
如果深⼊进去了解，你会发现，表⾯上看他们可能是⼀时忘记了，或者之前没注意但实际上是他们对于前端的知识体系和底层原理没有真正系统地理解
前端学习⽅法：
⼀是⽴⾜标准，系统性总结和整理前端知识，建⽴⾃⼰的认知和⽅法论
⼆是放眼团队，从业务和⼯程⾓度思考前端团队的价值和发展需要
第⼀个⽅法：建⽴知识架构
知识的“⽬录”或者索引：把零散的知识组织起来，也能够帮助我们发现⼀些知识上的盲区，⾯试时，定位到知识架构中的位置，相关点讲出
第⼆个⽅法：追本溯源
看这个出现的背景和原因，提出他是为了解决什么或者其底层是什么，其中还可以发掘⼀些趣闻，便于记忆
课程⽬标：
把⽆法通过查阅解决的原理和背景讲清楚
不⽅便查阅和记忆的内容整理好
前端知识体系：
⽤⼀定的词法和语法，表达⼀定语义，从⽽操作运⾏时
数据结构
类型：JavaScript 的类型系统就是它的 7 种基本类型和 7 种语⾔类型
实例：内置对象部分
算法：JavaScript 的执⾏过程
⽂档元信息：通常是出现在 head 标签中的元素，包含了描述⽂档⾃⾝的⼀些信息语义相关：扩展了纯⽂本，表达⽂章结构、不同语⾔要素的标签；
链接：提供到⽂档内和⽂档外的链接
替换型标签：引⼊声⾳、图⽚、视频等外部元素替换⾃⾝的⼀类标签...
表单：⽤于填写和提交信息的⼀类标签；
表格：表头、表尾、单元格等表格的结构。
把 HTML 当作⼀门语⾔来了解下：语法和语⾔机制
补充标准：ARIA，它是 HTML 的扩展，在可访问性领域，它有⾄关重要的作⽤
1.HTML语义
定义：
语义类标签则是纯⽂字的补充,eg：标题、⾃然段、章节、列表，这些内容都是纯⽂字⽆法表达的建议：
只靠 div 和 span 就能⾛天下了:⽤于描述“软件界⾯”多过于“富⽂本”
好处：
1.⽆css时，清晰的⽬录结构
2.SEO
3.读屏软件，根据⽂章可以⾃动⽣成⽬录 eg：阅读视图功能
使⽤场景：
1.作为⾃然语⾔和纯⽂本的补充，⽤来表达⼀定的结构或者消除歧义 eg: ruby(注释)/em(重⾳)
2.⽂章标题摘要
hgroup 标签：在 hgroup 中的 h1-h6 被视为同⼀标题的不同组成部分
<h1>JavaScript 对象 </h1>
<h2> 我们需要模拟类吗？</h2>
</hgroup>
<p>balah balah</p>
......
不加hgroup
section 的嵌套会使得其中的 h1-h6 下降⼀级,HTML5之后，只需要 section 和 h1 就⾜以形成⽂档的树形结构
<section>
<h1>HTML 语义 </h1>
<p>balah balah balah balah</p>
<section>
<h1> 弱语义 </h1>
<p>balah balah</p>
</section>
<section>
<h1> 结构性元素 </h1>
<p>balah balah</p>
</section>
......
</section>
3.适合机器阅读的整体结构
“阅读模式”，以及各种⾮浏览器终端的出现
<header>
<nav>
……
</nav>
</header>
<aside>
<nav>
……
</nav>
</aside>
<section>……</section>
<section>……</section>
<section>……</section>
<footer>
学javascript前要学什么<address>……</address>
</footer>
</body>
article，报纸的多⽂章结构适合⽤ article 来组织，article为独⽴性质⽂章，article与body有相似结构，也可包含header/footer header，如其名，通常出现在前部，表⽰导航或者介绍性的内容
footer，通常出现在尾部，包含⼀些作者信息、相关链接、版权信息
aside 表⽰跟⽂章主体不那么相关的部分，它可能包含导航、⼴告等⼯具性质的内容
2.HTML语义：如何运⽤语义类标签来呈现Wiki⽹页？
实现如下wiki⽹页需要的标签：
aside: 左侧侧边栏/导航性质的⼯具内容
article: 独⽴为⽂章主体
abbr 标签表⽰缩写
hr 表⽰故事⾛向的转变或者话题的转变
strong 重要，⿊体
blockquote, q, cite： blockquote 表⽰段落级引述内容，q 表⽰⾏内的引述内容，cite 表⽰引述的作品名。
time 机器阅读⽅便
figure, figcaption 表⽰与主⽂章相关的图像、照⽚等流内容
dfn 被包裹的名词
pre 不需要浏览器帮我们做⾃动换⾏，不需要浏览器进⾏排版。
samp 计算机程序的⽰例输出
code 代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。