参考：重学前端
列一份前端知识架构图
前端知识架构
-
用一定的词法和语法，表达一定语义，从而操作运行时。
-
运行时 = 数据结构 + 执行过程
-
程序 = 数据结构 + 算法。
-
标签分为以下几种：
a. 文档元信息：通常是出现在head标签中的元素，包含了描述文档自身的一些信息；
b. 语义相关：扩展了纯文本，表达文章结构、不同语言要素的标签；
c. 链接：提供到文档内和文档外的链接；
d. 替换型标签：引入声音、图片、视频等外部元素替换自身的一类标签；
e. 表单：用于填写和提交信息的一类标签；
f. 表格：表头、表尾、单元格等表格的结构。 -
在现代互联网产品里，HTML用于描述 "软件界面" 多过于“富文本”，而软件界面里的东西，实际上几乎是没有语义的，譬如：购物车功能。
错误地使用语义标签，会给机器阅读造成混淆、增加嵌套，给CSS编写增加重负担。
- 以下列出了几种语义标签使用场景。
作为自然语言延伸的语义类标签——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 中的导航多数是到关联页面或者是整站地图。
-
abbr 标签表示缩写，例如WWW 表示 World Wide Web 的缩写：
<abbr title='World Wide Web' >WWW</abbr> -
HTML中有三个跟引述相关的标签 blockquote 表示段落级引述内容，q 表示行内的引述内容，cite 表示引述的作品名。
-
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>. -
figure、figcaption 用于与主文章相关的照片、图像等流内容
<figure> <img src="https://.....440px-NeXTcube_first_webserver.JPG"/> <figcaption>The NeXT Computer used by Tim Berners-Lee at CERN.</figcaption> </figure> -
<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. -
pre、code、samp
-
更多
更多标签
-
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 支持一批特定的计算型函数：
- calc() 函数是基本的表达式计算，它支持加减乘除四则运算。在针对维度进行计算时，calc() 函数允许不同单位混合运算，这非常的有用。
section {
float: left;
margin: 1em; border: solid 1px;
width: calc(100%/3 - 2*1em - 2*1px);
}
- max() 表示取两数中较大的一个
- min() 表示取两数中较小的一个
- clamp() 则是给一个值限定一个范围，超出范围外则使用范围的最大或者最小值
- toggle() 函数在规则选中多于一个元素时生效，它会在几个值之间来回切换，比如我们要让一个列表项的样式圆点和方点间隔出现，可以使用下面的代码：
ul { list-style-type: toggle(circle, square); }
- attr() 函数允许CSS 接受属性值的控制
网友评论