DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
head>
body>      #提交信息的链接地址    
form action="a/b/c/login" method="get">
    p>
        用户名:           #name对应的是提交时的key
        input type="text" name="username" value="EGON">            #value:表单里写好的默认内容
        input type="text" name="username" placeholder="请输入用户名">#placeholder：暗色的提示信息
        input type="text" name="username" value="egon" disabled="disabled">
    p>                                            #disabled：内容不可更改，也不会提交服务端
    p>                                             #readonly: 内容不可更改，但会提交服务端
        密码:   #密码输入时会被遮挡
        input type="password" name="password" placeholder="密码长度不能超过16位">
    p>
    p>
        input type="submit" value="登录">                         #登录按钮，没有value时显示提交
    p>
form>
body>
html>

11.251 单选框

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
head>
body>
form action="https://www.baidu.com" method="get">
    p>
        性别:               #选择后提交gender=male
        input type="radio" name="gender" value="male" checked="checked">男#checked表示默认选择
        input type="radio" name="gender" value="female">女               #选择后提交gender=female
    p>                                                             #二者仅选其一
    p>
        input type="submit" value="注册">                              #注册按钮
    p>
form>
body>
html>

11.252 多选框、file上传文件、按钮

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
head>
body>
form action="https://www.baidu.com" method="get">
    p>
        爱好:                 #选择后提交hobbies=basketball
        input type="checkbox" name="hobbies" value="basketball">篮球
        input type="checkbox" name="hobbies" value="football" checked="checked">足球
        input type="checkbox" name="hobbies" value="pingpang" checked>乒乓球 #checked表示默认选择
    p>
    p>                      #选择提交后 uploadfile='选择的文件名'
        input type="file" name="uploadfile">               #选择文件按钮,点击选择本地文件
    p>
    p>
        input type="submit" value="注册">                  #注册按钮，没有value时显示提交，提交表单
        input type="button" value="注册" onclick="alert(123)">#普通按钮，点击显示alert内的提示信息
        input type="image" src="1.jpg" onclick="alert(1)"> #图片按钮,点击显示alert内的提示信息,且跳转
        input type="reset" value="重置" >                 #重置按钮，点击form表单清空
        input type='date' name="y-m-d" >                 #选择日期，选择后提交y-m-d=选择的日期 
        button>按钮button>                     #button在form中可以做提交按钮用，在form外是普通按钮
    p>
form>
body>
html>

11.253 label标签

对于选择框，点击选择框后的文字也能实现选择；对于文本框，点击文字选择文本框并光标聚焦

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
head>
body>
form action="https://www.baidu.com" method="get">
    p>                                               #name对应的是提交时的key
        label for="el">用户名:label>input type="text" name="username" value="EGON" id='e1'>            #input添加id,label根据id名找到输入框并光标聚焦                    #value:表单里写好的默认内容
    p>
    p>
        性别：                 #选择后提交gender=male     input添加id,label根据id名找到单选框，并选择
        input type="radio" name="gender" value="male" id="ml">label for="ml">男label>
        input type="radio" name="gender" value="female" id="fl">label for="fl">女label>
    p>
    p>
        爱好:             #选择后提交hobbies=basketball   input添加id,label根据id名找到多选框，并选择
        input type="checkbox" name="hobbies" value="basketball" id="bb">label for="bb">篮球label>
        input type="checkbox" name="hobbies" value="football" checked="checked" id="fb">label for="fb">足球label>                                 
    p>
    p>
        input type="submit" value="注册">                #注册按钮，没有value时显示‘提交’，提交表单
    p>
form>
body>
html>

11.254 下拉列表

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
head>
body>
form action="https://www.baidu.com" method="get">
    p>
        城市：  #选择后提交city=BJ/SH/SZ/GZ
        select name="city" id="" size="2" multiple="multiple">           #下拉多选两个
            option value="BJ">北京option>
            option value="SH">上海option>
            option value="SZ" selected="selected">深圳option>          #selected表示默认选择
            option value="GZ">广州option>
        select>
    p>
    p>
        城市：
        select name="city" id="" style="width: 200px">
            optgroup label="一线城市">                            #选项分组(label提示信息不能选择)
                option value="BJ">北京option>                      #选择后提交city=BJ/SH/SZ/GZ
                option value="SH">上海option>
                option value="SZ" selected="selected">深圳option>     #selected表示默认选择
                option value="GZ">广州option>
            optgroup>
            optgroup label="二线城市">
                option value="BJ">济南option>
                option value="SH">苏州option>
                option value="SZ" selected="selected">南京option>
                option value="GZ">成都option>
            optgroup>
        select>
    p>
    p>
        input type="submit" value="注册">
    p>
form>
body>
html>

11.255 textarea标签

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
head>
body>
form action="https://www.baidu.com" method="get">
    p> #填写后提交comment="输入的内容"    cols和rows设置初始文本域大小     style设置不可重置文本域大小
        textarea name="comment" id="" cols="30" rows="3" style="resize: none">
亲，给好评哈                                                         #显示提前写入文本域的信息
        textarea>
    p>
    p>
        input type="submit" value="注册">
    p>
form>
body>
html>

11.256 fieldset标签

body>
form action="https://www.baidu.com" method="get">
    fieldset>                                                          #设置方框样式表单
        legend>注册页面legend>
        p>
        .....
        p>
    fieldset>
form>
body>

11.26 table标签

水平对齐和垂直对齐:

#水平对齐: align 可以给table、tr、td标签设置,    垂直对齐: valign 只能给tr、td标签设置
强调：table只能设置水平方向
#========水平对齐===========
align=“left”    align=“center”  align=“right”
1 给table标签设置水平对齐，可以让表格在水平方向上对齐
2 给tr设置水平对齐，可以控制当前行所有单元格内容都水平对齐
3 给td设置水平对齐，可以控制当前单元格内容水平对齐，tr与td冲突的情况下，以td为准
​
#========垂直对齐===========
valign=“top”    valign=“center”     valign=“bottom”
1 给tr设置垂直对齐可以让当前行所有单元格内容都垂直对齐
2 给td设置垂直对齐可以让当前单元格内容垂直对齐

DOCTYPE html>
html lang="en">
head&