【第四天】03-HTML的内容标签笔记（下）

2017-02-17 本文已影响0人单行道MY

1.1 表单标签

1.1.1 Form标签

Form标签，表单的域标签，用于包裹整个表单的内容。

表单就是用户提交数据到后台的一个虚拟单子。

表单一般由文本框、下拉列表、单选、多选、文本域等组成。

Action属性，用于指定当前表单提交的时候指向后台的地址。

1.1.2 Input标签

Input标签是文本框、单选、多选、按钮等。

Type属性不同的取值决定了input标签的作用。

文本框：text

密码框：password

单选：radio

多选：checkbox

按钮：button

提交按钮：submit

重置按钮： reset

Demo：

Input标签的 checked属性，属性值只有一个checked，可以省略属性值，在单选按钮和多选按钮中表示此按钮被选中。

1.1.3 Select标签

Select标签用于下拉列表，或者列表标签。

选项用option标签来设置，value值只有在后台有用。Option包裹的内容是显示的选项的文本。例如：

</select>

Multipe:也是一个单属性。值只有一个multiple。设置了此属性表示select标签表现为列表标签。否则表示下拉列表标签。

1.1.4 文本域标签

Textarea文本域标签，用来输入大量文本的的标签。文本域标签的cols表示可以容纳多少列字符。Rows容纳多少行数据。一般用于输入大量文本时才用这个，其他情况用input 就可以了。

内容

</textarea>

1.1.5 Fieldset标签

表单组合标签，仅仅用于表单的组合。只是语义层面的事情。

可以影响到reset按钮的效果。

Legend标签用于组合标签的标题。

用户名2：<input type="text">

<br>

密码2：<input type="text">

</fieldset>

1.1.6 Lable标签

Lable标签可以让标签文本点击的时候让label指向的标签表单标签获得焦点。

两种方式，使用for属性指向表单标签。

用lable标签包裹表单标签。

案例：

<label for="txtName">文本框获得焦点</label>

1.1.7 表单总结

Form：包裹标签，action：#

Input：文本框、单选按钮、多选按钮type:checkbox、提交的按钮、按钮、重置的按钮。

Type:radio ,单选

Checked属性：标识单选或者多选按钮是否被选中。单属性。

Lable标签，for属性指向要提供服务的标签的id值。

Lable直接包裹标签，可以实现点击标签的文字内容，让包裹的表单标签标签获得焦点。

<label for="txtName">文本框获得焦点</label>

Select：下拉列表，列表。 Multiple，单属性。

Option设置我们的列表的选项。

Textarea文本域标签：当输入大量的文本的时候需要使用文本域标签。

Cols设置文本域可以输入多少列字符。宽度。

Rows 设置文本域的可以输入的行字符数，高度。

Fildset标签

Legend，组合标签的标题。

1.2 Iframe标签

iframe标签，元素会创建包含另外一个文档的内联框架（即行内框架）。

可以设置高度和宽度（height，width）

去掉边框：frameborder设置为0；

不建议使用了。

1.2.1 Mate标签的补充

上面代表如果是用ie打开的当前页面，那么就使用最新的ie版本打开此页面。

SEO优化的设置:

Base标签可以让当前页面中的所有的a标签都拥有相同的属性，比如targent属性。

1.3 字符实体

怎么才能实现在HTML页面中显示HTML的代码呢？

比如说：要在页面中显示：

<HTML5>

<p>这是p标签的写法</p>

HMTL：

网页结构：HTML

Div、span、strong、em、table、tr、td

Ul、li、ol、dl、dt、dd

Input select textarea lable form fielset
CSS，描述样式
JavaScript，实现页面交互的效果。