1.表单标签

• 表单标签（form）
  表单标签的作用：用来收集与用户信息 - 实质是将表单标签作为容器，收集表单标签中其他标签的信息
  本身没有任何显示效果

action属性：设置提交地址
method属性：提交方式（post/get）
点提交按钮提交的时候，将表单所有相关标签以name=value的形式，
按照method属性提供的提交方式，提交给action属性对应的接口

• form标签提供了两大功能，a.统一提交. b.重置

<form action="" method="get">
            
        </form>

2.input标签(单标签)

既可以放在form标签中，也可以不放在form标签中，单独使用
type属性 - type对应的值不一样，input标签体现的功能不一样

<form action="">
            <!--a.type=text
                文本输入框
                name属性 - 专门用来区分不同的信息，相当于字典的key，
                value属性 - 标签内容，指向输入框的内容，设值其实是给文本框设置默认值
                placeholder属性 - 当输入框中没有内容的时候，显示的提示信息
                maxlength属性 - 设置文本输入最大个数
            -->
            
            
            
        <font>账号：&emsp;<input type="text" name="tel" id="" value=""  placeholder="手机号..." maxlength="11"/><br /></font>
        <font>验证码：<input type="text" name="email" id=""  value="" placeholder="验证码..." /><input type="button"  value="获取验证码"/><br /></font>
    
        <!--密码输入框-->
        <font>密码：&emsp;<input type="password" name="password" value="123456" placeholder="密码"/><br /></font>

        
        <!--ridio - 单选按钮
            name属性 - 要求同一组的数据的name值必须一致，才能单选。
            value属性 - 不可见。专门用于数据提交，或者区分被选中的值    
            checked="checked" - 让单选按钮处于选中状态
        -->
        <font>男<input type="radio" name="sex" value="boy" checked="checked"/></font>
        <font>女<input type="radio"name="sex" value="girl"/></font><br />
        
        <font>未婚<input type="radio" name="marry" value="未婚" checked="checked"/></font>
        <font>已婚<input type="radio"name="marry" value="已婚"/></font><br />
        
        <!--checkbox - 复选按钮
            name属性 - 要求同一组的数据的name值必须一致，才能单选。
            value属性 - 不可见。专门用于数据提交，或者区分被选中的值    
        -->
        <font>打球</font><input type="checkbox" name="hobby" value="打球"/>
        <font>睡觉</font><input type="checkbox" name="hobby" value="睡觉"/>
        <font>打豆豆</font><input type="checkbox" name="hobby" value="打豆豆"/>
        <font>吃饭<input type="checkbox" name="hobby" value="吃饭"/></font><br />
        
        <!--button -普通按钮
            value属性 - 按钮上显示的文字
        -->
        <input type="button" name="账号" id="账号" value="注册" />
        
        <input type="email" name="email" id="" value="" placeholder="邮箱号" />
        
        
        
        <!--submit - 提交按钮
            点击提交按钮会自动提交当前form中所有设置了name属性的相关标签的值
            以‘name=value’方式提交
        -->
        <input type="submit" value="提交" /><br />
        
        <!--reset - 重置按钮
            将当前form标签中所有的标签状态设置为出事状态
        -->
        <input type="reset" name="" id="" value="重置" />
        
        
        
        </form>

3.按钮标签

• 按钮标签（button）
  双标签，中间内容部分更灵活

<button><img src="img/130224121314.jpg" alt="图片"  width="50" height="40"/><p>登陆</p></button>

显示

image.png

4.下拉菜单

下拉菜单（select - option）
select属性 - 代表整个下拉菜单
name属性 - 区分和提交

option标签 - 下拉菜单中的选项
内容 - 显示部分
value属性 - 提交的内容
selected=“selected” - 设置默认值

opgroup标签 -分组

<font>考试科目</font><select name="学科">
                <optgroup label="理科">
            <option value="语文">语文</option>
            <option value="数学">数学</option>
            <option value="英语">英语</option>
            <option value="物理">物理</option>
            </optgroup>
            <optgroup label="文科">
            <option value="语文">历史</option>
            <option value="数学">政治</option>
            <option value="英语">地理</option>
            </optgroup>
            
            </select><br />
            
            <select name="province">
            <option value="四川">四川省</option>
            <option value="广东">广东省</option>
            <option value="广西">广西省</option>
            <option  selected="selected">湖南省</option>
            <option value="湖北">湖北省</option>
            <option value="江西">江西省</option>
            </select><br />
            <select name="city">
            <option value="成都">成都市</option>
            <option value="广州">广州市</option>
            <option value="南宁">南宁市</option>
            <option value="长沙">长沙市</option>
            <option value="武汉">武汉市</option>
            <option value="南昌">南昌市</option>
            
            </select>
        </form>

显示

image.png

5.多行文本输入框

• 多行文本输入框（textarea）
  可以输入多行内容，并且内容超出范围可以滚动

name属性 - 提交和区分
rows属性 - 一次可以显示的行数（决定高度）
cols属性 - 列数（决定宽度）
placeholder - 提示语句
内容相当于value

<textarea name="" rows="5" cols="10" maxlength="8" placeholder="意见">内容</textarea>

显示

image.png

6.div和span

• div和span标签是无语义标签
  一般用来将网页中的标签进行分组和分模块使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <!--
            div和span标签是无语义标签
            一般用来将网页中的标签进行分组和分模块使用
        -->
        
        <div>
            <div>div</div>div
        </div>
        </div>
        
        <span>
        span    <span>span</span>
        </span>
    </body>
</html>

显示

image.png