[JavaScript知识库]B21-陈新运-网页前端2

1.表单

1.1form

form标签用于为用户输入创建HTML表单

表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等

表单用于像服务器传输数据。form元素的块级元素，其前后会产生拆行

常用属性

method：表单提交方式：get、post

get：默认，主动的获取方式，数据放在url上，数据的容量有限，安全性差，有缓存

post：数据放在请求实体中，数据量理论上是没有限制，相对安全，没有缓存

###1.2input

? input标签用于收集用户信息

? 根据不同type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、单选按钮、按钮

表单元素都需要设置name属性值，否者值无法传递

常用属性

		<form action="#" method="post" id="myform" name="myform">
			
			编号：<input type="hidden" value="1" name="id"/><br>
			姓名：<input type="text" name="name" value="张三" /><br>
			密码：<input type="password" name="pwd"   /><br>
			性别：男<input type="radio" name="sex" value="man"  />
				女<input type="radio" name="sex" value="woman"  /><br>
			爱好：唱歌<input type="checkbox" name="hobby" value="sing"   />
			跳舞<input type="checkbox" name="hobby"  value="dance" />
			生日：<input type="date" name="data"   /><br>
			头像：<input type="file" name="head"   /><br>
			<input type="submit" name="" id="" value="提交按钮" />
			<input type="button" name="" id="" value="普通按钮" />
			<input type="reset" name="" id="" value="重置按钮" />
			
		</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-glFu3vd7-1644072128605)(C:\Users\cxy\AppData\Roaming\Typora\typora-user-images\image-20220205204831544.png)]

1.3textarea

? 该标签多行的文本输入控件。文本区内可以无限数量的文本，可以通过cols和rows属性来规定textare的尺寸。cols规定文本区内的可见宽度。rows规定文本区内可见数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LcRKmRh9-1644072128606)(C:\Users\cxy\AppData\Roaming\Typora\typora-user-images\image-20220205221051623.png)]

<textarea rows="10" cols="10">hello world</textarea>

1.4label

label标签为input元素定义标注

label元素不会呈现任何特殊效果

label标签的for属性应当与相关元素的if属性相同，此时点击label标签会自动为元素聚焦

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1Cjw9YQ2-1644072128606)(C:\Users\cxy\AppData\Roaming\Typora\typora-user-images\image-20220205221621729.png)]

<label for="name">姓名：</label><input type="text" name="name" value="张三" id="name"/><br>

1.5button

按钮，不过我们可以设计这个按钮是样子了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l0sQQ9l4-1644072128607)(C:\Users\cxy\AppData\Roaming\Typora\typora-user-images\image-20220205221900719.png)]

			<button type="button">普通按钮</button>
			<button type="submit">提交按钮</button>
			<button type="reset">重置按钮</button>

1.6select

定义下拉框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LZ8FqJcD-1644072128607)(C:\Users\cxy\AppData\Roaming\Typora\typora-user-images\image-20220205222338713.png)]

			城市：<select name="city">
				<option value="">请选择城市</option>
				<option value ="beijing">北京</option>没有设置value时传递的是北京
				<option value ="shanghai">上海</option>
			</select>

2常用字符实体

在HTML中不能使用小于号和大于号，这不是因为浏览器会它们是标签

如果希望正确的显示预留字符，我们必须在HTML源代码中使用字符实体

实体名称对大小写敏感

###2.1标签的分类

标签的分类HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。

2.1.1.块级元素

元素都从新的一行开始，并且其后的元素也另起一行；元素的高度、宽度、行高以及顶和底边距都可设置素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

2.1.2.行内元素

和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或的宽度，不可改变。
###2.1.3.行内块状元素

###和其他元素都在一行上；元素的高度和底边距都可设置。

父容器的100%（和父元素的宽度一致），除非设定一个宽度。

2.1.2.行内元素

和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或的宽度，不可改变。
###2.1.3.行内块状元素

###和其他元素都在一行上；元素的高度和底边距都可设置。