zoukankan      html  css  js  c++  java
  • HTML常用标签(二)

    HTML基本标签(二)

    1. 超链接:实现页面之间的导航。
        链接文本或图像/链接另一个地址。

    2. 语法:
        <a href="path" target="目标窗口位置" >链接文本或图像</a>
         常用值 _self(在本窗口内打开链接),_blank(在一个空白窗口打开链接)

        例:
           文本链接:
            <a href="hetao.html" target="_blank">无漂白薄皮核桃</a>
            图像链接:
            <a href="hetao.html" target="_self"><img src="image/hetao.jpg" alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/></a>

    3. <base>标签:单标签
        为页面上所有链接规定默认地址或默认目标窗口位置。
        base标签必须位于head标签内部。
       例:
       <head>
            <base target="_blank">
      </head>
       为本页面所有超链接规定为在一个新窗口打开超链接。

    4. 链接路径:
          a. 相对路径:相对于当前目录的地址。从当前目录出发到目标地址所经过的位置信息。常用(上级目录:../ 上上级目录:../../)。
              <a href="login/login.htm">登录</a>

        b. 绝对路径: 从我的电脑根标签出发到目标地址所经过的位置信息。少于。
             <a href="/memAdmin/login/login.htm">登录</a>

    5. URL 统一资源定位器

       使用HTTP的URL的一般形式:
        http://<主机>:<端口号>/<路径><文件名>
        例:
         http://www.sina.com:80/login/login.htm

    6. 超链接的三个应用场合:
         a. 页面间链接 从一个页面链接到另一个页面。

         b. 锚链接: 从一个页面链接到页面中的某个位置。适用于内容较多的,超过一屏的页面。
        实现方法:
           1. 定义标记 <a name="标记名">目标位置</a>
           2. 设置链接到标记位置
                   <a href="#标记名">当前位置</a>

           例如:
             <a href="#star">[明星专区]</star> ..........<a name="star">明星专区内容</a>

         *3. 功能性链接: 邮箱,QQ链接等.....
                <a href="mailto: guimeiWebMater@gmgw.com">站长信箱</a>

    7. 注释:

       <!--注释内容--> 用于增加代码的可读性,浏览器会自动忽略该内容。

    8. 特殊符号
        有些符号在html中以及使用,为了以示区分,所有要用特殊符号来标识(如>,<等)。
         有些符号浏览器不认识,要用特殊符号来标识(如空格,版权符等)

        常用特殊符号: 以分号结尾
        空格:&nbsp;
       大于(>):&gt;
       小于(<): &lt;
       引号(”):&quot;
       版权号(?) :&copy;

    9. 表单: 用于实现与用户交互。
        表单标签:
        单行文本框(text)
        密码框(password)
        单选按钮(radio)
        复选框(checkbox)
       下拉列表(select)
        文本域(textarea)
        提交按钮(submit)
       重置按钮(reset)

       表单语法: 如何发送表单数据post|get 表示向何处发送数据
      <form method="提交方式" action="提交目的地" >表单内容......</form>

       表单元素的基本格式:
            <input name="表单元素名称" type="类型" value="值" size="显示宽度"
         maxlength="最大长度" checked="是否选中" />

         type: 表单元素的类型,默认为text,类型有text,password,radio,checkbox,select,textarea,submit,reset
         name: 表单元素的名称,自己指定,与后台交互。
         value: 表单元素的初始值。
         size: 指定表单元素的初始宽度,type为text和password时以字符为单位,其他类型以宽度为单位。
         maxLength: type为text或password时,输入的最大字符数。
         checked: type为radio或checkbox时,指定按钮是否是被选中

    9.1 文本框
        <input name= "名称" type= "text" value= "初值"
             size= "数字" maxlength="数字"/> name用于服务器端获取数据

        例:
             用户名:<input name="username" type="text" size="30"
          maxlength="20"/>

    9.2 密码框
            密码:<input name= "名称" type= "password" value= "初值"
       size= "数字"/>

      例:
          密码:<input name="password" type="password" size="30"/>

    9.3 按钮
               <input name= "名称" type= "按钮类型" value="按钮文字" ?
        src="图片按钮的图片url"/>
           按钮类型:button 普通按钮
           submit 提交按钮
           reset 重置按钮
           image 图片按钮 type为图片按钮时才用指定src图片的路径。

       例:
            <input type="reset" name="reset" value=" 重填" />
            <input type="submit" name="button" value="同意……" />
            <input type="button" name="confirm" value="点播音乐" />
           <input type="button" name="cancel" value="取消" />
           <input type="image" src="images/login.gif" />

    9.4 单选按钮
         <input type="radio" name="组名" value="..." checked="..."/>
       同一组,name必须相同,否则无法实现单选功能。

        性别:
               <input type="radio" name="gender" value="man" checked="checked"/>男
               <inpur type="radio" name="gender" value="woman" />女

    9.5 复选框
              <input type="checkbox" name= " … " value= " … "
       checked= " … " /> name可以不同

        例如:
            兴趣爱好:
                    <input type="checkbox" name="hobby1" value="sports" checked="checked">体育运动
                    <input type="checkbox" name="hobby2" value="music">音乐
                    <input type="checkbox" name="hobby3" value="game">游戏
                    <input type="checkbox" nam="hobby4" value="novel">小说

    9.6 文件域
             <input type="file" name= " … " />

          例如:
            <input type="file" name="files" />

    9.7 列表框
               <select name="指定列表名称" size="行数">
                          <option value="选项值" selected="selected">…</option>
                           … …
               </select>

         例如:使用固定选项,避免用户输入错误。
                    <select name="bmon">
                             <option value="" selected="selected">[选择月份]</option>
                             <option value="0">一月</option>
                             <option value="1">二月</option>
                             <option value="2">三月</option>
                             <option value="3">四月</option>
                </select>

    9.8 多行文本框
                  <textarea name="... " cols="列宽" rows="行宽">
                          文本内容
                </textarea>

               例如:
               <textarea name="textarea" cols="6" rows="40">
                         请阅读贵美服务协议
               </textarea>

    10. 表单的高级用法
          10.1 隐藏域:
                 方便服务器端记住客户端的信息,但又不希望客户看到的数据。
               <input type="hidden" name="…." value="…" />

              例如:
                   <input type="hidden" name="userid" value="666" />

    10.2 只读和禁用属性
                 readonly: 希望某个框内的内容用户只能阅读而不能修改。
                  disabled: 因没达到使用的条件限制用户使用

    例:
                  只读:
                       <textarea name="content" cols="60" rows="8" readonly="readonly">
                                                欢迎阅读服务条款协议,贵美的权利和义务......
                      </textarea>
                 禁用:
                        <input name="btn" type="submit" value="注册" disabled="disabled" />

    11.表单语义化:

                  符合W3C标准
                   语义化的标签
                  结构合理、代码简洁

    11.1 语义化的标签:

            域标签:
                 <fieldset> -----------声明域的范围
                      <legend>域标题</legend>
              </field>

    11.2 聚焦标签
            增强鼠标的可用性
            自动将焦点转移到与该标注相关的表单元素

             <label for="id">标注的文本</label>
             <input type="radio" name="gender" id="male"/>


           例如:
                  <label for="username">密码</label>
                  <input type="text" name="username" id="username"/>

  • 相关阅读:
    *** FATAL ERROR L250: CODE SIZE LIMIT IN RESTRICTED VERSION EXCEEDED
    *** FATAL ERROR L250: CODE SIZE LIMIT IN RESTRICTED VERSION EXCEEDED
    nRF24L01无线介绍
    关于使用墙外安卓应用
    jquery miniui , 普加甘特图,流程管理
    数据库测试DbUnit
    如何写BaseDomain
    js 字符串转 数字
    Http协议中 常用的参数应用
    spring 管理 jdbc 事务
  • 原文地址:https://www.cnblogs.com/ithome0222/p/7683566.html
Copyright © 2011-2022 走看看