博客列表 >HTML基础标签示例-PHP培训十期线上班

HTML基础标签示例-PHP培训十期线上班

Miss灬懒虫
Miss灬懒虫原创
2019年12月21日 18:16:03733浏览

html基础标签

说明包含在代码注释里面哦!

  1. <!--声明文档类型-->
  2. <!DOCTYPE html>
  3. <!--html-->
  4. <html lang="en">
  5. <!--文档头部-->
  6. <head>
  7. <meta charset="UTF-8">
  8. <title>HTML5 Page</title>
  9. </head>
  10. <!--页面主体-->
  11. <body>
  12. <!--header标签,页眉-->
  13. <header>
  14. <!--nav标签,表示导航-->
  15. <nav>
  16. <!--ul,为无序列表标签-->
  17. <ul>
  18. <li>
  19. <!--a标签,href属性说明-->
  20. <!--默认打开href属性值所链接的网址-->
  21. <a href="https://www.baidu.com" >home</a>
  22. <br>
  23. <!--如果链接的不是浏览器可以解析的文档,则会自动下载,但不打开。例如 zip压缩包-->
  24. <a href="images/dom.zip">ZIP</a>
  25. <br>
  26. <!--使用“mailto:” 发送电子邮件-->
  27. <a href="mailto:723648882@qq.com">发送邮件--723648882</a>
  28. <!--使用“tel:” 打电话-->
  29. <a href="tel:010-87**8198">致电客服</a>
  30. </li>
  31. <li>
  32. <!--a标签,target属性说明,若不写则默认值为 target="_self",即在当前窗口打开-->
  33. <!--target="_blank",在新窗口打开-->
  34. <!--target="_parent",在当前页面的父页面打开-->
  35. <a href="#" target="_blank">about</a>
  36. <!--跳转到锚点元素,所在的页面位置-->
  37. <a href="#hello" target="_parent">锚点使用--跳转 ID:hello的标签所在位置</a>
  38. <br>
  39. </li>
  40. </ul>
  41. </nav>
  42. </header>
  43. <!--main标签,标识页面主体内容-->
  44. <main>
  45. <!--article标签,引入外部内容,可独立与文档之外-->
  46. <article>
  47. <header>
  48. <H1 id="hello">文章标题1</H1>
  49. <p>文章段落1</p>
  50. <time>2019-12-21 16:40:25</time>
  51. </header>
  52. <!--section标签,多用于章节、页眉、页脚或文档中的其他部分,一般包含h标签-->
  53. <section>
  54. <h2>section标签的示例</h2>
  55. <p>这是一篇文章的段落。</p>
  56. <!--pre标签,能够按照代码的格式,将换行以及空格输出到浏览器-->
  57. <!-- b,strong标签加错;i,em 是斜体-->
  58. <pre>
  59. <b>熟读唐诗三百首</b>
  60. <i>不会作诗也会吟。</i>
  61. <strong>熟读唐诗三百首</strong>
  62. <em>不会作诗也会吟</em>
  63. </pre>
  64. </section>
  65. <p>今年双十一,购物车清空了吗?</p>
  66. </article>
  67. <!--aside标签,多用于文章或页面侧边栏-->
  68. <aside>
  69. <!--有序列表-->
  70. <ol>
  71. <li>有序列表1</li>
  72. <li>有序列表2</li>
  73. </ol>
  74. <!-- q标签,是短引用-->
  75. <q>111</q>
  76. <!--blockquote标签,是长引用-->
  77. <blockquote cite="https://www.php.cn">
  78. <p>
  79. PHP中文网因专业的讲师水平和高效的视频质量,推出的各种视频课程系列一直以来都深受大家喜爱。
  80. 特别是《天龙八部》系列、《独孤九贱》系列、《玉女心经》系列的原创课程在行业内更是具有强大
  81. 的影响力,好评不断!为了让大家能更快速方便的寻找到相关教程资源,我们在这篇文章中特意将
  82. 《天龙八部》系列课程整理出来供大家有针对性得学习!
  83. </p>
  84. </blockquote>
  85. </aside>
  86. <!-- HTML表格-->
  87. <table>
  88. <!--caption标签,是表格标题-->
  89. <caption>表格标题</caption>
  90. <!-- thead,表哥的表头-->
  91. <thead>
  92. <!--tr,行-->
  93. <tr bgcolor="#6495ed">
  94. <!--th,表头列-->
  95. <th>编号</th>
  96. <th>类型</th>
  97. <th>名称</th>
  98. <th>单价</th>
  99. <th>数量</th>
  100. <th>金额</th>
  101. </tr>
  102. </thead>
  103. <!--tbody标签,是表格内容-->
  104. <tbody align="center">
  105. <tr>
  106. <!--td标签,是单元格-->
  107. <!--rowspan属性是“行间合并”,也就是跨行纵向合并!-->
  108. <!--colspan属性是“列间合并”,也就是单行横向合并!-->
  109. <td>1</td>
  110. <td rowspan="2">3C</td>
  111. <td>笔记本电脑</td>
  112. <td>8900</td>
  113. <td>1</td>
  114. <td>8900</td>
  115. </tr>
  116. <tr>
  117. <td>2</td>
  118. <td>数码单反相机</td>
  119. <td>13800</td>
  120. <td>1</td>
  121. <td>13800</td>
  122. </tr>
  123. <tr>
  124. <td>3</td>
  125. <td>服饰</td>
  126. <td>冠军卫衣</td>
  127. <td>1000</td>
  128. <td>2</td>
  129. <td>2000</td>
  130. </tr>
  131. </tbody>
  132. <!--表格底部-->
  133. <tfoot align="center">
  134. <tr>
  135. <!--colspan属性是“列间合并”,也就是单行横向合并!-->
  136. <td colspan="4">合计:</td>
  137. <td>4</td>
  138. <td>24700</td>
  139. </tr>
  140. </tfoot>
  141. </table>
  142. <!--内联框架-->
  143. <!--默认: <iframe src="" frameborder="0"></iframe>-->
  144. <!--name属性,是内联框架所链接页面到“该框架”的入口,所以超链接的 target的值 == iframe标签中 “name”属性的值。-->
  145. <!--默认src属性值,可以填写一个默认的HTML页面链接-->
  146. <!--srcdoc属性,可是在值中“直接写入HTML代码”,以简单实现后台首页功能-->
  147. <a href="tableinfo.html" target="ifr_Page">最新文章列表</a>
  148. <iframe src="table.html" frameborder="1" name="ifr_Page" width="600" height="400"></iframe>
  149. <!--进度条,如果浏览器不支持该标签,则显示内容部文本:已完成60%-->
  150. <p>
  151. <progress value="60" max="100">已完成60%</progress>
  152. </p>
  153. </main>
  154. <!--footer标签,用于页脚-->
  155. <footer>
  156. <!--span标签,多用于对文本内的部分内容进行操作-->
  157. <!-- time 包含时间,address包含地址,code包含代码-->
  158. <p>
  159. PHP中文网培训-10期-懒虫,
  160. 版本号:<del>1.0</del>,<span style="color: red">1.1</span>
  161. 更新时间:<time>2019-12-21</time>
  162. </p>
  163. 联系地址:<address>中国.北京市.东城区</address>
  164. </footer>
  165. </body>
  166. </html>

手抄表单标签


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