search

博客列表 >HTML学习之href属性、表格、表单实践操作

HTML学习之href属性、表格、表单实践操作

董家大少
董家大少原创
2020年04月04日 17:12:35853浏览

HTML学习之href属性、表格、表单实践操作 0404

href属性

  • 超链接文本跳转
  • 文件下载
  • 拨打电话
  • 邮件发送
  • 锚点跳转

演示文件的代码

  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>这是href属性的一些用法展示</title>
  7.   </head>
  8.   <body>
  9.     <h3>展示一些href中超链接的用法</h3>
  11.     <h4>第一：跳转网页</h4>
  12.     <a href="http://www.16ak.cn/" target="_blank"> 艾克资源博客</a>
  13.     <h4>第二：下载文件</h4>
  14.     <a
  15.       href="https://down.115z.com/azdtbqdrj_20200402152602.apk"
  16.       download="ruanjian.apk"
  17.       >点我下载
  18.     </a>
  20.     <h4>第三：邮件的发送</h4>
  21.     <a href="mailto:981077525@qq.com">
  22.       点我联系博主发送邮件
  23.     </a>
  24.     <h4>第四：电话的拨打</h4>
  25.     <a href="tel:1325****702">点击这里打电话给我</a>
  26.     <h4>第五：锚点跳转展示</h4>
  27.     <a href="#maodian1">点我跳转至第一锚点</a>
  28.     <a href="#maodian2">点我跳转至第二锚点</a>
  29.     <a href="#maodian3">点我跳转至第三锚点</a>
  30.     <a href="#maodian4">点我跳转至第四锚点</a>
  32.     <div id="maodian1" style="margin-top: 1000px;">我是第一锚点</div>
  33.     <div id="maodian2" style="margin-top: 1000px;">我是第二锚点</div>
  34.     <div id="maodian3" style="margin-top: 1000px;">我是第三锚点</div>
  35.     <div id="maodian4" style="margin-top: 1000px;">我是第四锚点</div>
  36.   </body>
  37. </html>

代码演示地址：演示地址

表格

  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>
  9.   <body>
  10.     <table
  11.       border="1"
  12.       cellpadding="5"
  13.       cellspacing="0"
  14.       width="500"
  15.       height="300"
  16.       align="center"
  17.     >
  18.       <!-- 对列统一设置,colgroup中设置的属性对所有列均有效 -->
  19.       <colgroup bgcolor="lightpink">
  20.         <!-- 如果不想自定义某一列属性,只写元素不写属性 -->
  21.         <col />
  22.         <!-- 第二列个性化定制: 背景为浅绿色 -->
  23.         <col bgcolor="lightgreen" />
  24.         <!-- 第三列背景为黄色,并跨越2列都有效 -->
  25.         <col bgcolor="yellow" span="2" />
  26.         <!-- 第四列,使用第3列的样式 -->
  27.         <col />
  28.         <!-- 最后一列无特殊样式,采用父级样式 -->
  29.         <col />
  30.       </colgroup>
  32.       <!-- 表格标题 -->
  33.       <caption style="font-size: 1.5rem; margin-bottom: 10px;">
  34.         员工信息表
  35.       </caption>
  37.       <!-- 表格页眉 -->
  38.       <thead bgcolor="lightblue">
  39.         <th>部门</th>
  40.         <th>ID</th>
  41.         <th>姓名</th>
  42.         <th>职务</th>
  43.         <th>手机</th>
  44.       </thead>
  46.       <!-- 表格主体1 -->
  47.       <tbody>
  48.         <tr>
  49.           <td rowspan="3" align="center">开发部</td>
  50.           <td>101</td>
  51.           <td>小王</td>
  52.           <td>主管</td>
  53.           <td>188345****</td>
  54.         </tr>
  55.         <tr>
  56.           <!-- <td>开发部</td> -->
  57.           <td>102</td>
  58.           <td>小张</td>
  59.           <td>程序员</td>
  60.           <td>158123****</td>
  61.         </tr>
  62.         <tr>
  63.           <!-- <td>开发部</td> -->
  64.           <td>103</td>
  65.           <td>小李</td>
  66.           <td>实习生</td>
  67.           <td>13399*****</td>
  68.         </tr>
  69.       </tbody>
  71.       <!-- 表格主体2 -->
  72.       <tbody>
  73.         <tr>
  74.           <td rowspan="3" align="center">销售部</td>
  75.           <td>104</td>
  76.           <td>小马</td>
  77.           <td>主管</td>
  78.           <td>135345****</td>
  79.         </tr>
  80.         <tr>
  81.           <!-- <td>开发部</td> -->
  82.           <td>105</td>
  83.           <td>小刘</td>
  84.           <td>客服</td>
  85.           <td>157123****</td>
  86.         </tr>
  87.         <tr>
  88.           <!-- <td>开发部</td> -->
  89.           <td>106</td>
  90.           <td>小朱</td>
  91.           <td>实习生</td>
  92.           <td>138349*****</td>
  93.         </tr>
  94.       </tbody>
  96.       <!-- 表格页脚 -->
  97.       <tfoot>
  98.         <tr bgcolor="wheat">
  99.           <td align="center">备注:</td>
  100.           <td colspan="4">所有员工离职必须提交30天提交书面申请</td>
  101.         </tr>
  102.       </tfoot>
  103.     </table>
  104. <h2 align="center" style="color:blue ;font-size:2rem">这是我自己制作的演示表格</h2>
  105.         <table
  106.           align="center"
  107.           width="500"
  108.           height="300"
  109.           border="1"
  110.           cellpadding="5"
  111.           cellspacing="0"
  112.           bgcolor="red"
  113.         >
  117.       <colgroup >
  119.         <col bgcolor="blank" />
  121.         <col bgcolor="lightgreen" />
  123.         <col bgcolor="yellow" span="1" />
  125.         <col  bgcolor="lightgreen" span="2"/>
  127.         <col />
  128.       </colgroup>
  131.           <caption style="font-size: 1.5rem;">
  132.             小学生上课日程表
  133.           </caption>
  134.           <tr bgcolor="lightpink">
  135.             <td></td>
  136.             <td align="center">
  137.               周一
  138.             </td>
  139.             <td align="center">
  140.               周二
  141.             </td>
  142.             <td align="center">
  143.               周三
  144.             </td><td align="center">
  145.                 周四
  146.               </td><td align="center">
  147.                 周五
  148.               </td>
  150.           </tr>
  151.           <tr>
  152.             <td align="center">第一节</td>
  153.             <td>
  154.               语文
  155.             </td>
  156.             <td>
  157.               英语
  158.             </td>
  159.             <td>
  160.               数学
  161.             </td>
  162.             <td>语文</td>
  163.             <td>语文</td>
  164.           </tr>
  165.           <tr>
  166.             <td align="center">
  167.                 第二节
  168.               </td>
  169.             <td>
  170.                 语文
  171.               </td>
  172.               <td>
  173.                 英语
  174.               </td>
  175.               <td>
  176.                 数学
  177.               </td>
  178.               <td>语文</td>
  179.               <td>语文</td>
  180.           </tr>
  181.           <tr>
  182.             <td align="center">
  183.                 第三节
  184.               </td>
  185.             <td>
  186.                 语文
  187.               </td>
  188.               <td>
  189.                 英语
  190.               </td>
  191.               <td>
  192.                 数学
  193.               </td>
  194.               <td>语文</td>
  195.               <td rowspan="2">语文</td>
  196.           </tr>
  197.           <tr>
  198.             <td align="center">
  199.                 第四节
  200.               </td>
  201.             <td rowspan="2">
  202.                 语文
  203.               </td>
  204.               <td>
  205.                 英语
  206.               </td>
  207.               <td>
  208.                 数学
  209.               </td>
  210.               <td>语文</td>
  212.           </tr>
  214.           <tr>
  215.             <td align="center" >
  216.                 第五节
  217.               </td>
  219.               <td>
  220.                 英语
  221.               </td>
  222.               <td>
  223.                 数学
  224.               </td>
  225.               <td>语文</td>
  226.               <td>语文</td>
  227.           </tr>
  228.           <tr><td align="center">
  229.             第六节
  230.           </td>
  231.           <td rowspan="2">
  232.             作文
  233.           </td>
  234.           <td>
  235.             英语
  236.           </td>
  237.           <td>
  238.             数学
  239.           </td>
  240.           <td>语文</td>
  241.           <td>语文</td>
  242.           </tr>
  243.           <tr><td align="center">
  244.             第七节
  245.           </td>
  247.           <td>
  248.             英语
  249.           </td>
  250.           <td>
  251.             数学
  252.           </td>
  253.           <td>语文</td>
  254.           <td>语文</td>
  255.           </tr>
  256.           <tr><td align="center">
  257.             备注：
  258.           </td>
  260.           <td colspan="5">
  261.             这是我的课程表的备注信息
  262.           </td>
  264.           </tr>
  265.         </table>
  266.       </body>
  267.     </html>

代码演示地址：演示地址

表单

  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.     <style>
  8.       form {
  9.         padding: 20px;
  10.         width: 350px;
  11.         box-shadow: 0 0 8px #888;
  12.         border-radius: 10px;
  13.         box-sizing: border-box;
  14.         margin: auto;
  15.         background-color: lightskyblue;
  16.         display: grid;
  17.         gap: 15px;
  18.       }
  20.       form > section {
  21.         display: grid;
  22.         grid-template-columns: 60px 1fr;
  23.       }
  25.       h3 {
  26.         text-align: center;
  27.       }
  29.       input[type="image"] {
  30.         justify-self: center;
  31.       }
  32.     </style>
  33.   </head>
  35.   <body>
  36.     <h3>用户注册</h3>
  37.     <form
  38.       action="handle.php"
  39.       method="post"
  40.       enctype="application/x-www-form-urlencoded"
  41.       id="register"
  42.     >
  43.       <!-- 单行文本输入框 -->
  44.       <section>
  45.         <label for="username">用户名:</label>
  46.         <!-- 必选且自动获取焦点 -->
  47.         <input
  48.           type="text"
  49.           name="username"
  50.           id="username"
  51.           maxlength="20"
  52.           placeholder="不少于6位"
  53.           required
  54.           autofocus
  55.         />
  56.       </section>
  58.       <!-- 密码输入框 -->
  59.       <section>
  60.         <label for="password">密码:</label>
  61.         <input
  62.           type="password"
  63.           name="password"
  64.           id="password"
  65.           size="10"
  66.           placeholder="不少于8位"
  67.           required
  68.         />
  69.       </section>
  71.       <!-- 单选框 -->
  72.       <section>
  73.         <label for="secret">性别:</label>
  74.         <div>
  75.           <!-- 只允许返回一个值,多个input的name属性值必须相同 -->
  76.           <input type="radio" name="gender" id="male" value="male" /><label
  77.             for="male"
  78.             >男</label
  79.           >
  80.           <input type="radio" name="gender" id="female" value="female" /><label
  81.             for="male"
  82.             >女</label
  83.           >
  84.           <!-- checked: 默认选项 -->
  85.           <input
  86.             type="radio"
  87.             name="gender"
  88.             id="secret"
  89.             value="female"
  90.             checked
  91.           /><label for="secret">保密</label>
  92.         </div>
  93.       </section>
  95.       <!-- 复选框 -->
  96.       <section>
  97.         <label for="programme">兴趣:</label>
  98.         <div>
  99.           <!-- 允许返回多个值,属性名采用数组格式,便于后端处理 -->
  100.           <input type="checkbox" name="hobby[]" id="game" checked /><label
  101.             for="game"
  102.             >游戏</label
  103.           >
  104.           <input type="checkbox" name="hobby[]" id="travel" checked /><label
  105.             for="travel"
  106.             >旅游</label
  107.           >
  108.           <input
  109.             type="checkbox"
  110.             name="hobby[]"
  111.             value="shoot"
  112.             id="shoot"
  113.           /><label for="shoot">摄影</label>
  114.           <input
  115.             type="checkbox"
  116.             name="hobby[]"
  117.             value="programme"
  118.             id="programme"
  119.             checked
  120.           /><label for="programme">编程</label>
  121.         </div>
  122.       </section>
  124.       <!-- 文件域 -->
  125.       <section>
  126.         <label for="userpic">头像:</label>
  127.         <!-- 设置<form enctype="multipart/form-data">,且为POST提交 才有效-->
  128.         <input type="file" name="user_pic" id="userpic" />
  130.         <!-- 隐藏域: 限制上传文件大小不超过8M -->
  131.         <input type="hidden" name="MAX_FILE_SIZE" value="8388608" />
  132.       </section>
  134.       <!-- 预定义复合框 -->
  135.       <section>
  136.         <label for="course">课程:</label>
  137.         <input type="text" name="course" list="course" />
  138.         <datalist id="course">
  139.           <!-- 此<option>使用单标签,与<select>中不同 -->
  140.           <option value="HTML/CSS开发与实战"> </option>
  141.           <option value="JavaScript基础与实战"> </option>
  142.           <option value="PHP开发基础"> </option>
  143.           <option value="Laravel基础与实战"> </option>
  144.         </datalist>
  145.       </section>
  147.       <!-- 表单控件元素不一定必须写到<form>标签内 -->
  148.       <!-- 表单控件使用form属性,将它与所属表单绑定 -->
  149.       <section>
  150.         <label for="email">邮箱:</label>
  151.         <input type="email" name="email" id="email" form="register" />
  152.       </section>
  154.       <section>
  155.         <label for="age">年龄:</label>
  156.         <input
  157.           type="number"
  158.           name="age"
  159.           id="age"
  160.           form="register"
  161.           min="18"
  162.           max="60"
  163.           step="1"
  164.           value="22"
  165.         />
  166.       </section>
  168.       <!-- 图像域: 提交按钮为图像 -->
  169.       <!-- 返回点击图片的x/坐标,推荐加上name属性,返回有语义坐标 -->
  170.       <!-- 测试提交,启动一个本地Web服务器: php -S localhost:8888 -->
  171.       <input
  172.         type="image"
  173.         src="https://ae01.alicdn.com/kf/H109350428f9c441e94c63b44eec253b1N.png"
  174.         alt="submit"
  175.         name="submit"
  176.         width="100"
  177.       />
  178.     </form>
  180.     <hr />
  182.     <h2 align="center" style="font-size: 2rem; color: blue;">
  183.       接下来是我的代码片段
  184.     </h2>
  186.     <h3 style="font-size: 1.17rem;">用户信息修改</h3>
  188.     <form
  189.       action="handle.php"
  190.       method="post"
  191.       enctype="application/x-www-form-urlencoded"
  192.       id="register"
  193.     >
  194.       <!-- 单行文本输入框 -->
  195.       <section>
  196.         <label for="username">原账号:</label>
  197.         <!-- 必选且自动获取焦点 -->
  198.         <input
  199.           type="text"
  200.           name="username"
  201.           id="username"
  202.           maxlength="20"
  203.           placeholder="不少于6位"
  204.           required
  205.           autofocus
  206.         />
  207.       </section>
  209.       <!-- 密码输入框 -->
  210.       <section>
  211.         <label for="password">原密码:</label>
  212.         <input
  213.           type="password"
  214.           name="password"
  215.           id="password"
  216.           size="10"
  217.           placeholder="不少于8位"
  218.           required
  219.         />
  220.       </section>
  221.       <section>
  222.         <label for="password">新密码:</label>
  223.         <input
  224.           type="password"
  225.           name="password"
  226.           id="password"
  227.           size="10"
  228.           placeholder="不少于8位"
  229.           required
  230.         />
  231.       </section>
  233.       <!-- 单选框 -->
  234.       <section>
  235.         <label for="secret">性别:</label>
  236.         <div>
  237.           <!-- 只允许返回一个值,多个input的name属性值必须相同 -->
  238.           <input type="radio" name="gender" id="male" value="male" /><label
  239.             for="male"
  240.             >男</label
  241.           >
  242.           <input type="radio" name="gender" id="female" value="female" /><label
  243.             for="male"
  244.             >女</label
  245.           >
  246.           <!-- checked: 默认选项 -->
  247.           <input
  248.             type="radio"
  249.             name="gender"
  250.             id="secret"
  251.             value="female"
  252.             checked
  253.           /><label for="secret">保密</label>
  254.         </div>
  255.       </section>
  257.       <!-- 复选框 -->
  258.       <section>
  259.         <label for="programme">兴趣:</label>
  260.         <div>
  261.           <!-- 允许返回多个值,属性名采用数组格式,便于后端处理 -->
  262.           <input type="checkbox" name="hobby[]" id="game" checked /><label
  263.             for="game"
  264.             >游戏</label
  265.           >
  266.           <input type="checkbox" name="hobby[]" id="travel" checked /><label
  267.             for="travel"
  268.             >旅游</label
  269.           >
  270.           <input
  271.             type="checkbox"
  272.             name="hobby[]"
  273.             value="shoot"
  274.             id="shoot"
  275.           /><label for="shoot">摄影</label>
  276.           <input
  277.             type="checkbox"
  278.             name="hobby[]"
  279.             value="programme"
  280.             id="programme"
  281.             checked
  282.           /><label for="programme">编程</label>
  283.         </div>
  284.       </section>
  286.       <!-- 文件域 -->
  287.       <section>
  288.         <label for="userpic">头像:</label>
  289.         <!-- 设置<form enctype="multipart/form-data">,且为POST提交 才有效-->
  290.         <input type="file" name="user_pic" id="userpic" />
  292.         <!-- 隐藏域: 限制上传文件大小不超过8M -->
  293.         <input type="hidden" name="MAX_FILE_SIZE" value="8388608" />
  294.       </section>
  296.       <!-- 预定义复合框 -->
  297.       <section>
  298.         <label for="course">课程:</label>
  299.         <input type="text" name="course" list="course" />
  300.         <datalist id="course">
  301.           <!-- 此<option>使用单标签,与<select>中不同 -->
  302.           <option value="HTML/CSS开发与实战"> </option>
  303.           <option value="JavaScript基础与实战"> </option>
  304.           <option value="PHP开发基础"> </option>
  305.           <option value="Laravel基础与实战"> </option>
  306.         </datalist>
  307.       </section>
  309.       <!-- 表单控件元素不一定必须写到<form>标签内 -->
  310.       <!-- 表单控件使用form属性,将它与所属表单绑定 -->
  311.       <section>
  312.         <label for="email">邮箱:</label>
  313.         <input type="email" name="email" id="email" form="register" />
  314.       </section>
  316.       <section>
  317.         <label for="age">年龄:</label>
  318.         <input
  319.           type="number"
  320.           name="age"
  321.           id="age"
  322.           form="register"
  323.           min="18"
  324.           max="60"
  325.           step="1"
  326.           value="22"
  327.         />
  328.       </section>
  330.       <!-- 图像域: 提交按钮为图像 -->
  331.       <!-- 返回点击图片的x/坐标,推荐加上name属性,返回有语义坐标 -->
  332.       <!-- 测试提交,启动一个本地Web服务器: php -S localhost:8888 -->
  333.       <input
  334.         type="image"
  335.         src="https://ae01.alicdn.com/kf/H109350428f9c441e94c63b44eec253b1N.png"
  336.         alt="submit"
  337.         name="submit"
  338.         width="100"
  339.       />
  340.     </form>
  341.   </body>
  342. </html>

演示地址：跳转链接

上一条：HTMl 中的 a 链接、列表、表格、表单元素常用属性下一条：HTML基础知识2
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多