1、form标签
作用:收集并提交用户数据给指定的服务器
注意:form会收集齐标签内部的数据
action:收集数据提交地址(?之前的就是action的提交地址)
method:收集数据的提交方式
1、get:适用少量数据,表单数据以?隔开拼接在url后面,不公的键值对适用&隔开,不安全
2、post:适用大量数据,安全
再点击数据提交时,form标签会将其内部所有form表单域标签中用户书写的数据按照method指明的提交方式提交给action属性指明的提交地址
2、form表单域标签
作用:给用户提供可以进行数据书写或者选择的标签
注意:1、都是行内标签
2、提交的是value值
3、form表单进行数据提交必须结合submit按钮,name属性必须有值,没有的话不提交
4、提交的表单项数据位键值对,键为name属性的值,值为用户书写的数据
3、文本框标签
<input type="text">
type:text 收集少量文本数据,用户可见
type:password 收集用户密码数据
name:数据交换的键,有时也会被js调用
value:默认值
4、单选框
<input type="radio">
type:radio
name:name属性相同的单选框只能选择一项数据
value:要提交给后台的数据
check:checked使用此属性的单选框默认是选择状态的
5、多选框
<input type="checkbox">
type:checkbox
name:一个多选框需要使用相同的name
value:需要提交的数据
check:checked多选框的默认选择状态
6、下拉框
<select name="" id="">
<option value=""></option>
<option value=""></option>
</select>
name:数据提交的键名
下拉选项option不用声明name属性
selected:下拉选项默认选择状态
value:要提交的数据
下拉列表分组optgroup
<select name="" id="">
<option value="">--请选择--</option>
<optgroup label="中国">
<option value="">北京</option>
<option value="">上海</option>
<option value="">深圳</option>
<option value="">广州</option>
</optgroup>
</select><br>
7、文本域标签
<textarea name="" id="" cols="30" rows="10"></textarea>
声明一个可以大量书写的文本域
name:数据提交的键名,js和css也会用到
rows:声明文本域的行数
cols:声明文本域的列数
8、普通按钮
<input type="button">
不要写name属性呦
9、隐藏标签
<input type="hidden">
数据跟随用户的提交而提交,又不显示给用户看,serlvet
10、音乐标签
<embed src="" type="">
src:路径
hidden:是否隐藏
11、滚动标签
<marquee behavior="" direction=""></marquee>
behavior:滚动方式
director:滚动方向
bgcolor:背景颜色
12、分组标签
<fieldset>
<legend></legend>
</fieldset>
fieldset常与legend连用
13、上传控件
<input type="">
type:file
14、自定义图像提交
<input type="">
type:image
15、标签语义化
根据内容的结构化(内容语义化),选择合适的标签
标准:去掉样式表之后,语义很清晰
div,span无语义,尽可能少用
strong加粗,em斜体更有语义化
意义:1、网页结构合理
2、有利于seo和搜索引擎建立良好的沟通
3、方便其他设备的解析
4、有利于团队开发和维护