美文网首页四期学习小组
HTML第二节第二天

HTML第二节第二天

作者: 千里一线缘 | 来源:发表于2017-04-17 10:37 被阅读3次

4.表单标签

4.1Form标签

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

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

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

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

4.1.2Input标签

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

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

文本框:text

密码框:password

单选:radio

多选:checkbox

按钮:button

提交按钮:submit

重置按钮:reset

Demo:

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

4.1.3Select标签

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

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

公历

农历

农历

农历

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

4.1.4文本域标签

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

内容

4.1.5Fieldset标签

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

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

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

用户组2

用户名2:

密码2:

4.1.6Lable标签

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

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

用lable标签包裹表单标签。

案例:

文本框获得焦点

选中按钮

1.1.7表单总结

Form:包裹标签,action:#

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

Type:radio ,单选

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

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

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

文本框获得焦点

选中按钮

Select:下拉列表,列表。Multiple,单属性。

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

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

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

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

Fildset标签

Legend,组合标签的标题。

5.1Iframe标签

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

可以设置高度和宽度(height,width)

去掉边框:frameborder设置为0;

不建议使用了。

5.1.1Mate标签的补充

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

SEO优化的设置:

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

6.2字符实体

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

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

这是p标签的写法

HMTL:

1、网页结构:HTML

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

Ul、li、ol、dl、dt、dd

Input select textarea lable form fielset

2、CSS,描述样式

3、JavaScript,实现页面交互的效果。

相关文章

  • HTML第二节第二天

    4.表单标签 4.1Form标签 Form标签,表单的域标签,用于包裹整个表单的内容。 表单就是用户提交数据到后台...

  • Html 第二节

  • HTML第二节

  • Html第二节

    无序列表 上海 成都 有序列表 上海 成都 自定义列表 创建表格表单 //table表示一个表格...

  • HTML自学第二节

  • html阶段第二节

    一. 列表标签 1. 无序列表标签 ul>li 语法: 北京 上海 武汉 成都 2.有序列表标签 ol>li 语法...

  • 2018-03-20

    今天是正式上课的第二天,曹老师在帮我们讲解温习HTML,所以今天的总结还是针对html进行回顾HTML:超文本标记...

  • html+css初识(第二节)

    本小节主要用来了解各种HTML标签,知道各种标签的含义。下面通过一小段代码来了解各种标签的含义: 运用效果: ① ...

  • 第二节:什么是html语言

    Html (超文本标记语言); 语言- 与浏览器沟通的一个方式;所有的浏览器都懂html; 标记(标签) - <>...

  • html第二节:表单元素

网友评论

    本文标题:HTML第二节第二天

    本文链接:https://www.haomeiwen.com/subject/cyxtzttx.html