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"/>

  • 相关阅读:
    MIne FirstBlog
    P6563 [SBCOI2020]一直在你身旁
    P6563 [SBCOI2020]一直在你身旁
    T122085 [SBCOI2020]时光的流逝
    LC 918. Maximum Sum Circular Subarray
    1026 Table Tennis
    LC 1442. Count Triplets That Can Form Two Arrays of Equal XOR
    LC 1316. Distinct Echo Substrings
    LC 493. Reverse Pairs
    1029 Median (二分)
  • 原文地址:https://www.cnblogs.com/ithome0222/p/7683566.html
Copyright © 2011-2022 走看看