程序媛计划——学习及感想记录

念：

在我写这次博客的时候，官网已经开了六门基础课，真的都是非产基础的课程。其实主要是因为这次的程序媛计划面向的对象是14岁以上没有丝毫基础的女生（是的就是没有男生）。

课程主要以对话的形式进行教学，其中穿插了一些代码练习。

学习的时候几乎每个对话都有经验，还有钻石，之后可能还会开竞技场。其实发这篇随笔主要是想记个小笔记，顺便安利一下。

曾几何时，我还在为仿站的事而苦恼着，几乎零基础的，被学长要求仿一个网页，靠着百度以及一本几乎没讲啥的书，愣是整出了个长得还挺像的东西(x)，当然，棘手的问题还是没有解决。之前学到的Bootstrap课程，斌叔教了轮播图的基础，盯着那个特效我愣了很久，才反应过来，这不就是我之前棘手问题中的一个吗？！！！那一瞬间有种捡到宝的错觉哈哈哈！

在念上也关注了一些前端工程师，dalao们每次蹦出来的词汇都让我这个小渣一脸懵逼，百度了也没看懂他们说的是啥...然后看见斌叔开的课...噫之后的课感觉是挺难啃的了，咩继续努力吧（抖

——2017.07.15

之后自己在iMooc网上学了Python入门课程，目前正在学进阶课程，但是看着有些不会，学习进度很慢。程序媛计划新开的竞技场完美通过，C语言的课程也完美通过，很开心。在论坛中找到了小仙女们聚集的群号，加进去后看见了一群可爱的人。第一个晚上就聊了很久，学习的方向，职业发展，面试问题等。因为群里还有在职的程序媛，收获很大。平日里小仙女们也会将自己遇到的问题发出来，群内的成员们也会耐心解答，大家一起讨论，实验各种办法，挺好的，相处得很融洽哈哈。

——2017.07.25

依旧没有新课程，现在一边关注斌叔的微博一边学习基础算法（望天），今天依旧没有新课程...

——2017.08.06

---

学习课程中的笔记

*有错误的地方还请大佬们指出，万分感谢。

HTML

<hr/>  分割线(单身狗)
字体样式
<i>  斜体字
<b>  粗体字
<u>  下划线
src  值为图像文件的URL
列表
<ul>  无需列表
<li>  列表中每行的内容
<ol>  有序列表

<div>：可定义为文档中的分区或节，把文档分割为独立的、不同的部分。

<table border='1'><!--table表表格，border表示边框粗细--> 
<tr><!--表元素行--> 
<td>第一行第一列</td> 
<td>第一行第二列</td> 
</tr>
<tr> 
<td>第二行第一列</td> 
<td>第二行第二列</td> 
</tr>
</table> 

<video "200" height="200" src="视频地址" controls></video><!--controls设置底部控制条--> 
<a href="地址"></a>

CSS

px：网页中的长度单位，类似于“千米”。
margin：设置外边距。
margin-top：上边距。
margin:0 auto;  上下边距为零，左右根据浏览器边框自动设置，也就是居中。
padding: 10px 10px 10px 10px;  上右下左，内边距。
text-align：规定元素中的文本的水平对齐方式。
<p>的style设置float可以变为一行。
position:absolute;  绝对定位。

JavaScript

alert('Hello World!');  提示框显示“Hello World!”。
alert(1+1);  提示框显示“2”。
var i;  声明 i。
var i=1;  定义 i。之后 alert(i);  显示“1”。

var s; s="hello"; var b="world";
var c=s+b; alert(c);  
字符串可相加，结果串在一起，提示框显示“helloworld”。

通过 DOM(Document Object Model) - 文档对象模型，使HTML和JavaScript紧密地联系在一起，也称作DOM树。

1、HTML中
<div>
    <p id="p1">Year.</p>

2、JS中
var p1=document.getElementById("p1");
p1.innerHTML;  //表p1的内容

p1.innerHTML='THIS IS A BOOM!!!';  在JS中改变p1的内容。

function Hello(){ ... }
Hello(); //调用函数

function ola(content){
    alert(content);
}
ola(100);  //提示框显示“100”

element.onevent=function;
例： 
var b1=document.getElementById("b1");
bi.onclick=bclick;
function bclick(){
    alert('我被点击了！");
}
通过id获取buttom这个元素：
onclick为点击事件，后调用bclick这个函数，弹出“我被点击了！”；
onmouseover  鼠标移动到元素；
onmouseup  鼠标按键被松开。

textarea：定义一个多行的文本输入控件。

jQuery

console.log();  向web控制台输出一条信息。
$：document.getElementById，是在获取HTML元素。
例：
$('#id');
$('#id').append(html);  选择 id 代表的元素插入html，append代表要插入 HTML。

AJAX：与服务器交换，在不重新载入整个页面的情况下更新网页的一部分。

Bootstrap

Bootstrap为一整套前端UI框架，使网页在不同尺寸的屏幕上正常显示。

网格（Grid）：网页设计中的网格用于组成内容，让网站易于浏览，并降低用户端的负载。
行（row）：必须放在 .container class 内，一个 row 代表一行，一行分为12列。
列（col）：col-xx-y 中的 y 代表当前元素所占列数。
xx 的值可为四种（分别代表在四种尺寸宽度下的布局样式）：lg（lg>=1200px）、md（md>=992px）、sm（sm>=768px）、xs（xs<768px）。
col-lg-offset-2：偏移量，在lg的布局下，当前标签加上对于列数的左外边距（margin-left）。

<div class="container">
    <div class="row">
        <div class="col-x-x"></div>
        <div class="col-x-x"></div>
    </div>
    <div class="row">
        <div class="col-x-x"></div>
        <div class="col-x-x"></div>
    </div>
</div>
<div class="container">...</div>

glyphicon/glyphicon-user：图标样式（Bootstrap官网上有更所内容）

[TBC]