html入门（列表、表单、常用表单控件、浮动框架、iframe、 摘要与细节、度量标签）

标签：eth   选中   strong   字段   补充   执行   ext   summary   用户信息   

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

无序列表语法为ul>li,

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

有序列表语法为ol>li,

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

自定义列表，用法：

　　

1

　　

1

语法： 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传递数据，有时候可能会不方便。

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

元素是最重要的表单元素。

常用属性：

　　　 　   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 个字符。

　　

下拉列表项

常用属性：

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

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

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

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

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

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

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

　　<!--文本域-->

常用属性：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　　　　 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在

标签里边。

　　语法：第一步写上 摘要标签 details
　　　　   第二步 写上标题 summary
　　　　   第三步 写内容

显示内容(点击显示下列隐藏内容)

隐藏内容

隐藏内容

　　　　　注意：目前，只有 Chrome 和 Safari 6 支持 details 标签。
五、度量标签



内容

html入门（列表、表单、常用表单控件、浮动框架、iframe、 摘要与细节、度量标签）

标签：eth   选中   strong   字段   补充   执行   ext   summary   用户信息   

原文地址：https://www.cnblogs.com/MDZZZ/p/12000279.html