博主信息
博文 8
粉丝 0
评论 0
访问量 8960
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
HTML语义化标签
天后
原创
1236人浏览过

html语义化结构标签

1.HTML页面语义化结构

  • <h1>-<h6>:划分段落
  • <header>:页眉
  • <main>:主体
  • <aside>:边栏
  • <section>:展示
  • <footer>:页脚
  • <nav>:导航
  • <div>:通用容器

2.文本元素

<a>标签

  • href属性可用于链接、文件下载、发邮件、打电话、设置锚点等功能的实现,如下:
描述 举例
<a href="https://wwww.baidu.com target="_black"">点我百度</a> 点击链接后打开新窗口页面
<a href="demo.php" download="php的demo文件">点我下载文件</a> 下载文件,可预定义文件名称
<a href="tel:136100*****>点我打电话</a> 打电话(需要安装打电话插件)
<a href="mailto:123455@qq.com">点我发邮件</a> 发邮件(需要安装邮件插件)
<a href="#top">跳到锚点</a><h1 id="top" style="margin-top: 800px;">我是锚点</h1> 设置锚点(类似于网页的当中的”回到顶部“功能)

3.列表

  • 无序列表:<ul>
  • 有序列表:<ol>(start=”3”属性表示从”3“开始排序显示)

  • 自定义列表:<dl><dt><dd></dd><dd></dd><dd></dd></dt></dl>

4.示例效果图

  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>语义化结构-html页面结构</title>
  7. <style>
  8. html,
  9. body,
  10. header,
  11. aside,
  12. main,
  13. section,
  14. footer,
  15. td {
  16. /* 给元素添加边框 */
  17. border: 1px solid skyblue;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <h1 id="top" style="margin-top: 800px;">我是锚点</h1>
  23. <!-- 页头header -->
  24. <header>
  25. <tr>
  26. <td>首页</td>
  27. <td>视频</td>
  28. <td>手册</td>
  29. <td>工具</td>
  30. <td>联系我们</td>
  31. </tr>
  32. </header>
  33. <!-- 主体区main -->
  34. <!-- 边栏aside -->
  35. <aside style="border: 1px soild red;">
  36. <nav>html5</nav>
  37. <nav>css3</nav>
  38. <nav>php7</nav>
  39. <nav>mysql5</nav>
  40. </aside>
  41. <main>
  42. <section>
  43. <h2></h2>
  44. <!-- href值为URL,则跳转到地址页面 -->
  45. <a href="https://www.baidu.com">百度咨询</a>
  46. <ul>
  47. <li>我是谁</li>
  48. <li>我在哪</li>
  49. <li>我要去哪里</li>
  50. </ul>
  51. <button type="submit">提交</button>
  52. </section>
  53. <section>
  54. <h2></h2>
  55. <!-- href值为文件名,则用来下载文件 -->
  56. <a href="demo.php" download="php的demo文件">下载文件</a>
  57. <ol start="4">
  58. <li>我在学什么</li>
  59. <li>为什么要学</li>
  60. <li>学了能干嘛</li>
  61. </ol>
  62. </section>
  63. <section>
  64. <h2></h2>
  65. <!-- href值为电话号码,则用来打电话(需要安装打电话插件) -->
  66. <a href="tel:1361008****">打电话给我</a>
  67. </section>
  68. <section>
  69. <h2></h2>
  70. <!-- href值为邮件地址,则用来发邮件(需要安装发邮件插件) -->
  71. <a href="maito:123456@qq.com">给我发邮件</a>
  72. <form action="1.html" method="get">
  73. <textarea name="" id="" cols="30" rows="10" required></textarea>
  74. <button type="submit">提交</button>
  75. </form>
  76. </section>
  77. <!-- 锚点演示 a标签中的href属性值为"#+锚点id名"-->
  78. <a href="#top">跳到锚点</a>
  79. <!-- <h1 id="top" style="margin-top: 1000px;">我是锚点</h1> -->
  80. </main>
  81. <!-- 页脚footer -->
  82. <footer style="text-align: center;">
  83. <tr>
  84. <td>首页</td>
  85. <td>备案号:sifsj</td>
  86. <td>联系我们:1361008****</td>
  87. </tr>
  88. </footer>
  89. </body>
  90. </html>

HTML语义化标签总结

  • HTML语义化结构重新定义了HTML标签,方便了开发中的使用,对网页结构有更明显的理解
  • 标签的不同属性值决定了其不同的功能
批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:挺好的
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学