HTML5学习(三)

w3school 在线教程

1. 表格标签

【作用】表格用来显示展示数据,可读性好。

【基本语法】

  1. 定义表格标签
  2. 定义表格中的行,嵌套在table标签里
  3. 定义单元格,嵌套在tr标签里

2. 表头单元格标签

文本加粗居中显示,位于表格第一行或者第一列

标签表示表头部分 

3. 表格属性(了解)

后面会通过CSS来设置 ;属性需要写到table标签里面

HTML5学习(三)_第1张图片

 4. 表格结构标签

【作用】将表格分成头部和主体两个部分

表示头部区域,内部必须要有,表示主体区域,放数据本体。这两个标签都放在

里。

5. 合并单元格

【作用】把多个单元格合并成一个

【方式】

  • 跨行合并:rowspan = "合并单元格的数量"
  • 跨列合并:colspan = "合并单元格的数量"

【目标单元格】

  • 跨行:最上侧为目标单元格,写合并的代码
  • 跨列:最左侧为目标单元格

6. 列表标签

【作用】布局,整齐、有序

【类别】无序、有序、自定义列表

7. 无序列表

    表示项目中的无序列表,
  • 定义列表项

    【注】

    • 无序列表是没有顺序的,各项是并列的
    • ul标签里只能放li标签
    • li标签里可以放任何元素

    8. 有序列表(理解)

      定义有序列表,列表项还是
    1. 【注】

      • ol标签里只能放li标签
      • li标签里可以放任何元素

      9. 自定义列表(重点)

      【场景】通常对术语或者名词进行描述,项前面没有符号

      【语法】

      定义列表,
      定义项目/名字,
      定义每一个项目/名字。语法如下:

      HTML5学习(三)_第2张图片

      【注】

      • 标签里只能放
        标签
      • 没有数量限制,通常是一个dt对应多个dd

      10. 表单标签

      【作用】收集用户信息,跟用户交互

      【组成】表达域,表达控件,提示信息

      11. 表单域

      定义表单域,将信息提供给服务器,语法如下:

      目前只需要写上form标签

      HTML5学习(三)_第3张图片

      12. 表单控件--input输入表单元素

      标签用于收集用户信息,包含一个type属性,不同的属性值指定不同的控件类型

      单标签

      HTML5学习(三)_第4张图片

      HTML5学习(三)_第5张图片

      【注】

      • 单选按钮/复选按钮要有相同的name属性
      • name和value属性是每个表单都有的属性,主要给后台人员看
      • checked一打开就默认选中元素,主要针对按钮

      13.

      【注】label的for属性要与对应元素的id属性相同

      14. 表单控件--select下拉表单元素

      定义下拉列表,有多个选择,也可以节省空间。语法如下:

      HTML5学习(三)_第6张图片

      【注】

      • select里至少要包括一个option
      • 在option里定义selected=selected,默认为选中状态

      15. 表单控件--textarea文本域表单元素

      当输入内容较多的时候,需要使用文本域。