重学前端

2019-05-25  本文已影响0人  孤鹰苍穹

参考：重学前端

列一份前端知识架构图

前端知识架构

  1. 用一定的词法和语法，表达一定语义，从而操作运行时。

  2. 运行时 = 数据结构 + 执行过程

  3. 程序 = 数据结构 + 算法。

  4. 标签分为以下几种：


    a. 文档元信息：通常是出现在head标签中的元素，包含了描述文档自身的一些信息；
    b. 语义相关：扩展了纯文本，表达文章结构、不同语言要素的标签；
    c. 链接：提供到文档内和文档外的链接；
    d. 替换型标签：引入声音、图片、视频等外部元素替换自身的一类标签；
    e. 表单：用于填写和提交信息的一类标签；
    f. 表格：表头、表尾、单元格等表格的结构。

  5. 在现代互联网产品里，HTML用于描述 "软件界面" 多过于“富文本”，而软件界面里的东西，实际上几乎是没有语义的，譬如：购物车功能。

错误地使用语义标签，会给机器阅读造成混淆、增加嵌套，给CSS编写增加重负担。

  1. 以下列出了几种语义标签使用场景。

作为自然语言延伸的语义类标签——ruby、em、i、strong、b

作为自然语言和纯文本的补充，用来表达一定的结构或者消除歧义

Example:

 <ruby>
    明日 <rt>(Ashita)</rt>
 </ruby>
 <br/>
 <ruby>
   漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
   字 <rp>(</rp><rt>ji</rt><rp>)</rp>
 </ruby>
ruby
还有一种情况是，HTML 的有些标签实际上就是必要的，甚至必要的程度可以达到：如果没有这个标签，文字会产生歧义的程度。

Example:

今天我吃了一个 <em> 苹果 </em>。
今天我吃了 <em> 一个 </em> 苹果。
  • strong 和 b： strong是一个逻辑状态，而bold是一个物理状态。逻辑状态分离内容和表现形式，使用逻辑状态允许你用各种不同的方式来表达。比如你想把文字渲染成红色，使用其它大小的字体、带有下划线或其他样式，而不是加粗的样式。必须要理解使用strong呈现出的表现形式不同于单纯的加粗。 因为bold是一个物理状态，他没有区分表现形式和内容。如果让bold做了加粗文本外的其它任何事情，都将会令人困惑而且也不符合逻辑。
    同样应该注意<b></b> 还有其他用途，比如想单纯地吸引注意而不增加其重要性。
  • em 和 i： 在 默认情况下，视觉效果是一样的- 这两个标签都把内容呈现为斜体. 但语义是不同的。 <em> 标签表示着重强调其内容，而 <i> 标签表示从正常的散文中区分出的文本, 如电影或书籍的名字，一个外来词, 或者当文本指的是一个字的定义，而不是其自身代表的语义。
    例如， <em> 可能是: "Just do it already!", 或: "We had to do something about it". 人或软件在阅读文本时会对斜体字的发音使用重读强调。
    例如， <i> 可能是: "The Queen Mary sailed last night". 在这里，没有必要对这个词"Queen Mary"添加强调或重要性. 它只是表明，谈论问题的对象不是一个名叫玛丽女王, 而是一艘名字叫玛丽的船. 另一个例子 <i> 可能是: "The word the is an article".

作为标题摘要的语义类标签——hgroup、section

Example:
在 hgroup 中的 h1-h6 被视为同一标题的不同组成部分：

<hgroup>
  <h1>JavaScript 对象 </h1>
  <h2> 我们需要模拟类吗？</h2>
</hgroup>
<p>balah balah</p>
......

从HTML5开始，我们有了section标签，这个标签可不仅仅是一个“有语义的div”，它会改变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>

作为整体结构的语义类标签——

Example:
一个典型的场景是多篇新闻展示在同一个新闻专题页面中，这种类似报纸的多文章结构适合用 article 来组织：

<body>
  <header>……</header>
  <article>
    <header>……</header>
    <section>……</section>
    <section>……</section>
    <section>……</section>
    <footer>……</footer>
  </article>
  <article>
    ……
  </article>
  <article>
    ……
  </article>
  <footer>
    <address></address>
  </footer>
</body>
  • article是一种特别的结构，它表示具有一定独立性质的文章。所以，article 和 body 具有相似的结构，同时，一个HTML页面中，可以有多个 article 存在。
  • aside表示跟文章主体不是那么相关的部分，它可能包含导航、广告等工具性质的内容。aside 很容易被理解为侧边栏，实际上两者是包含关系，侧边栏是aside，aside不一定是侧边栏。
  • aside 和 header 中都可能出现导航（nav 标签），二者的区别是，header 中的导航多数是到文章自己的目录，而 aside 中的导航多数是到关联页面或者是整站地图。

  1. abbr 标签表示缩写，例如WWW 表示 World Wide Web 的缩写：

      <abbr title='World Wide Web' >WWW</abbr>

  2. HTML中有三个跟引述相关的标签 blockquote 表示段落级引述内容，q 表示行内的引述内容，cite 表示引述的作品名。

  3. time 标签

     <cite>"What is the difference between the Web and the Internet?"</cite>. W3C Help and FAQ. W3C. 2009. Archived from the original on <time datetime="2015-07-09">9 July 2015</time>. Retrieved <time datetime="2015-07-16">16 July 2015</time>.

  4. figure、figcaption 用于与主文章相关的照片、图像等流内容

    <figure>
   <img src="https://.....440px-NeXTcube_first_webserver.JPG"/>
   <figcaption>The NeXT Computer used by Tim Berners-Lee at CERN.</figcaption>
</figure>

  5. <dfn></dfn> 用来包裹被定义的名词

    The terms Internet and World Wide Web are often used without much distinction. However, the two               are not the same. 
The <dfn>Internet</dfn> is a global system of interconnected computer networks.
In contrast, the <dfn>World Wide Web</dfn> is a global collection of documents and other resources,         linked by hyperlinks and URIs.

  6. pre、code、samp

  7. 更多


    更多标签

  8. CSS的顶层样式表由两种规则组成的规则列表构成，一种是“@规则”，一种是“普通规则”

@规则

@charset
用于提示CSS文件使用的字符编码方式，它如果被使用，必须出现在最前面。这个规则只在给出语法解析阶段前使用，并不影响页面上的展示效果。

@charset "uft-8"

@import
用于引入一个CSS文件，除了@charset规则不会被引入，@import可以引入另一个文件的全部内容。

@import "mystyle.css"
@import url("mystyle.css")

@import [ <url> | <string> ]
               [ supports( [ <supports-condition> | <declaration> ] ) ]?
               <media-query-list>?

@media
media 就是大名鼎鼎的 media query 使用的规则了，它能够对设备的类型进行一些判断。在media 的区块内，是普通规则列表。

@media print {
    body { font-size: 10pt }
}

@page
page 用于分页媒体访问网页时的表现设置，页面是一种特殊的盒模型结构，除了页面本身，还可以设置它周围的盒。

@page {
    size:  8.5in 11in;
    margin: 10%;

    @top-left {
        content: "Hamlet";
    }
    @top-right {
        content:  "Page" counter(page);
    }
}

@counter-style
counter-style 产生一种数据，用于定义列表项的表现。

@counter-style triangle {
    system: cyclic;
    symbols:  ;
    suffix: " ";
}

@key-frames
keyframes 产生一种数据，用于定义动画关键帧。

@keyframes diagonal-slide {
    from {
        left: 0;
        top: 0;
    }
    to {
        left: 100px;
        top: 100px;
    }
 }

@fontface
fontface 用于定义一种字体，icon font 技术就是利用这个特性来实现的。

@font-face {
  font-family: Gentium;
  src: url(http://example.com/fonts/Gentium.woff);
}

p { font-family: Gentium, serif; }

@support
support 检查环境的特性，它与media 比较类似。

@namespace
用于跟XML命名空间配合的一个规则，表示内部的CSS选择器全都带上特定命名空间。

@viewport
用于设置视口的一些特性，不过兼容性目前不是很好，多数时候被 html 的 meta 代替。

普通规则(qualified rule)

* 普通规则
  * 选择器
  * 声明列表
    * 属性
    * 值
      * 值的类型
      * 函数

在 CSS Variables 标准中，以双中划线开头的属性被当作变量，与之配合的则是 var 函数：

:root {
  --main-color: #06c;
  --accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
  color: var(--main-color);
}

CSS 支持一批特定的计算型函数：

section {
  float: left;
  margin: 1em; border: solid 1px;
  width: calc(100%/3 - 2*1em - 2*1px);
}

ul { list-style-type: toggle(circle, square); }
上一篇 下一篇

猜你喜欢

热点阅读