HTML5 文档结构介绍&html元素的三大通用属性
标签元素解释
<!DOCTYPE html>通知浏览器这是一个 HTML5 文档,应始终写在第一行<html>...</html>根标签,或叫根元素,整个 hmtl 文档内容都必须写到这对标签中<html lang="en">通知搜索引擎 html 文档使用的编写语言,如果是中文建议改成:<html lang="zh-CN"><head>...</head>供浏览器和搜索引擎使用,描述字符编码集,视口与页面标题,用户并不感兴趣<meta>设置页面元素数据, 所谓元数据, 就是描述某种特定信息的数据<meta charset="UTF-8">通知浏览器 html 文档编写语⾔所属的字符编码集,最流行的是UTF-8,已成行业标准<meta name="viewport" content="..." />下面三行是对它的解读name="viewport"设置视⼝(即可视区屏幕)如何显示这个页面, 例如是否允许缩放这个页面initial-scale=1.0设置视口初始绽放比例,1.0表示原样 1:1 显示,不允许有任何绽放<title>显示在浏览器标签上文本, 指定当前页面的标题, 这个标签对 SEO 非常重要<body>...</body>页面主体内容,允许或希望用户的内容都应该写到这里,用户也只对这⾥的内容感兴趣<!-- 注释内容 ->注释用来描述标签功能或用途,它的内容不要出现在显示的网页中, 只会出现在 html 源代码中
html元素的三大属性
id属性：（id选择器）由用户保障当前页面唯一性，浏览器不做检查，js获取属性时只会获取到检测的第一个元素。
class属性：（类选择器）类属性，返回多个具有共同特征的元素集合。
style属性：（标签选择器）内联样式，将覆盖任何全局的样式设定。
id选择器>类选择器>标签选择器
HTML DOM 事件对象 console.log()
console.log() 方法用于在控制台输出信息。该方法对于开发过程进行测试很有帮助。
相比alert他的优点是：
可以看到结构话的东西，如果是alert，淡出一个对象就是[object object],但是console能看到对象的内容。
console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。
console里面的内容非常丰富，你可以在控制台输入：console，就可看到：
script标签中记录的就是javascript的脚本代码
使用console.log()指令将代码执行结果发送到浏览器控制台显示
- 查看全局对象window
console.log(window);
- 查看当前HTML文档
console.log(window.document);
查看当前文档URL地址
console.log(window.document.URL);console.log(document.URL);
查看当前文档类型
console.log(document.doctype);
查看当前根元素HTML
console.log(document.documentElement);
- 查看当前头元素
console.log(document.head);
- 查看当前编码
console.log(document.charset);
- 查看当前title
console.log(document.title);
- 修改当前titil
document.title = "如何使用JS脚本访问HMTL";
- 查看当前主体body
console.log(document.body);
- 修改当前主体body
document.body.style.backgroundColor = "red";
- 查看样式表css
console.log(document.styleSheets);
根据索引查看第一个样式表类型
console.log(document.styleSheets[0].type);
获取当前正在被执行的js脚本
console.log(document.currentScript);