表单标签
1.HTML表单用于收集用户填写的信息;
2.HTML表单会将收集到的信息发送到Web服务器;
3.HTML表单通常包含输入字段、单选框、复选框、下拉列表等元素。
常用标签
<form>元素用来创建表单,
action属性定义表单里的数据提交到的目标URL(路径);
method属性定义了提交数据的HTTP方法,如:get/post
<fieldset>: 表单的整个边框;
<legend>: 边框上如果想要使用表单标题,可以使用;
<label>:用于设置文字标签,扩大点击域。
<input>: 作为输入框,可以根据type属性的不同值,来定义不同的输入类型,比如
text:文本框,该值为默认值,可以不写
password:密码框,特点是使用*或者.来替换真实的密码
radio: 单选框,name的值需要相同,才能算作一组,具有单选效果。
checkbox: 复选框,name的值必须相同,才能算作一组,具有多选效果。
file: 文件上传。
hidden: 隐藏域,该类型可以用于隐藏一些不需要展示或者修改的信息。
submit: 提交类型,提交整个表单里输入的所有数据,提交到服务器 。
<form action="abc123.do" method="post" >
<fieldset>
<legend>表单演示</legend>
<label for="username">姓名:</label>
<input type="text" id="username" name="myname" > <br>
<label for="mypasswd">密码:</label>
<input type="password" id="mypasswd" name="mypasswd">
<hr>
<label for="">性别</label>
<input type="radio" name="gender" id="male" value="m" checked> <label for="male">男</label>
<input type="radio" name="gender" id="female" value="f"> <label for="female">女</label>
<hr>
<label for="">爱好</label>
<input type="checkbox" id="book" name="hobby" value="book"><label for="book">读书</label>
<input type="checkbox" id="word" name="hobby" value="word"><label for="word">写字</label>
<input type="checkbox" id="movie" name="hobby" value="movie"><label for="movie">电影</label>
<input type="checkbox" id="music" name="hobby" value="music"><label for="music">音乐</label>
</fieldset>
<selcet>: 下拉菜单元素
name属性:用于定义提交到服务器的name的具体值
<option>子元素:用于定义下拉菜单的选项
<option>元素里的属性:
value属性:用于定义提交到服务器的选项的具体值。
selected属性:默认选中
<textarea>: 用于创建文本域,可以设置行数与列数。
<label for="">地址</label>
<select name="address" id="">
<option value="cc">长春</option>
<option value="hz">杭州</option>
<option value="bj" selected>北京</option>
<option value="tj">天津</option>
</select>
<hr>
<label for="">文件上传</label>
<input type="file" name="myfile" >
<hr>
<label for="id1">自我介绍</label>
<textarea name="myself" id="id1" rows="5" cols="50">
</textarea>
<hr>
<label for="">隐藏信息</label>
<input type="hidden" value="1001">
<hr>
<input type="submit" value="提交">
HTML区块
元素分类
大多数HTML元素被定义为块级元素或内联元素(行内元素)。
●块级元素在浏览器上显示的时候,通常会以新行开始;
例如:<h1>、<p>、<ul>、<ol>、<table>、<form>等
●内联元素在显示时通常不会以新行开始。
例如:<b>、<td>、<a>、<img>等,只要不是自己占一行的,都是内联元素。
<div>元素
1. HTML中 <div>元素是块级元素,可以看作是其他HTML元素的容器,没有特定的含义;
2. <div>元素最常用的就是页面布局,它取代了用表格定义布局的老方法;
3. <div>元素配合CSS使用,可以给内容块设置样式。
<span>元素
1.HTML中<span>元素是内联元素,可以看作是文本的容器,没有特定的含义;
2.<span>元素与CSS配合使用时,可用于为部分文本设置样式属性。
浏览器的自动纠错功能
1.当标签写在了根元素html的外面,会自动纠正的body里
2.p元素里嵌套了其他的块元素,则会将p元素分解成两个p元素,其他块元素相当于挪出来。
3.当根元素里出现了除了head和body两个以外的子元素则会自动纠正到body里。