Day02 HTML
接下来的30天喜不喜欢都要过，为什么不做一件想做的事情呢？
- 无序列表Unordered List：使用
<ul>...</ul>标签创建。
<ul>
<li>Apple</li> <!--每一个li标签都是无序序列的一项-->
<li>Mi</li>
<li>Meizu</li>
...
</ul>
同理，有序序列Order List：使用<ol>...</ol>标签创建。
<ol>
<li>Apple</li> <!--每一个li标签都是无序序列的一项-->
<li>Mi</li>
<li>Meizu</li>
...
</ol>
-
<form>...</form>标签可以创建表单，通过表单的action属性可以使表单与服务器进行交互，action的值指定了接受表单数据服务器的地址。
<form action = "url you want to submit form data">...</form>
- 表单中的文本输入框（Text Input）：用来获取用户输入的文本框。
<input type = "text"> <!-- type = "text" 表示输入框的类型是文本-->
注：input是自封闭的标签，无需结束标记。
占位符（Placeholder Text）：在input输入框中，用户输入之前默认显示的内容。使用input标签的placeholder属性可以指定默认的内容。
<input type = "text" placeholder = "the default content">
必填属性（required）：使文本框必须填写，如果不填，在点击提交的时候会提示请输入内容，否则不能提交。
<input type = "text" placeholder = "the default content" required>
- 提交按钮（Submit Button）：点击提交按钮，表单中的数据将会发送到
form标签action属性指定地址的服务器上。
<button type = "submit">确认</button> <!-- submit按钮一般紧跟文本输入框 -->
- 单选按钮（Radio）：输入框的一种，只是
type = radio。每个单选选项需要嵌套在自己的label标签中，用来显示按钮上的内容。
<label><input type = "radio" name = "food" >Rice</label>
<label><input type = "radio" name = "food" >Noodle</label>
<label><input type = "radio" name = "food" >Bread</label>
注：相关联的一组单选选项必须有相同的name属性！
- 复选按钮（Checkbox）：输入框的另一种类型，每个复选选项需要嵌套在自己的
label标签中，用来显示按钮上的内容。
<label><input type = "checkbox" name = "food" >Rice</label>
<label><input type = "checkbox" name = "food" >Noodle</label>
<label><input type = "checkbox" name = "food" >Bread</label>
注：同理，相关联的复选按钮需要相同的name属性！
- Radio和Checkbox默认选中：
checked属性。
<label><input type = "radio" name = "food" >Rice</label>
<label><input type = "radio" name = "food" >Noodle</label checked>
<label><input type = "radio" name = "food" >Bread</label>
注：默认选择的是Noodle。
div元素
指division（层）元素，用于盛装其他元素的通用容器，类似于PS中层的概念。每个div元素中的内容都是相互独立。
可以利用CSS继承关系，将div上的CSS传给它的所有子元素。
- 使用
class类选择器为一个div元素设置背景：
<styel>
.green-background {background-color: green;}
</style>
调用背景样式：
<div class = "green-background">...</div>
- HTML元素的
id属性
id属性与class属性类似，可以声明选择器，并且优先级高于类选择器。HTML元素中id属性是唯一的！
#cat-photo-app {background-color: gray;}
类选择器使用.前缀声明，id选择器用#前缀声明。id选择器的调用与类选择器相同，在HTML标签中是属性id的值为id选择器的名称，但是去掉#。
<h2 id = "cat-photo-app">...</h2>
布局
HTML元素本质上是html页面上小块的矩形，代表页面上的一小块区域。影响HTML元素布局的三个重要属性：margin外边距、padding内边距、border边框。
-
padding属性：控制元素内容与元素边框之间的距离。
四周边距相同，CSS中样式描述：
.red-box {padding: 10px;} /*用像素描述*/
四周边距不等：
.red-box {padding-top: 10px; /*上边距*/
padding-right:20px; /*右边距*/
padding-bottom:30px; /*下边距*/
padding-left: 40px;} /*左边距*/
注：上述写法可以简写：
.red-box {padding: 10px 20px 30px 40px;} /*按照上、右、下、左顺时针填写*/
-
margin属性：控制元素边框和元素所占实际空间的距离。
四周边距相等，CSS样式描述：
.red-box {margin: 10px;} /*用像素描述*/
四周边距不等：
.red-box {margin-top: 10px; /*上边距*/
margin-right:20px; /*右边距*/
margin-bottom:30px; /*下边距*/
margin-left: 40px;} /*左边距*/
注：上述写法可以简写：
.red-box {margin: 10px 20px 30px 40px;} /*按照上、右、下、左顺时针填写*/
注：如果margin为负值，元素所占区域将会变大！
CSS的继承
每个html页面均有唯一的<body>...</body>元素，其余所有HTML元素均是body元素的子元素。
body元素可以应用CSS样式，其内的所有子元素都将继承body元素的样式。使用选择器为子元素重新赋予CSS样式时，会覆盖掉body元素继承的样式。
选择器的优先级：
!important > id > class > element
注：其上四个均会覆盖的从body继承的样式。
- 相同类别的选择器，优先级遵从就近原则：样式声明的位置越靠下，里应用样式的HTML元素越近，优先级越高。
<style>
.blue-text {color: blue;}
.red-text{color: red;}
</style>
<h2 class = "blue-text red-text">...</h2>
注：h2元素应用的样式为red-text，就近原则。
