发表于

一、语义化

1、语义化属性

  • 添加itemprop、itemscope属性，到达数据结构化，属性名可参考 schema.org；
  • meta标签和itemprop属性，<meta itemprop="dateModified" content="2018-11-17T04:14:51.000Z">；

注：参考知乎页面，改动一下meta的读取位置

1
2
3
4
<!--可以尝试，将meta标签放在需要元信息的块中-->
<article>
    <meta itemprop="dateModified" content="2018-11-17T04:14:51.000Z">
</article>

2、语义化标签

  • 各个标签的含义，使用场景

注：语义化，即面向对象写html，方便网络蜘蛛或人快速理解网页结构和内容。


阅读全文 »

发表于

一、itemprop属性

全局属性 itemprop被用于向一个物体中添加属性。每一个HTML元素都可以指定一个itemprop属性，一个itemprop属性由name-value对组成。属性值可以是一个string或者一个URL，并且可以和大部分元素进行组合，包括img、video、link、source 、audio等。

阅读全文 »

发表于

一、tabindex 属性

tabindex 是一个全局属性，值为整数类型，表示元素（如果可聚焦）是否能够接受输入焦点。 如果它应该参与键盘序列导航，那么就是它的位置。它可以设为多种值：

  • tabindex=负值 (通常是tabindex=“-1”)，表示元素是可聚焦的，但是不能通过键盘导航来访问到该元素，用JS做页面小组件内部键盘导航的时候非常有用。

  • tabindex="0" ，表示元素是可聚焦的，并且可以通过键盘导航来聚焦到该元素，它的相对顺序是当前处于的DOM结构来决定的。

  • tabindex=正值，表示元素是可聚焦的，并且可以通过键盘导航来访问到该元素；它的相对顺序按照tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex，它们的相对顺序按照他们在当前DOM中的先后顺序决定。

如果我们在div上设置了 tabindex 属性，它的子元素内容不能使用箭头键来滚动，除非我们在内容上也设置 tabindex。

注：tabindex 的最大值不应超过 32767。如果没有指定，它的默认值为 -1。

阅读全文 »

发表于

一、常用命令

1
2
3
4
5
nginx -?,-h #查看帮助
nginx -v #查看版本
nginx #启动服务
service nginx restart #重启服务
nginx -s reload|stop|quit #重载配置、停止服务

注：

  • reload：重新加载配置文件，Nginx服务不会中断。检查语法，如果出错会rollback
  • stop：快速停止 ，不管有没有正在处理的请求
  • quit：正常停止，退出前完成已经接受的连接请求 。只有启动Nginx的用户才能执行该命令
阅读全文 »

发表于

一、概括

CommonJs用在服务器端，AMD和CMD用在浏览器环境。AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。


阅读全文 »

发表于

echarts配置

图例legend的data
  • 字符串数组项
1
2
3
legend: {
    data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
}
  • 对象数组项
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
legend: {
    data: [
        {
            name: '系列1',
            // 强制设置图形为圆。
            icon: 'circle',
            // 设置文本为红色
            textStyle: {
                color: 'red'
            }
        },
        {
            name: '系列2',
            // 强制设置图形为圆。
            icon: 'circle',
            // 设置文本为红色
            textStyle: {
                color: 'red'
            }
        }
    ]
}
阅读全文 »

发表于

当<html>标签无背景样式时，<body>的背景色其实不是<body>标签的背景色，而是浏览器的。

一旦html标签含有背景色，则<body>的背景色变成了正常的<body>标签（一个实实在在，普普通通标签）的背景色，而此时的<html>标签最顶级，背景色被浏览器获取，成为浏览器的背景色。

发表于

vertical-align

CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。


相对父元素的值

这些值使元素相对其父元素垂直对齐：

  • baseline

    使元素的基线与父元素的基线对齐。HTML规范没有详细说明部分可替换元素的基线，如textarea ，这意味着这些元素使用此值的表现因浏览器而异。

  • sub

    使元素的基线与父元素的下标基线对齐。

  • super

    使元素的基线与父元素的上标基线对齐。

  • text-top

    使元素的顶部与父元素的字体顶部对齐。

  • text-bottom

    使元素的底部与父元素的字体底部对齐。

  • middle

    使元素的中部与父元素的基线加上父元素x-height（译注：x高度）的一半对齐。

  • height

    使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。

  • percentage

    使元素的基线对齐到父元素的基线之上的给定百分比，该百分比是line-height属性的百分比。可以是负数。


阅读全文 »

发表于

BEM命名规范

BEM代表 “块（block），元素（element），修饰符（modifier）”，我们常用这三个实体开发组件。

在选择器中，由以下三种符号来表示扩展的关系：

1
2
3
4
5
-   中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
__  双下划线：双下划线用来连接块和块的子元素
_   单下划线：单下划线用来描述一个块或者块的子元素的一种状态

.block__element_modifier

块（block）

一个块是设计或布局的一部分，它有具体且唯一地意义 ，要么是语义上的，要么是视觉上的。

在大多数情况下，任何独立的页面元素（或复杂，或简单）都可以被视作一个块。它的HTML容器会有一个唯一的CSS类名，也就是这个块的名字。

针对块的CSS类名会加一些前缀（ ui-），这些前缀在CSS中有类似 命名空间 的作用。

一个块的正式（实际上是半正式的）定义有下面三个基本原则：

  1. CSS中只能使用类名（不能是ID）
  2. 每一个块名应该有一个命名空间（前缀）
  3. 每一条CSS规则必须属于一个块

元素（element）

在块中子元素的子元素也被认为是块的直接子元素，元素的类名必须用父级块的名称作为前缀。

修饰符（modifier）

一个“修饰符”可以理解为一个块的特定状态，标识着它持有一个特定的属性。

###其他命名规范（CSS设计模式）

OOCSS

OOCSS（Object Oriented CSS），是由Nicole Sullivan提出的css理论，其主要的两个原则是：

  • 分离结构和主题（Separate structure and skin），分离结构和主题是在于将一些视觉样式效果作为单独的“主题”来应用

  • 分离容器和内容（Separate container and content），分离容器和内容要求使页面元素不依赖于其所处位置

SMACSS

SMACSS主要原则有3条：

  • Categorizing CSS Rules（为css分类）
  • Naming Rules（命名规则）
  • Minimizing the Depth of Applicability（最小化适配深度）
Categorizing CSS Rules（为css分类）

Categorizing CSS Rules，是SMACSS的核心。SMACSS认为css有5个类别，分别是：

  1. Base Rules， 基础样式，描述的是任何场合下，页面元素的默认外观。它的定义不会用到class和ID。css reset也属于此类。
  2. Layout Rules， 布局样式。它和后面的Module Rules一同，描述的是页面中的各类具体元素。元素是有层次级别之分的，Layout Rules属于较高的一层，它可以作为层级较低的Module Rules元素的容器。左右分栏、栅格系统等都属于布局样式。
  3. Module Rules， 模块样式。它可以是一个产品列表，一个导航条。一般来说，Module Rules定义的元素放置于前面说的Layout Rules元素之内。模块是独立的，可以在各种场合重用。
  4. State Rules， 状态样式，描述的是任一元素在特定状态下的外观。例如，一个消息框可能有success和error两种状态，导航条中的任一项都可能有current状态。
  5. Theme Rules， 主题样式，描述了页面主题外观，一般是指颜色、背景图。Theme Rules可以修改前面4个类别的样式，且应和前面4个类别分离开来。
Naming Rules（命名规则）
  • Layout Rules用l-或layout-这样的前缀，例如：.l-header、.l-sidebar。
  • Module Rules用模块本身的命名，例如图文排列的.media、.media-image。
  • State Rules用is-前缀，例如：.is-active、.is-hidden。
  • Theme Rules如果作为单独class，用theme-前缀，例如.theme-a-background、.theme-a-shadow。
  • Base Rules不会用到class和ID，是以标签选择符为主的样式，例如p、a，无需命名。
Minimizing the Depth of Applicability（最小化适配深度）

在不造成样式冲突的允许范围之内，尽可能使用短的、不限定html结构的选择符。这一点和OOCSS的分离容器和内容的原则非常相似。