HTML学习笔记三

HTML的表单元素

主要是表单元素的标签和属性：

• 文本域（单行和多行）
• 密码域
• 复选框
• 单选按钮
• 下拉列表
• 按钮
• 图片按钮
• 上传文件按钮

<input type="text"> <!--text为单行文本框，input默认text-->
    <br><br>
    <input type="text" value="测试"> <!--value占位符-->
    <br><br>
    <input type="text" placeholder="测试"> <!--placeholder不占文本框位置-->、
    <br><br>
    <input type="text" maxlength="5"> <!--maxlength最大输入长度-->
    <br><br>
    <input type="text" size="10"> <!--size拓宽单行文本框-->
    <br><br>
    <input type="text" value="测试" readonly> <!--readonly只读-->
    <br><br>
    <input type="password" placeholder="测试"> <!--password为密码文本框-->
    <br><br>
    <textarea>测试</textarea> <!--textarea为多行文本框，中间的值相对于value-->
    <br><br>
    <textarea rows="5" cols="10">测试</textarea><!--rows增加文本框宽度，cols增加文本框长度-->
    <br><br>
    <input type="button" value="测试按钮1">
    <button>测试按钮2</button>
    <input type="submit" value="测试"> <!--submit为提交表单-->
    <br><br>
    <input type="range" min="-200" max="200" step="100" value="0"> <!--range为滑条，step每次滑动的距离-->
    <br><br>
    <input type="number" min="-10" max="10" value="0">
    <br><br>
    <input type="checkbox">选择 <!--checkbox为复选框-->
    <br><br>
    <input type="radio" name="a">选择1 <!--radio为单选按钮-->
    <input type="radio" name="a">选择2 <!--相同的name之间只能选择一个-->
    <input type="radio" name="a" checked>选择3 <!--checked属性为默认选择-->
    <br><br>
    <select> <!--下拉列表-->
        <option>a</option>
        <option>b</option>
        <option>c</option>
    </select>
    <input type="text" list="datalist"> <!--可输入的下拉列表-->
    <datalist id="datalist">
        <option>a</option>
        <option>b</option>
        <option>c</option>
    </datalist>
    <br><br>
    <input type="email"> <!--email为获取有效电子邮件地址-->
    <input type="tel"> <!--tel为获取有效电话号码-->
    <input type="url"> <!--url为获取有效网址-->
    <input type="date"> <!--获取时间-->
    <input type="color"> <!--获取颜色-->
    <input type="search"> <!--获取搜索用词-->
    <input type="hidden"> <!--获取隐藏的数据项--提交表单时依旧存在-->
    <input type="image" src="QQ图片20190731195657.png" width="50px"> <!--图片按钮，src为地址，width为宽度，长度会自适应-->
    <input type="file" <!--multiple required-->> <!--上传文件，multiple为多选，required为单选-->

HTML嵌入图片

<!--HTML嵌入图片-->
<img src="QQ图片20190731195657.png"> <!--img为图片标签-->
<img src="QQ图片20190731195657.png" alt="小怪兽"> <!--alt图片的备用信息-->
<img src="QQ图片20190731195657.png" height="100px"> <!--height为图片高度-->
<img src="QQ图片20190731195657.png" width="100px" height="100px">
<br><br>

<!--超链接中嵌入图片-->
<a href="https://www.baidu.com/">
    <img src="QQ图片20190731195657.png">
</a>
<br><br>

HTML的创建分布分布响应区

<img src="QQ图片20190731195657.png" width="100px" alt="小怪兽" usemap="#mp">
<map name="mp">
    <area href="https://www.baidu.com/" shape="rect" coords="0,0,100,50" target="_blank">
    <area href="https://www.sogou.com/" shape="rect" coords="0,50,100,100" target="_blank">
</map>