今天完成的事情：

15号下午到达上海分部，用下午+晚上的时间根据菜鸟联盟和W3C学习了HTML部分的知识。挑选部分做了笔记。

1.元素部分

大部分html元素以起始标签开始，以闭合标签结束。少部分没有内容的 HTML 元素被称为空元素，空元素是在开始标签中关闭的。exp:  <br/>。

1.1起始标签+闭合标签

   摘取几个重点学习的标签

1.1.1标题<h1></h1>——<h6></h6>
   浏览器会自动地在标题的前后添加空行

   代码示例：<h1>这是一个标题</h1>

1.1.2段落<p></p>

1.1.3链接<a></a>

   示例：<a href="http://www.runoob.com/">这是一个链接</a>
   需要始终将正斜杠添加到子文件夹（.com/)否则会向服务器产生两次 HTTP 请求。

1.1.4表格<table></table>

   tr表示行，td表示列。表头用 <th></th> 标签进行定义，标题用<caption></caption>。

   跨行rowspa，跨列colspan。

   示例：

1.1.5列表

  列表可嵌套

1.1.5.1无序列表<ul></ul>

    同一序列表内，各列表项同一地位，无层级划分。

    无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

    无序列表使用 <ul> 标签

1.1.5.2有序列表<ol></ol>

    同一序列表内，各列表项以数字次序排序。

    列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

    列表项使用数字来标记。

1.1.5.2自定义列表<dl></dl>

   自定义列表不仅仅是一列项目，而是项目及其注释的组合。

   自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

1.1.6表单<form></form>
用于收集不同类型的用户输入

1.2空元素

没有内容的 HTML 元素被称为空元素。在开始标签中添加斜杠关闭。

如图片<img> 换行<br/> 水平线<hr/>

2.属性部分

大部分元素都有自己的属性。属性值应该始终被包括在引号内（常用双引号，属性值带引号时必须使用单引号）。

2.1两个重要属性 class id

2.1.1 class（一类）

    class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
    calss属性可以多用。
    class=" " （引号里面可以填入多个class属性）

    (也可以给不同元素定义同一class类名，用于后续css等补充修饰)

2.1.2 id（特定一个）

     id 属性只能单独设置 id=" "（只能填写一个，多个无效）
     定义元素的唯一id

   在HTML文档中插入ID:

          <a id="tips">有用的提示部分</a>

    在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：
          <a href="#tips">访问有用的提示部分</a>

    或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：
          <a href="https://www.xxxxx.com/#tips">
    访问有用的提示部分</a> 

3.3种添加CSS方式

CSS修饰标签的样式，有 "内联" 和 "外引" 两种方式。

<a href="#" style="color:red;" rel="nofollow">只能使用"内联"方式</a>

明天计划的事情：

开始做任务一，还有时间剩余再根据菜鸟联盟内容横向学习CSS其他部分知识。

遇到的问题：部分不理解的含义概念靠百度解答，生疏元素标签查询W3C后也留有印象。

收获：

虽然今天接触的还是简单代码，学习内容，自己对元素进行代码嵌套后，一旦得到结果和预想一致，成就感爆棚。

10.16

15号发日报的时候刷新过0点了，16号日报如下。

今天主要做了三件事，一、初步尝试自适应页面完成任务一九宫格布局。二、配置nginx，实现手机直接访问页面，运用Chrome开发工具模拟手机访问页面。三、使用git下载上传文件。

1.九宫格布局

    任务一代码较简单，因此添加css时选用了内部样式表。

1.1撑开盒子高度

    任务要求响应式页面，需要px\pt等单位设置无法完成自适应，因此设置width时我用的是百分比。

    自适应撑开盒子高度小结2种方法

1.1.1 应用padding-bottom

        .square {
            width: 30%;
            height: 0;
            padding-bottom: 30%
        }

1.1.2 应用vw

        .square {
            width: 30%;
            height: 30vw;
            padding-bottom: 30%
        }

1.2浮动

    <div>是块级元素，无其他样式时默认第二个div盒子另起一行。九宫格布局需要多个div盒子在同一行顺序排列（无覆盖），因此通过div的class应用样式float。

（清除浮动用clear属性，后续继续学习应该会用上。）

1.3 margin

   盒子之间的间距通过设置margin值控制。

   注意margin值设置4个值时按顺时针方向依次设置。

   margin:25px 50px 75px 100px;
   上边距为25px  右边距为50px  下边距为75px  左边距为100px

2.配置nginx

   师兄写的知乎回答其实很详尽，然而配置过程一度出现404，最后通过重启电脑解决（猜想可能是重启后nginx更新成功）

3.使用git下载上传文件

   此过程手敲代码一言难尽，充分感受了程序员必备的细心品质，逼死马大哈，一个字母敲错就重来一遍。

   除第一次下载项目需要通过 “git clone” 将项目克隆到本地外,后续再使用 “git pull” 命令时会直接将更新拉取到本地。

3.1 clone

3.2 push

明天计划的事情：

了解linux和svn的配置和使用（svn和git区别和优劣）。

进一步认识自适应页面。

搭建简单移动端页面，努力完成任务三。

遇到的问题：

遇到问题寻找答案的过程中容易越走越远，越跑越偏，需要注意，起始目的不能丢。