01-hello.html 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>这是标题</title>
  6. <!-- html 基本结构 CSS 样式 JS 动态效果 -->
  7. <!-- html的代码写在body 标签里面 , CSS 的样式代码写在style标签中 -->
  8. <!-- 如果要找id 的标签 #id 值{} class .class值 -->
  9. <style>
  10. #div1 {
  11. background-color: green;
  12. }
  13. .clz{
  14. background-color: yellow;
  15. }
  16. #zjl{
  17. height: 100px;
  18. width: 100px;
  19. background-color: blue;
  20. color: blueviolet;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <!--我是在html-->
  26. <!--br 这个标签是换行-->
  27. 我是html <br/>
  28. <!--在浏览器中我的名字 要以红色字体展示出来-->
  29. <!--font 操作字体标签 标签当中一般是可以去设置一些属性的 比如在font 有color属性 值是red -->
  30. 名字 : <font color='red'>范佳龙</font>
  31. <!--
  32. title : 标题, 一般很少使用, 当鼠标光标移动到元素上就会展示出来title 内容
  33. id和class : 作用都是为了定位到元素的位置,
  34. 为什么要定位呢? 因为不定位找不到元素, 找不到元素就无法操作元素
  35. id和class有什么区别呢? id 不可以重复 , class 可以重复
  36. style : 可以设置CSS 样式
  37. 注意: 写CSS 样式地方有两个一个是 head 当中style 标签中, 一个直接在标签当中style 属性写
  38. 如何选择: 简单的css 样式直接在属性当中, 复杂的样式在style 标签当中写
  39. -->
  40. <div class="clz" title="标题" style="">林俊杰</div>
  41. <!--div 效果他可以自动换行-->
  42. <!--需求想要让内容为5555 的div 标签北京颜色变成绿色-->
  43. <div id="div1">5555</div>
  44. <div class="clz">黄飞鸿</div>
  45. <!--要将黄飞鸿和林俊杰 背景颜色变成黄色-->
  46. <!--我想让周杰伦这个DIV 宽度100 高度100 背景颜色蓝色 , 字体颜色黑色 -->
  47. <div id="zjl" >周杰伦</div>
  48. </body>
  49. </html>