1. html

• 作用： 显示数据
• 结构：（不区分大小写）
  

1.1 < h > 设置标题

1.2 < img > 图片

1.3 < a >超级链接

1.4 < table >

• < tr >： 行
• < td > ：表格单元
• < th > ： 表头
• rowspan：跨行
• colspan： 跨列
  
  

1.5 列表

• 自定义列表 ：
  • dl : 创建一个列表
  • dt : 列表标题
  • dd : 列表内容
• 有序列表 ：
  • ol : 创建一个列表
  • li ： 列表内容
• 无序列表 ：
  • ul : 创建一个列表
  • li ： 列表内容

1.6 表单

• action：表单提交之后的后台处理程序的名称 。

• method：表单提交方式 ：get、post
  只有method="post"时是post请求,其余都是get请求。

  get、 post 区别：
  get请求：数据在url上传递，不安全，数据大小 1kb 4kb
  post请求：数据通过体传递，安全，可提交的数据量大。

格式：
< form action="" method="" >

2. css: 层叠样式表

• 作用：美化页面（网站）
• 使用css的三种方式：
  （1）内嵌式 < p style=” ” >
  （2）style标签对 < style> p{ } < /style>
  （3）引入外部的文件*.css
  p{
  color:blue;
  }
  < link rel=“stylesheet” href=“css/test1.css”>

3. 选择器的定义及使用

1. 元素选择器
   格式：
   选择器的名称是html的标签名{
   样式的集合;
   color : red ;
   font-size : 12px ;
   }
   使用：匹配html 的元素

2. 类选择器（可重复使用）
   格式：
   . 类名{
   }
   使用：< p class=”类名”>

3. id选择器（不能重复使用，只能使用一次）
   格式：
   #id名{
   }
   使用：< p id=”id名”>

4. 后代选择器（子孙选择器）
   格式：
   .div1 p{
   font-size:12px;
   color:#0000ff;
   }
   后代选择器（子孙选择器） 子代的p和孙代的p都可使用

5. 子选择器
   格式：
   .div1>p{
   font-size:12px;
   color:#0000ff;
   }

6. 分组选择器
   格式：
   .div3,p,#p1{
   font-size:12px;
   color:#0000ff;
   }

7. div + p （只影响一个p）

8. div ~ p (影响所有p)

4. 盒子模型

内容+内边距+边框+外边距

• padding: 50px;
  内边距上、下、左、右都是50px
• padding: 10px 20px ;
  内边距 上下10左右20px
• padding: 10px 20px 30px 40px;
  内边距 顺序：顺时针 上 、 右 、下 、 左
• padding: 10px 20px 30px;
  内边距 顺序： 上 、 左右 、 下

5. 块级元素和行内元素

• 块级元素：
  特点：独立一行，可以设置宽高，内外边距的上下左右边距
  eg: < div>、 < p> 、 < li> 显示在下一行

• 行内元素：
  特点：可以在一行显示多个元素内容，宽高对行内元素不起作用，外边距的上下不起作用。
  eg: < a> 、 < span> 、（比较特殊的两个< input> < img>）

6. 文本样式

7. 背景颜色

8. 背景图片

9. 浮动

• 文档流：按顺序显示组件
• 脱离文档流（浮动）：飘起来

设置为浮动后，块区域可能被覆盖，但文字内容不会被覆盖。块级元素和行内元素都变为块级元素 。

clear: both; 清除浮动