Web基础知识五之Html表单标记

1、列表
    1、作用
      按照一定的结构来显示数据
      按照从上到下的顺序来显示数据


      所有的列表都由两部分组成
      1、列表类型（有序

或无序
）
      2、列表项
• 
      2、使用列表
        1、有序列表
          1、语法
            列表类型：
  -- Order List
            列表项：
-- List Item 
          注：列表项是列表类型的子标签
        2、属性
          列表类型属性
            1、type
              取值：
                1、1：默认值、数字
                2、a：小写字符显示
                3、A：大写字符显示
                4、i：小写罗马字符
                5、I：大写罗马字符
            2、start


              类型的起始编号

如下图展示：




	
		
		
	
	
		

			
水浒装
			

				描述的是105个男人和3个女人的惊心动魄的武侠故事!
			
			
红楼梦
			

				描述的也是爱情故事!... ...
			
		
		

			

				西游记
				

					
孙悟空
					
猪悟能
					
沙悟净
				
			
			
三国演义
			

				水浒传
				

					
宋江
					
李逵
					
卢俊义
				
			
			
红楼梦
		

		

			
西游记
			
三国演义
			
水浒传
			
红楼梦
		
	




      2、无序列表
        1、语法
          列表类型：
-- Unorder List
          列表项：

        2、属性
          1、type
            取值：
              1、disc：默认值、实心圆
              2、circle：空心圆
              3、square：实心矩形
              4、none：没有
    3、定义列表
      1、作用
        定义列表往往用于要给出一类事物的定义的情形，
        如名词解释等...
      2、语法
       
：定义一个定义列表
         
：定义 列表中的一个术语
         
：定义 列表中对术语的解释
      3、使用场合
        图文混排
2、结构标记<跟随Html5出现的，div做布局可读性差>
    1、作用
      专门搭建网页结构，用于提升标记的可读性
      以后可以通过结构标记来取代做布局的div
    2、详解
      1、
元素
        作用：定义网页文档的页眉（顶部信息）
        语法：

        取代：

      2、
元素
        作用：定义页面中的导航链接部分
        语法：

        取代：

      3、
元素
        作用：定义文档中的小节，在页面中可以表示主体内容部分
        语法：

        取代：

      4、
元素
        作用：通常用于描述 论坛帖子，报纸的文章，博客信息或微博条目
        语法：

        取代：

      5、
元素
        作用：描述页面中的边栏信息
        语法：

        取代：

      6、
元素
        作用：定义页面中底部的信息
        语法：

        取代：

3、表单（重难点）【关联服务器和输入数据的纽带】
    1、表单的作用
      用于收集信息并将信息提交给服务器
      表单的两个基本部分
        1、实现数据交互的可见界面元素—表单控件
        2、表单提交后的处理
    2、表单元素
      表单：收集用户数据，并且提交给服务器
      语法：
        1、标记
         

          注意：只有放在form里的表单控件才能被提交
        2、属性
          1、action
            要提交给服务器处理程序的地址
            默认提交给本页
          2、method
            提交方式，默认值是 get
            取值：
              1、get
                1、以明文方式提交数据
                2、安全性较低
                3、大小限制为2KB（与浏览器有关，IE 限制2KB，Chrome 限制8KB ，行业中以限制大小最小为标准大小）
                4、向服务器要数据时，使用get
              2、post
                1、隐式提交
                2、安全性较高
                3、无大小限制
                4、传递数据给服务器进行处理时，使用post
              3、put
              4、delete
              5、... ...
          3、enctype
            指定表单数据的编码方式即指定什么样的数据可以提交给服务器
            1、application/x-www-form-urlencoded（默认值）
              默认值，允许将普通字符，特殊字符提交给服务器
            2、multipart/form-data（用的比较少）
              允许将 文件 提交给服务器
            3、text/plain（一般不用）
              只允许将普通字符提交给服务器。特殊字符，文件则不可以
          4、name
            定义表单的名称
    3、表单控件
      能与用户交换，并且提供可视化外观的HTML元素
      表单控件，只有放在表单中，数据才可以被提交


      表单控件分类：
      1、input元素
      2、textarea元素-多行文本域
      3、select和option元素-选项框
      4、其他元素


      表单控件详解
      1、input元素
        1、作用：用于收集用户的信息
        2、语法：
        3、属性：
          1、type
            根据type属性值，创建各种不同的输入控件
          2、name
            指定控件的名称，一般提交给服务器时使用
            采用的是匈牙利命名法（控件缩写+作用）
          3、value
            控件的值，提交给服务器使用
          4、disabled
            禁用控件
            该属性无值
      
        4、input详解
          1、文本框与密码框
            文本框：
            密码框：


            特有属性：
            1、name
              缩写：txt
              ex：txtUsername：用户名称的文本框
                  txtUserpwd：用户密码
            2、maxlength：
              限制输入的字符数
              ex：
               
            3、readonly
              只读，只能看不能写
              无值属性
          2、单选按钮和复选框
              单选按钮：
              复选框：


              属性：
              1、name
                单选按钮缩写：rdo
                复选框缩写：chk
                注意：name属性除定义名称外，还能分组，如果属于一组的单选按钮或复选框，名称必须相同
              2、value
                根据需求自己设定
              3、checked
                设置默认被选中
          3、按钮
            1、提交按钮
             
              作用：功能预定义，负责将当前表单中的数据提交给服务器
            2、重置按钮
             
              作用：功能预定义，将表单中的数据恢复初始化的状态
            3、普通按钮
             
              作用：无功能，可以由用户自定义的编写功能
            
            属性：
              1、name
              2、value：定义按钮上的文本
              button name缩写：btn
      2、textarea元素
        称为：多行文本域
        语法：
          1、标记
           
          2、属性
            1、name
              定义名称，缩写 txt
            2、cols
              指定文本域显示的列数，变相的指定宽度
              ex：
                cols="50"
                英文字符：显示50个
                中文字符：显示25个
            3、rows
              指定文本域显示的行数，变相的指定高度
              （如果显示行数不够，会自动出现滚动条）
            4、readonly
              只读
      3、select 和 option元素-选项框（下拉列表/滚动列表）
        称为：选项框
          1、语法
            1、
              作用：创建选项框（下拉，滚动）
              属性：
                1、name
                  控制名称，缩写 sel
                2、size
                  指定选项框，默认显示选项的数量。
                  大于1的话，则为滚动列表，否则就是下拉选项框
                3、multiple
                  设置多选
                  无值
            2、显示的数据
              选项
              属性：
                1、value
                  提交给服务器的数据
                2、selected
                  预选中
      4、其他元素
       1、浮动框架
        1、什么是浮动框架
          可以在一个浏览器窗口中能够同时显示多个HTML文档内容
        2、语法
         
          属性：
            1、src
              浮动框架中引入的页面url
            2、width
              宽度
            3、height
              高度
            4、frameborder
              边框，如果不想要边框，则将frameborder改为0
        
        1、label元素（标签）
          作用：关联 文本 和 表单控件的。关联之后，单击文本，就如同单击 表单控件 一样


          语法：
            文本
          属性
            for：表示要与该文本关联的控件的ID值
        2、为控件分组
         
：为控件分组
         
:为分组指定标题
       2、摘要与细节
         1、作用
            可以通过用户的点击操作，来显示/隐藏某一部分内容
         2、语法
           
：定义摘要和细节
             
：定义允许被用户点击的标题文本
              注意：summary 必须是details中的第一对子元素 
       3、度量元素
         1、语法
           
            作用：表示度量元素，比如：投票的比例，电池的电量... ...
         2、属性
            1、min：定义度量范围的最小值，默认为0
            2、max：定义度量范围的最大值，默认为1，通常情况会将其改为100
            3、value：当前显示在度量元素上的值
       4、时间元素
         1、作用
            关联时间的不同表现形式
         2、语法
            文本
            属性：
              datatime：表示关联的日期和时间，如果同时关联日期和时间的话，中间用 T 分割
       5、高亮文本显示
          1、作用
            以突出的背景颜色显示文本
          2、语法
            文本  
    4、隐藏域和文本选择框
      1、隐藏域：
        作用：想提交给服务器，但不想让用户看到的数据，可以保存在隐藏域中。
        缩写：txt
      2、文件选择框
       
        缩写：txt
        注意：
          1、method 必须设置为 post

          2、enctype 必须设置为multipart/form-data
具体实例：
	
		
		
	
	
		
		

			

				
基本信息
				

					用户名称：
					
				
				

					用户密码：
					
				
			
			

				
				用户性别：
				男
				
				女
			
			

				用户爱好：
				吃
				喝
				玩
				乐
				
			
			

				用户头像：
				
			
			

				自我介绍：
				这家伙很懒，什么都没留下......
			
			

				籍贯选择：
				
					===请选择===
					北京
					上海
					天津
					重庆