zoukankan      html  css  js  c++  java
  • HTML 自学笔记(HTML框架+表单设计)

    HTML框架

    1. 什么是框架:将浏览器划分成不同部分,每一部分加载不同的网页,用以实现在同一浏览器窗口中加载多个页面的效果。
    2. <frameset> 划分框架标记。
      1. 语法格式:<frameset>...</frameset>
      2. 属性:
        1. cols 使用“像素值”和“%”分割左右窗口,“*”表示剩余部分。若使用“*,*,*”则表示框架平均分成3个。若使用“*,*”则表示框架平均分成2个。
        2. rows 使用“像素值”和“%”分割上下窗口,“*”表示剩余部分。
        3. framborder 指定是否显示边框。<framborder="0">不显示;<framborder="1">显示。
        4. border 设置边框的大小,默认值5px
    3. 3.<frame> 子窗口标记,单标记。该标记必须放在<frameset>中使用,在<frameset>中设置几个窗口,就必须对应使用几个<frame>框架。而且还必须使用src属性指定一个网页。
      1. 语法格式:<frame 属性=“属性值”> 。
      2. 属性:
        1. src 加载网页文件的url地址。
        2. name 框架名称,是链接标记的target所要参数。
        3. noresize表示不能调整框架大小,没有设置时就可以调整。
        4. scrolling是否需要滚动条

    值:

      1. auto根据需要自动调整
      2. yes 有 
      3. no  无

    5.<frameborder>是否需要边框 <frameborder=“1”>显示边框;<frameborder=“0”>不显示边框。

    4.其他相关标签

        • <code>表示计算机源代码或其他机器可以阅读的文本内容</code>也会将文本显示为等宽字样。
        • <pre>定义预格式文本,被包围在pre元素中的文本通常会保留空格和换行符。而文本也会呈现等宽字样。
        • <tt>呈现等宽文本效果
        • <address>标签定义文档或文章的作者联系信息。
          • 若<address>元素位于<body>元素内,则表示文档联系信息
          • 若<address>元素位于<article>元素内,则表示文章的联系信息

    注:元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行

    HTML表单设计

    1. 表单标记:<form>定义表单的开始位置和结束位置,表单提交时的内容就是form中的内容</form>
      1. 语法格式:<form action="服务器端地址(接受表单内容的地址)" name="表单名称" method="post/get(传输方式)">...</from>
      2. 常见属性:
        1. get:get方式提交时,会将表单的内容附加在URL地址后面,所以限制了提交内容的长度,不超过8192个字符,且不具备保密性。
        2. post:post提交时,将表单的数据一并包含在表单主体中,一起传输到服务器中处理,没有数据大小限制。
        3. action:表单数据的处理程序的URL地址,如果为空,则使用当前文档的url地址,如果表单中不需要使用action属性也要指定其属性为“0”
        4. target:和超链接属性类似,用来指定目标窗口。
    2. <input>文本域和密码域,没有结束标记。
      1. 语法格式:<input type="" value="" size="" maxlength="规定输入字段的最大长度,以字符个数计">
        • 当type="text"时,<input>表示一个输入文本域
        • 当type="password"时,<input>表示一个密码输入域。

                   2.常见属性:

        • name 定义控件名称
        • value 初始化值,打开浏览器时,文本框中的内容
        • size   设置控件的长度
        • maxlength 输入框中最大 允许输入的字符

          3.按钮的使用

    1. 提交按钮;当<input type="submit" >时;
    2. 重置按钮;当<input type="reset">时;
    3. 普通按钮;当<input type="button">时;
    4. 单选按钮:当<input type="radio">时; 
    5. 复选按钮:当<input type="checkbox" >时。

    注:单选按钮和复选按钮都可以使用"checked"属性来设置默认项。另name属性一致时,则为二选一。

    如:

          性别:<input type="radio" name="sex">男

          性别:<input type="radio" name="sex">女

    4.隐藏域:当<input type="hidden">时;

          5.多行文本域:

    用法:使用<textarea>标记可以实现一个能够输入多行文本区域。

    格式:<textarea name="name" rows="value" cols="value"  value="value">...<textarea>

     注:rows和cols属性分别用来指定显示行的行数和列数,单位是字符个数。

          6.菜单下拉列表域<select>

    语法格式:   <select name="" size="value" multiple="value">

       <option value="" selected="selected">选项1</option>

       <option value="" selected="selected">选项2</option>

       <option value="" selected="selected">选项3</option>

    </select>

    <html>
    <head>
        <title>
            网页的框架
        </title>
        <meta charset="utf-8">
    </head>
        <frameset rows="90,*,90" frameborder="1" border="1" noresize="noresize">
            <frame name="top" src="top.html"/>
                <frameset cols="20%,80%">
                    <frame name="left" src="left.html"/>
                    <frame name="right" src="right.html" scrolling="no"/>
                </frameset>
            <frame name="bottom" src="bottom.html"/>
        </frameset>
    </html>
    
    
    <html>
    <head>
        <title>表单设计练习</title>
        <meta charset="utf-8">
    </head>
    <body>
        <form>
            账号:<input type="text" size="16">
            <br/><br/>
            密码:<input type="password" size="16">
                <br/><br/>
            爱好:<input type="checkbox" name="tiyu">体育
                  <input type="checkbox" name="yinyue">音乐
                  <input type="checkbox" name="yingshi">影视
                  <input type="checkbox" name="yuedu">阅读
                  <br/><br/>
            性别:<input type="radio" name="sex">男
                    <input type="radio" name="sex">女
                     <br/><br/>
            自我介绍;
             <br/><br/>
             <textarea name="name" rows="10" cols="30" >
    这里是自我介绍
            </textarea>
            <br/><br/>
            地址:
            <select name="dizhi">
            <!--selected不添加也会有同样的效果-->
               <option value="shanxi" selected="selected">陕西</option>
               <option value="sichuan" selected="selected">四川</option>
               <option value="gansu" selected="selected">甘肃</option>
               <option value="henan" selected="selected">河南</option>
            </select>
            <br/><br/>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
            <!--value不赋值,提交按钮和重置按钮会有同样的效果,但是普通按钮不会有文字,就只是个方形按钮,大家可以自己练习一下-->
            <input type="button" value="按钮">
        </form>
    </body>
    </html>
    

      

         

     

  • 相关阅读:
    使用Application Insights 做分析
    UWP中GridView右击选中的实现
    Bing Map
    UWP深入学习六:Build better apps: Windows 10 by 10 development series
    从上往下打印二叉树
    二叉树中和为某一值的路径
    二叉树的镜像
    树的子结构
    由前序遍历和中序遍历构建二叉树
    二叉树常见题目
  • 原文地址:https://www.cnblogs.com/xsql/p/5973368.html
Copyright © 2011-2022 走看看