Day02 HTML

接下来的30天喜不喜欢都要过，为什么不做一件想做的事情呢？

• 无序列表Unordered List：使用
  ...
  标签创建。

  

    
Apple
    
    
Mi
    
Meizu
    ...
  

同理，有序序列Order List：使用

...

标签创建。

  

    
Apple
    
    
Mi
    
Meizu
    ...
  

• ...
  标签可以创建表单，通过表单的action属性可以使表单与服务器进行交互，action的值指定了接受表单数据服务器的地址。

...

• 表单中的文本输入框（Text Input）：用来获取用户输入的文本框。

注：input是自封闭的标签，无需结束标记。
占位符（Placeholder Text）：在input输入框中，用户输入之前默认显示的内容。使用input标签的placeholder属性可以指定默认的内容。

必填属性（required）：使文本框必须填写，如果不填，在点击提交的时候会提示请输入内容，否则不能提交。

• 提交按钮（Submit Button）：点击提交按钮，表单中的数据将会发送到form标签action属性指定地址的服务器上。

  确认   

• 单选按钮（Radio）：输入框的一种，只是type = radio。每个单选选项需要嵌套在自己的label标签中，用来显示按钮上的内容。

  Rice
  Noodle
  Bread

注：相关联的一组单选选项必须有相同的name属性！

• 复选按钮（Checkbox）：输入框的另一种类型，每个复选选项需要嵌套在自己的label标签中，用来显示按钮上的内容。

  Rice
  Noodle
  Bread

注：同理，相关联的复选按钮需要相同的name属性！

• Radio和Checkbox默认选中：checked属性。

  Rice
  Noodle
  Bread

注：默认选择的是Noodle。

div元素

指division（层）元素，用于盛装其他元素的通用容器，类似于PS中层的概念。每个div元素中的内容都是相互独立。

可以利用CSS继承关系，将div上的CSS传给它的所有子元素。

• 使用class类选择器为一个div元素设置背景：

  
    .green-background {background-color: green;}

调用背景样式：

  
...

• HTML元素的id属性
  id属性与class属性类似，可以声明选择器，并且优先级高于类选择器。HTML元素中id属性是唯一的！

   #cat-photo-app {background-color: gray;}

类选择器使用.前缀声明，id选择器用#前缀声明。id选择器的调用与类选择器相同，在HTML标签中是属性id的值为id选择器的名称，但是去掉#。

  
...

---

布局

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页面均有唯一的...元素，其余所有HTML元素均是body元素的子元素。

body元素可以应用CSS样式，其内的所有子元素都将继承body元素的样式。使用选择器为子元素重新赋予CSS样式时，会覆盖掉body元素继承的样式。

选择器的优先级：
!important > id > class > element
注：其上四个均会覆盖的从body继承的样式。

• 相同类别的选择器，优先级遵从就近原则：样式声明的位置越靠下，里应用样式的HTML元素越近，优先级越高。

    
...

注：h2元素应用的样式为red-text，就近原则。