1. 1. 终端命令
  2. 2. HTML5文档
  3. 3. body标签
  4. 4. div标签
  5. 5. css
  6. 6. background背景
  7. 7. padding内边距
    1. 7.1.
  8. 8. margin外边距

终端命令

1.pwd显示当前文件路径

2.ls显示当前文件夹的目录结构

3.cd进入某某文件夹

4.cd .. 返回上一级

5.mkdir 创建文件夹

6.touch 创建文件

注意事项

1.cd 进入的是文件夹，不是文件！例如：cd web,如果该文件夹里面有文件夹，可以直接进入。例如：cd web/css

2.cd ..是返回上一级目录，cd ../..是返回更上级,依次类推，直到根目录。

3.mkdir是创建文件夹！！！！不是文件！

4.touch是创建文件。记得加格式后缀。例如：touch index.css

5.命名规范，不要中文，纯数字，有语义的单词，拼音也行啊…

HTML5文档

1.html表示文档的根目录，它包含head区域和body区域

2.head区域一定要有title，也就是文档标题

3.meta标签的charset属性指定文档的编码格式。

4.body是该页面的可视化区域

5.doctype不是一个标签，它来指定html文档的版本。方便浏览器解析。

注意事项

1.所有的标签，标签属性都要小写。

2.标签有双标签和单标签之分。双标签是成双成对出现的。有开始标签和结束标签。单标签的闭合方式不同于双标签。例如：，它们只有一个标签，在末尾的地方”>”前面加上”/“。完成闭合。

3.doctype头文档声明不是一个标签，所以没有闭合，记的在前面加上”!”。

4.注意缩进操作，文档的结构清晰明了。

5.body里面的内容，最好都要有标签嵌套。

6.内容不可以写在head，html等地方。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>标题</title>
    </head>
    <body>

    </body>
</html>

body标签

1.body标签是html文档的可视化区域

2.body标签有默认宽度，就是浏览器的窗口宽度。我们调整浏览器的窗口大小，body的宽度也会随着改变。

3.body标签有默认的margin外边距，为8px。所以body里面的内容总是和浏览器窗口顶部，左边有8px距离de原因。

4.我们可以为body设置宽高，背景，padding,border等css样式。但是背景样式不会遵从width,height的样式设置。因为背景是作用于可视区域的。body的可视区域是浏览器的窗口。

div标签

1.div标签是双标签，表示一个区域，没有别的语义，通常用作容器。

2.div有默认宽度，没有设置宽度的话，继承父级标签的宽度。

3.div的默认高度是0px。有可见内容会撑开容器高度。

注意事项

1.div是双标签,注意闭合。

2.div的默认高度是0px。没有内容是不可见的。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>div标签</title>
    </head>
    <body>
        <div>我是div标签</div>
    </body>
</html>

css

1.css是层叠样式表。

2.css的语法：举例 ele {color:red;} ele 表示选择器 {} css语句的区域 color css的颜色属性 red css的颜色属性值 。

3.引入方式

第一种引入方式：行间样式
优点：可以直接作用于标签，不会影响到其他标签。有冲突的css样式，优先级最高。 缺点：不能重复使用。影响html文档。影响阅读。

第二种引入方式：html文档内容引入： 优点：在head标签内引入style区域，不会影响body标签结构，有点内容，样式分离的味道。 缺点：不能重复使用，优先级低于行间样式。

第三种引入方式：外部引入方式： 优点：完全的内容，样式分离，可以和其它html文档共享css文件。 缺点：会发生一次请求，浏览器渲染html的时候，会请求样式。内部的样式就不会发生请求。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>css语法与引入</title>
        <link rel="stylesheet" type="text/css" href=""/>
        <style type="text/css">

        </style>
    </head>
    <body>
        <div style=" "></div>
    </body>
</html>

推荐

外部引入方式，如图：

background背景

1.background-clor:red;背景色

属性值可以为英语代码如：red，green等
可以为16进制颜色码如：#ffffff,#000000等
可以为rgb格式如：rgb(255,182,193)等;

2.background-image:url();背景图片

url图片路径要用””引起来，可以为本地的图片路径如：url(“img/pic.jpg”);。
可以为线上有效链接如：url(“http://www.xxxxxxx.com/xxx.jpg");引入的图片的初始位置在容器的左上角。铺满容器的区域。

3.background-position:x y;背景位置

*作用于背景图片

*x为平行位置，可以为准确数值如100px,也可以为负数如－100px,也可以百分比如20%。也可以为位置如：left center right.

y为垂直位置，可以为准确数值如100px,也可以为负数如－100px,也可以百分比如20%。也可以为位置如：top center bottom. background-position:center;可以为一个值。这个值毕竟x,y都支持才可以。

4.background-repeat:no-repeat/repeat-x/repeat-y;背景平铺
*作用于背景图片

*no-repeat 背景图片不要平铺

*repeat-x 平行方向平铺

*repeat-y 垂直方向平铺

5.background的复合写法：

background:red url() 0px 0px no-repeat;

没有顺序要求。推荐这种顺序。复合写法中background-position要求写两个值。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>css背景操作</title>
        <link rel="stylesheet" type="text/css" href="index.css"/>
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
    <body>
</html>

#div1{
    width:300px;
    height:300px;
    background-image:url("https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/super/whfpf%3D425%2C260%2C50/sign=f5d31d65d339b6004d9b5cf78f6d0118/dbb44aed2e738bd45301acb7a78b87d6277ff910.jpg");
    background-position: -100px 0;
}
#div2{
    width:200px;
    height:400px;
    background-color:rgb(255,182,257);
}

注意事项

background的样式不会影响到容器的宽高，内容。！！！！！

padding内边距

1.padding内边距，作用于自身和自身内容，padding出来的空间，背景会填充起来。

padding-top:;内上边距,容器上侧与内容的距离。会增加容器的高度。

padding-right:;内右边距,容器右侧与内容的距离。会增加容器的宽度。

padding-bottom:;内下边距,容器下侧与内容的距离。会增加容器的高度。

padding-left:;内左边距,容器左侧与内容的距离。会增加容器的宽度。

取值为精确数值如：100px;不可以为负数；

取值可以为百分比如：padding-left:20%;

2.padding的复合写法

padding:0px 0px 0px 0px;TRBL法则

padding:0px 0px 0px;上 左右 下；

padding:0px 0px;上下 左右；

padding:0px;上右下左。 

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>padding操作</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <div style="width:200px;height:200px;padding:-10px;background:red;">
        </div>
    </body>
</html>

margin外边距

1.margin外边距，作用于容器父级标签元素和相邻标签元素，对自身和内容没有影响。

margin-top:;外上边距,容器外上侧与相邻标签的距离。

margin-right:;外右边距,容器外右侧与相邻标签的距离。

margin-bottom:;外下边距,容器下外侧与相邻标签的距离。

margin-left:;外左边距,容器左侧与相邻标签的距离。

取值为精确数值如：100px;可以为负数；

margin-left和margin-right可以取值为auto;实现居中效果。可以取值为百分比如：margin-left:20%;

2.margin的复合写法
margin:0px 0px 0px 0px;

TRBL法则

margin:0px 0px 0px;上 左右 下；

margin:0px 0px;上下 左右；

margin:0px;上右下左。 

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>margin操作</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <div style="width:200px;height:200px;margin-left:-10px;background:red;">
        </div>
    </body>
</html>

（未完待续…）
<!doctype html>