首页 > 其他分享> > 重学前端笔记

重学前端笔记

2020-01-22 19:03:17 作者：互联网

重学前端

书籍

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

浏览器的实现原理和`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

秃如其来的秃头发布了76 篇原创文章 · 获赞 6 · 访问量 3431 私信关注

标签：HTML,标签,前端,语义,aside,笔记,balah,section
来源： https://blog.csdn.net/weixin_43550660/article/details/104071923