学习笔记-前端-基础URL由三部分组成：资源类型、存放资源的主机域名、资源文件名。

文档地址

developer.mozilla.org/zh-CN/docs/…

网页组成

Html：内容组成
CSS ：视觉样式
JavaScript：交互处理

浏览器内核

内核

解析 HTML+CSS+JS，然后渲染处理

内核种类

Trident(三叉戟)：IE、360、搜狗、百度、uc
Gecko(壁虎)：Mozilla FireFox
Presto(急板乐曲)：Oprea
Webkit：safari、360、移动端浏览器
Webkit -> blink：Chrome

URL

一次网络请求的发过程

www.baidu.com/img/like.pn… -> DNS服务器域名解析 -> 访问183.232.1.173 -> 拿到资源

URL: Uiform Resource Locator 统一资源定位符

每个资源都有唯一的url

常见协议

协议：代表的资源的查找方式、传输方式

http 超文本传输协议（http://）
https = http + tls/ssl （https://）
file ：访问本地资源（file://）
mailto：电子邮件（mailto:）
ftp：访问共享主机的文件资源（ftp://）
ed2K: 专用下载协议(电驴) （ed2k://）
thunder: 专用下载协议(迅雷) （thunder://）

URL的格式

基本格式： prtocol://hostname/path = 协议://主机地址/路径

https://www.baidu.com/img/like.png
==
https://90.90.37.2/img/like.png

协议:不同的协议，代表不同的资源的查找方式、传输方式 主机地址：存放资源的主机的ip地址(域名) 路径：资源在主机中的位置

更具体的协议

URL由三部分组成：资源类型、存放资源的主机域名、资源文件名。
也可认为由4部分组成：协议、主机、端口、路径
URL的一般语法格式为：
(带方括号[]的为可选项)：
protocol :// hostname[:port] / path / [;parameters][?query]#fragment

Emmet 语法使用

生成元素

生成 html

生成子代元素

div>p

<div>
    <p></p>
</div>

生成兄弟元素

h1+div+span

<h1></h1>
<div></div>
<span></span>

组合使用

div>p+span>div

<div>
   <p></p>
   <span>
       <div></div>
   </span>
</div>


div>p*3+span>div>strong^^p

<div>
   <p></p>
   <p></p>
   <p></p>
   <span>
       <div><strong></strong></div>
   </span>
   <p></p>
</div>

分组
div>(p>strong)+p

<div>
    <p><strong></strong></p>
    <p></p>
</div>

生成属性

<!-- div#mian -->
<div id="mian"></div>

<!-- div.box -->
<div class="box"></div>    

<!-- div[titiel] -->
<div titiel=""></div>

div[title="hahaha"]
<div title="hahaha"></div>

添加多个属性

div#header.box1.box2[title="hahha"]
<div id="header" class="box1 box2" title="hahha"></div>

生成内容

div{我是内容}
<div>我是内容</div>

生成数字

属性中有数字
div.box$*4
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>

内容中有数字
div{我是内容$}*5
<div>我是内容1</div>
<div>我是内容2</div>
<div>我是内容3</div>
<div>我是内容4</div>
<div>我是内容5</div>

一个$，代表一位
ul>li.item$$$$*5
<ul>
    <li class="item0001"></li>
    <li class="item0002"></li>
    <li class="item0003"></li>
    <li class="item0004"></li>
    <li class="item0005"></li>
</ul>

隐式标签

    .box
    <div class="box"></div>

CSS

w200+h30
width: 200px;
height: 30px;

fw200
font-weight: 200;

dib
display: inline-block;

其他

pulgin/extension 插件/扩展
atom ：主题插件

类的名字规范

见名知意
下划线 user_name
中划线 user-name
驼峰法 userName

快捷键

！：自动生成一套html代码
代码缩进： tab
代码反缩进： shift + tab
快速在浏览器打开： option + b
快速换行：command + enter
复制当前行并黏贴： shift + option + 下箭头
代码对齐：Shift + Option + F
在当前行下边插入一行：Commd+Enter
在当前行上方插入一行：Commd+Shift+Enter