search

博客列表 >html学习：第3章 html5常用元素（链接,列表,表格,表单）

html学习：第3章 html5常用元素（链接,列表,表格,表单）

王小飞
王小飞原创
2020年05月09日 18:10:13923浏览

1.链接

链接元素
  1. <a>: 链接元素,常用属性如下
属性 描述 举例
href 指向链接页面的 URL href=”https://php.cn“
target 打开 URL 的页面来源 target=_self _blank _top _parent”
download 自定义下载文件名 download=”banner1.jpg”
type 设置链接文档的 MIME 类型 type=”image/jpeg” 
  1. href属性值
属性 描述
href=”url” 跳转的目标地址
href=”mailto: 123456@qq.com” 打开邮箱,发送邮件
href=”tel:13388**2345” 点击后,会询问用户是否要拨打电话
href=”outline.md” 浏览器不能解析的文档, 会直接下载 
  1. taget属性值
属性 描述
target=”__self” 当前窗口打开链接
target=”_blank” 新窗口打开链接
target=”_parent” 父窗口打开链接
target=”_top” 顶层窗口打开链接
target=”name” 指定名称的窗口, 与<iframe>元素配合
target=”#anchor” 跳转到设置了锚点的元素所在位置

最基础的超链接实列演示代码

  1. <a href="http://www.php.cn" target="_blank" >php中文</a>

2.列表

演示代码

  1. <!-- 无序列表 -->
  2. <ul>
  3.   <li>这里是无需列表</li>
  4.   <li>这里是无需列表2</li>
  5.   <li>这里是无需列表3</li>
  6. </ul>
  7. <!-- 有序列表 -->
  8. <ol>
  9.   <li>这是有序列表</li>
  10.   <li>这是有序列表2</li>
  11.   <li>这是有序列表3</li>
  12. </ol>
  13. <!-- 自定义列表 -->
  14. <dl>
  15.   <dt>自定义列表</dt>
  16.   <dd>第一行</dd>
  17.   <dd>第二行</dd>
  18.   <dd>第三行</dd>
  19. </dl>
  20. <dl>
  21.   <dt>自定义列表2</dt>
  22.   <dd>第一行</dd>
  23.   <dd>第二行</dd>
  24.   <dd>第三行</dd>
  25. </dl>

展现效果：

3.表格

表格代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>表格元素</title>
  7.   </head>
  8.   <body>
  9.     <!-- border表格线大小 cellspacing表格内边距 width宽height高度 align页面居中 -->
  10.     <table border="4" cellspacing="1" width="400" height="250" align="center">
  11.       <!-- 表格标题 -->
  12.       <caption style="font-size: 1.5rem; margin-bottom: 10px;">
  13.         员工信息表
  14.       </caption>
  16.       <!-- 表格页眉 -->
  17.       <thead bgcolor="lightblue">
  18.         <th>部门</th>
  19.         <th>ID</th>
  20.         <th>姓名</th>
  21.         <th>职务</th>
  22.         <th>手机</th>
  23.       </thead>
  25.       <!-- 表格主体1 -->
  26.       <tbody>
  27.         <tr>
  28.           <td rowspan="3" align="center">开发部</td>
  29.           <td>101</td>
  30.           <td>小王</td>
  31.           <td>主管</td>
  32.           <td>188345****</td>
  33.         </tr>
  34.         <tr>
  35.           <!-- <td>开发部</td> -->
  36.           <td>102</td>
  37.           <td>小张</td>
  38.           <td>程序员</td>
  39.           <td>158123****</td>
  40.         </tr>
  41.         <tr>
  42.           <!-- <td>开发部</td> -->
  43.           <td>103</td>
  44.           <td>小李</td>
  45.           <td>实习生</td>
  46.           <td>13399*****</td>
  47.         </tr>
  48.       </tbody>
  50.       <!-- 表格主体2 -->
  51.       <tbody>
  52.         <tr>
  53.           <td rowspan="3" align="center">销售部</td>
  54.           <td>104</td>
  55.           <td>小马</td>
  56.           <td>主管</td>
  57.           <td>135345****</td>
  58.         </tr>
  59.         <tr>
  60.           <!-- <td>开发部</td> -->
  61.           <td>105</td>
  62.           <td>小刘</td>
  63.           <td>客服</td>
  64.           <td>157123****</td>
  65.         </tr>
  66.         <tr>
  67.           <!-- <td>开发部</td> -->
  68.           <td>106</td>
  69.           <td>小朱</td>
  70.           <td>实习生</td>
  71.           <td>138349*****</td>
  72.         </tr>
  73.       </tbody>
  75.       <!-- 表格页脚 -->
  76.       <tfoot>
  77.         <tr bgcolor="wheat">
  78.           <td align="center">备注:</td>
  79.           <td colspan="4">所有员工离职必须提交30天提交书面申请</td>
  80.         </tr>
  81.       </tfoot>
  82.     </table>
  83.   </body>
  84. </html>

效果显示：

4.表单

表单代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>表单之input</title>
  7.   </head>
  9.   <body>
  10.     <h3>用户注册</h3>
  11.     <form
  12.       action="handle.php"
  13.       method="post"
  14.       enctype="application/x-www-form-urlencoded"
  15.       id="register"
  16.     >
  17.       <!-- 单行文本输入框 -->
  18.       <section>
  19.         <label for="username">账号:</label>
  20.         <!-- 必选且自动获取焦点 -->
  21.         <input
  22.           type="text"
  23.           name="username"
  24.           id="username"
  25.           maxlength="20"
  26.           placeholder="不可以使用汉字"
  27.           required
  28.           autofocus
  29.         />
  30.       </section>
  32.       <!-- 密码输入框 -->
  33.       <section>
  34.         <label for="password">密码:</label>
  35.         <input
  36.           type="password"
  37.           name="password"
  38.           id="password"
  39.           size="10"
  40.           placeholder="不少于8位"
  41.           required
  42.         />
  43.       </section>
  44.       <section>
  45.         <label for="password2">密码:</label>
  46.         <input
  47.           type="password2"
  48.           name="password2"
  49.           id="password2"
  50.           size="10"
  51.           placeholder="重复输入密码"
  52.           required
  53.         />
  54.       </section>
  56.       <!-- 单选框 -->
  57.       <section>
  58.         <label for="secret">性别:</label>
  59.         <div>
  60.           <!-- 只允许返回一个值,多个input的name属性值必须相同 -->
  61.           <input type="radio" name="gender" id="male" value="male" /><label
  62.             for="male"
  63.             >男</label
  64.           >
  65.           <input type="radio" name="gender" id="female" value="female" /><label
  66.             for="male"
  67.             >女</label
  68.           >
  69.           <!-- checked: 默认选项 -->
  70.           <input
  71.             type="radio"
  72.             name="gender"
  73.             id="secret"
  74.             value="female"
  75.             checked
  76.           /><label for="secret">保密</label>
  77.         </div>
  78.       </section>
  80.       <!-- 复选框 -->
  81.       <section>
  82.         <label for="programme">兴趣:</label>
  83.         <div>
  84.           <!-- 允许返回多个值,属性名采用数组格式,便于后端处理 -->
  85.           <input type="checkbox" name="hobby[]" id="game" checked /><label
  86.             for="game"
  87.             >游戏</label
  88.           >
  89.           <input type="checkbox" name="hobby[]" id="travel" checked /><label
  90.             for="travel"
  91.             >旅游</label
  92.           >
  93.           <input
  94.             type="checkbox"
  95.             name="hobby[]"
  96.             value="shoot"
  97.             id="shoot"
  98.           /><label for="shoot">摄影</label>
  99.           <input
  100.             type="checkbox"
  101.             name="hobby[]"
  102.             value="programme"
  103.             id="programme"
  104.             checked
  105.           /><label for="programme">编程</label>
  106.         </div>
  107.       </section>
  109.       <!-- 文件域 -->
  110.       <section>
  111.         <label for="userpic">上传头像:</label>
  112.         <!-- 设置<form enctype="multipart/form-data">,且为POST提交 才有效-->
  113.         <input type="file" name="user_pic" id="userpic" />
  115.         <!-- 隐藏域: 限制上传文件大小不超过8M -->
  116.         <input type="hidden" name="MAX_FILE_SIZE" value="8388608" />
  117.       </section>
  119.       <!-- 预定义复合框 -->
  120.       <section>
  121.         <label for="course">课程:</label>
  122.         <input type="text" name="course" list="course" />
  123.         <datalist id="course">
  124.           <!-- 此<option>使用单标签,与<select>中不同 -->
  125.           <option value="HTML/CSS开发与实战"> </option>
  126.           <option value="JavaScript基础与实战"> </option>
  127.           <option value="PHP开发基础"> </option>
  128.           <option value="Laravel基础与实战"> </option>
  129.         </datalist>
  130.       </section>
  132.       <button type="">提交注册</button>
  133.     </form>
  135.     <hr />
  137.     <!-- 表单控件元素不一定必须写到<form>标签内 -->
  138.     <!-- 表单控件使用form属性,将它与所属表单绑定 -->
  139.     <h2>外部表单</h2>
  141.     <section>
  142.       <label for="email">邮箱:</label>
  143.       <input type="email" name="email" id="email" form="register" />
  144.     </section>
  146.     <section>
  147.       <label for="age">年龄:</label>
  148.       <input
  149.         type="number"
  150.         name="age"
  151.         id="age"
  152.         form="register"
  153.         min="18"
  154.         max="60"
  155.         step="2"
  156.         value="22"
  157.       />
  158.     </section>
  159.   </body>
  160. </html>

效果

总结：表单难度稍微高点，感觉也比较重要，以后网站表单用到的还是比较多的，需要多复习几遍

上一条：larvael框架 安装，设置PATH ~/.composer/vendor/bin的意思下一条：html学习：第2章 html5基础知识
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多