在黑马学习HTML入门第二天

学习html第二天

表格

• 表格标签:

table：表格标签，包含多个tr

tr：表格中的行，包含多个td

td :表格中的单元格，写内容

table和tr只能打见表格结构，不能存放实际内容

td存放单元格数据

th表头单元格，一般第一行标题使用，和td一样可以存放内容，但内容呢会加粗并居中

• 表格属性：

     **属性名**     **属性值**                 **描述**     
  
    align      left、center、right         表示对齐方式左中右
  
    border        宽度像素值或“”            表示边框，默认“”无边框
  
    width            像素值                      宽度
  
    height           像素值                      高度
  
    cellspaing       像素值              单元格之间的距离，默认2像素                
  
    cellpadding      像素值           内容与边框之间的距离，默认1像素
  

• 表格结构标签

  thead：定义表格头部(标题行)，必须拥有tr标签 ，一般位于第一行

  tbody：定义i表格的主题，通常包含标题下方的表格数据区域

  thead和tbody只是用来划分表结构的，用来区分标题行和数据区域，不能替代tr、th、td、标签的作用

表格中实际要显示的内容，需要放在th和td标签中，其他标签偶爱你进士用来搭建表格结构或者增强表情结构的语义的

• 合并单元格

  跨行合并（rowspan），纵向合并

  跨列合并（colspan），横向合并

  合并单元格要先找到目标单元格td增加合并单元格属性，删除多余的单元格

三种列表

• 无序列表

ul：无序列表，只允许包含多个li标签

li：用于存放列表项内容

• 有序列表

：有序列表

ol:有序列表，只允许包含多个li标签

li：用于存放列表项内容

• 自定义列表

dl：自定义列表，只允许包含dt和dd标签

dt：关键词（term）内容，和dd是并列关系，后续dd都跟随前面的dt

dd：存放前面dt关键词对应的列表项内容

列表是独占一行的

虽然一个dl中可包含多个dt，但是在实际开发中通常只包含一个dt，因为这样更方便布局

表单

• 使用场景

在开发网站时，可以使用表单***收集用户信息，统一提交给后台***处理

• 表单域

form：统一汇总要收集的数据，统一提交给后台，例如包含姓名、性别等完整的用户信息记录

	 **属性**    **属性值**                        **作用**

	action        URL地址            用于指定接受并处理表单数据的服务程序的URL地址

	method        GET/PSOT          用于设置表单数据的提交方式，取值为GET、POST等

	name           名称               用于指定表单没名称，用以区分一个页面中的多个表单域

• 表单控件

  表单控件（表单元素）：与用户交互，允许用户输入或者选择单个具体的信息，以达到通过扁担手机信息的目的

  input：输入

  type属性是input标签的必须属性，用来指定input控件的类型

    **控件特点            属性值            描述**
  
      输入                 text			输入文字
  
      输入                password		密码
  
      选择			     radio			单选按钮，多选一
  
      选择		    	checkbox		复选框（打勾）
  
    点击选择文件          	file		   文件上传使大狗用
  
      点击			    button		    	按钮	
  
      点击  		     	image			  按钮
  
    表单操作		     submit		   	提交，会把数据发送给服务器	
  
    表单操作		       reset			重置，会清空表单所有数据
  

  通过value属性可以指定提交或重置按钮中的文字

  name可以把表单控件去分开，多个单选按钮设置相同的name属性，能狗实现用户单选，同一组单选按钮或复选框，那么属性的值应该一致

  value属性可以记录用户在空间中输入的值或者选择的结果

  如果用户要修改之前保存过的信息，checked属性可以选中用户之前的选择，例如：修改个人信息

  checked属性可以默认选择某个单选或复选框，在H5中 checked=“checked” 可以简写为 checked

  maxlength属性可以限制输入框中输入项的长度

  特殊符号 &emsp ; 是一个全角的中文空格，在界面布局时有时候非常有用

  在开发时，无论是单选还是复选，都不适合提供太多选项——惠然那个用户出现选择障碍

  label标签

  label可以和表单中的元素绑定，增加点击范围，提高用户体验

  给要绑定的input标签设置唯一的id属性值，使用

  • <label for="控件id">标签文字</label>
    

  让 label 标签与对应控件绑定，
  或者用

  • <label>标签文字按钮</label>
    

  label标签和input标签是并列关系，通过label标签的for属性和对应id的input标签建立联系

  select：选择

  select：下拉列表

  option：下拉列表选项，用于存放选项内容

  使用selected属性能够默认选中某一项，和checked类似，在H5中，
  selected=“selected”可以简写问selected

  textarea：文本域

  如有需要输入大量文字并且需要换行时，可以使用文本域，例如：个人简介、留言板、评论

  卸载双标签内部的文字就是文本域的默认值，一般默认值从后台加载，开发时我无需指定初始值

  文本域双标签内部的空格会被完全还原，所以开始标签和结束标签需要写在一行