html文档结构与html元素三大分类与不同级别的样式规则 -

html文档结构

html
- head
  - meta
  - title
- body
  - div
    ……

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html文档结构</title>
</head>
<body>
    <div>
      内容区域
    </div>
</body>
</html>

对象

含义
所有事物皆可为对象。例如：显示浏览器窗口window，html文档document
利用js获取对象（可以利用控制台调试）

返回当前窗口对象
```
console.log(window)
```

返回html对象，

console.log(window.document)

可以省略window

console.log(document)

查看当前url

console.log(document.URL)

HTML三大属性

id属性：获取页面中的唯一元素
js获取方式
```
document.getElementById('id')
```
css获取方式
```
#id{color:#aaa;}
```

class属性：获取页面中的一类元素
js获取方式

document.getElementsByClassName('class')

推荐用法

document.querySelectorAll('.class')

css获取方式

.class{#aaa;}

style属性：设置某个元素的内联样式
样式优先级：
- 元素级 < class类级 < id级 < 脚本级
- 外联样式文件 < style标签 < style内联属性