Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 前端HTML标签学习内容总结--PHP培训十期线上班
Blogger Information
Blog 25
fans 1
comment 1
visits 20462
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标签学习内容总结--PHP培训十期线上班
高的PHP十期培训学习笔记
Original
1260 people have browsed it

参加了php.cn【PHP中文网】的线上PHP培训班，今天是第一次写作业，由于是刚学习PHP可能有些地方做的不对，希望老师给予讲解，谢谢。

demo1


上图中显示的是纯文本结构内容在浏览器中的显示状态；
<a style="color:red">我使用的也是谷歌浏览器，但没有找到老师上课中操作的改网页编码的地方？所以显示出来的是乱码。</a>

  1. HTML文档结构
  3. HMTL常用标签

demo2


这个案例中主要学习了布局标签的使用方法及常用网页布局结构中用到的标签；

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>布局标签</title>
  6.     </head>
  7. <body>
  8. <!--页眉-->
  9. <header>
  10. <!--    导航-->
  11. <nav>
  12. <a href="">home</a>
  13. <a href="">about</a>
  14. <a href="">connect</a>
  15. <a href="">blog</a>
  16. </nav>
  17. </header>
  18. <!--主体-->
  19. <main>
  20. <!--    内容容器-->
  21.     <article>
  22.         <header>
  23.         <h1>文章标题</h1>
  24.         <p>文章段落1</p>
  25.         <p>文章段落2</p>
  26.         </header>
  27.         <section>
  28.         <h2>标题2</h2>
  29.         <p>段落1</p>
  30.         <p>段落2</p>
  31.         </section>
  32.         <footer>
  33.         <section>分分页条</section>
  34.         </footer>
  35.         </article>
  36.     <aside>
  37.         <ul>
  38.         <li>推荐信息1</li>
  39.         <li>推荐信息2</li>
  40.         <li>推荐信息3</li>
  41.         <li>推荐信息4</li>
  42.         <li>推荐信息5</li>
  43.         </ul>
  44.         </aside>
  45.     <aside>
  46.         <section>
  47.         <h3>广告位</h3>
  48.         </section>
  49.         </aside>
  50.     <section>
  51.     <span>标签1</span>
  52.     <span>标签2</span>
  53.     <span>标签3</span>
  54.     </section>
  55.     </main>
  56. <!--页脚-->
  57. <footer>
  58. <!--    友情链接，适合div-->
  59.     <div class="link">
  60.     <a href="">链接1</a>
  61.     <a href="">链接2</a>
  62.     <a href="">链接3</a>
  64. </div>
  65. </footer>
  66. </body>
  67. </html>

demo3


文本标签的使用方法及给文本设置属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>基本文本标签、</title>
  6. </head>
  7. <body>
  8. <p>今年双十一，购物车你清空了吗？</p>
  9. <pre>
  10.     满园春色关不住，一枝红杏出墙来。
  11. </pre>
  12. <p>你前女友结婚了，请你，<br>你会去吗？</p>
  13. <span style="color:red">必须去，看看哪个倒霉蛋娶了她</span>
  14. </body>
  15. </html>

demo3-2


语义话文本在网页中常见的使用方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>语义化文本</title>
  6. </head>
  7. <body>
  8. <time>2019-12-20 08:23:20</time>
  9. <br>
  10. <!--换成span,你会发现是一样的，因为内容是时间，显然用TIME语义化更强，更容易被搜索引擎理解-->
  11. <span>2019-12-20 08:27:36</span>
  12. <p>html文档，是指采用超文本标记语言编写的结构化文档</p>
  13. <!--缩写文本下有虚线，说明这是一段内容的缩写，完整信息在标签的TITLE属性中-->
  14. <p><abbr title="HyperText Markup Language">HTML</abbr>文档，是指采用超文本标记语言编写的结构化文档</p>
  15. <!--上标与下标-->
  16. <P>
  17.     2 <sup>3</sup>=8
  18.     <br>
  19.     阜阳 <sub style="color: gray">安徽发展最快的城市之一</sub>欢迎您
  20. </P>
  21. <!--地址，默认会换行，并斜体显示-->
  22. <footer>
  23.     联系地址：<address>合肥市政务新区怀宁路888号</address>
  24.     </footer>
  25. <!--删除线-->
  26. <p>猪肉原价：<s>58.88元</s>，现价：<span>49.99元</span>
  27.     <br>
  28.     猪肉原价：<s>58.88元</s>，现价：<span>49.99元</span>
  30. </p>
  31. <!--代码，通常与pre配合-->
  32. <p>
  33.     <code>
  34.         var num=100;
  35.         num+=5;
  36.     </code>
  37. </p>
  38. <p>
  39. <!--    如果浏览器不支持该标签，则显示内容文本：已经完成50%-->
  40.     <progres value="50" max="100">已经完成50%</progres>
  41. </p>
  42. <!--强调-->
  43. <p>
  44.     <b>多看多写是最快的学习方法</b>
  45.     <strong>多看多写是最快的学习方法</strong>
  46.     <br>
  47.     <i>程序员是地球上最聪明的一群人</i>
  48.     <em>程序员是地球上最聪明的一群人</em>
  50. </p>
  51. <!--标注-->
  52. <p>
  53.     我是PHP中文网的第十期学员：<mark>高同学</mark>
  54. </p>
  55. <!--引用-->
  56. <p>
  57.     <q>引用文本</q>
  58. </p>
  59. <blockquote cite="https://www.php.cn">
  60.     <p>超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。
  61.         这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或者是地理位置相距遥远的某台计算机上的文本。
  62.         这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检查信息提供方便。
  64.    </p>
  65. </blockquote>
  66. </body>
  68. </html>

demo4


图像标签的写法及属性设置方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>图像元素</title>
  6. </head>
  7. <body>
  8. <!--显示图片-->
  9. <img src="images/1.jpg" alt="猫与狗">
  10. <!--设置大小，会自动等比例缩放-->
  11. <img src="images/1.jpg" alt="猫与狗" width="300">
  12. <!--图片无法显示时-->
  13. <img src="images/12.jpg" alt="猫与狗" width="300">
  15. <!--png透明背景的好处-->
  16. <style>boby {background-color: lightblue;}</style>
  17. <img src="images/2.jpg" alt="猫与狗" width="200">
  18. <img src="images/3.png" alt="猫与狗" width="200">
  21. </body>
  22. </html>

demo4-2


HTML标签中的链接语法，超链接是网页中最重要的组成标签元素；
<a style="color:red">问题：如上图中红框内容，我直接用CTRL+/注释时怎么会显示成字符状态？</a>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>链接元素</title>
  6. </head>
  7. <body>
  8. <!--href属性说明-->
  9. <!--默认在当前窗口打开href指定的页面，href属性值会显示在浏览器的状态栏-->
  10. <a href="https://www.php.cn">PHP中文网</a>
  11. <!--如果不是一个浏览器可解析的文档，则会自动下载，不会打开，例如ZIP压缩包-->
  13. <a href="demo1.zip">下载文档压缩包</a>
  15. <!--href支持发电子邮件-->
  16. <a href="mailto:50642093@qq.com">发邮件</a>
  18. <!--href支持打电话-->
  19. <a href="tel:185****1234">致电客服</a>
  20. -------------------------
  21. <!-- -&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;-->
  22. <!--请问这里我用减号打出来的虚线加注释后为什么会变成字符-->
  24. <!--target属性说明-->
  25. <!--默认在当前窗口打开href指定的页面-->
  26. <a href="https://www.php.cn">PHP中文网</a>
  28. <!--等于-->
  29. <a href="https://www.php.com" target="_self">php中文网</a>
  31. <!--在新的窗口打开-->
  32. <a href="https://www.php.cn" target="_blank">PHP中文网</a>
  34. <!--父页面，顶层页面-->
  35. <!--因为当前页面没有父窗口，所以仍在当前窗口中打开-->
  36. <a href="https://www.php.cn" target="_parent">PHP中文网</a>
  38. <!--跳转到锚点元素所在位置-->
  39. <a href="#hello" target="_parent">锚点</a>
  40. <!--需要加上高度，才能直观的看到效果，注意URL地址最后会有#hello-->
  41. <h1 id="hello" style="height: 500px">hello PHP中文网</h1>
  44. </body>
  45. </html>

demo5-1


列表元素的写法及使用范围

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>列表元素</title>
  6. </head>
  7. <body>
  8. <!--无序列表，最重要的使用场景，就是与链接标签配合，来生成导航-->
  9. <ul>
  10.     <li><a href="">首页</a></li>
  11.     <li><a href="">秒杀</a></li>
  12.     <li><a href="">专享</a></li>
  13. </ul>
  14. <!--hr：水平分隔线-->
  15. <hr>
  16. <!--有序列表-->
  17. <h2>商品分类</h2>
  18. <ol start="1" type="A">
  19.     <li><a href="">电脑/办公</a></li>
  20.     <li><a href="">男装/女装/童装</a></li>
  21.     <li><a href="">食品/生鲜/特产</a></li>
  22.     <li><a href="">图书/文娱/教育</a></li>
  23.     <li><a href="">母婴/玩具/乐器</a></li>
  24. </ol>
  25. <!--有序列表，完全可以通过对无序列表的项目符号CSS自定义来实现，所以并不常用-->
  26. <hr>
  27. <!--自定义列表：常用在页脚或导航中-->
  28. <h2>联系我们</h2>
  29. <dl>
  30.     <dt>电话：</dt>
  31.     <dd><a href="tel:185***1234">185****1234</a></dd>
  32.     <dt>邮箱：</dt>
  33.     <dd>
  34.         <a href="mailto:admin@php.cn">admin@php.cn</a>
  35.            </dd>
  36.     <dt>地址：</dt>
  37.     <dd><address>中国.合肥.政务新区</address></dd>
  38. </dl>
  42. </body>
  43. </html>

demo5-2 demo5-3

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表格</title>
  6. </head>
  7. <body>
  8. <table border="1" cellpadding="5" cellspacing="0" width="600" align="center">
  9.     <caption>商品清单</caption>
  10.     <thead bgcolor="lightblue">
  11.     <tr>
  12.         <th>编号</th>
  13.         <th>类别</th>
  14.         <th>名称</th>
  15.         <th>单价</th>
  16.         <th>数量</th>
  17.         <th>金额</th>
  18.     </tr>
  19.     </thead>
  20.     <tbody align="center">
  21.     <tr>
  22.         <td>1</td>
  23.         <td rowspan="2">3C</td>
  24.         <td>笔记本电脑</td>
  25.         <td>8900</td>
  26.         <td>1</td>
  27.         <td>8900</td>
  28.     </tr>
  29.     <tr>
  30.         <td>2</td>
  31.         <td>单反相机</td>
  32.         <td>13800</td>
  33.         <td>1</td>
  34.         <td>13800</td>
  35.     </tr>
  36.     <tr>
  37.         <td>3</td>
  38.         <td>服饰</td>
  39.         <td>卫衣</td>
  40.         <td>1000</td>
  41.         <td>2</td>
  42.         <td>2000</td>
  43.     </tr>
  44.     </tbody>
  46. <!--底部-->
  47. <tfoot align="center">
  48. <tr>
  49.     <td colspan="4">合计：</td>
  50.     <td>4</td>
  51.     <td>24700</td>
  52. </tr>
  54. </tfoot>
  56. </table>
  58. </body>
  59. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>数据表信息展示</title>
  6.     <style>
  7.         /*  所有行添加鼠标悬停效果*/
  8.         tr:hover {
  9.             background-color: lightgray;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14. <table border="1" cellpadding="5" cellspacing="0" width="85%" align="center">
  15.     <caption>
  16.         <h3>最新文章列表</h3>
  17.     </caption>
  18.     <thead bgcolor="lightgray">
  19.     <tr>
  20.         <th>ID</th>
  21.         <th>文章标题</th>
  22.         <th>文章分类</th>
  23.         <th>是否专题</th>
  24.         <th>阅读数</th>
  25.         <th>添加时间</th>
  26.         <th>状态</th>
  27.         <th>操作</th>
  28.     </tr>
  30.     </thead>
  31. <tbody align="center">
  32. <tr>
  33.     <td>1001</td>
  34.     <td align="left"><a href="">PHP中的对象序列化操作</a></td>
  35.     <td>PHP</td>
  36.     <td>是</td>
  37.     <td>2311</td>
  38.     <td>2019-12-20 09：51：00</td>
  39.     <td>已审核</td>
  40.     <td>
  41.         <a href="">编辑</a>
  42.         <a href="">查看评论</a>
  43.     </td>
  44. </tr>
  45. <tr>
  46.     <td>1002</td>
  47.     <td align="left"><a href="">JavaScript原型继承的原理分析</a></td>
  48.     <td>JavaScript</td>
  49.     <td>是</td>
  50.     <td>999</td>
  51.     <td>2019-12-20 09：51：00</td>
  52.     <td>已审核</td>
  53.     <td>
  54.         <a href="">编辑</a>
  55.         <a href="">查看评论</a>
  56.     </td>
  57. </tr>
  58. <tr>
  59.     <td>1003</td>
  60.     <td align="left"><a href="">CSS中的背景渐变是如何实现的？</a></td>
  61.     <td>CSS</td>
  62.     <td>是</td>
  63.     <td>6754</td>
  64.     <td>2019-12-20 09：51：00</td>
  65.     <td>已审核</td>
  66.     <td>
  67.         <a href="">编辑</a>
  68.         <a href="">查看评论</a>
  69.     </td>
  70. </tr>
  71. <tr>
  72.     <td>1004</td>
  73.     <td align="left"><a href="">PHP怎么上传文件保存到本地？</a></td>
  74.     <td>PHP</td>
  75.     <td>是</td>
  76.     <td>6954</td>
  77.     <td>2019-12-20 09：51：00</td>
  78.     <td>已审核</td>
  79.     <td>
  80.         <a href="">编辑</a>
  81.         <a href="">查看评论</a>
  82.     </td>
  83. </tr>
  84. <tr>
  85.     <td>1005</td>
  86.     <td align="left"><a href="">CMD怎么运行PHP文件？</a></td>
  87.     <td>PHP</td>
  88.     <td>是</td>
  89.     <td>6954</td>
  90.     <td>2019-12-20 09：51：00</td>
  91.     <td>已审核</td>
  92.     <td>
  93.         <a href="">编辑</a>
  94.         <a href="">查看评论</a>
  95.     </td>
  96. </tr>
  97. <tr>
  98.     <td>1006</td>
  99.     <td align="left"><a href="">HTML中的下拉列表分组的使用</a></td>
  100.     <td>HTML</td>
  101.     <td>是</td>
  102.     <td>6954</td>
  103.     <td>2019-12-20 09：51：00</td>
  104.     <td>已审核</td>
  105.     <td>
  106.         <a href="">编辑</a>
  107.         <a href="">查看评论</a>
  108.     </td>
  109. </tr>
  110. <tr>
  111.     <td>1007</td>
  112.     <td align="left"><a href="">Flex布局中的主轴对齐方式有哪些</a></td>
  113.     <td>CSS</td>
  114.     <td>是</td>
  115.     <td>6954</td>
  116.     <td>2019-12-20 09：51：00</td>
  117.     <td>已审核</td>
  118.     <td>
  119.         <a href="">编辑</a>
  120.         <a href="">查看评论</a>
  121.     </td>
  122. </tr>
  125. </tbody>
  127. </table>
  129. <p align="center">
  130.     <a href="">上一页</a>
  131.     <a href="">1</a>&nbsp;
  132.     <a href="">2</a>&nbsp;
  133.     <a href="">3</a>&nbsp;
  134.     <a href="">4</a>&nbsp;
  135.     <a href="">....</a>&nbsp;
  136.     <a href="">22</a>&nbsp;
  137.     <a href="">23</a>&nbsp;
  138.     <a href="">下一页</a>
  139. </p>
  141. </body>
  142. </html>

表格的写法

demo6 demo6-2

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表单元素</title>
  6. </head>
  7. <body>
  8. <h3>用户注册</h3>
  9. <form action="check.php" method="post">
  10. <!--    文本框-->
  11.     <p>
  12.         <label for="username">账号：</label>
  13.         <input type="text" id="username" name="username" placeholder="6-15位中英文字符" required>
  15.     </p>
  16. <!--密码-->
  17. <p>
  18.     <label for="psssword">密码：</label>
  19.     <input type="password" id="psssword" name="password" placeholder="密码不少于6位" required>
  21. </p>
  22. <!--    邮箱-->
  23.     <p>
  24.         <label for="email">邮箱：</label>
  25.         <input type="email" id="email" name="email" placeholder="example@email.com" required>
  26.     </p>
  27. <!--    单选按钮-->
  28.     <p>
  29. <!--        label中的for应该与某一个选项中的ID对应-->
  30.         <label for="male">性别：</label>
  31. <!--        单选按钮控件的name名称，必须全部一样，才能确保只有一个值被提交-->
  32.         <input type="radio" name="gender" value="1" id="male">
  33.         <label for="male">男</label>
  34.         <input type="radio" name="gender" value="2" id="female">
  35.         <label for="female">女</label>
  36. <!--        将保密设置为默认值，点击标签时，自动选择男-->
  37.         <input type="radio" name="gender" value="3" id="secret" checked>
  38.         <label for="secret">保密</label>
  42.     </p>
  43. <!--复选框-->
  44. <p>
  45.     <label for="programme">爱好：</label>
  46. <!--    复选框，name属性名，建议写成数组形式，便于后端脚本处理-->
  47.     <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">游戏</label>
  48. <!--    shoot:[shu:t]-->
  49.     <input type="checkbox" name="hobby[]" value="shoot" id="shoot" checked><label for="shoot">摄影</label>
  50.     <input type="checkbox" name="hobby[]" value="programme" id="programme"><label for="programme">编程</label>
  55. </p>
  56. <!--下拉列表-->
  57. <p>
  58.     <label for="edu">学历：</label>
  59.     <select name="edu" id="edu">
  60.         <option value="1" label="中学">
  61.         <option value="2" label="大学" selected>
  62.         <option value="3" label="硕士">
  63.         <option value="4" label="博士">
  66.     </select>
  67. </p>
  69. <!--选项列表-->
  70. <p>
  71.     <label for="brand">手机品牌：</label>
  72.     <input type="search" list="phone" name="brand" id="brand">
  73.     <datalist>
  74.         <option value="apple">
  75.         <option value="huawei">
  76.         <option value="mi" label="小米">
  77.     </datalist>
  78. </p>
  79. <!--    隐藏域，数据可以提交，但页面中没有显示，适合发送敏感或不需要用户输入的数据-->
  80.     <input type="hidden" name="user_id" value="1040">
  81. <!--    文件上传-->
  82. <p>
  83.     <label for="uploads">上传头像：</label>
  84.     <input type="file" name="user_pic" id="uploads" accept="image/png,image/jpeg,image/gif">
  86. </p>
  87. <!--    日历控件-->
  88.     <p>
  89.         <label for="birthday">生日：</label>
  90.         <input type="date" id="birthday" name="birthday">
  92.     </p>
  93. <!--文本域-->
  94. <p>
  95.     <label for="resume">简历：</label>
  96. <!--    注意文本域没有value属性-->
  97.     <textarea name="resume" id="resume" cols="30" rows="10" placeholder="不超过100字"></textarea>
  100. </p>
  101. <!--    按钮-->
  102. <p>
  103.     <button>提交</button>
  104.     <input type="submit" value="注册" name="submit">
  105.     <input type="reset" value="重填" name="reset">
  106. </p>
  107. </form>
  110. </body>
  111. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>编辑课程</title>
  6.     <style>
  7.         td {
  8.             border: 1px solid lightgray;
  9.             border-radius: 3px;
  10.         }
  11.         td:first-child label {
  12.             background-color: #eee;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17. <table border="0" cellpadding="10" cellspacing="9" align="center" width="700">
  18.     <caption>编辑课程</caption>
  19.     <tbody>
  20.     <tr>
  21.         <td>
  22.             <label for="course_name">课程名称</label>
  23.             <input type="text" id="course_name" name="course_name" value="微信小程序-企业微网站">
  25.         </td>
  26.         <td>
  27.             <label for="duration">课程时间</label>
  28.             <input type="number" id="duration" name="duration" value="200">分钟
  29.         </td>
  30.     </tr>
  31.     <tr>
  32.         <td>
  33.             <label for="course_type">课程类别</label>
  34.             <select name="course_type" id="course_type">
  35.                 <option value="0" selected>视频</option>
  36.                 <option value="1">手册</option>
  37.                 <option value="2">实战</option>
  38.                 <option value="3">工具</option>
  39.             </select>
  40.         </td>
  41.         <td>
  42.             <label for="is_vip">是否VIP</label>
  43.             <select name="is_vip" id="is_vip">
  44.                 <option value="0" selected>免费课程</option>
  45.                 <option value="1">线上直播课</option>
  46.                 <option value="2">VIP课程</option>
  47.             </select>
  48.         </td>
  49.     </tr>
  50.     <tr>
  51.         <td>
  52.             <label for="course_difficulty">课程难度</label>
  53.             <select name="course_course_difficulty" id="course_difficulty">
  54.                 <option value="0" selected>初级</option>
  55.                 <option value="1">中级</option>
  56.                 <option value="2">高级</option>
  57.             </select>
  58.         </td>
  59.         <td>
  60.             <label for="course_classify">课程分类</label>
  61.             <select name="course_classify" id="course_classify">
  62.                 <option value="0" selected>PHP</option>
  63.                 <option value="1">CSS</option>
  64.                 <option value="2">HTML</option>
  65.             </select>
  66.         </td>
  67.     </tr>
  68.     <tr>
  69.         <td>
  70.             <label for="course_status">状态</label>
  71.             <select name="courst_status" id="course_status">
  72.                 <option value="0">待审核</option>
  73.                 <option value="1" selected>正常</option>
  74.                 <option value="2">下架</option>
  75.             </select>
  76.         </td>
  77.         <td>
  78.             <label for="update_status">更新状态</label>
  79.             <select name="update_status" id="update_status">
  80.                 <option value="0" selected>更新中</option>
  81.                 <option value="1">更新完</option>
  82.             </select>
  83.         </td>
  84.     </tr>
  85.     <tr>
  86.         <td>
  87.             <label for="is_live">正在直播</label>
  88.             <select name="is_live" id="is_live">
  89.                 <option value="0">是</option>
  90.                 <option value="1" selected>否</option>
  91.             </select>
  92.         </td>
  93.         <td>
  94.             <label for="order">排序</label>
  95.             <input type="number" id="order" name="order" value="0">
  96.         </td>
  97.     </tr>
  98.     <tr>
  99.         <td>
  100. <!--            使用复选框后面的label进行关联-->
  101.             <latel>是否必修</latel>
  102.             <input type="checkbox" id="required" name="required">
  103.             <label for="required">必修</label>
  105.         </td>
  106.         <td>
  107.             <label for="price">价格</label>
  108.             <input type="number" id="price" name="price" value="0">
  109.         </td>
  110.     </tr>
  111. <!--    上传本地图片，使用一行一列布局，涉及列合并-->
  112.     <tr>
  113.         <td colspan="2">
  114.             <a href="">上传本地图片</a>
  115.             <img src="images/1.png" alt="" width="80">
  116.             <span>封面为420*260像素的PNG/JPG/GIF格式图片</span>
  117.         </td>
  119.     </tr>
  120.     <tr>
  121.         <td>封面小图册</td>
  122.         <td>封面为PNG/JPG/GIF图片格式</td>
  123.     </tr>
  124.     <tr>
  125.         <td>关键词</td>
  126.         <td>微信，小程序，微信小程序</td>
  127.     </tr>
  128.     <tr>
  129.         <td colspan="2">课程简介</td>
  130.     </tr>
  131.     <tr>
  132.         <td colspan="2">
  133.             <ol>
  134.                 <li>介绍小程序开发，开发者工具</li>
  135.                 <li>介绍小程序文档</li>
  136.                 <li>微官网项目</li>
  137.                 <li>首页，产品，产品详情，新闻，新闻详情，关于我们</li>
  138.             </ol>
  139.         </td>
  140.     </tr>
  141.     <tr>
  142.         <td colspan="2">课程需知
  143.         </td>
  144.     </tr>
  145.     <tr>
  146.         <td colspan="2">
  147.             <ol>
  148.                 <li>熟悉HTML+CSS</li>
  149.                 <li>熟悉JS</li>
  150.                 <li>熟悉PHP</li>
  151.             </ol>
  152.         </td>
  153.     </tr>
  154.     </tbody>
  155.     <tfoot>
  156.     <tr>
  157.         <td colspan="2" align="center">
  158.             <button>保存</button>
  159. <!--            button默认type类型为提交，设置为type="button",需要由JS设置其行为-->
  160.             <button type="button">取消</button>
  161.         </td>
  162.     </tr>
  163.     </tfoot>
  165. </table>
  168. </body>
  169. </html>

表单内容的元素写法，表单在网页中用于和用户交互，数据传递；
问题：下图中的代码是课件中的代码，请问上面的name的元素名称的命名规则是什么样的？同一个元素中的名称一个用中划线，一个用下划线对数据提交有影响吗？

demo7

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>内联框架</title>
  6. </head>
  7. <body>
  8. <!--HTML内联框架元素 <iframe></iframe>-->
  9. <!--将另一个HTML页面嵌入到当前页面中，而不是窗口中打开另一个网页，类似画中画-->
  10. <!--在当前页面加载一张地图，以百度地图为例，工具-》分享，把URL值赋值给src-->
  11. <iframe src="https://j.map.baidu.com/a7/zf" frameborder="0" width="500" height="400"></iframe>
  14. <!--内联框架中的内容不会被当作当前页面内容，当然也不会被搜索引擎抓取，会对SEO有影响-->
  15. <!--所以，不适合写前端数据展示页面，但非常适合写管理后台页面-->
  16. <!--下面写一个后台小案例-->
  18. <hr>
  19. <ul style="float: left;margin-right: 15px;">
  20.     <li><a href="demo6-2.html" target="content">商品列表</a></li>
  21.     <li><a href="demo3-2.html" target="content">添加用户</a></li>
  22.     <li><a href="demo4-2.html" target="content">系统设置</a></li>
  25. </ul>
  27. <!--srcdoc代替src,可以在属性值中直接写HTML代码，实现后台首页的功能-->
  28. <!--name属性非常重要，它是链接到该框架页面的入口-->
  29. <iframe srcdoc="<h2>欢迎使用管理后台</h2>" frameborder="1" name="content" width="530" height="450"></iframe>
  31. </body>
  32. </html>

内联框架的使用方法及常用的使用范围(主要用于嵌入地图及网站后台，对SEO不友好，不建议前端使用)。

表单知识

![![](https://img.php.cn/upload/image/878/393/527/1576821998173700.jpg)](https://img.php.cn/upload/image/429/786/620/1576821990754073.jpg)

最后希望老师能少布置点作业，虽然多做点作业能加深课堂学习的印象，但因为本人已经工作了（工作和编程不相关），也是刚开始学习代码，在速度上及时间恐怕完成不了（这次作业足足做了大半天，因为这几天请假在家没上班，如果上班的话肯定完成不了 T_T）

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