HTML结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML笔记</title> <!-- title包裹页面标题 -->
</head>

<body>
    <!-- body包裹主要内容 -->
</body>

</html>

标题与段落

<h1>一级标题</h1>
<h6>六级标题</h6>
<p>段落文本</p>
<p><i>斜体文本</i></p>
<p><em>强调文本</em></p>
<p><b>粗体文本</b></p>
<p><strong>重要文本</strong></p>
<p><mark>高亮文本</mark></p>
<p><s>删除线文本</s></p>

文档与网站架构

网站架构

<header>页眉</header> <!-- 在body标签下为全局页眉。在article或section标签下为部分页眉 -->
<nav>导航</nav>
<main>主内容</main>
<article>文章</article>
<section>分区</section>
<aside>简介</aside>

无语义元素

<div class="..."> <!-- div标签 -->
element
</div>
<span class="..."> <!-- span标签 -->
element
</span>

换行与水平分割线

<br> <!-- 换行 -->
<hr> <!-- 水平分割线 -->

列表

无序列表

<ul>
    <li>北京</li>
    <li>上海</li>
    <li>深圳</li>
</ul>
  • 北京
  • 上海
  • 深圳

有序列表

<ol>
    <li>第1个</li>
    <li>第2个</li>
    <li>第3个</li>
</ol>
  1. 第1个
  2. 第2个
  3. 第3个

列表嵌套

<ul>
    <li>
        你知道我要说什么：
        <ol> <!-- 嵌套 -->
            <li>第1个</li>
            <li>第2个</li>
        </ol>
    </li>
</ul>
  • 你知道我要说什么：
    1. 第1个
    2. 第2个

描述列表

<dl>
    <dt>梨花猫</dt>
    <dd>
        梨花猫是一种神奇的动物。
    </dd>
</dl>
梨花猫
梨花猫是一种神奇的动物。

文本格式进阶

缩略语

<p>你知道<abbr title="超文本标记语言">HTML</abbr>是什么吗？</p>

你知道HTML是什么吗？

联系方式

<address>name@outlook.com</address>
name@outlook.com

上下标

<p>水的化学式:H<sub>2</sub>O</p>
<p>x的平方:x<sup>2</sup></p>

水的化学式:H2O

x的平方:x2

计算机代码

<pre><code> #include &lt;iostream&gt;
int main() {
    std::cout &lt;&lt; "Hello, World!";
    return 0;
}</code></pre>
<!-- pre标签保留空格 -->

 #include <iostream>
 int main() {
     std::cout << "Hello, World!";
     return 0;
 }

变量名

<p><var>tmp</var></p>

tmp

键盘输入

<p>复制的快捷键是<kbd>Ctrl</kbd> + <kbd>C</kbd>来完成的</p>

复制的快捷键是Ctrl + C来完成的

时间

<time datetime="2021-01-01">2021 年 1 月 1 日</time>
  1. <time>包裹时间
    • datatime包裹计算机可识别的时间

超链接

普通超链接

<p>搜索引擎：<a href="https://www.bing.com/" target="_blank">Bing</a></p>
  1. <a> 标签包裹超链接
    • _blank：新标签页 _parent：父标签页 _self：当前标签页 _top：顶部标签页
    • p标签可以替换成h1、h2等成为块级标签

搜索引擎：Bing

图片超链接

<a href="https://www.baidu.com/" target="_blank" title="这是一个搜索引擎">
    <img src="/upload/cdbja91D_1.png" alt="必应官网"/>
</a>
  1. <a> 标签包裹超链接
    • title属性在鼠标悬停图片上的时候提供信息
    • src="Bing.png" 指向当前目录
    • src="folder/Bing.png" 指向当前目录的子目录
    • src="../folder/Bing.png" 指向当前目录的上级目录
必应官网

邮件超链接

<p><a href="mailto:123@outlook.com">向 123 发邮件</a></p>

向 123 发邮件

观看图片

<p>
    <a href="/upload/cat.jpg" target="_blank">
        点击观看图片
    </a>
</p>

点击观看图片

观看视频

<p>
    <a href="https://www.bilibili.com/video/BV1GJ411x7h7/" target="_blank">
        点击观看视频
    </a>
</p>

点击观看视频

下载文件

<p>
    <a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"
        download="firefox-latest-64bit-installer.exe">
        下载最新的 Firefox 中文版 - Windows（64 位）
    </a>
</p>
  1. download 表示下载文件的名字

下载最新的 Firefox 中文版 - Windows（64 位）

图片

<figure>
    <img src="/upload/cdbja91D_2.jpg" alt="显示错误" title="猫猫照片" width="640"/>
    <figcaption>
        这是一只趴着的猫，它似乎在想些什么
    </figcaption>
</figure>
  1. <figcaption> 标签包裹对照片的描述，在下方展示
  2. <img> 标签包裹图片
    • width宽度 height高度
显示错误
这是一只趴着的猫，它似乎在想些什么

视频和音频

视频

<video controls width="400" height="400" autoplay loop muted preload="auto" poster="poster.png">
    <source src="rabbit320.mp4" type="video/mp4" />，
    <source src="rabbit320.webm" type="video/webm" />
    <p>你的浏览器不支持此视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
  1. <video> 标签包裹视频
    • controls支持用户控制播放
    • width 和 height 表示尺寸
    • autoplay 表示自动播放
    • loop 表示循环播放
    • muted 表示默认静音
    • preload="none / auto / metadata" 这个属性被用来缓冲较大的文件
    • none"：不缓冲文件,"auto"：页面加载后缓存媒体文件,"metadata"：仅缓冲文件的元数据
    • poster 指向一张图片，在视频播放前展示
  2. <source> 标签用于提供浏览器可供播放的选项，并且播放第一个匹配的媒体。
    • type 指定播放格式
  3. <p> 标签在浏览器不支持视频时出现

音频

<audio controls>
    <source src="viper.mp3" type="audio/mp3" />
    <source src="viper.ogg" type="audio/ogg" />
    <p>你的浏览器不支持该音频，可点击<a href="viper.mp3">此链接</a>收听。</p>
</audio>
  1. <audio> 标签包裹音频
    • 音频不支持 width height poster 标签
  2. <p> 标签在浏览器不支持视频时出现

表格

表格框架

<table align="center"> <!-- 表格整体居中 -->
    <tbody align="center"> <!-- 表格内容居中 -->
        <caption> <!-- 表格大标题 -->
            表格大标题
        </caption>
        <th>行\列</th> <!-- th 包裹标题 -->
        <th scope="col">第1列</th> <!-- scope="col"表示列表头 -->
        <th scope="col">第2列</th>
        <th scope="col">第3列</th>
        <th scope="col">第4列</th>
        <tr>
            <th scope="row" rowspan="2">第1行和第2行</th> <!-- scope="col"表示列表头 -->
            <td colspan="2">第1个单元格和第2个单元格</td> <!-- 占 2 列 -->
            <td>第3个单元格</td>
            <td>第4个单元格</td>
        </tr>
        <tr>
            <td>第5个单元格</td> <!-- tr 包裹一整行的所有内容 -->
            <td>第6个单元格</td> <!-- td 包裹一行中的一个元素 -->
            <td>第7个单元格</td>
            <td>第8个单元格</td>
        </tr>
    </tbody>
</table>
表格大标题
行\列 第1列 第2列 第3列 第4列
第1行和第2行 第1个单元格和第2个单元格 第3个单元格 第4个单元格
第1个单元格 第2个单元格 第3个单元格 第4个单元格

表格样式

<table>
    <colgroup>
        <col /> <!-- 第1列不变 -->
        <col style="background-color: yellow" /> <!-- 第2列所有元素生成黄色背景 -->
    </colgroup>

    //<colgroup>
    //    <col style="background-color: yellow" span="2" /> <!-- 所有列生成黄色背景 -->
    //</colgroup>

    <tr>
        <th>数据 1</th>
        <th>数据 2</th>
    </tr>
    <tr>
        <td>A</td>
        <td>B</td>
    </tr>
    <tr>
        <td>C</td>
        <td>D</td>
    </tr>
</table>

嵌套表格

<table id="table1">
    <tr>
        <th>标题 1</th>
        <th>标题 2</th>
        <th>标题 3</th>
    </tr>
    <tr>
        <td id="nested">
            <table id="table2">
                <tr>
                    <td>单元格 1</td>
                    <td>单元格 2</td>
                    <td>单元格 3</td>
                </tr>
            </table>
        </td>
        <td>单元格 2</td>
        <td>单元格 3</td>
    </tr>
    <tr>
        <td>单元格 4</td>
        <td>单元格 5</td>
        <td>单元格 6</td>
    </tr>
</table>
标题 1 标题 2 标题 3
单元格 1 单元格 2 单元格 3
单元格 2 单元格 3
单元格 4 单元格 5 单元格 6

表单

表单结构

<form action="./submit_page" method="get">
  <p>
    <label for="name">姓名（必填）：</label>
    <input type="text" name="name" id="name" required />
  </p>
  <p>
    <label for="email">邮箱（必填）：</label>
    <input type="email" name="email" id="email" required />
  </p>
  <p>
  <button>点击提交</button>
  </p>
</form>

  1. form 用于包裹表单所有元素：

    • action 包含一个路径，用于指定提交的表单数据将发送到哪个页面进行处理。
    • method 指定将表单数据发送到服务器时使用的数据传输方法。当值为 get 时，数据会作为参数附加在 URL 的末尾进行发送。

  2. label 元素用于描述应该输入的数据。给 <label> 设置 for 属性，其值与 <input> 的 id 相同。

  3. input 元素表示用户在表单中输入的各种数据项：

    • type 指定要创建的表单控件类型。当值为 text 时，会渲染一个可接受任意文本的基本文本框。
    • name 为该数据项指定一个名称。当表单提交时，数据会以名值对（name/value pairs）的形式发送。
    • id 指定一个用于标识该元素的 ID。用于将该表单控件与对应的 <label> 标签关联起来。
    • required 指定必须填写。

  4. button 元素用于提交表单：

    • <button type="submit"> 声明该按钮是“提交按钮”
    • <button type="button"> 创建一个普通按钮

cdbja91D_3.png

单选框

    <fieldset>
        <legend>选择酒店房型：</legend>
        <div>
            <input type="radio" id="hotelChoice1" name="hotel" value="economy" checked />
            <label for="hotelChoice1">经济型（+$0）</label>

            <input type="radio" id="hotelChoice2" name="hotel" value="superior" />
            <label for="hotelChoice2">高级型（+$50）</label>

            <input type="radio" id="hotelChoice3" name="hotel" value="penthouse" disabled />
            <label for="hotelChoice3">顶级套房（+$150）</label>
        </div>
    </fieldset>
  1. 使用 <fieldset> 元素包裹所有选项，并用其子元素 <legend> 来提供整体描述。
  2. 每个单选按钮的 <label> 描述该具体选项的值。
  3. 单选按钮是通过 <input type="radio"> 实现的。
    • name 属性值必须相同，以便将它们关联成一组。
    • value 属性，用于指定提交时该按钮对应的值。
    • checked 属性加载页面时默认选中。
    • disabled 属性会让它被禁止选择

cdbja91D_4.png

复选框

<fieldset>
    <legend>选择要参加的课程：</legend>
    <div>
        <input type="checkbox" id="yoga" name="yoga" />
        <label for="yoga">瑜伽（+$10）</label>

        <input type="checkbox" id="coffee" name="coffee" />
        <label for="coffee">咖啡烘焙（+$20）</label>

        <input type="checkbox" id="balloon" name="balloon" />
        <label for="balloon">气球动物艺术（+$5）</label>
    </div>
</fieldset>
  1. 多选按钮是通过<input type="checkbox"> 实现的。
    • 多选框可以设置 checked 属性
    • 每个复选框的 name 属性值不同，且通常没有设置 value 属性。

cdbja91D_5.png

下拉菜单

<label for="transport">出行方式：</label>
<select name="transport" id="transport">
    <option value="">--请选择一项--</option>
    <option value="plane">乘坐飞机</option>
    <option value="bike">骑自行车</option>
    <option value="walk">徒步</option>
    <option value="bus">乘坐公交</option>
    <option value="train">搭乘火车</option>
    <option value="jetPack">使用喷气背包</option>
</select>
  1. <select> 元素囊括所有不同的选项值。
    • id 属性与 <lable> 关联起来
    • name 属性指定提交数据的名称
  2. <option> 元素设置为每个元素。
    • value 属性，指定如果该选项被选中时提交的值
    • select 属性加载页面时默认选中

cdbja91D_6.png

多行文本输入框

<label for="comments">其他备注：</label>
<textarea id="comments" name="comments" rows="5" cols="33"></textarea>
  1. <textarea> 元素创建多行文本输入框
    • rows 属性指定显示的行数，cols 属性指定列数。浏览器默认使用 cols="20" 和 rows="2"。

cdbja91D_7.png

前端学习网站:MDN

https://developer.mozilla.org/zh-CN/