微信小程序开发（序言）--菜鸟的闯关笔记

大学接触过一点HTML的知识，到现在已然忘记，随着微信小程序越来越火，硬着头皮决定开始自己新的学习生涯。在开发之前先去学一些基础知识，本篇是自己闯关时做的笔记，全当记录一下吧，加油~

<!--设置标签的颜色、背景色、字体大小、字体样式(默认是Monospace)-->
<style>
.special-text{
color:red;
background-color:green;
fonty-size:16px;
font-family:Sans-serif;
}
</style>

<!--引入Google字体Lobster-->
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<h2 class="red-text" style="font-family:Lobster">CatPhotoApp</h2>

<!--处理多个字体降级(某个字体不可用时，用备用字体，例如Lobster字体不可用时，用Monospace)-->
<!--<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">-->
h2 {
font-family: Lobster, Monospace;
}

<!--添加图片以及图片宽高、边框的宽度、颜色、样式（solid为实线）、四个角的角度(默认角度为0px，也就是直角，可以设置为像素数，也可以是百分比，50%也就等于变成圆形边框)-->
<style>
.small-image{
width:100px;
height:100px;
}

.thin-border{
border-width:5px;
border-color:red;
border-style:solid;
border-radius:10px;
}
</style>
<img class="small-image thick-border" src="http://www.baidu.com/url-photo-address" alt="图片加载不出来显示的文字，可自定义">

<!--锚元素链接某个外部网址-->
<p>这是<a href="http://www.baidu.com">百度首页</a>的地址</p>

<!--使用#符合设置固定链接-->
<p>这个<a href="#">链接地址</a>还不确定，先用个固定链接代替，也就是#符号</p>
<!--图片设置超链接-->
<a href="#"><img src="/images/relaxing-cat.jpg"></a>

<!--无序列表ul（只会一条一条的排列）和有序列表ol(会有123...的排列序号)-->
<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>
<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>


<!--表单（action属性的值指定了表单提交到服务器的地址，button是提交按钮，按钮名是Submit）-->
<form  action="/url-to-sumbit">
<button type="submit">this button submits the form</button>
Submit
</form>

<!-- 文本输入框（required有则为必填，没有则为非必填，placeholder是预定义）-->
<input type="text" required placeholder="请输入">

<!--单选框（选中）-->
<label><input type="radio" name="性别" checked>男</label>
<!--单选框（未选中）-->
<label><input type="radio" name="性别">女</label>

<!--复选框（选中）-->
<label><input type="checkbox" name="爱好" checked>写作</label>
<label><input type="checkbox" name="爱好" checked>唱歌</label>
<!--复选框（未选中）-->
<label><input type="checkbox" name="爱好">骑马</label>
<label><input type="checkbox" name="爱好">游泳</label>

<!--为元素设置ID，使用ID属性设置标签样式-->
<style>
#my-form{
background-color:green;
}
</style>
<form id="my-form">
</form>

<!--外间距margin和内间距padding -->
<style>
.green-box{
padding-top:40px;
padding-rigth:20px;
padding-bottom:20px;
padding-left:40px;
}

.red-box{
margin-top:40px;
margin-right:20px;
margin-bottom:20px;
margin-left:40px;
}

<!--上右下左-->
.blue{
padding:40px 20px 20px 40px
margin:40px 20px 20px 40px
}

</style>

<h5 class="green-box">padding</h5>
<h5 class="red-box">margin</h5>
<h5 class="blue-box">padding-margin-simple-write</h5>

<!--继承和覆盖-->
<!--h1继承body的绿色字体-->
<style>
body{
color:green;
}
</style>
<h1>Hello World</h1>

<!--绿色字体被粉色覆盖 + 单个class-->
<style>
body{
color:green;
}

.pink-text{
color:pink;
}
</style>
<h1 class="pink-text">Hello World</h1>

<!--绿色字体被粉色覆盖，粉色又被蓝色覆盖 + 多个class（按照最后一个class进行设定）-->
<style>
body{
color:green;
}

.pink-text{
color:pink;
}

.blue-text{
color:blue;
}
</style>
<h1 class="pink-text blue-text">Hello World</h1>

<!--绿色字体被粉色覆盖，粉色又被蓝色覆盖，蓝色又被橙色覆盖（id优先级更高） + 多个class和id设定-->
<style>
body{
color:green;
}

.pink-text{
color:pink;
}

.blue-text{
color:blue;
}

#orange-text{
color:orange;
}
</style>
<h1 class="pink-text blue-text" id="orange-text">Hello World</h1>

<!--绿色字体被粉色覆盖，粉色又被蓝色覆盖，蓝色又被橙色覆盖（id优先级高一些），橙色又被红色覆盖（内联样式的优先级更高） + 多个class和id设定和内联样式-->
<style>
body{
color:green;
}

.pink-text{
color:pink !important;
}

.blue-text{
color:blue;
}

#orange-text{
color:orange;
}
</style>
<h1 class="pink-text blue-text" id="orange-text" style="color:red">Hello World</h1>

<!--绿色字体被粉色覆盖，粉色又被蓝色覆盖，蓝色又被橙色覆盖（id优先级更高），橙色又被红色覆盖（内联样式的优先级更高），红色又被粉色覆盖（important优先级最高） + 多个class和id设定和内联样式和important-->
<style>
body{
color:green;
}

.pink-text{
color:pink !important;
}

.blue-text{
color:blue;
}

#orange-text{
color:orange;
}
</style>
<h1 class="pink-text blue-text" id="orange-text">Hello World</h1>

<!--十六进制设置黑色背景颜色,白色字体颜色-->
<style>
body{
background-color:#000000;
color:#FFFFFF;
}

.bg-simple-color{
background-color:#000;
color:#FFF;
}

.bg-rgb-color{
background-color:rgb(0, 0, 0)
color:rgb(255,255,255)
}
</style>