Re-learn front-end notes

Re-learn front-end

books

• JavaScript高级程序设计
• proficientCSS

Explanation

• For any computer language, it must be " specific semantics, taken using a predetermined expression grammar, the final runtime operation of " a process
  • grammar
    • Morphology
      • The amount of direct
      • Keyword
      • Operators
    • grammar
  • Semantic
    • Syntax and semantics are expressions
    • Statements, functions, objects, modules
  • Runtime
    • Types of
      • Objects
      • digital
      • String
    • Implementation process
• Grammar can be divided into morphology and syntax, which is divided from the compiler theory, the same is complete. The semantic syntax has one relationship.
• For the running part, this division maintains completeness, we all know: Program = algorithm + data structure, then the running time, it is the type of data structure, algorithm implementation process is
• Looking browser api, is to use the actual code to

JavaScript

[Pictures of foreign chains dump fails, the source station may have a security chain mechanism, it is recommended to save the picture down directly upload (img-DaQKtfdP-1579689888248) (C: \ Users \ Administrator \ AppData \ Roaming \ Typora \ typora-user-images \ image-20200121220926429.png)]

• In JavaScriptthe module, first of all we can in accordance with the language grammar, syntax and run-time to split, which is in line with the general rules of the programming language: with a certain morphology and syntax, semantic expression must, in order to run operations
• The divided run-time data structures and algorithms parts: a data structure containing types and instances (JavaScript type system is its seven basic types and seven languages type instance is its built-in object portion), so-called algorithms, is a JavaScript Implementation process.
  • Seven basic types:
    • undefined,null,object,boolean,string,number,symbol
  • 7 languages ​​type:
    • List 和 Record,Set,Completion Record,` Reference ``
    • `` Property Descriptor , Data Block `
    • Lexical Environment 和 Environment Record

HTML sum CSS

[Pictures of foreign chains dump fails, the source station may have a security chain mechanism, it is recommended to save the picture down directly upload (img-bsXclgwf-1579689888250) (C: \ Users \ Administrator \ AppData \ Roaming \ Typora \ typora-user-images \ image-20200121224053233.png)]

HTMLlabel

• head=> Meta informational tags: such as title, meta, style, link, baseetc., used to describe some of the basic information of the document.
• Semantic tags: section,nav
• Replaceable media category tags: img, video, audio, for introducing external content
• Form classes: input,button

classification

• Document meta information: usually appear in the headlabel element contains some information describing the document itself
• Semantically related: expanded plain text, the expression of the article structure, different linguistic elements of the label
• Links: provides links to external documents and internal documents
• Alternatively label of: introducing an external sound elements, pictures, video, etc. Alternatively a class of its own tag
• Form: Fill in and submit information for a class label
• Structure header, footer, and other cell tables: Table

The principle of the browser andAPI

[Pictures of foreign chains dump fails, the source station may have a security chain mechanism, it is recommended to save the picture down directly upload (img-OuF08RNI-1579689888251) (C: \ Users \ Administrator \ AppData \ Roaming \ Typora \ typora-user-images \ image-20200121230317911.png)]

Front-end engineering practice

[Pictures of foreign chains dump fails, the source station may have a security chain mechanism, it is recommended to save the picture down directly upload (img-elXzwmlF-1579689888253) (C: \ Users \ Administrator \ AppData \ Roaming \ Typora \ typora-user-images \ image-20200121230512846.png)]

• Semantic category label is more friendly to developers, using semantic category label enhances readability, even if there is no csstime, developers can clearly see the structure of web pages, and more teams to facilitate the development and maintenance of
• In addition to human-friendly than the semantic category label division also suitable for machine reading, writing his rich expressive, more suitable for search engines SEO, but also allows the search engines crawlers better access to information more efficiently and effectively enhance the web the amount of search elements, and semantic class can also support screen reader software can automatically generate a table of contents, etc. according to the article
• No context, how to disambiguate it? emAccented
  • Today I ate a apple
  • Today I ate a apple
  • emAnd the strongdifference between there is a big difference, and there is no likelihood of confusion

As the title abstract semantic category label

Structure of the article

• The concept: a document there will be a property of the directory structure, which consists of various levels of the title composition. This structure may not attribute with HTMLelements nested relationship agreement

• From the HTML5beginning, we have a sectionlabel, it will change h1-h6the semantics sectionof nested will make them h1-h6drop level. Therefore, in html5the future, we need only sectionand h1is enough to form a tree structure of the document

• <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>
  

• Formation of such a structure title

  • HTMLSemantic
    • Weak semantics
    • Structural elements
    • 。。。。

As the overall configuration of a semantic category label

• Application of the semantic structure of the page, you can clearly prompted by the primary and secondary pages of information, which allows the browser very good support 'Reading View function' can also allow search engines to improve the hit rate, so the correct use of the whole semantic tags like structure, allowing the page to its more friendly.

• <body>
      <header>
          <nav>
              ……
          </nav>
      </header>
      <aside>
          <nav>
              ……
          </nav>
      </aside>
      <section>……</section>
      <section>……</section>
      <section>……</section>
      <footer>
          <address>……</address>
      </footer>
  </body>
  

• In the body below, there is a header, a header which is nav, with the same level of a header aside, aside and there was a nav. Next is the whole article, which is a one section. section which may also be nested, but we are on the matter, and finally a footer, the footer which may have such content address.

• article: articleIt is a special structure that represents a certain article of independent nature . Therefore, articleand bodyhaving a similar structure , while a HTMLpage, there may be a plurality of articlepresent

• aside represents with the main part of the article is not so relevant, it may contain content nature of navigation tools, advertising and so on. aside easily be understood as a sidebar , in fact, the two are included relationship , the sidebar is aside, aside necessarily the sidebar.

• + Title list dl> dt> dd 2. ordinary list ul / ol> li