1. HTML页面文档结构

标签元素解释
- <DOCTYPE html> 通知浏览器这是一个HTML5页面
- <html>...</html> 根标签，所有的HTML内容都必须写在标签内
- <html lang="en"> 通知搜索引擎html文档使用的编程语言
- <head>...</head> 宫浏览器和搜索引擎使用，描述字符编码集，视口与页面标题
- <meta charset="UTF-8"> 通知浏览器html文档编写语言所属字符编码集
- <meta name=""viewport" content="..."> 下面三行对其解读，
1. name="viewport" 设置视口如何显示页面
2. initial-scale=1.0 设置页面初始绽放比例，1.0表示原样显示
3. width="device-width" 表示可视区域宽度为设备宽度
- <title>...</title> 显示在浏览器标签上的文本，指定当前页面的标题
- <body...></body> 页面主体内容，即用户能看到的文档内容
-  用来描述标签或功能用途，不会在html页面展示，只出现在源代码中

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

id属性：获取页面唯一元素，由用户保证当前页面的唯一性，浏览器不检查，为什么要保证唯一性，因为在js获取其属性时只会获取到检测的第一个元素，我通过下面例子来演示：

<body>
    <h3 id="demo">hello world</h3>
    <p id="demo">hello friends</p>
</body>

<script>
    console.log(document.getElementById("demo").innerHTML);
    //输出hello world
</script>

在上面案例中，在控制台中只会输出 hello word,不会输出 hello friends，因为js只会获取到它检测的第一个id，所以用户自己需要保证id属性的唯一性

<body>
   <h3 class="text">hello world</h3>
   <p class="text">hello friends</p>
</body>

<script>
console.log(document.getElmentsByClassName("text"));
//控制台会得到一个HTML的集合，含有2个元素
</script>

<style>
   .text{
        background-color:red;
  /*通过class属性会把<h3>和<p>两个元素的背景色都改为红色*/
   }
</style>

在上面案例中，js获取到class属性的时候返回了一个集合，css获取class属性的时候也把两个元素的背景色都改了，所以可以看出class属性表示一类属性，是一个集合，可以把它放在不同的元素中，能使不同的元素具有相同的特征

<body>
    <h3 style="color:red;">hello world</h3>
    <p>hello friends</p>
</body>

上面案例中，只有 hello world 的字体颜色变为了红色，而<p>标签中的内容颜色不变

<style>
    p{
    background-color:yellow;
    }
</style>

<body>
    <p>hello world</p>
</body>

上面案例中，通过css直接定义元素的样式

<style>
    .bgcolor{
    background-color:yellow;
    }
</style>

<body>
    <p class="bgcolor">hello world</p>
</body>

上面案例中，通过类样式 .class 的方式来定义样式

<style>
    #hello{
    background-color:yellow;
    }
</style>

<body>
    <p id="hello">hello world</p>
</body>

<body>
    <p class="hello" id="world">hello world</p>
</body>

<style>
    p {
    color:red;/*红色*/
    }
    .hello {
    color:blue;/*蓝色*/
    }
    #world {
    color:yellow;/*黄色*/
    }
</style>

上面案例中：

由此看出，id属性>class属性>元素样式

注意：还有一种情况，当设置了style内联样式时会发生什么变化呢？

例：在 p 标签内加入内联样式，颜色为绿色green

<p class="hello" id="world" style="color:green;">hello world</p>

最后，我们可以看到，文本颜色变为了绿色，所以可以总结出：