目录

1.框架

1.1 内嵌框架iframe

1.2 框架标签升级使用

1.3 框架集合frameset

1.4 iframe和frameset的对比

2.表单form

1.框架

1.1 内嵌框架iframe

属性：

• width\height： 框架宽\高
• frameborder：框架边框，如果是0就不显示
• name=‘aaa'：给框架起个名字aaa
  • 作用：对应于a标签中的target属性。
• src：默认打开的页面

开始学习框架和表单吧
阿里巴巴
腾讯
北京尚学堂

效果展示：

1.2 框架标签升级使用

1.3 框架集合frameset

        frameset元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。在其最简单的应用中，frameset元素仅仅会规定在框架集中存在多少列或多少行。您必须使用cols或rows 属性。在使用frameset框架集时,当前页面不能再使用body标签,也不能再定义其他内容,只能作为引入其他页面来使用。

frameset：

• 使用frameset框架进行布局的时候必须删除body。
• rows：上下分成多少行
• cols：左右分成多少列  cols="第一列宽度，第二列宽度，... ...，"
• *含义：代表剩下所有的，eg：'20px,*,30px'
• frameborder='no'：去掉边框

1.4 iframe和frameset的对比

共同点：都可以实现网页中整体布局、都是框架标签。

不同点：

• frameset：对于移动端(手机/平板)支持效果比较差。

2.表单form

问题：

1. 搜索的信息提交到了哪里去了？
   https://www.baidu.com/s
2. 搜索的信息是如何传递过去的？
   wd=bjsxt&rsv_spt=1

https://www.baidu.com/s?wd=bjsxt&rsv_spt=1

• ？之前代表的是提交的地址URL
• ？之后代表的是携带的参数；参数和参数之间使用&进行分割；参数的形式都是name=value

重点：如果我们想要传递参数，input中必须含有name属性才可以

form属性：

• action：数据提交地址
• method：提交方式get/post
  • get()：默认，提交数据依附于URL，不安全; 地址栏有限定，传输数据量有限定；效率高
  • post()：提交数据依附于文本域，安全；传输数据量无限制；效率低

input属性：

• type：指定类型
  • ‘text'：普通文本框
  • 'submit'：提交
  • 'password'：密码框
  • ‘radio'：单选框    如果想要实现单选效果必须增加相同的name属性，真正提交的给网站的是value的值
    
  • 'checkbox'：多选框
    
  • ‘file'：文件表单项
  • ’hidden'：隐藏域 ==》定义隐藏字段，隐藏字段对于用户是不可见的。隐藏字段常常存储默认值，或者由JavaScript改变它们的值:
    
  • ‘reset'： 重置 ==》  相当于刷新一次，清空form中的内容【不常用，用户体验差】
  • 'button'：普通按钮，以后会结合js一起使用
    
  • ’email'：用于e-mail 地址的字段（当提交表单时会自动对email字段的值进行验证)
     
  • ’url'：定义用于输入URL的字段
  • 'color'：从拾色器中选取颜色
  • ‘number'：只能输入数字，输入字母不显示
  • ’range'：度量值
  • ‘date'：年月日
  • ’month'：年月
  • 'week'：年周
    
• value：给框框取名字
• checked：默认勾选，应用于type='radio'/'checkbox'
• autofocus：规定在页面加载时，域自动地获得焦点。
  注释: autofocus属性适用于所有标签的类型。

• autofocus/multiple/placeholder/required：

  

select：下拉框

• 。。。
  • selected：表示已经选中，用于下拉框，区别checked
    

textarea属性：多行文本框

• rows='10'：文本框只显示10行的大小 
• cols='30'：文本框只显示30个字符的大小 ，但也许会多两个；一个中文占两个字符。

男:女:

抽烟:喝酒: 打牌:

--请选择--北京上海深圳

个人介绍：







Email：
URL：


color：
年龄：
声音：
生日（年月日）：
生日（年和月）：
选择周：

展示效果：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！