Blogger Information
Blog 6
fans 0
comment 0
visits 4774
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML页面文档结构与HTML标签
遇见
Original
659 people have browsed it

HTML文档结构:

  1. <!-- 声明浏览器解析文档类型 -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <!-- 文档编码格式 -->
  6. <meta charset="UTF-8" />
  7. <!-- viewport表示可视窗口 -->
  8. <!-- width=device-width表示可示窗口宽度等于设备宽度,initial-scale=1.0表示无缩放 -->
  9. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  10. <!-- 页面标题 -->
  11. <title>demo</title>
  12. <!-- 放置class类属性,建议放在head -->
  13. <style type="text/css">
  14. /* 样式id选择器 */
  15. #p_id {
  16. color: wheat;
  17. }
  18. /* 类选择器 */
  19. .p_class {
  20. color: green;
  21. }
  22. .p_class_two {
  23. color: blue;
  24. }
  25. /* 样式标签选择器 */
  26. p {
  27. font-size: 28px;
  28. }
  29. </style>
  30. </head>
  31. <!-- 页面主体,展示给用户看的内容就放在body里面 -->
  32. <body>
  33. <p>
  34. 这是一个段落标签,标签一般有三大属性,如id、name、class,当然也可以自定义一些特殊属性
  35. </p>
  36. <p id="p_id">id是标签三大属性之一,规范上,id在当前页面应该具有唯一性</p>
  37. <p name="p">name属性</p>
  38. <p class="p_class">
  39. class是标签类样式
  40. </p>
  41. <p class="p_class p_class_two">
  42. p_class_two属性可以覆盖前面p_class样式属性
  43. </p>
  44. <p style="color: red;">style是标签内元素属性,用来单独处理一个标签的样式</p>
  45. </body>
  46. <!-- javascript脚本语言 -->
  47. <script type="text/javascript">
  48. // windows表示整个文档对象
  49. //修改文档背景颜色
  50. document.body.style.backgroundColor = "wheat";
  51. //修改文档标题
  52. document.title = "这个是js修改的标题";
  53. // 根据id来获取对应p标签内容,注意:若存在多个重复id,则只取第一个id元素
  54. let p_id_content = document.getElementById("p_id").innerHTML;
  55. console.log(p_id_content); //打印p_id_content内容
  56. //根据class样式获取标签对象,因为class是可以有多个,所以需要用getElementsByClassName,返回的是一个对象集合
  57. let p_class_content = document.getElementsByClassName("p_class");
  58. console.log(p_class_content); //打印p_class_content内容
  59. //根据标签来获取对象
  60. let p_content = document.getElementsByTagName("p");
  61. console.log(p_content);
  62. </script>
  63. </html>

class类选择器优先级:

1.style内联样式>id选择器>class类名选择器>标签名称选择器

Correcting teacher:WJWJ

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