学习笔记04

2017年9月21日

学习笔记与总结

1.form表单

form标签一般和table标签嵌套使用

form和table一般加载较慢 慎用

（1）表单属性：

action属性：指定表单提交数据至具体的服务端

method属性：指定表单数据提交到服务器的方式

get 方法（默认）：

传递的数据以拼接到url地址的方式传递到服务端

缺点：敏感信息容易暴露，信息传输量有限

优点：传输速度快 获取速度快

post 方法：

优点：要传输的数据被隐藏，传输的数据量基本不受限制

缺点：传输速度相对慢一些

type：用来指定表单元素的类型

value：用来指定输入框或者按钮的默认显示文本

name：用来拼接提交的到服务端的键值对

（2）各类表单元素：

text：文本输入框

password：密码输入框

radio：单选按钮

checkbox：复选框

name：通过同名的name属性把多个单选框划分为一组

同一组内的元素只能有一个单选处于选中状态，实现互斥的效果

单选按钮和复选框都要添加name和value属性

file 属性

select下拉列表：表内元素用option

例如：<option value="sd">山东</option>

textare：文本域 cols属性：列宽 rows属性：行高

例如：<textarea name="sug" id="" cols="30" rows="10"></textarea>

submit：触发表格提交功能

reset：触发表格恢复原始数据的功能

image：和submit一样，也会触发表单的提交功能，但是时图片按钮

buttom：普通按钮，没有默认功能

（3）智能表单：

Form：所属表单，只需要在form标签内加入id

在form表单外的加入form=’id名‘即可使用

（4）H5新的表单元素：

限制用户输入email格式

<input type="email">

限制用户输入网址格式

<input type="url">

限制用户输入日期格式

<input type="date">

限制用户输入月份格式

<input type="month">

限制用户输入周期格式

<input type="week">

限制用户输入时间格式

<input type="time">

限制用户输入数字格式

<input type="number" max="20" min="10" step="2">

一个滑动条效果

<input type="range">

选择颜色格式

<input type="color">

（5）H5 input新属性：

autocomplete="off"：关闭自动补全功能

autocomplete：自动补全功能

autofocus：自动获取光标功能

placeholder：输入文本提示

dissable：锁定输入框或者禁用按钮

required：必填项！

2.css样式入门

行内样式：

缺点：1.样式代码会影响标签的阅读

2.样式代码复用性过低

优点：优先级高

内部样式

类选择器

1：css和html的分离

2：css样式复用性高

标签选择器

所有该标签使用此样式

外部样式：

部分选择器：

标签选择器：让当前页面所有匹配的元素都生效

类 选择器：作用于当前页面所有匹配的同名类（class匹配头部style中的 . ）

id 选择器：作用于当前页面的某一个元素(id匹配#)

* 空格：后代选择器*

例如： #div1 li{

color: cadetblue;

}

* 通配符选择器：匹配当前页面全体标签

例如：

* {

padding: 0;

margin: 0;

background-color: cadetblue;

}

伪类选择器

li:nth-child(2n-1)

{

color: cadetblue;

}

li:last-child

{

color: burlywood;

}