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>
<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 |
返回一个文档的文档元素 |
