一、html 文档结构
一个简单的 html 页面如下
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>20200611</title></head><body><h1>PHP小刚的日志</h1><span>这是一个span元素</span><p>这是一个P元素<strong>p元素中的一个加重字</strong></p></body></html>
主要由 4 个部分组成
<!DOCTYPE html>html文件的文档类型，用于声明html文本类型。<html>...</html>html页面代码根元素标签，包含头部标签与主体内容。<head>...</head>html页面代码头部元素标签，包含meta、tittle等头部元素，多用于seo优化，视口设置等。<body>...</body>html页面代码主体元素标签，包含浏览器主窗口中的元素。
注意：这里的 “元素” 与 <body>…</body> 中的 “元素” 是不一样的概念。
结构如下图
这几个部分也共同组成了浏览器的
javascript全局对象window，结构如下
ps:浏览器集成了javascript解释器。
二、html元素属性与元素获取方式
html页面
<body>...</body>中的元素标签都具有3个通用属性
idid选择器，具有唯一性，浏览器不检查，需要用户自行约束class类选择器，样式优先级小于标签中style属性的样式style在元素标签中设置样式，优先级最高
下面我们来看一段html代码
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>20200611</title></head><style>h1 {color: green;}#h1-id {color: blue;}.h1-class {color: red;}</style><body><h1 id="h1-id" class="h1-class" style="color: yellow;">PHP小刚的日志1</h1><h1 id="h1-id" class="h1-class">PHP小刚的日志2</h1><h1 class="h1-class">PHP小刚的日志3</h1></body></html>
实际效果图 
由此可知样式优先级：
style中设置的样式 > css中#id样式 > css中.class样式 > 标签选择器样式
获取html元素方式
window.documentdocument对象window.document.URLdocument对象中的url属性，URL大写window.document.doctypedocument的类型window.document.headdocument对象中head属性
…由于
window是全局对象，以上代码可以省略window，那么，在浏览器控制台输出 document对象我们可以这么写console.log(docement.documentElement)输出html对象console.log(document.body)输出body对象console.log(document.doctype)输出html类型字符串console.log(document.styleSheets)输出样式表console.log(document.scripts)输出脚本对象console.log(document.currentScript)输出当前正在执行的脚本
…
注意：这种方式无法获取到body中的标签，如<h1>、<p>、<div>、<ul>等要获取body中的标签元素对象需要使用到javascript中的方法
getElementById()通过id的值获取getElementsByClass()通过class的值获取，注意Elements的复数区别getElementsByTagName()通过元素名称获取，如<h1>中的h1
…在控制台中输出
console.log(document.getElementById("id-name"))用id选择器获取元素console.log(document.querySelector("#h1-class"))用css选择器获取元素
…
来看部分javascript方法样例// 通过id获取元素，总返回第一个function eleid() {const ele = document.getElementById("h1-id");console.log(ele);return;}// 通过class获取元素，返回一个集合function elesclass() {var els = document.getElementsByClassName("h1-class");console.log(els[0]);console.log(els[1]);console.log(els[2]);return;}// 通过标签获取元素，返回一个集合function elestag() {var elst = document.getElementsByTagName("h1");console.log(elst);return;}// 通过css样式获取元素function elescss() {// 获取满足条件的第一个var elscssid = document.querySelector("#h1-id");// 获取满足条件的所有var elscssclass = document.querySelectorAll(".h1-class");console.log(elscssid);console.log(elscssclass);return;}
可以使用html按钮点击事件来调用它们
<button onclick="eleid()">eles</button><button onclick="elesclass()">els</button><button onclick="elestag()">elstag</button><button onclick="elescss()">elscss</button>
总结：
对于html结构有清晰的认识，各个部分的作用是什么
认识css样式是如何生效的
样式优先级顺序要符合要求，避免重复设置样式
通过javascript脚本获取元素时，对象不同，获取方式不同
在html中的元素输出要注意单数复数问题，这取决于获取结果的数量
