html标签属性、form表单标签、iframe框架标签、table表格标签

一、html标签属性

• 标签由标签名、标签属性、文本内容三部分组成（单标签没有文本内容）。
• 标签属性是对标签的一种描述方式。
• 标签属性分为通用属性、自有属性和自定义属性。
• 通用属性：所有标签都具有的属性（除<br />）。

通用属性：

id：给标签取一个唯一的名称。id名称在网页中必须是唯一的。

class：给标签取一个类名。

style：用来设置该标签的样式，行内样式。

title：当鼠标移到该标签时所显示的提示内容。

• 自定义属性：通常用来传值或用于图片懒加载等方面。

格式：data-*

<img data-src="图片名" alt="提示文本"/>

<p data-id="gooodsid'>  </p>

二、form表单标签

实现前后端交互的重要标签。

1、常用属性：

name：表单名称

action：表单数据提交的地方（通常是一个后台文件名或网址）。若是#，表示提交到当前文件下。

method：前端提交数据到后端的方法。主要有get和post，默认get。

2、表单元素：

input标签：主要用来输入、选择或者发出指令。

textarea标签：文本域、多行文本框，主要用于输入大批量内容。

select标签：下拉列表框，默认用于单项选择

button标签

3、input标签

主要用来输入、选择或者发出指令

type：

• text：单行文本输入框，可不写，默认值。

属性：placeholder（提示）、name（命名）、minlength/maxlength（最少/最多输入的字符个数）、disabled（失效）、readonly（只读）、value（默认值）、pattern（正则匹配）

• password：密码框，   属性与text一样。
• radio：单选钮，  通常两项以上。常用属性：name（必须有）、value、checked（默认选中）、disabled（失效）、readonly（只读）
• checkbox：复选框 ，   可以用来选0、1或多项。常用属性：name（必须有）、value、checked（默认选中）、disabled（失效）、readonly（只读）
• file：文件上传按钮。
• button：普通按钮，通常用它调用脚本代码。常用属性：value（按钮的标题）、disabled（失效）
• image：图片按钮，用法与button一样。特殊属性：src（加载提示图片）。有提交功能，与submit一样。
• submit：提交按钮，用来将表单数据提交到后台。常用属性：value（按钮的标题）、disabled（失效）
• reset：重置按钮，将表单所有输入的内容全部清空，还原为初始状态。常用属性：value（按钮的标题）、disabled（失效）

4、textarea标签

文本域、多行文本框，主要用于输入大批量内容。

常用属性：name/id/cols（列数）/rows（行数）/placeholder/minlength/maxlength/required(必须输入)

5、select标签

下拉列表框，默认用于单项选择。用option呈现每个选项。

multiple属性：表示可以多选。这时下拉框列表框变成了列表框。

size：最多显示的行数。

6、button标签

普通按钮，具有提交功能。可以单独使用，不写在form元素中。如果写在form中，有提交功能。

三、iframe框架标签

框架集，用来将多个网页文件组合成一个文件。

常用属性：

name：框架名

src：引入的外部html文件

scrolling：滚动条（yes/no/auto）

width：宽度

height：高度

frameborder：是否有边框（1/0）

marginheight：框架离顶部和底端的距离

marginwidth：框架离左右的距离

实际开发中，尽量减少使用iframe，因为破坏了前进和后退功能，且不利于SEO。

四、table标签

主要用于呈现格式化数据。表格是由行和列组成的。

格式：

	<table>
		<tr>
			<th></th>
			<td></td>
			<th></th>
			<td></td>
		</tr>
		<tr>
			<th></th>
			<td></td>
			<th></th>
			<td></td>
		</tr>
	</table>

table属性：

border：表格边框，默认单位像素。

width：表格宽度。

align：表格对齐方式（left（默认）/center/right）

cellpadding：单元格文本与边框的距离。

cellspacing：单元格边框间距。

 

跨行/跨列属性主要用于绘制复杂表格：

rowspan：跨行

colspan：跨列

 

完整表格组成：

caption（标题）、thead（表头）、tbody（表体）和tfoot（表尾）。