博客列表 >12.19号,关于HTML章节文档/表格/表单以及常用标签的学习。

12.19号,关于HTML章节文档/表格/表单以及常用标签的学习。

曾
原创
2019年12月20日 19:32:59838浏览

chapter1

  1. HTML文档结构
  2. HTML常用标签

chapter2

  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. <section>
  27. <h2>标题</h2>
  28. <p>文章段落1</p>
  29. <p>文章段落2</p>
  30. </section>
  31. <footer>
  32. <section>分页条</section>
  33. </footer>
  34. </header>
  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>
  63. </div>
  64. </footer>
  65. </body>
  66. </html>

chapter3-1

  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. 一枝红杏出墙来。
  12. </pre>
  13. <p>你前女友结婚请你,<br>你会去吗?</p>
  14. <span style="color:red;">必须去,看看哪个倒霉的娶了她。</span>
  15. </body>
  16. <html>

chapter3-2

  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. 一枝红杏出墙来。
  12. <h1>看看有标签效果没。</h1>
  13. </pre>
  14. <p>你前女友结婚你会去吗,<br>
  15. <hr>你会去吗?
  16. </p>
  17. <span style="color:cadetblue;font-size: 50px;">必须去,看看哪个倒霉蛋娶了她。</span>
  18. </body>
  19. </html>

chapter3-3

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

chapter4-1

  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/11.jpg" alt="狗与猫" width="300">
  14. <!--背景透明的好处-->
  15. <style>
  16. body{background-color:lightblue;}
  17. </style>
  18. <img src="images/2.jpg" alt="" width="200">
  19. <img src="images/3.png" alt="" width="200">
  20. </body>
  21. </html>

chapter4-2

  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. <!--如果href指定的链接不是浏览器能够解析的,则会下载,不会打开,例如各类型压缩包-->
  12. <a href="chapter4-1.zip">文件下载</a>
  13. <!--href支持邮件发送,需要在电脑安装邮件客户端-->
  14. <a href="mailto: 498668472@qq.com">发邮件</a>
  15. <!--href还支持拨打电话,也需要设备有相应设施-->
  16. <a href="tel: 189****4567">致电客服</a>
  17. <!-------------------------------------------->
  18. <!--target属性说明-->
  19. <!--默认是在当前页面打开指定窗口-->
  20. <a href="https://www.php.cn">php中文网</a>
  21. <!--等同于—_self默认值-->
  22. <a href="https://www.php.cn" target="_self">php中文网</a>
  23. <!--在新窗口打开_blank-->
  24. <a href="https://www.php.cn" target="_blank">php中文网</a>
  25. <!--父页面,顶层页面打开_parent-->
  26. <!--如果没有父页面,默认在当前窗口打开-->
  27. <a href="https://www.php.cn" target="_parent">php中文网</a>
  28. <!--跳转到锚点元素所在位置-->
  29. <a href="#hello" target="_parent">锚点</a>
  30. <!--需要加上高度, 才能直观的看到效果, 注意url地址最后会有#hello-->
  31. <h1 id="hello" style="margin-top: 1000px">Hello PHP中文网</h1>
  32. </body>
  33. </html>

chapter5-1

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <!--无序列表的使用场景,最常用的就是和A标签,来组成导航链接-->
  9. <ul>
  10. <li><a href="##">首页</a></li>
  11. <li><a href="##">正在秒杀</a></li>
  12. <li><a href="##">Plus专享</a></li>
  13. </ul>
  14. <hr>
  15. <!--有序列表-->
  16. <!--有序列表的项目符号并不常用,一般使用CSS来实现需要的符号-->
  17. <ol start="1" type="A">
  18. <li><a href="##">电脑/办公</a></li>
  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. </ol>
  24. <hr>
  25. <!--自定义列表常出现在导航或者页脚-->
  26. <h2>联系我们</h2>
  27. <dl>
  28. <dt>电话:</dt>
  29. <dd>
  30. <a href="tel:1234567">1234567</a>
  31. </dd>
  32. <dt>电子邮箱:</dt>
  33. <dd>
  34. <a href="mailto:admin@php.cn">admin@php.cn</a>
  35. </dd>
  36. <dt>联系地址:</dt>
  37. <dd>
  38. <adress>中国.合肥.政务新区</adress>
  39. </dd>
  40. </dl>
  41. </body>
  42. </html>

chapter5-2

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

chapter5-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"cellspacing="0" width="1200" align="center" cellpadding="5">
  9. <caption><h3>最新文章列表</h3></caption>
  10. <thead>
  11. <tr bgcolor="#d3d3d3">
  12. <th>ID</th>
  13. <th>文章标题</th>
  14. <th>文章分类</th>
  15. <th>是否专题</th>
  16. <th>阅读数</th>
  17. <th>添加时间</th>
  18. <th>状态</th>
  19. <th>操作</th>
  20. </tr>
  21. </thead>
  22. <tbody align="center">
  23. <tr>
  24. <td>1001</td>
  25. <td>php中的对象序列化操作</td>
  26. <td>php</td>
  27. <td></td>
  28. <td>2311</td>
  29. <td><time>2019-10-23 11:34:22</time></td>
  30. <td>已审核</td>
  31. <td>
  32. <a href="##">编辑</a> |
  33. <a href="##">查看评论</a>
  34. </td>
  35. </tr>
  36. <tr>
  37. <td>1002</td>
  38. <td>JavaScript原型继承的原理分析</td>
  39. <td>javascript</td>
  40. <td></td>
  41. <td>900</td>
  42. <td><time>2019-10-18 09:24:34</time></td>
  43. <td>已审核</td>
  44. <td>
  45. <a href="##">编辑</a> |
  46. <a href="##">查看评论</a>
  47. </td>
  48. </tr>
  49. <tr>
  50. <td>1003</td>
  51. <td>css中的背景渐变是如何实现的?</td>
  52. <td>css</td>
  53. <td></td>
  54. <td>1500</td>
  55. <td><time>2019-11-09 15:09:12</time></td>
  56. <td>已审核</td>
  57. <td>
  58. <a href="##">编辑</a> |
  59. <a href="##">查看评论</a>
  60. </td>
  61. </tr>
  62. <tr>
  63. <td>1004</td>
  64. <td>php中的对象序列化操作</td>
  65. <td>php</td>
  66. <td></td>
  67. <td>2311</td>
  68. <td><time>2019-10-23 11:34:22</time></td>
  69. <td>已审核</td>
  70. <td>
  71. <a href="##">编辑</a> |
  72. <a href="##">查看评论</a>
  73. </td>
  74. </tr>
  75. </tbody>
  76. </table>
  77. <p align="center">
  78. <a href="##">上一页</a>
  79. <a href="##">1</a>
  80. <a href="##">2</a>
  81. <a href="##">3</a>
  82. <a href="##">4</a>
  83. <a href="##">...</a>
  84. <a href="##">23</a>
  85. <a href="##">24</a>
  86. <a href="##">下一页</a>
  87. </p>
  88. </body>
  89. </html>

chapter6-1

  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"cellspacing="0" width="1200" align="center" cellpadding="5">
  9. <caption><h3>最新文章列表</h3></caption>
  10. <thead>
  11. <tr bgcolor="#d3d3d3">
  12. <th>ID</th>
  13. <th>文章标题</th>
  14. <th>文章分类</th>
  15. <th>是否专题</th>
  16. <th>阅读数</th>
  17. <th>添加时间</th>
  18. <th>状态</th>
  19. <th>操作</th>
  20. </tr>
  21. </thead>
  22. <tbody align="center">
  23. <tr>
  24. <td>1001</td>
  25. <td>php中的对象序列化操作</td>
  26. <td>php</td>
  27. <td></td>
  28. <td>2311</td>
  29. <td><time>2019-10-23 11:34:22</time></td>
  30. <td>已审核</td>
  31. <td>
  32. <a href="##">编辑</a> |
  33. <a href="##">查看评论</a>
  34. </td>
  35. </tr>
  36. <tr>
  37. <td>1002</td>
  38. <td>JavaScript原型继承的原理分析</td>
  39. <td>javascript</td>
  40. <td></td>
  41. <td>900</td>
  42. <td><time>2019-10-18 09:24:34</time></td>
  43. <td>已审核</td>
  44. <td>
  45. <a href="##">编辑</a> |
  46. <a href="##">查看评论</a>
  47. </td>
  48. </tr>
  49. <tr>
  50. <td>1003</td>
  51. <td>css中的背景渐变是如何实现的?</td>
  52. <td>css</td>
  53. <td></td>
  54. <td>1500</td>
  55. <td><time>2019-11-09 15:09:12</time></td>
  56. <td>已审核</td>
  57. <td>
  58. <a href="##">编辑</a> |
  59. <a href="##">查看评论</a>
  60. </td>
  61. </tr>
  62. <tr>
  63. <td>1004</td>
  64. <td>php中的对象序列化操作</td>
  65. <td>php</td>
  66. <td></td>
  67. <td>2311</td>
  68. <td><time>2019-10-23 11:34:22</time></td>
  69. <td>已审核</td>
  70. <td>
  71. <a href="##">编辑</a> |
  72. <a href="##">查看评论</a>
  73. </td>
  74. </tr>
  75. </tbody>
  76. </table>
  77. <p align="center">
  78. <a href="##">上一页</a>
  79. <a href="##">1</a>
  80. <a href="##">2</a>
  81. <a href="##">3</a>
  82. <a href="##">4</a>
  83. <a href="##">...</a>
  84. <a href="##">23</a>
  85. <a href="##">24</a>
  86. <a href="##">下一页</a>
  87. </p>
  88. </body>
  89. </html>

chapter6-2

  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" cellspacing="9" cellpadding="10" align="center" width="700">
  18. <caption>课程编辑</caption>
  19. <tbody>
  20. <tr>
  21. <td>
  22. <label for="coures_name">课程名称</label>
  23. <input type="text" id="coures_name" name="coures_name" value="微信小程序—企业微网站">
  24. </td>
  25. <td>
  26. <label for="duration">课程时间</label>
  27. <input type="number" id="duration" name="duration" value="200">分钟
  28. </td>
  29. </tr>
  30. <tr>
  31. <td>
  32. <label for="coures_type">课程类别</label>
  33. <select name="coures_type" id="coures_type">
  34. <option value="0" selected>视频</option>
  35. <option value="1" >手册</option>
  36. <option value="2" >实战</option>
  37. <option value="3" >工具</option>
  38. </select>
  39. </td>
  40. <td>
  41. <label for="is_vip">是否VIP</label>
  42. <select name="is_vip" id="is_vip">
  43. <option value="0" selected>免费课程</option>
  44. <option value="1">线上直播</option>
  45. <option value="2">vip课程</option>
  46. </select>
  47. </td>
  48. </tr>
  49. <tr>
  50. <td>
  51. <label for="coures_difficulty">课程难度</label>
  52. <select name="coures_difficulty" id="coures_difficulty">
  53. <option value="0" selected>初级</option>
  54. <option value="1">中级</option>
  55. <option value="2">高级</option>
  56. </select>
  57. </td>
  58. <td>
  59. <label for="coures_classify">课程分类</label>
  60. <select name="coures_classify" id="coures_classify">
  61. <option value="0">php</option>
  62. <option value="1">html</option>
  63. <option value="2">css</option>
  64. </select>
  65. </td>
  66. </tr>
  67. <tr>
  68. <td>
  69. <label for="course_status">状态</label>
  70. <select name="course_status" id="course_status">
  71. <option value="0">待审核</option>
  72. <option value="1" selected>正常</option>
  73. <option value="2">下架</option>
  74. </select>
  75. </td>
  76. <td>
  77. <label for="update_status">更新状态</label>
  78. <select name="update_status" id="update_status">
  79. <option value="0">更新中</option>
  80. <option value="1">更新完</option>
  81. </select>
  82. </td>
  83. </tr>
  84. <tr>
  85. <td>
  86. <label for="is_live">正在直播</label>
  87. <select name="is_live" id="is_live">
  88. <option value="0"></option>
  89. <option value="1" selected></option>
  90. </select>
  91. </td>
  92. <td>
  93. <label for="order">排序</label>
  94. <input type="number" id="order" name="order" value="1">
  95. </td>
  96. </tr>
  97. <tr>
  98. <td>
  99. <label>是否必修</label>
  100. <input type="checkbox" id="required" name="required"><label for="required">必修</label>
  101. </td>
  102. <td>
  103. <label for="price">价格</label>
  104. <input type="number" name="price" id="price" value="0">
  105. </td>
  106. </tr>
  107. <tr>
  108. <td colspan="2">
  109. <a href="">上传图片</a>
  110. <img src="images/1.1.png" width="80"/>
  111. <span>封面为420*260像素的 PNG/JPG/GIF 格式图片</span>
  112. </td>
  113. </tr>
  114. <tr>
  115. <td>
  116. 封面小图册
  117. </td>
  118. <td>
  119. 封面为 PNG/JPG/GIF 图片格式
  120. </td>
  121. </tr>
  122. <tr>
  123. <td>
  124. 关键词
  125. </td>
  126. <td>
  127. 微信,小程序,微信小程序
  128. </td>
  129. </tr>
  130. <tr>
  131. <td>
  132. 课程简介
  133. </td>
  134. </tr>
  135. <tr>
  136. <td colspan="2">
  137. <ol>
  138. <li>介绍小程序开发,开发者工具</li>
  139. <li>介绍小程序文档</li>
  140. <li>微官网项目</li>
  141. <li>首页,产品, 产品详情,新闻,新闻详情,关于我们</li>
  142. </ol>
  143. </td>
  144. </tr>
  145. <tr>
  146. <td>
  147. 课程需知
  148. </td>
  149. </tr>
  150. <tr>
  151. <td colspan="2">
  152. <ol>
  153. <li>熟悉html+css</li>
  154. <li>熟悉js</li>
  155. <li>熟悉php</li>
  156. </ol>
  157. </td>
  158. </tr>
  159. </tbody>
  160. <tfoot>
  161. <tr>
  162. <td colspan="2" align="center">
  163. <button>保存</button>
  164. <button>取消</button>
  165. </td>
  166. </tr>
  167. </tfoot>
  168. </table>
  169. </body>
  170. </html>

chapter7-1

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>内联框架</title>
  6. </head>
  7. <body>
  8. <iframe src="https://j.map.baidu.com/3a/h" frameborder="0" height="500" width="500"></iframe>
  9. <hr>
  10. <!--网站后台-->
  11. <ul style="float:left;margin-right:15px;">
  12. <li><a href="demo6.html" target="content">商品列表</a></li>
  13. <li><a href="demo5.html" target="content">添加用户</a></li>
  14. <li><a href="demo4.html" target="content">系统设置</a></li>
  15. </ul>
  16. <iframe srcdoc="<h2 style=`color:green`>测试管理后台</h2>" frameborder="2" name="content" width="500" height="500"></iframe>
  17. </body>
  18. </html>

手抄内容

手抄内容

今天一天都在学着写这几个代码,没有基础的开始,比较慢用了一整天才写完,都运行了一下,感觉印象深刻,就是还有一点茫然,只能跟着老师的源代码写,在手抄了一下老师说的需要强化的内容,感觉内容接受的有点慢,只有在平时更加的去学习,也希望老师在课后能推荐一下学习视频,方便在课后可以加强0基础学员的节奏,跟上教学进度。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议