HTML5重点

前言

事先声明，本文是以Java后端开发的角度来学习HTML，并没有像前端那么细致。重点记录的是表单的使用

1. 知识点框架图

2. 表单标签模板

<form action="1.我的第一个网页.html" method="get">
    <p>用户名 <input type="text" name="username" placeholder="请输入用户名" required></p>
    <!-- 密码输入框input type="password"   -->
    <p>密码 <input type="password" name="pwd" readonly></p>
</form>

表单的创建关键词为form，action代表所要跳转的网页，method表示采用的提交方法

每条语句的基本格式为<p>包含<input>，其中type表示表单的类型，此处text表示文本框，password表示密码框（输入时屏幕显示为*）。
name关键字强行建议在每条input语句中加上！！！因为其代表着所要提交信息的名称

• placeholder 提示信息，这里为“请输入用户名”
• readonly 代表只读，将无法在密码框中输入任何信息
• required 代表非空，这里用户名必须填写，否则将无法提交

2.1 get/post

	特点
get	不安全，不能提交大文件，但高效，提交信息会显示在url里
post	安全

3. 表单

3.1 单选框与多选框

    <p>性别:
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="eat" name="hobby">吃饭
        <input type="checkbox" value="run" name="hobby">跑步
    </p>

所见即所得，重点在体会name和 value的区别。举个例子，如果选择性别男，然后提交。url中就会显示 name=boy

3.2 下拉可选

    <p>国籍：
        <select name="country">
            <option value="CHINA">中国</option>
            <option value="US">美国</option>
            <option value="GERMANY">德国</option>
        </select>
    </p>

如图即为所求

3.3 按钮

<p>按钮：
        <input type="button" name="btn1" value="变长">
<!--        <input type="image" src="../resources/image/12.png">-->
</p>

可以通过在value里设置值，来对应到按钮上

3.4 文件上传

<p>
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
        </p>

3.5 大文本域

<p>反馈：
        <textarea name="textarea" cols="50" rows="10">请输入</textarea>
    </p>

3.6 提交与重置按钮

<p>
        <input type="submit">
        <input type="reset" value="重置内容">
    </p>

3.7 滑块

<p>音量：
        <input type="range" name="voice" max="100" min="0">
    </p>

3.8 数字

<p>数字：
        <input type="number" name="num" max="100" min="1">
    </p>

可以通过step改变每点击一次变化的步长

3.9 搜索框

<p>搜索：
        <input type="search" name="search">
    </p>

将HTML标签与图中一一对应，就能很快明白其使用方法，无须强行记忆。

参考资料

【狂神说Java】HTML5完整教学通俗易懂