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：添加正则表达式
