html entry (lists, forms, common form controls, floating frame, iframe, summary and details, measure label)

First, the list
    1. Role: the default display mode as the display data from top to bottom
    2. The composition and type of list items list List
    3. The sorted list: custom ordered list unordered list listing

The syntax for the unordered list ul> li,

Syntax: ul represent the list, li represents the list of items

The syntax is an ordered list ol> li,

Syntax: list of representatives ol, li represents the list of items

Custom list, use:

<dl>

  <dt>1</dt>

  <dd>1</dd>

</ dl>
Syntax: dd title list item type list dl dt list

Second, the form

1. The form of action:

For display, collect user information, and the information is submitted to the server

2. Form Composition

  1. Form elements: the user is responsible for submitting data to the server

  2. Form Controls: Responsible for receiving user data (and user interaction)

    Form elements common attributes:

          action = URL, where to a predetermined form data when the form is submitted.

          method = get or post, configured to send a predetermined form-data HTTP methods.

          name = name "Form Name", the provisions of the form.

          = _blank target, _self, _parent, _top, framename, open the action URL specified where.

Get on transmission and post transfer:

GET advantages: 

1. Perform efficient than POST. 

2. You can transfer data via url, find the data will be reflected when its benefits. 

GET disadvantages: 

1. Security is very low, because the uploaded data will be displayed on the url, it is generally used in uploading irrelevant data. 

2. The uploaded data amount is small, typically no more than 4K. This is because the length of the url is limited.


POST advantages: 

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>

Guess you like

Origin www.cnblogs.com/MDZZZ/p/12000279.html