HTML 文档结构和属性，元素、类、id 的样式规则

HTML 文档结构

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的第一个html文档</title>
    <style type="text/css">
      .h2class {
        color: yellow;
      }
      #h2id {
        color: red;
      }
    </style>
  </head>
  <body>
    <h2 id="h2id" class="h2class" style="color:green">hello world!</h2>
  </body>
</html>

html 文档元素

html 根元素
head 头元素
body 主体元素

html 元素的三大通用属性

属性	定义和用法
id	id 属性是 HTML 核心属性，用于为 HTML 元素定义唯一标识符（称为 ID）；在 HTML 文档中，ID 必须确保唯一；id 属性可用于在 JavaScript 或 CSS 中针对给定 ID 来改变 HTML 元素。
class	class 属性定义了元素的类名。class 属性通常用于指向样式表的类。class 属性可用于在 JavaScript 或 CSS 中针对给定 class 来改变 HTML 元素。
sytle	style 属性规定元素的行内样式;style 属性覆盖任何全局的样式设定

优先级排序： id < class < sytle

元素，类，id 不同级别的样式规则

css：层叠样式表

class 类样式：通过 .class 方式来定义 CSS 样式

<head>
  <style type="text/css">
    .h2class {
      color: green;
    }
  </style>
</head>
<body>
  <h2 id="h2id" class="h2class">hello world!</h2>
</body>

id 样式：通过 #id 方式来定义 CSS 样式

<head>
  <style type="text/css">
    #h2id {
      color: yellow;
    }
  </style>
</head>
<body>
  <h2 id="h2id" class="h2class">hello world!</h2>
</body>

元素样式：通过元素标签名方式来定义 CSS 样式

<head>
  <style type="text/css">
    h2 {
      color: blue;
    }
  </style>
</head>
<body>
  <h2 id="h2id" class="h2class">hello world!</h2>
</body>

优先级排序：元素样式 < id 样式 < class 样式

HTML DOM Document 对象

Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

语句	说明
document.querySelectorAll()	返回文档中匹配指定 CSS 选择器的所有元素，返回一个数组，可以通过索引访问，索引值从 0 开始，例： console.log(document.querySelectorAll(“p,h2”)) 获取所有的 p 标签和 h2 标签; document.querySelectorAll(“.title-class.bgcolor”)
document.getElementById()	通过 ID 获取元素
document.getElementsByName()	返回带有指定名称的对象的集合，返回一个数组，name 属性可能不唯一
document.getElementsByTagName()	返回带有指定标签名的对象的集合,返回一个数组
document.getElementsByClassName()	返回文档中所有指定类名的元素集合，返回一个数组。
document.URL	返回当前文档的 URL
document.title	返回当前文档的标题
document.documentElement	返回一个文档的文档元素

批改老师：

WJ

批改状态：合格

老师批语：写的很不错，继续加油！

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

HTML 文档结构和属性，元素、类、id 的样式规则

2020-06-12 15:00:47