zoukankan      html  css  js  c++  java
  • HTML入门(列表、表单、常用表单控件、浮动框架、iframe、 摘要与细节、度量标签)

    一、列表
        1.作用:默认显示方式为从上到下的显示数据
        2.列表的组成 列表类型和列表项
        3.列表的分类:有序列表   无序列表   自定义列表

    无序列表语法为ul>li,

    语法:ul代表列表,li代表列表项

    有序列表语法为ol>li,

    语法:ol代表列表,li代表列表项

    自定义列表,用法:

    <dl>

      <dt>1</dt>

      <dd>1</dd>

    </dl>
    语法: dl列表的类型 dt列表的标题 dd 列表项

    二、表单

    1.表单的作用:

    用于显示、收集用户信息,并将信息提交给服务器

    2.表单组成

      1.表单元素:负责将用户数据提交给服务器

      2.表单控件:负责接收用户的数据(和用户进行交互的)

        表单元素常用属性:

              action=URL,规定当提交表单时向何处发送表单数据。

              method=get或者post,规定用于发送 form-data 的 HTTP 方法。

              name=“表单名称”,规定表单的名称。

              target=_blank、_self、_parent、_top、framename,规定在何处打开 action URL。

    关于get传输和post传输:

    GET的优点: 

    1.执行效率比POST高。 

    2.可以通过url传递数据,查找数据的时候就会体现到它的好处。 

    GET的缺点: 

    1.安全性很低,因为上传的数据都会显示在url上,所以一般用在上传无关紧要的数据上。 

    2.上传的数据量较小,一般不能超过4K.这也是因为url的长度而被限制的。


    POST优点: 

    1.安全性高,但是也不是很高,如果想要高安全性的话就用https传输协议。 

    2.上传的数据量比GET大得多。“理论上讲,POST是没有大小限制的,HTTP协议规范也没有进行大小限制,说“POST数据量存在 80K/100K的大小限制”是不准确的,POST数据是没有限制的,起限制作用的是服务器的处理程序的处理能力。”

    POST缺点: 

    1.执行效率比GET低,但是现在的计算机都很强大,这些几乎可以忽略不计,所以建议一般都使用POST方式。 

    2.不可以通过url传递数据,有时候可能会不方便。

    表单控件:提供多个类型的表单控件,并具有可视化的外观。

    <input> 元素是最重要的表单元素。

    <input>常用属性:

            1.autofocus:规定输入字段在页面加载时是否获得焦点。(不适用于 type="hidden")

          2.value:规定 input 元素的值。

          3.src:定义以提交按钮形式显示的图像的 URL。

        4.align:规定图像输入的对齐方式。

          5.checked:规定此 input 元素首次加载时应当被选中。

          6.disabled:当 input 元素加载时禁用此元素。

          7.form:规定输入字段所属的一个或多个表单。

          8.name:定义 input 元素的名称。

          9.readonly:规定输入字段为只读。

         10.required:指示输入字段的值是必需的。

         11.size:定义输入字段的宽度。

         12.value:规定 input 元素的值。

         13.height:定义 input 字段的高度。(适用于 type="image")

         14.width:定义 input 字段的宽度。(适用于 type="image")

            15.type:button:定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。

      checkbox:定义复选框。

      file:定义输入字段和 "浏览"按钮,供文件上传。

      hidden:定义隐藏的输入字段。

      image:定义图像形式的提交按钮。

      password:定义密码字段。该字段中的字符被掩码。

      radio:定义单选按钮。

      reset:定义重置按钮。重置按钮会清除表单中的所有数据。

      submit:定义提交按钮。提交按钮会把表单数据发送到服务器。

      text:定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。

    <select>  <!--下拉列表元素-->

    <option>下拉列表项</option>

    </selece>

    <select>常用属性:

              1.autofocus:规定在页面加载后文本区域自动获得焦点。

            2.disabled:规定禁用该下拉列表。

            3.form:规定文本区域所属的一个或多个表单。

            4.multiple:规定可选择多个选项。

            5.name:规定下拉列表的名称。

            6.required:规定文本区域是必填的。

            7.size:规定下拉列表中可见选项的数目。(大于1的时候会变成滚动列表)

    <textarea>  <!--文本域-->

    <textarea>常用属性:

            1.autofocus:规定在页面加载后文本区域自动获得焦点。

            2.cols:规定文本区内的可见宽度。

            3.disabled:规定禁用该文本区。

            4.form:规定文本区域所属的一个或多个表单。

            5.name:规定文本区的名称。

            6.readonly:规定文本区为只读。

            7.required:规定文本区域是必填的。

            8.rows:规定文本区内的可见行数。

            9.placeholder:规定描述文本区域预期值的简短提示。

    关于关联input控件使得点击<label>实现对应控件焦点选中状态

    1.首先在要关联的input控件上加上一个id

    2.用label标签包含住文本并且加上for属性

    三、浮动框架
      作用:可以在一个浏览器窗口中同时显示多个页面文档
      第一种用法
        <iframe src="url" width="500px" height="500px"></iframe>
      第二种用法 和超链接的结合使用
        1.创建超链接标签
        2.创建iframe标签
        3.在iframe加上一个name属性
        4.改变超链接的target属性 改变为name的值

    四、摘要与细节
      作用: 标签规定了用户可见的或者隐藏的需求的补充细节。

          标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。
      语法:第一步写上 摘要标签 details
           第二步 写上标题 summary
           第三步 写内容

    <details>

    <summary>显示内容(点击显示下列隐藏内容)</summary>

    <p>隐藏内容</p>

    <p>隐藏内容</p>

    </details>

         注意:目前,只有 Chrome 和 Safari 6 支持 details 标签。
    五、度量标签
    <!--度量标签
    min:最小值
    max:最大值
    value:当前显示的度量值0
    -->
    <meter min="0" max="50" value="50"></meter>
    <!--高亮标签-->
    <mark>内容</mark>

  • 相关阅读:
    Java实现监控目录下文件变化
    Postgresql 修改用户密码
    Swing清空jtable中的数据
    delphi登录用友的信息
    用友U8的SQL SERVER 数据库结构说明表
    候老师的讲堂:视频录制、笔记软件、思维导图、画图等工具
    DELPHI 关于内存数据与 JSON
    Delphi国内优秀网站及开源项目
    SQL Server 阻止了对组件Ad Hoc Distributed Queries访问的方法
    SQL Server跨服务器查询
  • 原文地址:https://www.cnblogs.com/MDZZZ/p/12000279.html
Copyright © 2011-2022 走看看