HTML其他标签

块元素：

　　无论内容多少，该元素独占一行

　　p，h1-h6

行内元素

　　内容撑开宽度，左右都是行内元素可以排在一行

　　a，strong，em

列表

1. 有序列表（试卷，问答）

<ol>
    <li>java</li>
    <li>python</li>
    <li>html</li>
    <li>json</li>
</ol>

2. 无序列表（导航，侧边栏）

<ul>
    <li>java</li>
    <li>python</li>
    <li>html</li>
    <li>json</li>
</ul>

3. 自定义列表（公司网站底部）

<dl>
    <dt>科目</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>linux</dd>

    <dt>城市</dt>
    <dd>a</dd>
    <dd>b</dd>
    <dd>c</dd>
</dl>

表格标签

table border="1px">
    <tr>
        <!--跨列-->
        <td colspan="4">1-1</td>

    </tr>
    <tr>
        <!--跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
    <tr>
        <td>4-1</td>
        <td>4-2</td>
        <td>4-3</td>
        <td>4-4</td>
    </tr>
</table>

页面结构分析

• header：标记头部区域的内容
• footer：标记脚部区域的内容
• secton：web页面中一块独立的区域
• article：独立的文章内容
• aside：相关内容或应用
• nav：导航类辅助

iframe内联框架

 表单标签

<form action="hello.html" method="post">
</form>

<form action="hello.html" method="post">
        <!--文本框：
        type="text"
        name:起名
        value:初始值
　　　　　　　placeholder:提示信息
　　　　　　　required:非空判断
　　　　　　 
        -->
        <p>用户名</p><input type="text" name="username" value="admin" placeholder="请输入用户名" required>

        <!--密码框：
        type=“password”-->
        <p>密码</p><input type="password" name="password">

        <!--单选框
        type="radio"
        name：单选框所在的组
        value：单选框的值
        checked：默认选择
        -->
        <p>性别：
            <input type="radio" name="gender" value="boy" checked="checked">男
            <input type="radio" name="gender" value="girl">女
        </p>

        <!--多选框
        type="checkbox"
        value：单选框的值
        name：单选框所在的组
        checked：默认选择
        -->
        <p>爱好：
            <input type="checkbox" value="sleep" name="hobby" checked="checked">睡觉
            <input type="checkbox" value="talk" name="hobby">说话
            <input type="checkbox" value="walk" name="hobby">散步
        </p>

        <!--按钮
        name：起名
        value：显示的文本
        input type="submit" 提交按钮
        input type="image" 图片按钮
        input type="button" 普通按钮
        input type="reset" 重置按钮
        -->
        <p>按钮:
            <input type="submit" name="btn1" value="点击">
            <input type="image" src="../resources/image/1.png">
            <input type="button">
            <input type="reset">
        </p>

        <!--下拉框
        select name="列表名称"
            <option value="china">
        -->
        <P>下拉框:
            <select name="列表名称">
                <option value="china">中国</option>
                <option value="usa">美国</option>
                <option value="japan" selected>日本</option>
                <option value="india">印度</option>
            </select>
        </P>

        <!--文本域
        textarea name="textarea"
        cols：列数
        rows：行数
        -->
        <p>文本域
            <textarea name="textarea" cols="10" rows="10">

            </textarea>
        </p>

        <!--文件域
        <input type="file" name="files" >
        -->
        <p>文件域
            <input type="file" name="files" >
            <input type="button" value="上传文件" name="upload">
        </p>

        <!--验证-->
        <p>邮件验证：
            <input type="email" name="email">
        </p>
        <p>url验证：
            <input type="url" name="email">
        </p>
        <p>数字验证：
            <input type="number" name="email" max="10" min="0" step="1">
        </p>

        <!--滑块-->
        <p>音量
            <input type="range" min="0" max="100" name="voice">
        </p>

        <!--搜索-->
        <p>搜索
            <input type="search" name="search">
        </p>
    </form>

其他

disabled：禁用标签

hidden：隐藏标签

增强鼠标可用性：

 <label for="us1">姓名</label>
 <input type="text" name="username" id="us1">

表单验证

placeholder：增加提示信息

required：非空判断

pattern：添加正则表达式