重学前端
书籍
JavaScript高级程序设计
- 精通
CSS
解释
- 对于任何计算机语言来说,必定是“用规定的文法,取表达特定语义,最终操作运行时的”的一个过程
- 文法
- 词法
- 直接量
- 关键字
- 运算符
- 语法
- 词法
- 语义
- 语法与语义则是表达式
- 语句、函数、对象、模块
- 运行时
- 类型
- 对象
- 数字
- 字符串
- 执行过程
- 类型
- 文法
- 文法可以分成词法和语法,这来自编译原理的划分,同样是完备的。语义则语法具有一一对应关系。
- 对于运行时部分,这个划分保持了完备性,我们都知道:程序 = 算法 + 数据结构,那么,对运行时来说,类型就是数据结构,执行过程就是算法
- 寻找浏览器
api
, 就是用实际的代码去
JavaScript
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DaQKtfdP-1579689888248)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200121220926429.png)]
- 在
JavaScript
的模块中,首先我们可以把语言按照文法、语法和运行时来拆分,这符合编程语言的一般规律:用一定的词法和语法,表达一定语义,从而操作运行时 - 把运行时分为数据结构和算法部分:数据结构包含类型和实例(JavaScript的类型系统就是它的7种基本类型和7种语言类型,实例就是它的内置对象部分),所谓的算法,就是JavaScript的执行过程。
-
7种基本类型:
-
undefined
,null
,object
,boolean
,string
,number
,symbol
-
-
7种语言类型:
-
List 和 Record
,Set
,Completion Record
,` Reference `` - `` Property Descriptor
,
Data Block ` Lexical Environment 和 Environment Record
-
-
7种基本类型:
HTML 和 CSS
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bsXclgwf-1579689888250)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200121224053233.png)]
HTML
标签
-
head
=>元信息类标签:诸如title
,meta
,style
,link
,base
等,用来描述文档的一些基本信息。 - 语义化标签:
section
,nav
- 替换型媒体类标签:
img
,video
,audio
,用来引入外部内容 - 表单类:
input
,button
分类
- 文档元信息:通常是出现在
head
标签中的元素,包含了描述文档自身的一些信息 - 语义相关:扩展了纯文本,表达文章结构,不同语言要素的标签
- 链接:提供到文档内和文档外的链接
- 替换型标签:引入声音、图片、视频等外部元素替换自身的一类标签
- 表单:用于填写和提交信息的一类标签
- 表格:表头、表尾、单元格等表格的结构
浏览器的实现原理和API
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OuF08RNI-1579689888251)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200121230317911.png)]
前端工程实践
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-elXzwmlF-1579689888253)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200121230512846.png)]
- 语义类标签对开发者更为友好,使用语义类标签增强了可读性,即使实在没有
css
的时候,开发者也能够清晰的看出网页的结构,也更为便于团队的开发和维护 - 除了对人类友好之外,语义类标签也时分适宜机器阅读,他的文字表现力丰富,更适合搜索引擎检索
SEO
,也可以让搜素引擎爬虫更好地获取到更多有效信息,有效提升网页的搜素量,并且语义类还可以支持读屏软件,根据文章可以自动生成目录等 - 没有上下文,如何消除歧义呢?
em
表示重音- 今天我吃了一个苹果
- 今天我吃了一个苹果
-
em
和strong
区别,之间是有很大的区别的,并没有任何混淆的可能
作为标题摘要的语义类标签
文章的结构
-
概念:一篇文档会有一个属性的目录结构,它由各个级别的标题组成。这个属性结构可能不会跟
HTML
元素的嵌套关系一致 -
从
HTML5
开始,我们有了section
标签,它会改变h1-h6
的语义,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>
-
会形成这样的标题结构
-
HTML
语义- 弱语义
- 结构性元素
- 。。。。
-
作为整体结构的语义类标签
-
应用了语义化结构的页面,可以明确地提示 出页面信息的主次关系,它能让浏览器很好的支持‘阅读视图功能’,还可以让搜索引擎的命中率提高,所以正确的使用整体结构类的语义标签,可以让页面对及其更友好。
-
<body> <header> <nav> …… </nav> </header> <aside> <nav> …… </nav> </aside> <section>……</section> <section>……</section> <section>……</section> <footer> <address>……</address> </footer> </body>
-
在body下面,有一个header,header里面是一个nav,跟header同级的有一个aside,aside里面也有一个nav。接下来是文章的整体,也就是一个一个的section。section里面可能还有嵌套,但是我们就不管了,最后是一个footer,这个footer里面可能有address这样的内容。
-
article
:article
是一种特别的结构,它表示具有一定独立性质的文章。所以,article
和body
具有相似的结构,同时,一个HTML
页面中,可能有多个article
存在 -
aside表示跟文章主体不那么相关的部分,它可能包含导航、广告等工具性质的内容。 aside很容易被理解为侧边栏,实际上二者是包含关系,侧边栏是aside,aside不一定是侧边栏。
-
标题+列表 dl>dt>dd 2.普通列表 ul/ol >li