HTML文档结构

<!DOCTYPE html>是HTML5标准网页声明，声明位于文档中的最前面的位置.
<html lang="en">...</html>根标签，代表整个HTML文档，lang属性是language的简写，表示当前页面的主要语言。
<head>...</head>头元素标签，他的内容不再页面中显示。
<mate>标签，提供了 HTML 文档的元数据（描述HTML的数据，比如，作者，和描述文档的重要关键词）。<meta charset="UTF-8" /> 当前文档字符编码集。
<meta name="viewport" content="width=device-width, initial-scale=1.0" />中的name=“viewport”，viewport视口，表示当前文档在浏览器中被用户看到的内容。initial-scale=1.0表示不缩放，width=device-width，当前浏览器设备宽度。
<title>标签，可以用来给 html 文档添加一个标题，一个 HTML 文档中不能有一个以上的 <title> 元素。

4.<body></body> 主体标签，通常我们在浏览器中看到的内容体都是在该标签内的。该标签元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 段落元素 用‘<p>...</p>’标签来描述 -->
    <!-- block是块元素 -->
    <style>
      p {
        color: blue;
        display: block;
      }
    </style>
    <p style="color: red;">好好学习PHP</p>
    <!-- 三大通用属性有 style ，id ，class -->
    <p>哈哈哈哈</p>
    <!-- 无序列表 -->
    <ul>
      <li>hallo php</li>
      <li>hallo java</li>
      <li>hallo pathon</li>
    </ul>
    <!-- 换行符</br>,换行符属于单标签 -->
    <br />
    <!-- 有序列表  -->
    <ol>
      <li>你好 PHP</li>
      <li>你好 java</li>
      <li>你好 pathon</li>
    </ol>
  </body>
</html>

运行结果：

    <!-- html：结构化使用标签描述文档 -->
    <div style="margin-left: 50px; font-size: 50px;">
      <p>
        <span>
          <a href="https://baidu.com">百度</a>
        </span>
      </p>
    </div>

运行结果：

  <!-- 通用的块元素<div>...</div> -->
    <div style="background-color: orange; margin-left: 50px; height: 300px;">
      <!--通用的行内元素 <span>..</span> -->
      <span style="margin-right: 100px; background-color: orchid;"
        >我是行级元素1</span
      >
      <span style="background-color: greenyellow; margin-right: 100px;"
        >我是行级元素2</span
      >
      <!-- <a>...</a>标签也是行内元素 -->
      <a href="">百度</a>
      <!-- <p></p>标签是段落元素 -->
      <p>小白</p>
      <img src="lbxx.jpg" alt="" />
    </div>

运行结果

HTML文档结构

HTML文档结构

相关文章