重学前端笔记

重学前端

书籍

  • 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

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表示重音
    • 今天我吃了一个苹果
    • 今天我吃了一个苹果
    • emstrong区别,之间是有很大的区别的,并没有任何混淆的可能

作为标题摘要的语义类标签

文章的结构
  • 概念:一篇文档会有一个属性的目录结构,它由各个级别的标题组成。这个属性结构可能不会跟HTML元素的嵌套关系一致

  • HTML5开始,我们有了section标签,它会改变h1-h6的语义,section的嵌套会使得其中的h1-h6下降一级。因此,在html5以后,我们只需要sectionh1就足以形成文档的树形结构

  • <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是一种特别的结构,它表示具有一定独立性质的文章。所以,articlebody具有相似的结构,同时,一个HTML页面中,可能有多个article存在

  • aside表示跟文章主体不那么相关的部分,它可能包含导航、广告等工具性质的内容。 aside很容易被理解为侧边栏,实际上二者是包含关系,侧边栏是aside,aside不一定是侧边栏。

  • 标题+列表 dl>dt>dd 2.普通列表 ul/ol >li

重学前端笔记重学前端笔记 秃如其来的秃头 发布了76 篇原创文章 · 获赞 6 · 访问量 3431 私信 关注
上一篇:h5中的结构元素header、nav、article、aside、section、footer介绍


下一篇:ngnix反向代理导致请求头header中的信息丢失