html文档结构、html元素的三大通用属性、元素，类，id不同级别的样式规则

1.html页面的文档结构

        <!doctype html>
        <!--通知浏览器这个一个html5文档-->
        <html lang="en">
        <!--html 根元素-->
        <head>
        <!--    head 头元素-->
            <meta charset="UTF-8">
            <meta name="viewport"
                  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <!--    meta:元数据-->
        <!--    name="viewport" : 设置视口（可视区域屏幕）如何显示这个页面-->
        <!--    width=device-width ：表示宽度是设备屏幕的宽度-->
        <!--    initial-scale=1.0：表示初始的缩放比例-->
        <!--    minimum-scale=0.5：表示最小的缩放比例-->
        <!--    maximum-scale=2.0：表示最大的缩放比例-->
        <!--    user-scalable=yes：表示用户是否可以调整缩放比例-->
            <title>Document</title>
        <!--    title : 当前页面标题-->
        </head>
        <body>
        <!--body : 主题元素-->
            <div>html页面的文档结构</div>
        <!--div : 标签-->
            <style></style>
            <script>
                // 使用console.log()指令将代码执行结果发送到浏览器控制台显示
                // 全局window(通常省略)
                console.log(window);
                // document当前的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);
                document.title = "如何使用JS脚本访问HMTL";
                // 主体body
                console.log(document.body);
                document.body.style.backgroundColor = "wheat";
                // 样式表css 索引的使用
                console.log(document.styleSheets);
                console.log(document.styleSheets[0].type);
                // js脚本
                console.log(document.scripts);
                // 获取当前正在被执行的js脚本
                console.log(document.currentScript);
            </script>
        </body>
        </html>

2.html元素的三大通用属性

1. id属性： 由用户保证它在当前页面的唯一性，浏览器并不检查， 应该专用于获取唯一元素
2. class属性: 类属性，返回多个具有共同特征的元素集合
3. style属性: 设置当前元素对象的样式

3. 理解元素，类，id不同级别的样式规则

id, class：用在 css, js 中获取一个或多个元素对象
style: 用来设置某个元素的具体样式的
style优先级：id > class >tag

获取元素的几种方法：
let x = document.getElementById(“id”)；
let x = document.getElementsByClassName(“class”)；
let x = document.getElementsByTagName(“p”);
let x = document.querySelector(“.class”);
let x = document.querySelector(“#id”);

1.html页面的文档结构

2.html元素的三大通用属性

3. 理解元素，类，id不同级别的样式规则

相关文章