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>

运行结果

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：看上去应该是没有完成, 当天的作业, 尽可能写到一个博客中

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

HTML文档结构

2020-08-01 00:47:49