HTML文档结构：

<!-- 声明浏览器解析文档类型 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 文档编码格式 -->
    <meta charset="UTF-8" />
    <!-- viewport表示可视窗口 -->
    <!-- width=device-width表示可示窗口宽度等于设备宽度，initial-scale=1.0表示无缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 页面标题 -->
    <title>demo</title>
    <!-- 放置class类属性，建议放在head -->
    <style type="text/css">
      /* 样式id选择器 */
      #p_id {
        color: wheat;
      }
      /* 类选择器 */
      .p_class {
        color: green;
      }
      .p_class_two {
        color: blue;
      }
      /* 样式标签选择器 */
      p {
        font-size: 28px;
      }
    </style>
  </head>
  <!-- 页面主体，展示给用户看的内容就放在body里面 -->
  <body>
    <p>
      这是一个段落标签,标签一般有三大属性，如id、name、class，当然也可以自定义一些特殊属性
    </p>
    <p id="p_id">id是标签三大属性之一，规范上，id在当前页面应该具有唯一性</p>
    <p name="p">name属性</p>
    <p class="p_class">
      class是标签类样式
    </p>
    <p class="p_class p_class_two">
      p_class_two属性可以覆盖前面p_class样式属性
    </p>
    <p style="color: red;">style是标签内元素属性，用来单独处理一个标签的样式</p>
  </body>
  <!-- javascript脚本语言 -->
  <script type="text/javascript">
    // windows表示整个文档对象
    //修改文档背景颜色
    document.body.style.backgroundColor = "wheat";
    //修改文档标题
    document.title = "这个是js修改的标题";
    // 根据id来获取对应p标签内容，注意：若存在多个重复id，则只取第一个id元素
    let p_id_content = document.getElementById("p_id").innerHTML;
    console.log(p_id_content); //打印p_id_content内容
    //根据class样式获取标签对象，因为class是可以有多个，所以需要用getElementsByClassName,返回的是一个对象集合
    let p_class_content = document.getElementsByClassName("p_class");
    console.log(p_class_content); //打印p_class_content内容
    //根据标签来获取对象
    let p_content = document.getElementsByTagName("p");
    console.log(p_content);
  </script>
</html>
HTML页面文档结构与HTML标签

HTML文档结构：

class类选择器优先级：

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

相关文章
