2_基础标签.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body style=" height:2000px;">
  10. <!--
  11. 注释的快捷键ctrl+?
  12. 复制 ctrl+c 粘贴 ctrl+v
  13. -->
  14. <!-- 标题 h1-h6
  15. h1最大 h6最小 ,在一个页面中只有一个h1
  16. 加粗放大效果
  17. -->
  18. <h1>我是标题</h1>
  19. <h2>我是标题</h2>
  20. <h3>我是标题</h3>
  21. <h4>我是标题</h4>
  22. <h5>我是标题</h5>
  23. <h6>我是标题</h6>
  24. 我是文字哈哈哈或或或或或或或或或或或或
  25. <!--
  26. p 段落,一段文字,没有字体效果
  27. 段落之前有空隙
  28. -->
  29. <p>我是一段文字哈哈哈哈哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
  30. <p>我是一段文字哈哈哈哈哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
  31. <p>我是一段文字</p>
  32. <!-- 图片 img
  33. src 图片地址/路径
  34. 相对路径 下一级/ 上一级../
  35. 绝对路径 固定不变
  36. alt 属性 当图片加载不出来的时候,会显示alt中的内容
  37. 常见图片格式:jpg|jpeg
  38. png 透明图
  39. gif 动图
  40. -->
  41. <img src="https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF">
  42. <!-- <img src="img01.jpeg" alt="">
  43. <img src="../img02.jpeg" alt=""> -->
  44. <img src="../images/img01.jpeg" >
  45. <!-- <img src="../images/img01.jpeg" alt=""> -->
  46. <img src="../images/jd.gif" >
  47. <img src="../images/taobao.jpg" alt="这是一个logo">
  48. <!-- 换行 -->
  49. <br/>
  50. <!--
  51. a标签 超链接
  52. href属性 跳转地址
  53. target属性 _blank打开新窗口
  54. -->
  55. <a href="https://www.baidu.com/" >百度</a>
  56. <a href="https://www.baidu.com/" target="_blank">百度</a>
  57. <!-- html标签 按照语义化使用 -->
  58. <!-- 区块 用来划分布局 -->
  59. <div>我是一个div标签 主要用来布局</div>
  60. <!-- 线 -->
  61. <hr/>
  62. <!--
  63. span 可以用来选中文字 给文字单独添加样式 ,本身没有语义化 也没有样式
  64. i斜体
  65. stong 加粗
  66. -->
  67. <div>我是<strong>一个</strong>div标签 <span style="color:red">主要用</span>来布局hfgdhgfjhdgfjhgfhfh哈哈<i>哈哈</i>哈哈哈哈哈</div>
  68. <!-- 列表 无序列表 -->
  69. <ul>
  70. <li>HTML</li>
  71. <li>CSS</li>
  72. <li>Javascript</li>
  73. </ul>
  74. <ol>
  75. <li>HTML</li>
  76. <li>CSS</li>
  77. <li>Javascript</li>
  78. </ol>
  79. <!-- 注意:
  80. 1 加注释
  81. 2 缩进规范
  82. 3 标签是可以嵌套的
  83. 一般情况下大标签(块级元素)在外 小标签(多个占一行)在内
  84. 块级元素 自己占一行 h1-h6 p div ul li
  85. 行级元素 多个占一行 a span strong i
  86. img
  87. -->
  88. </body>
  89. </html>