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>

  1 <form action="hello.html" method="post">
  2         <!--文本框：
  3         type="text"
  4         name:起名
  5         value:初始值
　　　　　　　placeholder:提示信息
　　　　　　　required:非空判断
　　　　　　 
  6         -->
  7         <p>用户名</p><input type="text" name="username" value="admin" placeholder="请输入用户名" required>
  8 
  9         <!--密码框：
 10         type=“password”-->
 11         <p>密码</p><input type="password" name="password">
 12 
 13         <!--单选框
 14         type="radio"
 15         name：单选框所在的组
 16         value：单选框的值
 17         checked：默认选择
 18         -->
 19         <p>性别：
 20             <input type="radio" name="gender" value="boy" checked="checked">男
 21             <input type="radio" name="gender" value="girl">女
 22         </p>
 23 
 24         <!--多选框
 25         type="checkbox"
 26         value：单选框的值
 27         name：单选框所在的组
 28         checked：默认选择
 29         -->
 30         <p>爱好：
 31             <input type="checkbox" value="sleep" name="hobby" checked="checked">睡觉
 32             <input type="checkbox" value="talk" name="hobby">说话
 33             <input type="checkbox" value="walk" name="hobby">散步
 34         </p>
 35 
 36         <!--按钮
 37         name：起名
 38         value：显示的文本
 39         input type="submit" 提交按钮
 40         input type="image" 图片按钮
 41         input type="button" 普通按钮
 42         input type="reset" 重置按钮
 43         -->
 44         <p>按钮:
 45             <input type="submit" name="btn1" value="点击">
 46             <input type="image" src="../resources/image/1.png">
 47             <input type="button">
 48             <input type="reset">
 49         </p>
 50 
 51         <!--下拉框
 52         select name="列表名称"
 53             <option value="china">
 54         -->
 55         <P>下拉框:
 56             <select name="列表名称">
 57                 <option value="china">中国</option>
 58                 <option value="usa">美国</option>
 59                 <option value="japan" selected>日本</option>
 60                 <option value="india">印度</option>
 61             </select>
 62         </P>
 63 
 64         <!--文本域
 65         textarea name="textarea"
 66         cols：列数
 67         rows：行数
 68         -->
 69         <p>文本域
 70             <textarea name="textarea" cols="10" rows="10">
 71 
 72             </textarea>
 73         </p>
 74 
 75         <!--文件域
 76         <input type="file" name="files" >
 77         -->
 78         <p>文件域
 79             <input type="file" name="files" >
 80             <input type="button" value="上传文件" name="upload">
 81         </p>
 82 
 83         <!--验证-->
 84         <p>邮件验证：
 85             <input type="email" name="email">
 86         </p>
 87         <p>url验证：
 88             <input type="url" name="email">
 89         </p>
 90         <p>数字验证：
 91             <input type="number" name="email" max="10" min="0" step="1">
 92         </p>
 93 
 94         <!--滑块-->
 95         <p>音量
 96             <input type="range" min="0" max="100" name="voice">
 97         </p>
 98 
 99         <!--搜索-->
100         <p>搜索
101             <input type="search" name="search">
102         </p>
103     </form>

其他

disabled：禁用标签

hidden：隐藏标签

增强鼠标可用性：

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

表单验证

placeholder：增加提示信息

required：非空判断

pattern：添加正则表达式