html-day3-个人学习笔记

html-day3-个人学习笔记

一、HTML5结构标记

header  页头、文档头

nav  导航

section 页面主体、文档主体

aside  边栏

article  文章

footer  底部

二 、表单(重难点)

1、表单概述：表单用于显示、收集用户信息，并提交给服务器

2、表单元素：

（1 ）语法：<form></form>    注意：只有出现在
form 中的 表单控件的数据才会被提交

（2）属性：1、action——作用：指定提交给服务器处理程序的地址，该地址要与服务器端人员商量。

                     2、method——作用：指定提交数据的方法(模式)，其取值：《1、get
(默认值)获取，特点：a、以明文的方式提交数据到服务器(数据会显示在地址栏上),安全性较低，b、最大提交2kb数据，c、向服务要数据时用get方式
      2、post邮寄... ...，      特点：a、以隐式的方式提交数据到服务器(不会显示),安全性较高，身份证号，密码，安全性要求高的数据，必须用post，b、无提交数据大小限制，c、让服务器处理数据时使用post》

3、表单控件：都是与用户进行交互的元素

（1）input 元素——作用：收集用户的信息

属性：1、type：根据不同的type值，创建不同的输入控件；2、name：定义控件的名称，提供给服务器端使用,采用匈牙利命名法
控件缩写+功能；3、value：定义控件的值，提供给服务器端使用；4、disabled：禁用控件(无法操作，无法提交)

input控件详解：

a、文本框 与 密码框：文本框：type="text"，密码框：type="password"

属性：1、maxlength限制输入的字符数 2、readonly只读(只能看，不能改，但允许被提交)无值属性 3、name缩写：txt用户名：txtUsername 用户密码:txtPassword 4、placeholder占位符

b、单选按钮 和 复选框：单选按钮：type="radio" 复选框：type="checkbox"

属性：name：定义控件的名称
  value值    checked预选中

c 、按钮 ：提交按钮type="submit"
 重置按钮type="reset"  普通按钮type="button"

属性： name缩写：btn
  value按钮上的文字      其他按钮：图片按钮(提交功能)<input
type="image">   按钮(提交按钮)<button>内容</button>

d、隐藏域 和 文件选择框：隐藏域：type="hidden"
  文件选择框：type="file"    隐藏域：想提交给服务器，但不想被用户看见的数据放在隐藏域中

（2）textarea 元素(多行文本域)：允许录入多行数据<textarea></textarea>，cols：指定文本区域的列数，rows：指定文本区域的行数，readonly：只读

（3）select 和 option(选择框)：选择框：<select></select>size默认显示选项的数量，如果大于1的话，则为滚动列表，multiple设置多选，也会变成滚动列表；选项：<option></option>selected默认预选中,无值

（4）其他：a、label 元素——作用：关联文本
与 控件<label></label>   for ：表示与该元素关联的控件的ID值    

                  b、为控件分组<fieldset></fieldset>
: 分组标题<legend></legend>
  

                  c、浮动框架：可以一个浏览器窗口中同时显示多个页面文档的内容<iframe>文字</iframe>

三、新表单元素(html5新标记) ：

1、电子邮件类型<input type="email">

2、搜索类型<input type="search">

3、URL类型<input type="url">

4、电话号码类型——移动终端：弹出 数字键盘<input
type="tel">

5、数字类型<input type="number">

6、范围类型——作用：允许选择指定范围内的一个值<input
type="range">

7、颜色类型——作用：颜色拾取控件<input
type="color">

8、日期类型——作用：允许用户选择日期<input
type="date">

9、周类型——作用：与date类似，但只能选择周<input
type="week">

10、月份类型——作用：与date类型，但只能选择一个月份<input
type="month">