HTML语言基础|白晔晔晔Daily

基本代码结构

一个完整的html代码，必须要包含<html><head><body>三个标签。

<html></html>：表明该对标签之间的代码是html的全部内容。

<head></head>：网页的元信息，不会显示在页面中，包括字符编码、作者、标题等。

<body></body>：网页的页面内容。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>网页标题</title>
</head>

<body>
    <!-- 网页内容 -->
    <script src="script.js"></script>
</body>
</html>

<!DOCTYPE html>:DOCTYPE声明，告诉浏览器使用HTML5标准渲染页面。这个声明很重要，不同的DOCTYPE会影响浏览器的渲染模式。可以理解为每个html文件都必须在文件开头加上它。

容器标签：特征是必定成对出现，如<html></html>，类似括号，将内容放在两个括号之间。
自闭合标签：特征是单独出现，如<br>(类似C语言的/n，表示换行)不需要包住文字内容，它们只是“到这儿就该有某个东西”或者“在此处执行某个命令”。

另外有两个与标签有关的概念：元素与属性。

元素：从开始标签到结束标签的整个整体，包括里面的内容。例如：

<p>你好</p>  //这一行称为一个p元素

属性：写在开头标签中，给标签附加额外信息，例如：

<html lang="zh-CN">  //表示该html的文本自然语言是大陆简体中文

head标签

title标签

用于定义网页的标题，显示在浏览器窗口的标题栏上，这也意味着<title>标签是head的必写（且唯一必写）项。<title>对搜索引擎优化（以下称为SEO）非常重要，搜索引擎会把 <title> 里的文字直接显示为搜索结果的标题。title标签显然是容器标签。

<head>
    <title>网页标题</title>
</head>

meta标签

用于描述网页的文档属性，包括但不限于：字符编码，页面描述，作者信息等。它的内容是专门给浏览器和搜索引擎看的“页面说明书”，告诉浏览器如何理解与渲染界面。meta标签是自闭合标签。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="网页描述">
    <title>网页标题</title>
</head>

charset：字符编码，一般使用UTF-8

viewport：响应式设计必备

description：页面描述，有助于SEO

keywords：关键词

author：作者信息

meta标签展开来比较复杂，后续会更详细地讲述。

文本标签

标题标签

<h1>一级标题</h1>

<h1>一般只使用一次。

在VScode中如果打出h$*6会直接生成<h1>到<h6>6级标签。

标题默认渲染左对齐，，如果想要将标签渲染居中/右对齐，需要给标签添加align属性（不推荐，更推荐使用CSS方案）。

<h1 align="left">一级标题</h1>   //左对齐
<h2 align="right">一级标题</h2>  //右对齐
<h3 align="center">一级标题</h3> //居中对齐

段落/换行/水平线

段落（<p></p>）：最常使用的用于写文本的容器标签。

<p>窗前明月光</p>
<p>疑是地上霜</p>

每个 <p> 都独占一行，不会和别的文字挤在一行里，渲染时，文字到屏幕边缘会自动换行。

<p>是一个块级元素（意味着它会撑满整行），不能把其他块级容器（另一个<p>、<h1>、<div>等）放在<p>中嵌套。

换行（<br>）

如果希望两行文字属于同一个段落（<p></p>），那么可以在换行的地方用<br>表示。比起分成两个段落，使用<br>会使两行文字之间的间距更小，而且把两个高度相关的文本划分成两个段落不利于SEO。

<p>窗前明月光<br>疑是地上霜</p>

水平线（<hr>）

一共有四个属性：color(颜色)\width(长度)\size(宽度)\align(默认居中，可选left和right)

<hr color="green" width="1000px" size="30px" align="left"/>

不要滥用水平线来装饰，它代表段落级元素之间的主题分隔，对SEO有帮助。

文本格式

<strong>加粗且加重语气</strong>
<em>着重文字</em>
<b>粗体</b>
<i>斜体</i>
<span>无含义，一般用于CSS扩展<span>
<mark>标记文本</mark>
<del>删除线</del>
<ins>下划线</ins>
<sub>下标</sub>
<sup>上标</sup>
<small>小号文本</small>

<p>以上标签属于行内元素，可以<strong>嵌套</strong>使用<p>
<p>
  <mark>重点：</mark> 这个公式是 
  <strong>E = mc<sup>2</sup></strong>， 
  水分子是 H<sub>2</sub>O， 
  原价 <del>199元</del> <ins>现价99元</ins>。
</p>

图片标签

<img src="" alt="" title="" width="" height="">

src：图片链接（技术上的必写项）

alt：图片加载失败时的替代文本（工程上的必写项）

title：鼠标悬停在图片上方时的提示文字

三种图片路径：绝对/相对/网络路径

绝对路径：从电脑根目录一直到图片存储地址，如<img src="C:\Users\你的名字\Desktop\my-web\images\cat.jpg" alt="猫">

相对路径：以当前 HTML 文件所在文件夹为起点，描述“怎么走到图片那里”。如<img src="images/cat.jpg" alt="猫">

网络路径：也称绝对 URL。以 http:// 或 https:// 开头，指向互联网上的某个图片。该图片必须放在互联网服务器上且能被访问，同时用户的电脑联网才能显示出来。

超文本链接标签

<a href= "url">链接文本</a>

href即为链接地址，这个地址可以是新的网页，也可以是当前网页的某个部分。

链接文本可以是纯文本，也可以是图片（嵌套<img>）。

如果想要跳转到当前网页的某部分，需要对该部分添加一个id属性，作为href的值。

<h2 id="chapter3">第三章</h2>
<a href="#chapter3">跳到第三章</a>

跳转一般分为两种：在本页面打开/在新页面打开，方式由属性target的值决定。默认为当前标签页打开。

<!-- 在当前标签页打开（默认行为，不需要写 target） -->
<a href="page.html">默认打开</a>

<!-- 在当前标签页打开 -->
<a href="page.html" target="_self">当前标签页打开</a>

<!-- 在新的浏览器标签页打开 -->
<a href="page.html" target="_blank">新标签页打开</a>

默认情况下，链接文本将显示为蓝色且带有下划线，访问过的链接会变成紫色，点击时链接会变成红色，可以通过CSS修改样式。鼠标移动到超链接文本上时光标会变成一只手。

列表标签

有序列表

表现为一列项目，在每行开头默认用数字序号进行标记。有序列表始于<ol>标签，每个项目始于<li>标签。

<ol>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橘子</li>
</ol>

<ol>可以加属性type，有五个属性值：1（阿拉伯数字标号1/2/3/...），a（小写字母标号a/b/c/...），A（大写字母标号A/B/C/...）,i（小写罗马数字标号i/ii/iii/...），I（大写罗马数字标号I/II/III/...）

列表是可以嵌套使用的。

<ol type = "1">
  <li>水果
      <ol type = "a">
          <li>苹果</li>
          <li>香蕉</li>
          <li>橘子</li>
      </ol>
  </li>
  <li>蔬菜</li>
  <li>肉类</li>
</ol>

快捷生成方式：

ol>li{项目$}*n

无序列表

无序列表前没有表示顺序的序号，默认情况下每项前用粗体实心圆点标记。

<ul>
  <li></li>
  <li></li>
</ul>

<ul>也有type属性以及4种属性值，分别为disc（粗体实心圆），circle（空心圆），square（小方块），none（不显示）。

无序列表也可以嵌套使用。

无序列表应用非常广泛，各大网页中的导航页、选项页几乎全是用无序列表实现的。

表格标签

表格是按先行后列的顺序建成的，一个完整的表格有以下三个标签：

<table>：表格

<tr>：行

<td>：列（单元格）

<table>
  <tr>
    <td>第1行第1列</td>
    <td>第1行第2列</td>
    <td>第1行第3列</td>
  </tr>
  <tr>
    <td>第2行第1列</td>
    <td>第2行第2列</td>  
    <td>第2行第3列</td>   
  </tr>
</table>

最好是每行中包含的tr数量相等，以保证表格渲染正确、美观，当然这是不强制的。

表格默认是没有边框的，若要添加边框需要给table标签添加属性：

border:设置边框宽度占多少像素。

width:表格宽度。

height:表格高度

<table border = "1", width = "300", height = "300" >
  <tr>
    <td>第1行第1列</td>
    <td>第1行第2列</td>
    <td>第1行第3列</td>
  </tr>
  <tr>
    <td>第2行第1列</td>
    <td>第2行第2列</td>  
    <td>第2行第3列</td>   
  </tr>
</table>

表格的快捷生成方式：

table>tr*m>td*n{单元格} //生成m*n大小的、每个单元格内填充“单元格”的表格

单元格合并：只有水平合并（从左向右，保留最左边的单元格）和垂直合并（从上到下，保留最上面的单元格）两种方法。

引入td的属性rowspan与colspan，可以理解为该单元格占几列/行。

<table border = "1", width = "300", height = "300" >
  <tr>
    <td>第1行第1列</td>
    <td>第1行第2列</td>
    <td>第1行第3列</td>
  </tr>
  <tr>
    <td>第2行第1列</td>
    <td>第2行第2列</td>  
    <td>第2行第3列</td>   
  </tr>
</table>

<table border = "1", width = "300", height = "300" >
  <tr>
    <td rowspan = "2" >第1行第1列和第2列</td>  //rowspan的值表示该单元格会向右合并几个单元格
    //<td>第1行第2列</td>  删除这一单元格
    <td colspan ="2" >第1行第3列和第2行第3列</td>  //colspan的值表示该单元格会向下合并几个单元格
  </tr>
  <tr>
    <td>第2行第1列</td>
    <td>第2行第2列</td>  
    //<td>第2行第3列</td>   删除这一单元格
  </tr>
</table>

<table border = "1", width = "300", height = "300" >
  <tr>
    <td rowspan = "2"  colspan = "2">1-1/1-2/2-1/2-2</td>
    //<td>第1行第2列</td>
    <td>第1行第3列</td>
  </tr>
  <tr>
    //<td>第2行第1列</td>
    //<td>第2行第2列</td>  
    <td>第2行第3列</td>   
  </tr>
</table>

表单标签

表单是用户与后端交互的重要部件，用户填写表单，由前端交给后端处理，形成交互。搜索框是最基础最常见的表单。

表单的最外层为<form>，有三个基本属性：action（服务器地址）、method（数据提交方式）、name（表单名称，可以省略）。这里涉及一些后端知识，在后端篇章会展开。

<form action="/submit-form" method="post">
  <!-- 各种输入控件放这里 -->
</form>

表单里的输入框由<input>标签表示，它本身是一个空标签，但是可以通过更改type属性的值来表示不同的输入工具。

<!-- 文本输入 -->
<input type="text" placeholder="请输入用户名">

<!-- 密码输入（字符会被隐藏） -->
<input type="password" placeholder="请输入密码">

<!-- 邮箱 -->
<input type="email" placeholder="you@example.com">

<!-- 数字 -->
<input type="number" min="1" max="100">

<!-- 单选框（同一组 name 相同，只能选一个） -->
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

<!-- 多选框 -->
<input type="checkbox" name="hobby" value="coding"> 写代码
<input type="checkbox" name="hobby" value="reading"> 读书

<!-- 日期选择 -->
<input type="date">

<!-- 文件上传 -->
<input type="file">

<!-- 提交按钮 -->
<input type="submit" value="注册">

<!-- 普通按钮（以后用 JS 控制） -->
<input type="button" value="点我">

需要注意的是，单选框/多选框的name必须一致，这样浏览器才知道选项是一组的。

如果想要用户输入一大段文字，如留言板功能，则需要用<textarea>标签。

<textarea rows="5" cols="30" placeholder="请输入您的留言..."></textarea>

表单还可以做成下拉菜单的形式，需要用到<select> + <option>。

<select name="city">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="shenzhen" selected>深圳</option>
</select>

输入后用户需要点击按钮上传表单，这时需要<button>标签，除了上传，它还可以清空表单。如果type的值设为"button"，那么该按钮无默认行为，用于JavaScript控制。

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button" onclick="alert('你好')">普通按钮</button>

<label>标签用于给表单控件（<input>、<textarea>、<select> 等）提供文字说明。单纯在输入框前面写“用户名：”这三个字，浏览器只知道那是文字，不知道它们和输入框有关系。只有用 <label> 把它们关联起来，浏览器才明白：“这段文字是在描述这个输入框。”

有文字说明与控件两种关联方式：

<!-- 显式 -->
<label for="user-email">邮箱地址：</label>
<input type="email" id="user-email" name="email">
//label的for属性值必须与input的id属性值一致

<!-- 隐式 -->
<label>
  邮箱地址：
  <input type="email" name="email">
</label>

完整表单示例：

<form action="#" method="post">
  <p>
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" required>
  </p>
  <p>
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" placeholder="you@example.com" required>
  </p>
  <p>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" minlength="6" required>
  </p>
  <p>
    性别：
    <label><input type="radio" name="gender" value="male"> 男</label>
    <label><input type="radio" name="gender" value="female"> 女</label>
  </p>
  <p>
    <label for="city">城市：</label>
    <select id="city" name="city">
      <option value="">请选择</option>
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
    </select>
  </p>
  <p>
    <label for="message">留言：</label>
    <textarea id="message" name="message" rows="4" cols="40"></textarea>
  </p>
  <p>
    <button type="submit">提交</button>
    <button type="reset">重填</button>
  </p>
</form>

块级元素与内联元素

常见块级元素：div/form/h1/hr/p/table/ul等

常见内联元素：a/b/em/i/span/strong等

行内块级元素（不换行，可以设置宽高）：img/input/button等

<div>容器元素与语义标签

div就是division的缩写，<div>并无实际意义，就是一个纯粹的块级容器，用于将各个部分装在一起，形成一个整体。比如一个网页可以分为页眉、导航、主体、侧边栏、页脚等部分，每一部分下又有各种各样的标签构成，但是如果不用div将它们分别囊括起来，这些标签就是散乱的，虽然渲染出来并没有区别，但是在开发阶段代码很乱，SEO也比较麻烦，JavaScript和CSS想要同时控制多个模块也不好处理，于是有了<div>标签。

<div>有id属性，其值表示了该组件属于网站结构的哪个部分。最常使用的有header（头部）、nav（导航）、article与section（内容）、sidebar（侧边栏）、footer（页脚）几个值。

<div id="header">
  <h1>我的博客</h1>
  <p>这是网站标语</p>
</div>

<div id="main-content">
  <div class="article">
    <h2>文章标题</h2>
    <p>文章正文……</p>
  </div>
  <div class="article">
    <h2>另一篇文章</h2>
    <p>另一篇正文……</p>
  </div>
</div>

<div id="sidebar">
  <h3>关于我</h3>
  <p>个人简介</p>
</div>

<div id="footer">
  <p>&copy; 2026 我的博客</p>
</div>

<div>当然可以嵌套，在容器中划分小容器。

<div class="card">
  <div class="card-header">
    <h3>产品名称</h3>
  </div>
  <div class="card-body">
    <img src="product.jpg" alt="产品图">
    <p>产品描述。</p>
  </div>
  <div class="card-footer">
    <button>购买</button>
  </div>
</div>

由于header、nav、article与section、sidebar、footer几个值过于常用，所以单独给这几个值定义了标签：<header>、<nav>、<article>、<section>、<aside>、<footer>。另外还有一个非常常用的<main>标签，整个网页只能有一个<main></main>，其表示该网页最核心内容。

<div id="header"></div>
<div id="nav"></div>
<div id="article">
    <div id="section"></div>
</div>
<div id="silder"></div>
<div id="footer"></div>

<header></header>
<nav></nav>
<article>
    <section></section>
</article>
<aside></aside>
<footer></footer>

具体含义如下：

1. <header></header> 头部

2. <nav></nav> 导航

3. <section></section> 定义文档中的节，比如章节、页眉、页脚

4. <aside></aside> 侧边栏

5. <footer></footer> 脚部

6. <article></article> 代表一个独立的、完整的相关内容块，例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等