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

太过爱你忘了你带给我的痛 2022-07-13 09:13 280阅读 0赞

1、列表  
    1、作用  
      按照一定的结构来显示数据  
      按照从上到下的顺序来显示数据  
  
  
      所有的列表都由两部分组成  
      1、列表类型（有序<ol>或无序<ul>）  
      2、列表项<li>  
    2、使用列表  
      1、有序列表  
        1、语法  
          列表类型：<ol></ol> -- Order List  
          列表项：<li></li> -- List Item   
          注：列表项是列表类型的子标签  
        2、属性  
          列表类型属性  
            1、type  
              取值：  
                1、1：默认值、数字  
                2、a：小写字符显示  
                3、A：大写字符显示  
                4、i：小写罗马字符  
                5、I：大写罗马字符  
            2、start

类型的起始编号

**如下图展示：**

![Center][]

<!doctype html>
    <html>
    	<head>
    		<title>Insert your title</title>
    		<meta charset="utf-8">
    	</head>
    	<body>
    		<dl>
    			<dt>水浒装</dt>
    			<dd>
    				描述的是105个男人和3个女人的惊心动魄的武侠故事!
    			</dd>
    			<dt>红楼梦</dt>
    			<dd>
    				描述的也是爱情故事!... ...
    			</dd>
    		</dl>
    		<ul type="none">
    			<li>
    				西游记
    				<ol>
    					<li>孙悟空</li>
    					<li>猪悟能</li>
    					<li>沙悟净</li>
    				</ol>
    			</li>
    			<li>三国演义</li>
    			<li>
    				水浒传
    				<ul>
    					<li>宋江</li>
    					<li>李逵</li>
    					<li>卢俊义</li>
    				</ul>
    			</li>
    			<li>红楼梦</li>
    		</ul>
    
    		<ol type="A" start="356">
    			<li>西游记</li>
    			<li>三国演义</li>
    			<li>水浒传</li>
    			<li>红楼梦</li>
    		</ol>
    	</body>
    </html>

2、无序列表  
        1、语法  
          列表类型：<ul></ul> -- Unorder List  
          列表项：<li></li>  
        2、属性  
          1、type  
            取值：  
              1、disc：默认值、实心圆  
              2、circle：空心圆  
              3、square：实心矩形  
              4、none：没有  
    3、定义列表  
      1、作用  
        定义列表往往用于要给出一类事物的定义的情形，  
        如名词解释等...  
      2、语法  
        <dl></dl>：定义一个定义列表  
          <dt></dt>：定义 列表中的一个术语  
          <dd></dd>：定义 列表中对术语的解释  
      3、使用场合  
        图文混排  
2、结构标记<跟随Html5出现的，div做布局可读性差>  
    1、作用  
      专门搭建网页结构，用于提升标记的可读性  
      以后可以通过结构标记来取代做布局的div  
    2、详解  
      1、<header>元素  
        作用：定义网页文档的页眉（顶部信息）  
        语法：<header></header>  
        取代：<div id="header"><div>  
      2、<nav>元素  
        作用：定义页面中的导航链接部分  
        语法：<nav></nav>  
        取代：<div id="nav"></div>  
      3、<section>元素  
        作用：定义文档中的小节，在页面中可以表示主体内容部分  
        语法：<section></section>  
        取代：<div id="main"></div>  
      4、<article>元素  
        作用：通常用于描述 论坛帖子，报纸的文章，博客信息或微博条目  
        语法：<article></article>  
        取代：<div id="article"></div>  
      5、<aside>元素  
        作用：描述页面中的边栏信息  
        语法：<aside></aside>  
        取代：<div id="left\_side"></div>  
      6、<footer>元素  
        作用：定义页面中底部的信息  
        语法：<footer></footer>  
        取代：<div id="footer"></div>  
3、表单（重难点）【关联服务器和输入数据的纽带】  
    1、表单的作用  
      用于收集信息并将信息提交给服务器  
      表单的两个基本部分  
        1、实现数据交互的可见界面元素—表单控件  
        2、表单提交后的处理  
    2、表单元素  
      表单：收集用户数据，并且提交给服务器  
      语法：  
        1、标记  
          <form></form>  
          注意：只有放在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、语法：<input>  
        3、属性：  
          1、type  
            根据type属性值，创建各种不同的输入控件  
          2、name  
            指定控件的名称，一般提交给服务器时使用  
            采用的是匈牙利命名法（控件缩写+作用）  
          3、value  
            控件的值，提交给服务器使用  
          4、disabled  
            禁用控件  
            该属性无值  
        
        4、input详解  
          1、文本框与密码框  
            文本框：<input type="text">  
            密码框：<input type="password">  
  
  
            特有属性：  
            1、name  
              缩写：txt  
              ex：txtUsername：用户名称的文本框  
                  txtUserpwd：用户密码  
            2、maxlength：  
              限制输入的字符数  
              ex：  
                <input maxlength="15">  
            3、readonly  
              只读，只能看不能写  
              无值属性  
          2、单选按钮和复选框  
              单选按钮：<input type="radio">  
              复选框：<input type="checkbox">  
  
  
              属性：  
              1、name  
                单选按钮缩写：rdo  
                复选框缩写：chk  
                注意：name属性除定义名称外，还能分组，如果属于一组的单选按钮或复选框，名称必须相同  
              2、value  
                根据需求自己设定  
              3、checked  
                设置默认被选中  
          3、按钮  
            1、提交按钮  
              <input type="submit">  
              作用：功能预定义，负责将当前表单中的数据提交给服务器  
            2、重置按钮  
              <input type="reset">  
              作用：功能预定义，将表单中的数据恢复初始化的状态  
            3、普通按钮  
              <input type="button">  
              作用：无功能，可以由用户自定义的编写功能  
              
            属性：  
              1、name  
              2、value：定义按钮上的文本  
              button name缩写：btn  
      2、textarea元素  
        称为：多行文本域  
        语法：  
          1、标记  
            <textarea></textarea>  
          2、属性  
            1、name  
              定义名称，缩写 txt  
            2、cols  
              指定文本域显示的列数，变相的指定宽度  
              ex：  
                cols="50"  
                英文字符：显示50个  
                中文字符：显示25个  
            3、rows  
              指定文本域显示的行数，变相的指定高度  
              （如果显示行数不够，会自动出现滚动条）  
            4、readonly  
              只读  
      3、select 和 option元素-选项框（下拉列表/滚动列表）  
        称为：选项框  
          1、语法  
            1、<select></select>  
              作用：创建选项框（下拉，滚动）  
              属性：  
                1、name  
                  控制名称，缩写 sel  
                2、size  
                  指定选项框，默认显示选项的数量。  
                  大于1的话，则为滚动列表，否则就是下拉选项框  
                3、multiple  
                  设置多选  
                  无值  
            2、<option>显示的数据</option>  
              选项  
              属性：  
                1、value  
                  提交给服务器的数据  
                2、selected  
                  预选中  
      4、其他元素  
       1、浮动框架  
        1、什么是浮动框架  
          可以在一个浏览器窗口中能够同时显示多个HTML文档内容  
        2、语法  
          <iframe>文本内容</iframe>  
          属性：  
            1、src  
              浮动框架中引入的页面url  
            2、width  
              宽度  
            3、height  
              高度  
            4、frameborder  
              边框，如果不想要边框，则将frameborder改为0  
          
        1、label元素（标签）  
          作用：关联 文本 和 表单控件的。关联之后，单击文本，就如同单击 表单控件 一样  
  
  
          语法：  
            <label>文本</label>  
          属性  
            for：表示要与该文本关联的控件的ID值  
        2、为控件分组  
          <fieldset></fieldset>：为控件分组  
          <legend></lengend>:为分组指定标题  
       2、摘要与细节  
         1、作用  
            可以通过用户的点击操作，来显示/隐藏某一部分内容  
         2、语法  
            <details></details> ：定义摘要和细节  
              <summary></summary> ：定义允许被用户点击的标题文本  
              注意：summary 必须是details中的第一对子元素   
       3、度量元素  
         1、语法  
            <meter></meter>  
            作用：表示度量元素，比如：投票的比例，电池的电量... ...  
         2、属性  
            1、min：定义度量范围的最小值，默认为0  
            2、max：定义度量范围的最大值，默认为1，通常情况会将其改为100  
            3、value：当前显示在度量元素上的值  
       4、时间元素  
         1、作用  
            关联时间的不同表现形式  
         2、语法  
            <time>文本</time>  
            属性：  
              datatime：表示关联的日期和时间，如果同时关联日期和时间的话，中间用 T 分割  
       5、高亮文本显示  
          1、作用  
            以突出的背景颜色显示文本  
          2、语法  
            <mark>文本</mark>    
    4、隐藏域和文本选择框  
      1、隐藏域：<input type="hidden">  
        作用：想提交给服务器，但不想让用户看到的数据，可以保存在隐藏域中。  
        缩写：txt  
      2、文件选择框  
        <input type="file">  
        缩写：txt  
        注意：  
          1、method 必须设置为 post

2、enctype 必须设置为multipart/form-data

**具体实例：**

![Image 1][]

<!doctype html>
    <html>
    	<head>
    		<title>Insert your title</title>
    		<meta charset="utf-8">
    	</head>
    	<body>
    		
    		<form>
    			<fieldset>
    				<legend>基本信息</legend>
    				<p>
    					用户名称：
    					<input type="text" name="txtUsername" value="请输入您的名称">
    				</p>
    				<p>
    					用户密码：
    					<input type="password" name="txtUserpwd">
    				</p>
    			</fieldset>
    			<p>
    				
    				用户性别：
    				<input type="radio" name="rdoGender" value="male" checked>男
    				<input type="radio" name="rdoGender" value="female" id="rdoFemale">
    				<label for="rdoFemale">女</label>
    			</p>
    			<p>
    				用户爱好：
    				<input type="checkbox" name="chkHobby" value="eat">吃
    				<input type="checkbox" name="chkHobby" value="drink">喝
    				<input type="checkbox" name="chkHobby" value="play">玩
    				<input type="checkbox" name="chkHobby" value="happy">乐
    				<input type="hidden" name="txtUserID" value="U1234567890">
    			</p>
    			<p>
    				用户头像：
    				<input type="file" name="txtImage">
    			</p>
    			<p>
    				自我介绍：
    				<textarea name="txtIntro" cols="50" rows="4">这家伙很懒，什么都没留下......</textarea>
    			</p>
    			<p>
    				籍贯选择：
    				<select name="selJiguan" size="5" multiple>
    					<option value="-1">===请选择===</option>
    					<option value="1">北京</option>
    					<option value="2">上海</option>
    					<option value="3">天津</option>
    					<option value="4">重庆</option>
    				</select>
    			</p>
    			<p>
    				<input type="submit" value="起飞">
    				<input type="reset" value="恢复">
    				<input type="button" value="普通按钮">
    			</p>
    		</form>
    	</body>
    </html>

[Center]: /images/20220713/848ebbde0fb348498ee064bd9153a2d4.png
[Image 1]: