checkbox

 <form action="" method="get">
        <h3>你喜欢的编程语言</h3>
        <p>
            <input type="checkbox" id="js" name="myFavoriteLan" value="js">
            <label for="js">JavaScript</label>
        </p>
        <p>
            <input type="checkbox" id="java" name="myFavoriteLan" value="java">
            <label for="java">JAVA</label>
        </p>
        <p>
            <input type="checkbox" id="php" name="myFavoriteLan" value="php">
            <label for="php">PHP</label>
        </p>
        <p>
            <input type="checkbox" id="python" name="myFavoriteLan" value="python">
            <label for="python">Python</label>
        </p>
        <input type="submit" value="提交">
    </form>

1.html?myFavoriteLan=js&myFavoriteLan=php

select

 <form action="" method="get">
        <select name="lang" id="">
            <option value="">请选择</option>
            <option value="js">JavaScript</option>
            <option value="java">JAVA</option>
            <option value="php">PHP</option>
            <option value="python">Python</option>
        </select>
        <br>
        <input type="submit" value="提交">
    </form>

textarea

    col可见宽度
    8px*cols+17px 17px滚动条宽度 8浏览器默认
    <form action="" method="get">
        <textarea cols="30" rows="20"></textarea>
        <br>
        <input type="submit" value="提交">
    </form>

   <form action="" method="get">
        <textarea cols="30" rows="20">
        </textarea>
        <br>
        <input type="submit" value="提交">
    </form>

有换行，有空格，因为浏览器把换行解释成字符，textarea的value是在标签中间，设置value没有效果

  <form action="" method="get">
        <textarea cols="30" rows="20" placeholder="请输入文本">
        </textarea>
        <br>
        <input type="submit" value="提交" placeholder="请输入文本">
    </form>

fieldset

   fieldset legend
    <form action="" method="get">
        <fieldset>
            <legend>用户名</legend>
            <p>
                <label for="username">用户名</label>
                <input type="text" id="username" placeholder="用户名">    
            </p>
            <p>
                <label for="password">密码</label>
                <input type="text" id="password" placeholder="密码">                    
            </p>
            <p>
                <input type="submit">
            </p>
        </fieldset>
        <fieldset>
            <legend>用户名</legend>
            <p>
                <label for="username">用户名</label>
                <input type="text" id="username" placeholder="用户名">    
            </p>
            <p>
                <label for="password">密码</label>
                <input type="text" id="password" placeholder="密码">                    
            </p>
            <p>
                <label for="coPassword">确认密码</label>
                <input type="text" id="coPassword" placeholder="确认密码">
            </p>
            <p>
                <input type="submit">
            </p>
        </fieldset>
    </form>

    <form action="" method="get">
        <fieldset>
            <legend>用户名</legend>
            <p>
                <label for="username">用户名</label>
                <input type="text" id="username" placeholder="用户名">    
            </p>
            <p>
                <label for="password">密码</label>
                <input type="text" id="password" placeholder="密码">                    
            </p>
        </fieldset>
        <fieldset>
            <legend>用户名</legend>
            <p>
                <label for="username">用户名</label>
                <input type="text" id="username" placeholder="用户名">    
            </p>
            <p>
                <label for="password">密码</label>
                <input type="text" id="password" placeholder="密码">                    
            </p>
            <p>
                <label for="coPassword">确认密码</label>
                <input type="text" id="coPassword" placeholder="确认密码">
            </p>
        </fieldset>
        <input type="submit">
    </form>

、

legend是块级元素

  <legend style="background-color: green;height: 100px;;">用户名</legend>
    123

总结

内联元素（行内元素）

span、strong、em、del、ins、label、a、sub、sup
行内元素不能嵌套块级元素

a行内元素

块级元素

div、hx、p、address、ul、ol、li、dl、dt、dd、table、form、fieldset、legend

内联块元素

input、img、select、textarea、iframe

功能性太强，样式太强大，不会用

嵌套

块状元素:一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。
div、p、address、blockquote、center、dir、dl、dt、dd、fieldset、form、h1~h6、hr、isindex、menu、noframes、noscript、ol、pre、table、ul

内联元素(行内元素):内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。
a、img、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、tt、u、var、textarea

　块状元素与内联（行内）元素的嵌套规则
　　1、块状元素可包含内联元素或某些块元素，但内联元素不可包含块元素，只能包含内联元素。
　　　　< div >< h1 ></ h1 >< p ></ p ></ div > 正确
　　　　< a href = “#” >< span ></ span ></ a > 正确
　　　　< span >< div ></ div ></ span > 错误
　　2、块级元素不能放在< p >里面
　　　　< p >< ol >< li ></ li ></ ol ></ p > 错误
　　　　< p >< div ></ div ></ p >　　错误
　　3、有几个特殊块级元素只能包含内联元素，不能包含块级元素。这几个特殊标签是 h1~h6、p、dt
　　4、li 内可包含 div 标签
　　　　< li >< div ></ div ></ li >
　　5、块级元素与块级元素并列、内联元素与内联元素并列
　　　　< div >< h2 ></ h2 >< p ></ p ></ div >　　正确
　　　　< div >< a href = “#” ></ a >< span ></ span ></ div >　　正确
　　　　< div >< h2 ></ h2 >< span ></ span ></ div >　　错误

html5

简化了

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
变成
<meta charset="UTF-8">

删除了标签

增加了video、audio标签
header、footer、section、nav、aside
canvas

JavaScript API

技术学习笔记

表单标签属性、标签总结