博客列表 >html文档结构、元素与属性的关系、语义化的结构元素、语义化的文本元素、链接元素、列表元素

html文档结构、元素与属性的关系、语义化的结构元素、语义化的文本元素、链接元素、列表元素

圈圈侠
圈圈侠原创
2020年07月29日 22:19:11357浏览

HTML文档结构、元素与属性的关系、语义化的结构元素、语义化的文本元素、链接元素、列表元素

  1. <!-- 告诉浏览器是一个html文档 -->
  2. <!DOCTYPE html>
  3. <!-- 当前语言 -->
  4. <html lang="en">
  5. <!-- 头元素: 它的内容不在页面中显示,这是给浏览器和搜索引擎使用 -->
  6. <head>
  7. <!-- 当前文档编码集 -->
  8. <meta charset="UTF-8" />
  9. <!-- viewport:视口,当前文档在浏览器中可以被用户看到的部分-->
  10. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  11. <!-- 文档头部元素title -->
  12. <title>HTML文档结构</title>
  13. <!-- 所有元素都要大小写,元素都要有结束元素,个别元素除外,例如:<a>、<img> -->
  14. </head>
  15. <!-- 文档主体元素body -->
  16. <body>
  17. <!-- 页眉header -->
  18. <header>
  19. <!-- 导航nav -->
  20. <nav>
  21. <!-- 链接元素a:可用于不同页面的跳转、下载文件、打电话、发邮件、锚点等地方使用 -->
  22. <a href="">网站首页</a>
  23. <a href="">合作案例</a>
  24. <a href="">新闻资讯</a>
  25. <a href="">关于我们</a>
  26. </nav>
  27. </header>
  28. <!-- 主体main -->
  29. <main>
  30. <!-- 图片引用元素img -->
  31. <img src="" alt="轮播图" />
  32. <!-- 时间元素time -->
  33. <time>时间</time>
  34. <!-- 地址元素address -->
  35. <address>地址</address>
  36. <!-- 删除线元素del -->
  37. <del>删除线</del>
  38. <!-- 进度条元素peogress -->
  39. <progress value="30" max="100"></progress>
  40. <!-- 通用块元素div:容器、盒子 -->
  41. <div>
  42. <!-- P是段落元素,
  43. id是唯一的,能不用就不用,但在两种情况下非要有用:锚点、表单元素控件
  44. 三大通用属性:p、id、class -->
  45. <p style="color: blue;">PHP中文网</p>
  46. <p id="name">PHP中文网</p>
  47. <p class="user">PHP中文网</p>
  48. </div>
  49. <div>
  50. <!-- 无序列表 列表可以嵌套-->
  51. <ul>
  52. <li>这是广告</li>
  53. <li>这也是广告</li>
  54. <li>这还是广告</li>
  55. </ul>
  56. <!-- 有序列表 列表可以嵌套-->
  57. <ol>
  58. <li>阿里巴巴</li>
  59. <ol>
  60. <li>阿里云</li>
  61. <li>淘宝</li>
  62. <li>天猫</li>
  63. </ol>
  64. <li>腾讯</li>
  65. <li>百度</li>
  66. </ol>
  67. </div>
  68. </main>
  69. <!-- 页脚footer -->
  70. <footer>
  71. <!-- 导航nav -->
  72. <nav>
  73. <p>
  74. <!-- 行内元素span,不能直接暴露,应该放在一个块元素中 -->
  75. <span>关于我们:</span>
  76. <a href="">baidu.com</a>
  77. <a href="">taobao.com</a>
  78. </p>
  79. </nav>
  80. </footer>
  81. <!-- 自定义列表:通常用来写页脚 -->
  82. <dl>
  83. <dt>地址:</dt>
  84. <dd>四川省成都市</dd>
  85. <dt>邮箱:</dt>
  86. <dd>445627221@qq.com</dd>
  87. </dl>
  88. </body>
  89. </html>

运行效果图

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