1.html文件结构

<!-- 文档类型声明 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="搜索关键字">
    <meta name="description" content="描述">
    <title>标题</title>
    <link rel="icon" href="小logo地址">
</head>

<body>
</body>
</html>

2.注释

3.文本标签

<div>标签
<div>元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。
其他块级标签例如：<h1>, <p>, <pre>, <ul>, <ol>, <table>。

<span>标签
<span> 元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。<span> 与 <div> 元素很相似，但 <div> 是一个块元素而 <span> 则是行内元素
其他内联标签例如：<i>, <b>, <del>, <ins>, <td>, <a>。

<h1> - <h6>标签
HTML <h1>–<h6> 标题 (Heading) 元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。

<p>标签
HTML <p>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p> 是块级元素。

<pre>标签

区别于p标签会保留预定格式
HTML <pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)

<br>标签回车换行
HTML <br> 元素在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要

<hr>标签水平线
HTML <hr> 元素表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。

在 HTML 的早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，但目前被定义为语义上的，而不是表现层面上。所以如果想画一条横线，请使用适当的 css 样式来修饰。

<em>、<i>标签文字斜体
HTML 元素 <i> 用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示。

<strong>、<b>标签粗体
HTML 提醒注意（Bring Attention To）元素（<b>）用于吸引读者的注意到该元素的内容上（如果没有另加特别强调）。这个元素过去被认为是粗体（Boldface）元素，并且大多数浏览器仍然将文字显示为粗体。尽管如此，你不应将 <b> 元素用于显示粗体文字；替代方案是使用 CSS font-weight 属性来创建粗体文字。

<del>、<s>标签文字删除线
HTML 的<del>标签表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。<ins>标签的作用恰恰于此相反：表示文档中添加的内容。

<ins> 、<u>标签文字下划线
HTML <ins> 元素定义已经被插入文档中的文本

4.图片

5.音频与视频

    <h2>Audios</h2>
    <audio controls src="/audios/bgm.mp3">无法播放时显示这个文字</audio>
    <!-- 如果能够播放的话，浏览器就会试图去加载第一个 source 元素；
         如果不行，那就退而求其次去加载第二个。 -->
    <audio controls>
        <source src="/audios/sound1.mp3" type="audio/mpeg">
        <source src="/audios/sound2.mp3" type="audio/mpeg">
    </audio>

    <video width="300" controls src="/videos/video1.mp4"></video>
    
    <video width="300" controls>
        <source src="/videos/video2.mp4" type="video/mp4">
        <source src="/videos/video1.mp4" type="video/mp4">
    </video>

6.超链接

7.表单

    <form action="">
        <!-- label绑定某一个输入元素,通过id绑定 -->
        <label for="username"></label>
        <input placeholder="用户名" type="text" maxlength="10" minlength="3" name="username2" id="username">
        <br>

        <label for="age">年龄</label>
        <input required type="number" name="age2" id="age">

        <br>
        <label for="email">邮箱</label>
        <input type="email" name="email2" id="email">

        <br>
        <label for="password">密码</label>
        <input type="password" name="password1" id="password">

        <!-- 单选如果几个name相同只能选其一-->
        <br>
        <label for="cpp">cpp</label>
        <input type="radio" name="lang" value="cpp" id="cpp">

        <br>
        <label for="java">java</label>
        <input type="radio" name="lang" value="java" id="java">

        <br>
        <label for="python">python</label>
        <input type="radio" name="lang" id="python" id="python">

        <!-- 文本框 -->
        <br>
        <label for="resume">用户名</label>
        <textarea name="resume" id="resume" cols="30" rows="10"></textarea>

        <br>
        <label for="lan">请选择</label>
        <select name="lan" id="lan">
            <option value="cpp">cpp</option>
            <option selected value="Java">Java</option>
            <option value="python">Python</option>
        </select>
        <br>
        <!-- 提交后会在url有所显示前提是name不能必须要有 -->
        <button type="submit">提交</button>
    </form>

8.列表（可以嵌套）

无序列表

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

有序列表

<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>

定义列表

  <dl>
        <dt>列表项</dt>
        <dd>列表描述</dd>  
   </dl>

9.表格

<table>
        <!-- 标题 -->
        <caption>成绩单</caption>
        <!-- 表头 -->
        <thead>
            <!-- table row（表格行） -->
            <tr>
                <!-- table header cell表头单元格 -->
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <!-- table data（表格资料） -->
                <td>cjz</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
        </tbody>
    </table>

10.语义标签

    <!-- 等价 -->
    <div class="header"></div>
    <header></header>

    <div class="nav"></div>
    <nav></nav>

    <div class="content"></div>
    <!-- 一块 -->
    <section></section>
    <!-- 文章区 -->
    <article></article>
    
    <section>
        <h4>图片</h4>
        <figure>
            <img src="图片" width="" alt="">
            <figcaption>图片描述</figcaption>
        </figure>
    </section>

    <section>
        <h4>文章</h4>
        <article>
            <h5>背影</h5>
            <p>轻轻的我来了，我又轻轻的走了</p>
        </article>
    </section>

    <div class="footer"></div>
    <footer></footer>