一.html页面的文档结构

1.HTML5 ⽂档结构

代码	描述
<!DOCTYPE html>	通知浏览器这是⼀个 HTML5 ⽂档,应始终写在第⼀⾏
<html>…</html>	根标签,或叫根元素,整个 hmtl ⽂档内容都必须写到这对标签中
<html lang="en">	通知搜索引擎 html ⽂档使⽤的编写语⾔,如果是中⽂建议改成:<html lang="zh-CN">
<head>..</head>>	供浏览器和搜索引擎使⽤,描述字符编码集,视⼝与页⾯标题,⽤户并不感兴趣
<mate>	设置页⾯元素数据, 所谓元数据, 就是描述某种特定信息的数据
<meta charset="UTF-8">	通知浏览器 html ⽂档编写语⾔所属的字符编码集,最流⾏的是`UTF-8`,已成⾏业标准
<meta name="viewport" content="..." />	下⾯三⾏是对它的解读
name=”viewport”	设置视⼝(即可视区屏幕)如何显示这个页⾯, 例如是否允许缩放这个页⾯
initial-scale=1.0	设置页⾯初始绽放⽐例,`1.0`表示原样 1:1 显示,不允许有任何绽放
<title></title>	显示在浏览器标签上的⽂本, 指定当前⻚⾯的标题, 这个标签对 SEO ⾮常重要
<body>…</body>	页面主体，用户主要看到的内容主要写在这里面
<!— 注释内容 ->	<!— 注释内容 ->

2.一个简单的HTML页面代码

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML文档结构</title>
  </head>
  <body>
    <h1>大家好！我是PHP中文网第12期的学员小陆</h1>
    <span>这是一个span元素</span>
    <p>这是一个P元素<strong>p元素中的一个加重字</strong></p>
  </body>
</html>

3.效果图

小结一个简单的html页面主要由

<html>
<head>
<title>标题</title>
</head>
<body>
内容
</body>
</html>

组成

二、html元素的三大属性

1.id id选择器，具有唯一性，浏览器不检查，需要用户自行约束

2.class 类选择器，样式优先级小于标签中style属性的样式

3.style 在元素标签中设置样式，优先级最高

为比较他们的优先级我们来看一段代码

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>html元素的三大属性</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>