结构标记,表单,其他标记

来源:互联网 发布:淘宝月老祠堂怎么样 编辑:程序博客网 时间:2024/04/30 04:29
1、结构标记
   1、作用
      增强标签的语义性
   2、结构标记
      1、<header>元素
         用作与网页头部,可能包含网页标题、LOGO、导航信息
该元素可以出现多次


等同于 <div id="header"></div>
<header>
  <img src="logo.gif"/>
  <h1>欢迎光临。。。</h1>
</header>
      2、<nav>元素
         用于定义网页导航
<nav>
<ul>
<li>首页</li>
<li>母婴用品</li>
<li>家居用品</li>
</ul>
</nav>
等同于:<div id="nav"></div>
      3、<section>元素
         section:小节
该元素标识网页内容中的某一具体部分。定义文章章节、内容的楼层(购物类网站居多)
      4、<article>元素
         article:文章,内容 。。。
         在论坛中表式某一具体帖子信息、新闻类网站的某一具体新闻信息、博客类网站具体博客条目、用户评论等
      5、<footer>元素
         定义网页底部信息,多用于企业介绍、标识等部分内容
等同于 <div id="footer"></div>
      6、<aside>元素
         侧边栏,可以标识正规内容额外的部分内容
边栏内容优先使用<aside>元素
2、表单
   1、表单的作用
      1、显示、收集用户信息
      2、将收集到的信息提交给服务器
   2、表单语法
      语法:<form></form>
      注意:表单中的内容是可以提交给服务器的,提交给服务器的内容要放在表单元素里
      属性:
          action : 表单提交时的动作,提交地址,值为url,默认值为本页
 method : 提交方式,常用取值:get或post
      get(默认值) : 明文提交,安全性较低,提交数据大小有限制,为2kb(根据浏览器决定)
      post : 密文提交,安全性较高,无大小限制


          注意:用户登录、用户注册一律使用post提交
          向服务器索取数据时(搜索引擎搜索数据),可以使用get,也可以使用post
 enctype : 表单数据的编码方式
      取值 :  
          1、application/x-www-form-urlencoded(默
  认)
     可以将正常字符、特殊符号(&)提交给服务器(不支持文件上传)
  2、text/plain
     可以将正常字符提交给服务器
  3、multipart/form-data
     如果上传文件的时候,必须使用该值
 name : 定义表单名称
 <form action="...." method="post/get">
   ....
 </form>


   3、表单元素
      表单元素指的是出现在表单中能够与用户进行交互的控件
      表单元素分类:
      1、input元素
         input元素是空标记 <input />
属性:
    type : 可以创建各种类型的input元素,比如:文本框、密码框、单选按钮、复选框
    value : 当前表单元素的值,可以是提交给服务器的值,也可以是默认显示的初始值
    name : 名称,要提交给服务器去使用
    id : 唯一标识,只能在当前页面使用,服务器不能用
    disabled : 禁用控件
   1、文本框
   type="text"
   <input type="text" />
   注意:如果type不写,或不在指定值范围内,那么默认都为 text 
   <input />
   <input type="abcdefg" />
    2、密码框
   以密文的方式接收和显示用户的数据
   type="password"
   <input type="password" />
以上两个控件的通用属性:
   1、name,id,value,
   2、maxlength : 限制输入的字符数
   3、readonly : 设置控件为只读
3、单选按钮
   type="radio"
   <input type="radio" />
   name : 定义名称、分组
   value : 值
   checked : 默认被选中
4、复选框
   能够实现多选的控件
   type="checkbox"
   <input type="checkbox" />
   name :定义名称、分组
   value :值
   checked :默认被选中
5、按钮
   1、提交按钮
      功能固定化,用于将表单的数据提交给服务器
      语法:
      type="submit"
      <input type="submit" value="按钮上的文字" />
   2、重置按钮
      功能固定化,将表单控件值恢复到默认状态
      语法:
      type="reset"
      <input type="reset" value="文本" />
   3、普通按钮
      没有任何功能的标准按钮,用于执行客户端脚本(自定义功能)
      语法:
      <input type="button" value="文本" />
 6、文件选择框
    <input type="file" />
    注意:如果有文件上传的话,必须将表单的enctype更改为 multipart/form-data,同时method必须为post
 7、隐藏域
    <input type="hidden" name="" value="" />
    使用场合:隐藏域在页面中是看不到的,一般会配合后台开发一起使用,从来不单独使用。
2、get提交数据的格式
  url?name=value&name1=value1&name2=value2 ...
  ...test.jsp?uName=SanFeng&uPass=Hello&gender=3




   2、选项框

         别名:下拉框、下拉列表
1、下拉列表
2、滚动列表
语法:
<select></select>
属性:
   name : 定义名称
   size : 大于1,则为滚动列表,否则,九十下拉列表
   multiple : 设置多选
<option></option>
属性:
    value : 选项的值
    selected : 预选中
<select name="province">
<option value="0451">黑龙江</option>
<option value="0431">吉林</option>
<option value="021">辽宁</option>
</select>
     3、多行文本域
        语法:
<textarea>默认显示文本</textarea>
属性:
  name : 名称
  cols : 指定文本域的列数,一行能显示多少个字符,表示宽度(以字符个数为单位)
  rows : 指定文本域的行数,如果真是数据超出设定行数,将出现滚动条,表示高度
     4、其他表单元素 - <label>
        关联文本 与 表单元素 
语法:
<label>文本</label>
属性:
  for : 表示与该元素相关联的控件的ID值 
3、其他标记
   1、浮动框架
      在一个浏览器中同时显示多个页面文档
      语法:
        <iframe></iframe>
       属性:
          src : 引入的网页路径(url)
 width : 宽度
 height : 高度
 frameborder : 边框
      注意:尽可能的少使用 iframe 元素
   2、摘要与细节
      将一部分内容进行 收缩或展开 的动作
      语法:
      <details>
<summary>标题</summary>
显示的内容
      </details>
   3、度量元素
      语法:
      <meter></meter>
      属性:
         min : 度量范围的最小值,默认为0
max : 度量范围的最大值,默认为1
value : 当前的度量值,默认为0
   4、时间元素
      语法:
      <time datetime="时间值">显示的文本</time>
   5、分组元素
      <fieldset>
<legend></legend> 定义组标题
显示内容
      </fieldset>定义组
   6、高亮文本显示
      以突出的方式显示一段文本
      语法:<mark>高亮显示的文本</mark>
0 0