HTML速通 - 技术栈

**前言：**本文章全都继续vscode编辑器，只是把内容全都过一遍，不深究语法，现在AI编程能力很强了，很多内容都可以快速编写。开始前为了遍历开发，希望大家先下载如下Live Server插件

这样，在开发的过程中，保存代码后，浏览器就能自动刷新页面，实时看效果

右键，点击"Open with Live Server"，就会自动打开浏览器页面了，在开发过程中可以左右分屏，保存即可实时查看效果

为了与后面的vue衔接，设置字符缩进为2字符

点击"文件"->"首选项"->"设置"

修改"Tab Size"为2

同时勾选最上面的"Format On Save"，使保存自动格式化

HTML浅析

HTML指的是超文本标记语言------一种用来告知浏览器如何组织页面的标记语言，目前最新的是HTML5

标记又又叫标签，HTML是由一系列标签组成的，学习HTML就是学习标签

基本标签

标签大部分都是双标签，如

html 复制代码

<h1></h1>

很少部分是单标签，如分割线

html 复制代码

<hr>

如下是我随便生成的一个html文件，第一行是文档类型声明，告诉浏览器当前页面是使用HTML5规范编写的；<html>元素又叫根元素，包裹页面中所有的内容，lang用于声明网页主要语言，en代表应用，zh-CN代表中文；<head>标签是头部标签，包含文档的元数据，供机器处理的信息，charset="UTF-8"表示设置字符集为UTF-8，<meta name......>是视口，保证网页页面适配

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  hello html
</body>

</html>

<title>是设置页面标题，如下图"Hello Page"标题；<body>元素包含所有显示在页面上的内容

标签关系

标签关系分为并列关系和嵌套关系（好学的小伙伴已经学会注释咯）

html 复制代码

<!-- 并列关系 -->
<head></head>
<body></body>
<!-- 嵌套关系 -->
<head>
    <title></title>
</head>

常用标签

标题标签h

规范h1标签一个页面只使用一次，是顶级标签；其它标题标签看排版需求

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <h1>这是h1标题</h1>
  <h2>这是h2标题</h2>
  <h3>这是h3标题</h3>
  <h4>这是h4标题</h4>
</body>

</html>

段落标签p

表示一个段落，每行只显示一个段落标签里的内容，文字会随着界面显示自动换行

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <p>p是HTML中专门用于定义文本段落的元素，是网页中展示正文、段落文本的核心标签，每个p标签都会单独占据一行，多个p之间会自动上下换行，不会同行排列。
    默认宽度占满父容器的可用宽度，不可嵌套块级元素，仅可嵌套span、a、em等行内元素。
  </p>
</body>

</html>

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <p>p是HTML中专门用于定义文本段落的元素，是网页中展示正文、段落文本的核心标签</p>
  <p>每个p标签都会单独占据一行，多个p之间会自动上下换行，不会同行排列</p>
  <p>默认宽度占满父容器的可用宽度，不可嵌套块级元素，仅可嵌套span、a、em等行内元素</p>
</body>

</html>

强调与重要性类标签

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <strong>使文字加粗</strong>
  <em>使文字倾斜</em>
  <ins>给文字加下划线</ins>
  <del>给文字加删除线</del>
</body>

</html>

注释标签

注释内容不会显示在网页上，可跨越多行。光标放在指定位置，"ctrl+/"可快速添加注释

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <!--  -->
  <!-- 我是一个注释标签 -->
</body>

</html>

图像标签

img标签是单标签，默认包含src和alt两个属性，属性之间以空格分隔。src指向要插入的图像地址（本机地址或浏览器地址都可），alt是备选文本（图片无法显示时展示）

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <img src="https://pica.zhimg.com/v2-2e2056354c18d11670e2aef43cd21dfc_r.jpg" alt="这是个html图片">
</body>

</html>

天哪，这图片也太大了。我们可以还设置其它属性：width设置图片宽度（建议css修改），height设置图片高度（建议css修改），title设置图片标题（鼠标悬停时显示的文本）

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <!-- 宽度和高度一般只要设置一个就好了，另一项会等比例缩放 -->
  <img src="https://pica.zhimg.com/v2-2e2056354c18d11670e2aef43cd21dfc_r.jpg" alt="这是个html图片" width="300"
    title="html logo图片">
</body>

</html>

常见图片格式

.jpg是有损压缩，放大缩小会变得模糊或有锯齿，但颜色非常丰富

.png是无损压缩，支持透明

.gif支持动画

.webp是google专门开发的现代格式，支持有损/无损压缩，支持透明、动画，色彩也很丰富

路径格式

相对路径指的是相对与当前文件位置的路径，又分为三种路径

在同一目录中，可以直接使用"文件名"，也可用"./文件名"，"./"表示当前文件

在上级目录中，使用"../文件名"，"../"表示返回上一级

绝对路径是从根目录开始的完整路径（一般从盘符开始），一般不用，因为别人和你的文件存储不一样，别人用不了

视频标签

是双标签，src属性指向要插入视频的地址，controls表示显示浏览器自带的播放控件，width/height设置视频的宽度和高度（后两个可省略，自行看效果）

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <!-- 在html5中属性和值若相同，可省略值，这里的controls其实是controls="controls" -->
  <video src="https://v.mifile.cn/b2c-mimall-media/71fa48c0e68fe732a3b7c28e1b33278d.mp4" width="400" controls></video>
</body>

</html>

没有营销宣传的意思啊，只是这种企业的宣传视频什么的才公开，我用优酷/抖音的视频都是不能访问的

还有autoplay属性，能自动播放（大部分网页规定，想要自动播放必须设置静音）；loop属性能循环播放；muted静音；poster预览图像（视频封面）

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <!-- 在html5中属性和值若相同，可省略值，这里的controls其实是controls="controls" -->
  <video src="https://v.mifile.cn/b2c-mimall-media/71fa48c0e68fe732a3b7c28e1b33278d.mp4" width="400" controls autoplay
    muted loop></video>
</body>

</html>

还有一种兼容性写法，因为有的浏览器只支持指定格式的视频。

将src属性放在几个单独的<source>标签当作，分别指向各自资源，浏览器会从上往下扫描，播放第一个与自身匹配的媒体。我没找到多种格式的视频，现在大部分都是支持的

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <video controls width="400">
    <source src="xxx.mp4" type="video/mp4">
    <source src="xxx.ogg" type="video/ogg">
    <p>您的浏览器不支持MP4与ogg格式，请升级浏览器</p>
  </video>
</body>

</html>

音频格式

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <!-- 没有找到开放的音频 -->
  <audio src="audio/hello.mp3" controls loop></audio>
  <!-- 兼容性写法 -->
  <audio>
    <source src="audio/hello.mp3" type="audio/mpeg">
    <source src="audio/hello.ogg" type="audio/ogg">
    Your browser does not support the audio element.
  </audio>
</body>

</html>

块级元素与行内元素

块级元素是独占一行的，行内元素不独占一行

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <!-- 块级元素 -->
  <h1>块级元素与行内元素</h1>
  <h2>什么是块级元素</h2>
  <p>块级元素是HTML中占据其父容器整行空间的元素,其核心特征是<strong>独占一行</strong>，<em>能容纳其他块级元素和行内元素</em></p>
  <div>
    <p>这些排版标签大部分都是块级元素</p>
  </div>
  <h2>什么是行内元素</h2>
  <p>行内元素会<strong>在同一行依次排列</strong>，<em>不能嵌套块级元素，可嵌套其它内联元素</em></p>
  <!-- 行内元素 -->
  <input type="text">
  <input type="text">
  <strong>我是行内元素</strong><em>我也是行内元素</em>
  <!-- 特殊情况 -->
  <h2>特殊情况</h2>
  <p>p标签里面不能包含其它块级元素，虽然它是块级元素</p>
</body>

</html>

超链接

超链接使我们够将其它资源链接到文档的指定部分

用a标签标记，href属性指向要前往的地址，不仅仅包含文字，可包含图片、视频等除了自身以外的其它元素；title属性可指定鼠标悬停的提示文字

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <!-- 在当前页面打开链接 -->
  <a href="https://www.doubao.com/chat/" title="豆包">豆包</a>
  <!-- 新窗口打开链接 -->
  <a href="https://www.doubao.com/chat/" target="_blank">豆包</a>
</body>

</html>

超链接还可以指向空链接（没有实际指向的超链接，还没开发的页面等）、下载链接（exe或压缩包，点击下载）、邮件链接（希望别人给我发邮件）

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <a href="#">这是个待开发的页面</a>
  <a href="https://dl.hdslb.com/mobile/fixed/bili_win/bili_win-install.exe?v=1.17.4-2">B站Windows版本</a>
  <!-- mailto:是固定格式 -->
  <a href="mailto:123@qq.com">发我QQ</a>
</body>

</html>

锚点链接

运行用户在同一个页面内快速跳转到指定位置，适合长页面导航

定义锚点的目标位置

要跳到哪里去。在标签里面，使用id属性创建锚点目标

创建跳转链接

在链接里面使用"#id"标记锚点目标

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <h1>什么是超链接？</h1>
  <p>超链接（Hyperlink）是一种在网页或文档中创建连接的方式，允许用户通过点击链接跳转到另一个网页、文档或资源。超链接通常以文本或图像的形式出现，用户点击后会被引导到指定的目标位置。</p>
  超链接主要包含：
  <!-- br是换行标签 -->
  <p>
    1.内部链接 <br>
    2.外部链接 <br>
    3.空链接 <br>
    4.下载链接 <br>
    <!-- 创建跳转链接 -->
    <a href="#5">5.电子邮件链接</a> <br>
  </p>
  <h2>1. 内部链接</h2>
  <p>内部链接是指在同一网站或文档内创建的链接，允许用户在不同页面或章节之间导航。例如，从首页跳转到关于我们页面。</p>
  例如：
  <a href="about.html">关于我们</a>
  <h2>2. 外部链接</h2>
  <p>外部链接是指指向其他网站或资源的链接，允许用户访问不同的网站内容。例如，从一个博客文章跳转到另一个网站的相关文章。</p>
  例如：
  <a href="https://blog.csdn.net/2402_88126487?spm=1000.2115.3001.5343">访问博主</a>
  <h2>3. 空链接</h2>
  <p>空链接是指没有指定目标地址的链接，通常用于占位符或需要通过脚本动态设置链接地址的情况。</p>
  例如：
  <a href="#">点击这里</a>
  <h2>4. 下载链接</h2>
  <p>下载链接是指允许用户下载文件的链接，通常用于提供文档、图片或其他资源的下载。</p>
  例如：
  <a href="files/sample.pdf" download>下载PDF文件</a>
  <!-- 定义锚点目标 -->
  <h2 id="5">5. 电子邮件链接</h2>
  <p>电子邮件链接是指点击后会打开默认的电子邮件客户端，并自动填写收件人地址的链接。</p>
  例如：
  <a href="mailto:123@example.com">发送邮件</a>

</body>

</html>

布局标签

网站结构标签

网页页眉<header>，导航栏<nav>，网页内容<main>（每个网页只能有一个），在<main>里面常放<article>文章标签和<aside>侧边栏，页面页脚<footer>，分块标签<section>

但现在大部分都用CSS美化布局，所以以下只做简单演示

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <header>网页头部标签</header>
  <nav>导航栏标签</nav>
  <main>
    主要内容标签
    <aside>侧边栏标签</aside>
    <article>文章标签</article>
  </main>
  <footer>网页底部标签</footer>
  <section>区块标签</section>

</body>

</html>

无语义标签

<div>标签，块级元素，独占一行，通常用于布局结构，作为其它元素的容器

<span>标签，行内元素，不分行，用于对行内元素的局部样式渲染

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <div>我是div标签</div>
  <div>我也是div标签</div>
  <span>我是span标签</span>
  <span>我也是span标签</span>

</body>

</html>

列表标签

无序列表ul

内容没有顺序，常用于一些需要整齐对齐的场景。

由<ul>和<li>两组标签一起组成，<ul>定义列表的容器，里面只能包含<li>元素，<li>定义列表的选项，里面可以放其它html元素

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <ul>
    <li>新奇一</li>
    <li>新奇二</li>
    <li>新奇三</li>
    <li>新奇四</li>
  </ul>
</body>

</html>

有序列表ol

内容有顺序，在实际开发中很少用，会用其它元素替代

由<ol>和<li>组成

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <ol>
    <li>新奇一</li>
    <li>新奇二</li>
    <li>新奇三</li>
    <li>新奇四</li>
  </ol>
</body>

</html>

描述列表dl

主要是在页面底部，如下图，"手机、电视、笔记本"等都是对"选购指南"的描述

由<dl>定义列表的容器，<dt>定义被描述的术语，<dd>定义描述术语（可包含其它html元素）

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <dl>
    <dt>家电</dt>
    <dd>电视</dd>
    <dd>冰箱</dd>
    <dd>洗衣机</dd>
    <dd>手机</dd>
  </dl>
</body>

</html>

表格标签

常用于数据、信息展示。由表格容器标签<table>，行标签<tr>，单元格标签<td>，表头单元格<th>组成。（没有列标签）

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <!-- table的border属性是添加表格边框的简便方法 -->
  <table border="1">
    <tr>
      <td>姓名</td>
      <td>年龄</td>
      <td>性别</td>
    </tr>
    <tr>
      <td>张三</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>20</td>
      <td>女</td>
    </tr>
  </table>
  <br>
  <table border="1">
    <tr>
      <!-- th标签可以让里面的文字加粗且居中显示 -->
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>20</td>
      <td>女</td>
    </tr>
  </table>
</body>

</html>

还有<thead><tbody><tfoot>这些表格结构标签，页面展示没有变化，但让结构更清晰

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <table border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>18</td>
        <td>男</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>20</td>
        <td>女</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

还有合并单元格，很少使用，会让表格难以维护。要用让AI写就好了，所以不再讲述。

表单标签

"搜索框、输入手机号、文件上传"等都属于表单

表单：用来收集用户输入数据，并将数据提交到后端进行处理

由表单容器<form>，表单控件（包含通用输入控件<input>，下拉选择框<select>等），辅助标签<label>组成

form标签

是定义表单的容器，包裹所有表单控件，其action属性定义了处理收集数据对象的url（目前不涉及数据交互，暂时填空）

表单控件

<input>标签可以创建文本输入框、密码框、单选框\复选框等，其type属性定义了输入框的类型（text单行文本框，password密码框，radio单选框，checkbox复选框，file文件域）

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <form>
    <ul>
      <li>
        <!-- placeholder属性可以提示信息，name属性可以指定表单数据的名称 naxlength是最大输入长度，autocomplete用于控制浏览器是否自动填充表单数据 -->
        账号：<input type="text" placeholder="请输入账户" name="username" maxlength="8" autocomplete="off">
      </li>
      <li>
        密码：<input type="password">
      </li>
      <li>
        性别：
        <!-- name属性实现单选框的分组，name属性相同的单选框会实现互斥效果，value属性用于指定单选框的值，checked属性用于指定是否默认选中 -->
        <input type="radio" name="gender" value="0" checked>男
        <input type="radio" name="gender" value="1">女
      </li>
      <li>
        爱好：
        <input type="checkbox" name="hobby" value="0" checked>唱歌
        <input type="checkbox" name="hobby" value="1">跳舞
        <input type="checkbox" name="hobby" value="2">rap
      </li>
      <li>
        头像：
        <!-- 文件域默认只能选一个，multiple属性可以实现多选，accept属性可以指定允许上传的文件类型 -->
        <input type="file" name="file" accept=".jpg,.png,.gif">
    </ul>
  </form>
</body>

</html>

<textarea>是一个多行纯文本编辑控件，常用于评论、反馈

<select>是一个提供选项菜单的控件，和<option>搭档，后者是每一个选项标签，每个选项必须要跟一个值（因为很丑，实际开发中常用其它标签模拟）

<button>是一个提供按钮的控件，元素内部可以放置文本或图像。

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <form>
    留言：
    <!-- rows是可见文本行数，paleholder是占位符文本 -->
    <textarea name="msg" rows="10" cols="30" placeholder="请输入留言内容"></textarea>
    <br>
    城市：
    <select name="city">
      <option value="bj">北京</option>
      <!-- option的selected属性表示默认选中该项 -->
      <option value="sh" selected>上海</option>
      <option value="gz">广州</option>
      <option value="sz">深圳</option>
    </select>
    <br>
    <!-- button的disabled属性可以禁用按钮 -->
    <button>登录</button>
    <button disabled>注册</button>
  </form>
</body>

</html>

辅助标签label

<label>标签是用户界面中某个元素的说明，点击可以标签可以聚焦输入框

两种实现方式：1.利用for和id相关联。2.直接用<label>标签包含

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <form>
    <label>
      账号：<input type="text" name="username">
    </label>
    <br>
    <!-- for id 关联 -->
    <input type="radio" name="gender" value="0" id="nv">
    <label for="nv">女</label>
    <input type="radio" name="gender" value="1" id="nan">
    <label for="nan">男</label>
    <br>
    <!-- 直接label包裹 -->
    <label>
      <input type="checkbox" name="hobby" value="0">足球
    </label>
    <label>
      <input type="checkbox" name="hobby" value="1">篮球
    </label>

  </form>
</body>

</html>

这样点击描述（文字）也可以定位光标、勾选选项

字符实体

常用于显示不可见字符、保留字符（如"空格"，<p>文本）

字符实体是一段以&开头、以；结尾的文本

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Page</title>
</head>

<body>
  <p>我想展示好几个      空格</p>
  <p>我能展示好几个&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格</p>
  <p>&lt;p&gt;是段落标签</p>
  总结：
  <form>
    <ul>
      <li>&nbsp;空格</li>
      <li>&lt;小于号</li>
      <li>&gt;大于号</li>
      <li>&amp;与号</li>
      <li>&quot;双引号</li>
    </ul>
  </form>
</body>

</html>

HTML我们主要认识标签就好了，更多的样式美化设计，我们在CSS见