Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML学习之href属性、表格、表单实践操作
Blogger Information
Blog 7
fans 0
comment 0
visits 5858
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML学习之href属性、表格、表单实践操作
董家大少
Original
854 people have browsed it

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>

演示地址：跳转链接

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：效果不错, 加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post