前端语法&规范（一）

一、JSON和XML

JSON

JavaScript Object Notation，即 JS 对象标记
结构层次清晰简洁，易于阅读和编写，也易于机械解析和生成
它是一种数据格式，在与后端的数据交互中有较为广泛的应用 以下是一个JSON数据的格式：

{
    "name": "中国",
    "province": [{
        "name": "黑龙江",
        "cities": {
            "city": ["哈尔滨", "大庆"]
        }
    }, {
        "name": "广东",
        "cities": {
            "city": ["广州", "深圳", "珠海"]
        }
    }, {
        "name": "台湾",
        "cities": {
            "city": ["台北", "高雄"]
        }
    }, {
        "name": "新疆",
        "cities": {
            "city": ["乌鲁木齐"]
        }
    }]
}

XML

Extensiable Markup Language，即可扩展标记语言
用来传输数据，结构和HTMl类似，但是它的标签需要自定义
HTML被设计为显示信息，XML旨在传输信息
XML被设计用来结构化存储以及传输信息
同样作为传输数据的格式，XML相比JSON在内容上更加一目了然 以下是一个XML数据的格式：

<?xml version="1.0" encoding="utf-8"?>
<country>
    <name>中国</name>
    <province>
        <name>黑龙江</name>
        <cities>
            <city>哈尔滨</city>
            <city>大庆</city>
        </cities>
    </province>
    <province>
        <name>广东</name>
        <cities>
            <city>广州</city>
            <city>深圳</city>
            <city>珠海</city>
        </cities>
    </province>
    <province>
        <name>台湾</name>
        <cities>
            <city>台北</city>
            <city>高雄</city>
        </cities>
    </province>
    <province>
        <name>新疆</name>
        <cities>
            <city>乌鲁木齐</city>
        </cities>
    </province>
</country>

二、HTML

Hyper Text Markup Language，即超文本标记语言
html文件以.html或.htm后缀
文档类型申明
描述网页的一种语言，它不是编程语言

三、CSS

定位
1.1 static 静态定位
一般元素不加任何定位属性都属于静态定位，在页面最底层属于标准流
1.2 absolute 绝对定位
绝对定位的元素从文档流中脱离，使用left、right、top、bottom等属性相对于其最接近的一个具有定位设置的父级元素进行定位
1.3 relative 相对定位
依据left、right、top、bottom等属性在正常文档流中偏移自身位置
1.4 fixed 固定定位
使用left、right、top、bottom等属性相对浏览器窗口进行定位，并且不会随着滚动条进行滚动
文档流

HTML作为一门超文本标记语言，首先它是一门文本语言，自诞生以来，就是为了书写文章的，所以当我们没有改变页面默认的布局规则时，文档中的元素将会用“正常的流布局”来进行组织。文档流中，内联元素默认从左到右流，遇到阻碍或者宽度不够时自动换行，继续按照从左到右的方式布局。
块级元素单独占一行，并按照从上到下的方式布局。
- 元素一旦脱离文档流，其父元素就失去高度了
- 脱离文档流的方法
  1. float 浮动
  2. position: absolute
  3. position: fixed
响应式响应式布局指的是在不同分辨率的设备下有不同的布局。
传统的开发方式是PC端一套，移动端一套，而响应式布局一套代码就足够，缺点是css代码比较庞大。
css3 css是用于控制网页的样式和布局，css3是css的最新标准，是css技术的升级版本。
css3新增特性有：

边框 border(有多个属性，如border-radius等)
CSS3增加了HSL(色相、饱和度、亮度)、HSLA、RGBA几种新的颜色模式，可以轻松设置透明度
过渡与动画 transition
web字体 @font-face/font-family
阴影 shadow
等等……

字体

font-family 默认调用电脑字体，如'Microsoft Yahei', Arial, sans-serif等，若电脑上无此字体观看网页时则不会显示该字体效果
@font-face 可以调用自定义字体：先将该字体的.eot格式文件传到服务器上，再用font-face加载到网页中

@font-face {   
    font-family: <YourWebFontName>;
}
/** font-family 表示自定义字体名称 */

sass、less等插件 sass、less为css的一些辅助工具。传统的css可以直接被html引用，但是sass和less由于使用了类似JavaScript的方式去书写，所以必须要经过编译生成css，而html引用只能引用编译之后的css文件，虽然过程多了一层，但是毕竟sass/less在书写的时候就方便很多，所以在我们使用sass/less之前，只要我们提前设置好，就可以直接生成对应的css文件，而我们只需要关心我们的sass/less文件即可。

sass 是css的一种扩展提升，诞生于 2007 年，使用Ruby 编写，增加了规则、变量、混入、选择器、继承等等特性，可以理解为用js的方式去书写，变量必须使用 ${} 包裹
less 2009年开源的一个项目，受Sass的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充