【day03】Xhtml

一.HTML公共属性
1. title 提示
2. class
3. id
4. style
说明:除了 html,head,body,link,meta外其他标记都可使用的属性
二.表单
1.表单的作用:收集客户端的信息，然后发送到服务器上。
2.表单格式
<form action="服务器的URL .php" method="传输方式get|post" name="表单名称">
    ...
</form>
      说明:
      a. action写服务器的URL
              服务器:装有应用软件的计算机
             WEB服务器：装有提供浏览服务的应用软件
      b. method 默认值 get
      c. get：将信息名/值对附加在浏览器地址栏的后面
                        形如: xx.php?user=tom&pwd=123
                        小文件，不安全
      d. post:将信息名/值对附加在HTTP请求头部
                        中，大文件，安全
      e.表单元素要有有效的名称和提交值

3.表单元素
   (1) 单行文本框
   <input type="text" name="名称" value="值"size="文本框宽度" maxlength="最大字符长度"/>
   (2) 密码框
   <input type="password" name="名称" value="值"size="文本框宽度" maxlength="最大字符长度"/>
   (3)单选框
   <input type="radio" name="名称" value="值"/>
      说明:
     a.一组相同的单选框名称必须相同
     b.单选框必须有有效的提交值 checked="checked"
(4)多选框
   <input type="checkbox" name="名称" value="值"/>
      说明:
    a.一组相同的多选框名称必须相同，并且名称以数组(存多个值)形式存储，形如 :名称[]

    b.多选框必须有有效的提交值 checked="checked"

(5) 下拉列表框
   <select name="名称" multiple="multiple" size="高度">
     <optgroup label="分组名称">
      <option value="名称">...</option>
      <option value="名称">...</option>
     </optgroup>
     ...
   </select>
   说明:
    a.下拉列表框要有有效的提交值 selected="selected"
    b.设置 multiple="multiple"实现多选下拉列表框
      name名称以数组形式存储 ,形如名称[]
(6) 浏览框
   <input type="file" name="名称" value="值"/>
     说明:
        表单中有浏览框具备的条件
    a. method 传输方式必须是post
    b. form标记中添加属性和值
       enctype="multipart/form-data"
(7)多行文本框
   <textarea name="属性" rows="高度" cols="宽度">
         值
   </textarea>
     说明: 多行文本框被HTML在线编辑器替代
(8)按钮
        提交按钮:
     <input type="submit" name="名称" value="值"/>
        普通按钮:
     <input type="button" name="名称" value="值"/>
           注意:必须结合javascript脚本代码实现表单提交
        图像域按钮:
     <input type="image" src="图像URL" name="名称" value="值"/>
        重置按钮
     <input type="reset" name="名称" value="值"/>
       说明:一般不给按钮加 name属性
(9)隐藏域
    <input type="hidden" name="名称" value="值"/>
       说明:给服务器传值，客户端无需理会
(10)总结
   a. <input type="类型" name="名称" value="值"/>
     type:
       text 单行文本框
       password 密码框
       radio 单选框
       checkbox 多选框
       file 浏览框
       submit 提交按钮
       button 普通按钮
       image 图像域按钮
       reset 重置按钮
       hidden 隐藏域

    b.其他
           下拉列表框 <select>...</select>
           多行文本框 <textarea>...</textarea>

三.框架集：
   1.作用:框架集被用来组织实现多个窗口效果，
                   并且每个窗口实现独立的页面
   2.分类
     frameset框架集
     iframe 框架集
   3.frameset 格式
    (1)<frameset rows|cols>
         <frame src="1.html"/>
         <frame src="2.html"/>
       </frameset>
           说明:
         a. frameset 属性
             rows="20%,*" 实现上下窗口
             cols="20%,*" 实现左右窗口
         b.frameset 不能和 body一起使用
         c.检查是否支持框架集
           <noframes>
              <body>此浏览器不支持框架</body>
           </noframes>
    (3)嵌套框架
       <frameset rows="20%,*">
          <frame src="top.html"/>
          <frameset cols="20%,*">
             <frame src="menu.html"/>
             <frame src="main.html"/>
          </frameset>
       </frameset>
    (4) frame 属性
        a.noresize:no|yes 调整窗口
        b.scrolling:no|yes|auto自动设置滚动条
        c.frameborder:框架边框值 0,1

   4.iframe 框架

    <iframe src="目标文档URL"
      width="宽度" height="高度"
      name="框架名称"
      scrolling="no"
      frameborder="0">
      ...
    </iframe>

附带eg代码：

<body>

<form action="index.php" method="get" name="test1">

单行文本框：

<input type="text" name="test-text" value="type类型为text，name名称为test-text，size为100，maxlength为50" size="100" maxlength="50"/>　　<br />

<!--密码框-->
密码框（type类型为password，name名称为test-password，size为100，maxlength为50）：

<input type="password" name="test-password" value="" size="100" maxlength="50"/>　　<br />

<!--单选框-->

单选框：

<br />
<input type="radio" name="test-radio1" value="type类型为radio，name名称为test-radio1"/>　　type类型为radio，name名称为test-radio1　　<br />
<input type="radio" name="test-radio2" value="type类型为radio，name名称为test-radio"/>　　type类型为radio，name名称为test-radio2　　<br />
<input type="radio" name="test-radio3" value="type类型为radio，name名称为test-radio"/>　　type类型为radio，name名称为test-radio3　　<br />

<!--多选框-->

多选框:　　<br />
<input type="checkbox" name="test-checkbox1" value="type类型为checkbox，name名称为test-checkbox1"/> 　　type类型为checkbox，name名称为test-checkbox1　　<br />
<input type="checkbox" name="test-checkbox2" value="type类型为checkbox，name名称为test-checkbox2"/>　　type类型为checkbox，name名称为test-checkbox2　　<br />
<input type="checkbox" name="test-checkbox3" value="type类型为checkbox，name名称为test-checkbox3"/>　　type类型为checkbox，name名称为test-checkbox3　　<br />
<!--下拉列表框-->
下拉列表框：

<select name="test-select" multiple="multiple" size="1">
　　<optgroup label="分组名称">
　　　　<option value="1">1</option>
　　　　<option value="2">2</option>
　　</optgroup>
　　<optgroup label="水果">
　　　　<option value="apple">苹果</option>
　　　　<option value="banana">香蕉</option>
　　　　<option value="orange">橘子</option>
　　</optgroup>
　　<optgroup label="蔬菜">
　　　　<option value="qingcai">青菜</option>
　　　　<option value="xiangcai">香菜</option>
　　</optgroup>    
</select>
</form>
<!--浏览框-->
<form action="test-none.php" method="post" name="test2">
浏览框：<input type="file" name="test-file" value="type类型为file,name名称为test-file"/>
<br />
<!--编辑器兼容出错-->
<p>

　　<font color="#0000FF" size="20">

　　　　下面的“多行文本框”“提交按钮”“普通按钮”“图像域按钮”“重置按钮”“隐藏按钮”等标签因编辑器出错无法在此页面做出预览，请移步至另一个页面查看

　　　　<a href="http://down.mykeji.net/upload/da03.html" target="_blank">点击此处查看</a>

　　</font>

</p>
<br />
<br />
<br />
<br />

<!--框架集-->
　　<p>

　　　　<font color="#FF0000" size="20">

　　　　　　框架集标签，因无法在此页面做出预览，请移步至另一个页面查看

　　　　　　<a href="http://ask.mykeji.net/" target="_blank">点击此处查看</a>

　　　　</font>

　　</p>
</body>