Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML标签学习
Blogger Information
Blog 2
fans 0
comment 1
visits 1540
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标签学习
晓刚
Original
881 people have browsed it

1. HTML基本标签

  1. <!DOCTYPE html>     <!--定义文档类型-->
  2. <html lang="en">  <!--定义 HTML 文档 lang设置内容的语言-->
  3. <head>  <!--    定义文档的信息-->
  4.     <meta charset="utf-8">  <!--    定义文档的元数据-->
  5.     <title>html学习</title>   <!--    定义当前文档标题-->
  6. </head>
  7. <body>  <!--定义文档的主体-->
  8. <!--页眉-->
  9. <header> <!--一般用于导航-->
  10.     <nav>   <!--    导航-->
  11.         <a href="">Home</a> <!--        定义超链接-->
  12.         <a href="">About</a>
  13.         <a href="">Connect</a>
  14.         <a href="">Blog</a>
  15.     </nav>
  16. </header>
  18. <main> <!--主体-->
  19.     <article> <!--    内容容器-->
  20.         <header>
  21.             <h1>文章标题</h1>
  22.             <p>文章段落1</p>
  23.             <p>文章段落2</p>
  24.         </header>
  25.         <section>   <!--主体无关的信息-->
  26.             <h2>标题2</h2>
  27.             <p>文章段落1</p>
  28.             <p>文章段落2</p>
  29.         </section>
  30.     </article>
  31.     <aside><!--边栏信息，如广告，相关推荐等-->
  32.         <ul>    <!--ul 无序列表 ol有序列表-->
  33.             <li>推荐信息1</li>
  34.             <li>推荐信息2</li>
  35.             <li>推荐信息3</li>
  36.             <li>推荐信息4</li>
  37.             <li>推荐信息5</li>
  38.         </ul>
  39.     </aside>
  40.     <aside><!--边栏信息，如广告，相关推荐等-->
  41.         <ol>    <!--ul 无序列表 ol有序列表-->
  42.             <li>推荐信息1</li>
  43.             <li>推荐信息2</li>
  44.             <li>推荐信息3</li>
  45.             <li>推荐信息4</li>
  46.             <li>推荐信息5</li>
  47.         </ol>
  48.     </aside>
  49.     <aside>
  50.         <section>
  51.             <h3>广告位招商</h3>
  52.         </section>
  53.     </aside>
  54.     <section>
  55.         <span>标签1</span>
  56.         <span>标签2</span>
  57.         <span>标签3</span>
  58.     </section>
  59.     <pre><!--按源码格式原样显示-->
  60.     满园春色关不住,
  61.     一支红杏出墙来.
  62.     </pre>
  63.     <p>你前女友结婚了请你, <br><!--换行(源码中的换行会被解析来空格)-->你会去吗?</p>
  65.     <time>2019-11-15 14:22:45</time><!--描述日期或时间-->
  66.     <br>
  67.     <!--换成span,你会发现是一样的,因为内容是时间,显然用time语义化更强,更容易被搜索引擎理解-->
  68.     <span>2019-11-15 14:22:45</span>
  70.     <p>HTML文档,是指采用超文本标记语言编写的结构化文档</p>
  71.     <!--缩写文本下有虚线,说明这是一段内容的缩写,完整信息在标签的title属性中-->
  72.     <p><abbr title="HyperText Markup Language">HTML</abbr><!--缩写-->文档,是指采用超文本标记语言编写的结构化文档</p>
  74.     <!--上标与下标-->
  75.     <p>
  76.         2<sup>3</sup><!--上标 sub下标-->
  77.         = 8
  78.         <br>
  79.         合肥<sub style="color: gray">中国发展最快的城市之一</sub>欢迎您
  80.     </p>
  82.     <!--地址, 默认会换行,并斜体显示-->
  83.     <footer>
  84.         联系地址:
  85.         <address>合肥市政务新区怀宁路999号</address><!--地址,通常用在`<footer>`中-->
  86.     </footer>
  87.     <!--删除线-->
  88.     <p>
  89.         猪肉原价: <s>58.88元</s>, 现价: <span>49.99元</span>
  90.         <br>
  91.         猪肉原价:
  92.         <del>58.88元</del>
  93.         , 现价: <span>49.99元</span>
  94.     </p>
  95. <!-- `<s>|<del>`\删除线, `<s>`无语义-->
  97.     <!--代码, 通常与pre配合-->
  98.     <p>
  99.         <code><!--显示代码块,通常与代码格式化插件配合,才能高亮关键字-->
  100.             var num = 100;
  101.             num += 5;
  102.         </code>
  103.     </p>
  105.     <p>
  106.         <!--    如果浏览器不支持该标,则显示内部文本: 已完成 50%-->
  107.         <progress value="50" max="100">已完成 50%</progress><!--进度条-->
  108.     </p>
  110.     <p>
  111.         <!--    强调:-->
  112.         <b>多看多写是最快的学习方法</b>
  113.         <strong>多看多写是最快的学习方法</strong>
  114. <!--strong加粗, `<b>`无语义-->
  115.         <br>
  116.         <i>程序员是地球上最聪明的一群人</i>
  117.         <em>程序员是地球上最聪明的一群人</em>
  118. <!--em斜体, `<i>`无语义-->
  119.     </p>
  121.     <!--标注-->
  122.     <p>
  123.         我是php中文网的讲师:
  124.         <mark>朱老师(Peter Zhu)</mark>
  125. <!--mark 亮标记, 默认为内容添加黄色背景-->
  126.     </p>
  128.     <!--引用-->
  129.     <p>
  130.         <q>引用文本</q>
  131.     </p>
  133.     <blockquote cite="https://www.php.cn">
  134.         <p>超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。
  135.             这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。
  136.             这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便</p>
  137.     </blockquote>
  138. </main>
  140. <!--页脚-->
  141. <footer> <!--一般位于网页的下面，是由友情链接, 联系方式, 备案号,版权等信息组成-->
  142.     <!--    友情链接,适合div-->
  143.     <div class="link">
  144.         <a href="">链接1</a>
  145.         <a href="">链接4</a>
  146.         <a href="">链接3</a>
  147.     </div>
  148. </footer>
  149. </body>
  150. </html>

2. 图片元素

  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="狗与猫"><!--img 定义图片 src图片地址 alt图片挂掉显示的内容-->
  11. <!--设置大小, 会自动等比缩放-->
  12. <img src="images/1.jpg" alt="狗与猫" width="300"><!--图片大小, 宽高只需设置一个,另一个会等比缩放, 推荐使用css设置-->
  13. <!--图片无法显示时-->
  14. <img src="images/11.jpg" alt="狗与猫" width="300">
  16. <!--png背景透明的好处-->
  17. <style>body {background-color:lightblue;}</style><!--给body设置背景颜色 style规定元素的行内样式-->
  18. <img src="images/2.jpg" alt="" width="200">
  19. <img src="images/3.png" alt="" width="200">
  20. </body>
  21. </html>

3. 链接元素

  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>
  12. <!--如果不是一个浏览器可解析的文档, 则会自动下载,不会打开,例如 zip 压缩包-->
  13. <a href="demo1.zip">下载文档</a>
  15. <!--href支持发电子邮件-->
  16. <a href="mailto: 498668472@qq.com">发邮件</a>
  18. <!--href支持拨打电话-->
  19. <a href="tel: 189****4567">致电客服</a>
  21. <!--target属性说明-->
  22. <!--默认在当前窗口打开href指定的页面-->
  23. <a href="https://www.php.cn">php中文网</a>
  24. <!--等价于-->
  25. <a href="https://www.php.cn" target="_self">php中文网</a>
  27. <!--在新的窗口中打开-->
  28. <a href="https://www.php.cn" target="_blank">php中文网</a>
  30. <!--父页面,顶层页面-->
  31. <!--因为当前页面没有父窗口,所以仍在当前窗口中打开-->
  32. <a href="https://www.php.cn" target="_parent">php中文网</a>
  34. <!--跳转到锚点元素所在位置-->
  35. <a href="#hello" target="_parent">锚点</a>
  37. <!--需要加上高度, 才能直观的看到效果, 注意url地址最后会有#hello-->
  38. <h1 id="hello" style="height: 1000px">Hello PHP中文网</h1>
  39. </body>
  40. </html>
  • <a href="..." target="..." title="...">: 链接元素,可以实现用户在不同的页面跳转的功能
  • href属性: 跳转的目标地址
属性 描述
href="url" 跳转的目标地址
href="mailto: 498668472@qq.com" 打开邮箱,发送邮件
href="tel:159****8988" 点击后,会询问用户是否要拨打电话
href="demo1.zip" 浏览器不能解析的文档, 会直接下载
  • target属性: 在哪个窗口打开新页面,默认当前窗口
属性 描述
target="__self" 当前窗口
target="_blank" 新窗口
target="_parent" 父窗口
target="_top" 顶层窗口
target="name" 指定名称的窗口
target="#anchor" 跳转到设置了锚点的元素所在位置

4. 细说列表

  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>item1</li>
  11.     <li>item2</li>
  12.     <li>item3</li>
  13.     ...
  14. </ul>
  16. <!--有序列表-->
  17. <ol start="">
  18.     <li>item1</li>
  19.     <li>item2</li>
  20.     <li>item3</li>
  21.     ...
  22. </ol>
  23. <!--自定义列表-->
  24. <dl>
  25.     <dt>title1</dt>
  26.     <dd>Detailed description information</dd>
  27.     <dt>title2</dt>
  28.     <dd>Detailed description information</dd>
  29.     <dt>title3</dt>
  30.     <dd>Detailed description information</dd>
  31. </dl>
  32. <p style="color: red">
  33. type, compace属性,html5不再支持
  34. </p>
  35. </body>
  36. </html>


序号 标签 描述
1 <ul>, <li> 无序列表
2 <ol>, <li> 有序列表
3 <dl>, <dt>,<dd> 自定义列表

5.细说表格

  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="75%" align="center">
  15.     <caption>
  16.         <h3>最新文章列表</h3>
  17.     </caption>
  19.     <thead bgcolor="lightgray">
  20.         <tr>
  21.             <th>ID</th>
  22.             <th>文章标题</th>
  23.             <th>文章分类</th>
  24.             <th>是否专题</th>
  25.             <th>阅读数</th>
  26.             <th>添加时间</th>
  27.             <th>状态</th>
  28.             <th>操作</th>
  29.         </tr>
  30.     </thead>
  32.     <tbody align="center">
  33.         <tr>
  34.             <td>1001</td>
  35.             <td align="left"><a href="">php中的对象序列化操作</a></td>
  36.             <td>php</td>
  37.             <td>是</td>
  38.             <td>2311</td>
  39.             <td>2019-10-23 11:34:22</td>
  40.             <td>已审核</td>
  41.             <td>
  42.                 <a href="">编辑</a> |
  43.                 <a href="">查看评论</a>
  44.             </td>
  45.         </tr>
  46.         <tr>
  47.             <td>1002</td>
  48.             <td align="left"><a href="">JavaScript原型继承的原理分析</a></td>
  49.             <td>javascript</td>
  50.             <td>是</td>
  51.             <td>983</td>
  52.             <td>2019-10-18 09:24:34</td>
  53.             <td>已审核</td>
  54.             <td>
  55.                 <a href="">编辑</a> |
  56.                 <a href="">查看评论</a>
  57.             </td>
  58.         </tr>
  59.         <tr>
  60.             <td>1003</td>
  61.             <td align="left"><a href="">css中的背景渐变是如何实现的?</a></td>
  62.             <td>css</td>
  63.             <td>是</td>
  64.             <td>6754</td>
  65.             <td>2019-11-09 15:09:12</td>
  66.             <td>已审核</td>
  67.             <td>
  68.                 <a href="">编辑</a> |
  69.                 <a href="">查看评论</a>
  70.             </td>
  71.         </tr>
  72.         <tr>
  73.             <td>1004</td>
  74.             <td align="left"><a href="">php怎么上传文件保存到本地?</a></td>
  75.             <td>php</td>
  76.             <td>是</td>
  77.             <td>6754</td>
  78.             <td>2019-01-29 10:29:22</td>
  79.             <td>已审核</td>
  80.             <td>
  81.                 <a href="">编辑</a> |
  82.                 <a href="">查看评论</a>
  83.             </td>
  84.         </tr>
  86.         <tr>
  87.             <td>1005</td>
  88.             <td align="left"><a href="">cmd怎么运行php文件?</a></td>
  89.             <td>php</td>
  90.             <td>是</td>
  91.             <td>6754</td>
  92.             <td>2019-04-19 14:11:32</td>
  93.             <td>已审核</td>
  94.             <td>
  95.                 <a href="">编辑</a> |
  96.                 <a href="">查看评论</a>
  97.             </td>
  98.         </tr>
  100.         <tr>
  101.             <td>1006</td>
  102.             <td align="left"><a href="">html中的下拉列表分组的使用</a></td>
  103.             <td>html</td>
  104.             <td>是</td>
  105.             <td>3421</td>
  106.             <td>2019-06-03 17:11:32</td>
  107.             <td>已审核</td>
  108.             <td>
  109.                 <a href="">编辑</a> |
  110.                 <a href="">查看评论</a>
  111.             </td>
  112.         </tr>
  114.         <tr>
  115.             <td>1007</td>
  116.             <td align="left"><a href="">Flex布局中的主轴对齐方式有哪些</a></td>
  117.             <td>css</td>
  118.             <td>是</td>
  119.             <td>6599</td>
  120.             <td>2019-10-29 15:21:02</td>
  121.             <td>已审核</td>
  122.             <td>
  123.                 <a href="">编辑</a> |
  124.                 <a href="">查看评论</a>
  125.             </td>
  126.         </tr>
  128.         <tr>
  129.             <td>1008</td>
  130.             <td align="left"><a href="">ThinkPHP6改变了什么</a></td>
  131.             <td>php</td>
  132.             <td>是</td>
  133.             <td>4381</td>
  134.             <td>2019-09-19 16:31:52</td>
  135.             <td>已审核</td>
  136.             <td>
  137.                 <a href="">编辑</a> |
  138.                 <a href="">查看评论</a>
  139.             </td>
  140.         </tr>
  142.         <tr>
  143.             <td>1009</td>
  144.             <td align="left"><a href="">Laravel框架artisan命令总结</a></td>
  145.             <td>php</td>
  146.             <td>是</td>
  147.             <td>7683</td>
  148.             <td>2019-10-23 18:01:22</td>
  149.             <td>已审核</td>
  150.             <td>
  151.                 <a href="">编辑</a> |
  152.                 <a href="">查看评论</a>
  153.             </td>
  154.         </tr>
  156.         <tr>
  157.             <td>1010</td>
  158.             <td align="left"><a href="">position绝对定位与固定定位</a></td>
  159.             <td>css</td>
  160.             <td>是</td>
  161.             <td>1221</td>
  162.             <td>2019-06-12 11:21:32</td>
  163.             <td>已审核</td>
  164.             <td>
  165.                 <a href="">编辑</a> |
  166.                 <a href="">查看评论</a>
  167.             </td>
  168.         </tr>
  169.     </tbody>
  171. </table>
  173. <p align="center">
  174.     <a href="">上一页</a> 
  175.     <a href="">1</a> 
  176.     <a href="">2</a> 
  177.     <a href="">3</a> 
  178.     <a href="">4</a> 
  179.     <a href="">...</a> 
  180.     <a href="">23</a> 
  181.     <a href="">24</a> 
  182.     <a href="">下一页</a>
  183. </p>
  184. </body>
  185. </html>

序号 标签 描述
1 <table> 定义表格, 必选
2 <tr> 定义表格中的行, 必选
3 <th> 定义表格头部中的单元格, 必选
4 <td> 定义表格主体中的单元格, 必选
  • 结构标签:
序号 标签 描述
1 <option> 定义表格标题, 可选
2 <thead> 定义表格头格, 只需定义一次, 可选
3 <tbody> 定义表格主体, 允许定义多次, 可选
4 <tfooter> 定义表格底, 只需定义一次, 可选
  • 常用属性:
序号 属性 所属标签 描述
1 border <table> 添加表格框
2 cellpadding <table> 设置单元格内边距
2 cellspacing <table> 设置单元格边框间隙
2 align 不限 设置单元格内容水平居中
2 bgcolor 不限 设置背景色

学习总结，以上基本是html常用的标签，及标签对应的属性，html的主体结构，在加上列表，表格，链接等标签，组成一个页面，需要多写，多练习，才能熟练的运用！

6. 表单文档抄写



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