Html 标签

整体基本结构

<!DOCTYPE html> //文档的说明
<html> //标记文档的开始和结束
<head>                                          //文档的头部
<meta charset="UTF-8">                      //源信息标记
<title>Title</title>                        //标题标记
</head>
<body>                                          //主题内容

</body>
</html>

第一行为这个文档的类型声明。文档类型声明用于宣告后面的文档标记遵循哪个标准，例如，上面结构中的文档声明表示文档标记遵循 HTML5 标准。

<html lang="en">
{#语言为english#}

<html>标签为双标签，用以标记文档的开始和结束即 <html> 标记文件的起始位置，</html)>标文档的终止位置。<html>标签内容由两部分组成。
第一部分为头部标签<head>,在头部际签内又主要有 <meta>标签和<title>标签，<meta>标签是单标签，一般用来定义页面信息的名称、关键字、作等，其提供的信息是用户不可见的，而< title>标签为HTML 文件的标题。其显示在浏览器的标题栏，用以说明文件的用途。
第二部分为网页的主体。在编辑网页时把内容直接添加到 <body> 与 </body> 之间即可。

HTML 中，一个HTML 头页面中可以有多个 meta 元素。HTML中，标签名不区分大小写，<HTML>、<Html>和<html>作用一样。

原文链接：https://blog.csdn.net/qq_41573234/article/details/79937748

HTML <div> 标签

<div class=“name”>乔布斯</div>

这个就是一个div的盒子.有一个类名叫name(就是名字的意思)，

“乔布斯”就是一个人名

定义和用法

<div> 可定义文档中的分区或节（division/section）。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

用法

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。

可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

HTML <script> 标签

在html中，为了实现动态交互效果，我们经常会嵌入其它脚本语言（如：JavaScript）

script标签是html中很重要的一个标签之一，用的非常多，经常使用来嵌入脚本语言（如：JavaScript）或引入外部脚本文件（如：JavaScript文件）.

script标签定义及用法

在html中，script标签是使用来定义客户端脚本，经常使用来嵌入JavaScript或引入JavaScript文件，而JavaScript通常用于操作图像、表单的验证以及动态内容的更改。

script标签可以有内容，内容为脚本语言（如：JavaScript脚本）。该标签还可以使用src属性引入外部脚本文件（如：JavaScript脚本文件），如果使用了src属性，script标签内容必须是空的。

script标签语法格式

或<script type="脚本的MIME类型 src="外部脚本语言地址"></script>

语法格式说明：

type属性在html 4版本中是必须设置的，而在html 5中可以不用设置；设置了src属性，script标签必须是空的；

script type="text/javascript" src="{{ url_for('static', filename='js/start.js') }}"></script>

script标签属性

async：异步执行脚本，值：async（只适用于外部脚本，是html5新增属性）；

charset：脚本中使用的字符编码（只适用于外部脚本）；

defer：当页面已完成解析后，执行脚本，值：defer（只适用于外部脚本）

src：外部脚本的地址；

type：脚本的MIME类型；

xml:space：规定是否保留代码中的空白（html5不支持）。

HTML <link> 标签

链接一个外部样式表：

<link rel="stylesheet" type="text/css" href="theme.css" />

<link rel="stylesheet" href="{{ url_for('static', filename='css/start.css') }}">

定义和用法

提示和注释：

注释：link 元素是空元素，它仅包含属性。

注释：此元素只能存在于 head 部分，不过它可出现任何次数。

HTML <h1> 到 <h6> 标签

<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。

因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

<html>

<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>

</body>
</html>

<P> 标签

定义和用法

<p> 标签定义段落。

p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

<html>
<body>

<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>

<p>段落元素由 p 标签定义。</p> 

</body>
</html>

这是段落。

段落元素由 p 标签定义。

<em>标签

强调，斜体突出

<p>{{ '<em>hello</em>'  | safe }}</p>
<em>iwnfowv</em>

<li> 标签

定义和用法

<li> 标签定义列表项目。

<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。

<html>
<body>

<p>有序列表：</p>
<ol>
  <li>打开冰箱门</li>
  <li>把大象放进去</li>
  <li>关上冰箱门</li>
</ol>

<p>无序列表：</p>
<ul>
  <li>雪碧</li>
  <li>可乐</li>
  <li>凉茶</li>
</ul>

</body>
</html>

HTML 5 <tbody> 标签

定义和用法

定义一段表格主体（正文）。

使用 <tbody> 标签，可以将表格分为一个单独的部分。<tbody> 标签可将表格中的一行或几行合成一组。

虽然您可能想包括一个，甚至会在表格中包括两个或更多个 <tbody> 标签，但是我们建议最好在表格中没有 <tbody> 标签。

在 <tbody> 标签中，只有 <tr> 标签可以定义表格行。并且一旦定义，一个 <tbody> 标签就是表格中的一个独立的部分。例如不能从一个 <tbody> 跨越到另一个 <tbody> 中。

<td> 一个单元格

thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

<tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。

tbody 元素应该与 thead 和 tfoot 元素结合起来使用。

thead 元素用于对 HTML 表格中的表头内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

提示：在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观

<html>
<head>
<style type="text/css">
thead {color:green}
tbody {color:blue;height:50px}
tfoot {color:red}
</style>
</head>
<body>

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

</body>
</html>