有序列表

列表项1
  
列表项2

有序列表的 type 属性：

type 属性定义了列表项前项目符号的类型。

我们来看其中一两个 type 属性：

有序列表

列表项1
  
列表项2

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以

标签开始。每个自定义列表项以

开始。每个自定义列表项的定义以

开始。自定义列表的列表项前没有任何项目符号。

一个

中可以有多个题目和解释，代码如下：

自定义列表

春天
  
是万物复苏，百花争艳的季节
  
  
夏天
  
是夏日绵绵，烈日炎炎的季节

html样式

为HTML 标签定义 style 属性，通过 style 属性来改变 HTML 元素的样式。

html 样式实例 - 背景颜色

  
    
实验楼
  

注：通过 "background-color" 属性值的设置来给背景设置颜色。

html 样式实例 - 字体、颜色和尺寸

  
    
实验楼
  

注：通过对 font-family 属性值的设置来设置字体，通过对 color 属性值的设置来设置颜色，通过对 font-size 属性值的设计来设计字体大小。

html 样式实例 - 文本对齐

  
    
实验楼
  

注：上面的标题“实验楼”相对于页面居中对齐。

样式示例

用 HTML 完成下图：

示例代码：

      
html学习
      

        学习就上慕课
      
      

在慕课你可以学习的课程有：
      

HTML 基础课程
        
CSS 基础课程
        
js 基础课程
        
...
      

  

html表格

表格由

标签来定义。

每个表格均有若干行（由

标签定义），每行被分割为若干单元格（由 定义。

标签定义）。 字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 它的常用属性如下： border属性 定义表格的边框，设置值是数值 cellpadding属性 定义单元格内容与边框的距离，设置值是数值 cellspacing属性 定义单元格与单元格之间的距离，设置值是数值 align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right 我们先来创建一个简单的表格： 第一行第一列 第一行第二列 第二行第一列 第二行第二列 上述代码表格没有边框，接下来让我们为它添加一个 border 属性再来看看效果。 第一行第一列 第一行第二列 第二行第一列 第二行第二列 caption 元素定义表格标题 表格一般都有标题，在 HTML 中表格标题通过

表格标题

第一行第一列	第一行第二列
第二行第一列	第二行第二列

给表格添加表头

表格的表头使用 标签进行定义，表头通常用于列名字。

    支出表
  
  

支出
    
备注
  

32
    
买苹果
  

24
    
买饮料
  

表格的常用属性

属性名	含义	属性值
border	定义表格的边框
cellpadding	定义单元格内容与边框的距离	默认为 1px
cellspacing	定义单元格与单元格之间的距离	默认为 2px
align	设置整体表格相对于浏览器窗口的水平对齐方式	left|center|right
width	设置表格的宽度	单位为 px
height	设置表格的高度	单位为 px
bgcolor	设置背景颜色	red,green等

注意：其余属性的使用和 border 类似，只需要在 table 标签中添加属性即可

单元格跨行和跨列

绘制表格的时候，我们常常需要合并单元格，而在 HTML 中提供了 colspan（合并行）和 rowspan（合并列）属性来帮助我们实现这一效果。

colspan 又称跨列，rowspan 又称跨行。

单元跨两行


  

姓名
    
电话
  

张三
    
344 22 112
    
211 32 123
  

李四
    
433 31 212
    
234 21 654
  

单元跨两列


  

姓名
    
张三
  

电话
    
344 22 112
  

234 21 654
  

注：设置 rowspan="2" 表示合并该列上的两个单元格，同样的我们可以通过设置 colspan 来合并行。合并之前，我们可以如例子般，先把所有的单元格都写出来，然后找出哪些单元格需要合并的，在第一个单元格内设置 rowspan 或者 colspan，并将其他多余的单元格代码删除。

div 应用

在网页中可以使用很多个 div，在网页制作中，使用 div 可以将网页中的任何元素布局到网页中的任何位置。

语法：

div 和 table 的区别

div 布局：

  
实验楼
  
实验楼

table 布局：

      实验楼
    
  


      实验楼
    
  

同样的效果，使用 div 布局能比表格更加灵活，但是我们需要根据不同的场景使用不同的布局方式，现在我们来看看两种布局的优缺点。

table 元素布局：

• 优点：

1. 理解比较简单。
2. 不同的浏览器看到的效果一般相同。

• 缺点：

1. 显示样式和数据绑定在一起。
2. 布局的时候灵活度不高。
3. 一个页面可能会有大量的 table 元素，代码冗余度高。
4. 增加带宽。
5. 搜索引擎不喜欢这样的布局。

div 元素布局：

• 优点：

1. 符合 W3C 标准。
2. 搜索引擎更加友好。
3. 样式的调整更加方便，内容和样式的分离，使页面和样式的调整变得更加方便。
4. 节省代宽，代码冗余度低。
5. 表现和结构分离，在团队开发中更容易分工合作而减少相互关联性

小实战：课程表绘制

源码如下：

  




        课程表
      
      

时间\日期
        
一
        
二
        
三
        
四
        
五
      

上午
        
9:30-10:15
        
语文
        
数学
        
外语
        
音乐
        
体育
      

10:25-11:10
        
数学
        
数学
        
物理
        
化学
        
生物
      

 
      

下午
        
14:30-15:15
        
体育
        
语文
        
历史
        
政治
        
化学
      

15:25-16:10
        
音乐
        
语文
        
数学
        
美术
        
语文
      

html表单

HTML 表单是一个包含表单元素的区域，用于搜集不同类型的用户输入。

表单是网页中提供的一种交互式手段操作，生活中我们很容易接触到表单，比如网上注册一个账号

表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：

1、