HTML表单、常用字符实体以及元素分类

• form标签

<!--  
			form标签
				表单标签，块级元素，会自动换行
				将数据传输给服务器
				
				常用属性
					action 表单提交的地址
					id     唯一标识
					name   名称
					target 表单提交打开方式（当前窗口）
					method 提交方式
						get请求
							参数会直接跟在url后面，用？问好拼接
							安全性差，传递的数据量小，效率高（是post速度的两倍），有缓存
						post请求
							参数不会跟在url地址栏后面，会放在请求体中
							安全性高，传输数据量大，速度相对来说慢，无缓存
		-->		
				
		<form action="#" method="get" id="myform" name="myform">

		</form>	

• 表单元素
  • input元素
  • textarea文本域
  • label标签
  • button按钮
  • select下拉选项

<form action="#" method="get" id="myform" name="myform">
			
			<!--  
				表单元素需要设置name属性值，负责数据无法传递！！！
				input元素
					用于搜集用户信息
					type   表单元素的类型
						text 文本框
						password 密码框
						radio 单选框
						checkbox 复选框
						button 普通按钮
						hidden 隐藏域（用来存放需要传递服务器，但不需要显示的数据）
						file 文件域（上传文件）
						date 日期框
						submit 提交按钮
						reset 重置按钮
						image 图片按钮（提交按钮）
					value 	 表单元素的值
					checked  是否选中（单选框/复选框）
					disabled 是否禁用
					maxlength允许输入的最大字符
				textarea文本域
					cols 和 rows
				label标签
					设置label的for属性值与表单元素的id属性值对应，当点击label标签时，会自动给表单元素聚焦
				button按钮
					type
						button 普通按钮
						submit 提交按钮（默认）
						reset 重置按钮
				select下拉选项
					<select name="" id="">
						<option value="值">文本</option>
						<option value="值">文本</option>
						<option value="值">文本</option>
					</select>
					
					注：当option设置了value属性时，提交的数据是value对应的值
					如果未设置value，则提交的数据是文本值
					
					常用属性
						value  设置值
						select 设置选中状态
					
			-->
			编号：<input type="hidden" name="userId" value="1" /> <br>
			姓名：<input type="text" name="userName" value="" /> <br>
			密码：<input type="password" name="userPwd" value="" /> <br>
			性别：男 <input type="radio" name="userSex" value="man" /> 
				  女<input type="radio" name="userSex" value="woman" /> <br>
			爱好：唱歌 <input type="checkbox" name="userHobby" value="sing" />
			      跳舞 <input type="checkbox" name="userHobby" value="dance" />
				  看JOJO<input type="checkbox" name="userHobby" value="JOJO" checked="checked" /> <br>
			生日：<input type="date" name="userDate" value="" /> <br>
			头像：<input type="file" name="userHead" value="" /> <br>
			简介：<textarea name="remark" rows="5" cols="20">213</textarea><br>
			城市：<select name="city" multiple="multiple" size="3">
					<option value ="">请选择城市</option>
					<option value="SH" selected="selected">上海</option>
					<option value="ZZ">郑州</option>
					<option value="XC">许昌</option>
					<option value="SZ">深圳</option>
				</select><br>
			<input type="button" value="普通按钮" />
			<input type="reset" value="重置按钮" />
			<input type="submit" value="提交按钮" />
			<!-- <input type="image" height="90*2px" width="80px" src="./img/jojo.png"/> -->
			
		</form>	

• 常用字符实体
  • <
  • >
  • 空格
  • 版权符

<!--  
			字符实体
				<		&lt;
				>		&gt;
				空格		&nbsp;
				版权符	&copy;
		-->
		<h2>Hello World</h2>
		&lt;h2&gt;Hello&nbsp;World&lt;/h2&gt;<hr>
		&copy;2022波澜不惊

• HTML元素
  • 行内元素
  • 块级元素
  • 行内块级元素
  • 表单元素

<!--  
			块级元素
				元素都从新的一行开始，并且其后的元素也另起一行；
				元素的高度、宽度、行高以及顶和底边距都可设置；
				元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），
				除非设定一个宽度
			行内元素
				和其他元素都在一行上；元素的高度、宽度及顶部和底边距不可设置；
				元素的宽度就是它包含的文字或图片的宽度，不可改变
			行内块级元素
				和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置
			表单元素
				
		-->