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>