HTML 知识点 - 技术栈

HTML 全称：Hypertext Markup Language（超文本标记语言）

HTML 标签

标签的作用：HTML 通过一系列的标签（也称为元素）来定义文本、图像、链接等等。HTML 标签是由尖括号包围的关键字。

双标签（成对标签）

标签通常成对出现，包括开始标签和结束标签，内容位于这两个标签之间。

示例：

html 复制代码

<p>这是一个段落。</p>
<h1>这是一个标题。</h1>
<a href="#">这是一个超链接。</a>

单标签

除了双标签，也存在单标签。

示例：

html 复制代码

<input type="text">
<br>
<hr>

双标签与单标签的区别：单标签用于没有内容的元素，双标签用于有内容的元素。

练习

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>
</head>
<body>
    <h1>一级标题标签</h1>
    <h2>二级标题标签</h2>
    <h3>三级标题标签</h3>
    <h4>四级标题标签</h4>
    <h5>五级标题标签</h5>
    <h6>六级标题标签</h6>
    <p>这是一个段落标签</p>
    <!-- b-Bold，i-Italic，u-Underline，s-Strikethrough -->
    <p>
        更改文本样式：<b>字体加粗</b>、<i>斜体</i>、<u>下划线</u>、<s>删除线</s>
    </p>

    <!-- ul-unordered list，li-list item -->
    <ul>无序列表
        <li>无序列表元素1</li>
        <li>无序列表元素2</li>
        <li>无序列表元素3</li>
    </ul>

    <!-- ol-ordered list，li-list item -->
    <ol>有序列表
        <li>有序列表元素1</li>
        <li>有序列表元素2</li>
        <li>有序列表元素3</li>
    </ol>

    <!-- table标签作为表格根元素，tr-table row表格行，td-table data表格数据（列） -->
    <table border="1">
        <!-- th-table header -->
        <tr>
            <th>列标题 1</th>
            <th>列标题 2</th>
            <th>列标题 3</th>
        </tr>
        <tr>
            <td>元素 1</td>
            <td>元素 2</td>
            <td>元素 3</td>
        </tr>
        <tr>
            <td>元素 1</td>
            <td>元素 2</td>
            <td>元素 3</td>
        </tr>
    </table>
</body>
</html>

HTML 属性

属性的作用：属性在 HTML 中起到非常重要的作用，它们用于定义元素的行为和外观，以及与其他元素的关系。

基本语法

html 复制代码

<开始标签 属性名="属性值">

元素与属性的关系：每个 HTML 元素可以具有不同的属性

html 复制代码

<p id="describe" class="section">这是一个段落标签</p>
<a href="https://www.baidu.com">这是一个超链接</a>

属性的大小写规则

属性名称不区分大小写。

属性值对大小写敏感。

示例：

html 复制代码

<img src="example.jpg" alt="">
<img SRC="example.jpg" alt="">
<img src="EXAMPLE.JPG" alt="">
<!-- 前两者相同，第三个与前两个不一样 -->

适用于大多数 HTML 元素的属性

|--------|--------------------|
| 属性 | 描述 |
| class | 为 HTML 元素定义一个或多个类名 |
| id | 定义元素唯一的 id |
| style | 规定元素的行内样式 |

示例：

html 复制代码

<h1 id="title"></h1>
<div class="nav-bar"></div>
<h2 class="nav-bar"></h2>

<!-- 补充说明：style 用于直接在元素上定义行内样式 -->
<p style="color: red; font-size: 16px;">这是一段红色的文字</p>

1、<h1 id="title"></h1>

id="title"：给这个 <h1> 元素设置了唯一的标识 title。
id 属性的特点： 在整个 HTML 页面中必须是唯一的，一个 id 只能给一个元素使用，常用于精准定位某个元素（比如用 CSS 样式、JavaScript 操作）。
2、<div class="nav-bar"></div>

<div>：是无语义的通用容器标签，用来划分页面区域，把相关元素包裹在一起。

class="nav-bar"：给这个 <div> 元素设置了类名 nav-bar。
class 属性的特点： 可以重复使用，多个不同的元素可以共用同一个类名，常用于给一批元素设置相同的样式。
3、<h2 class="nav-bar"></h2>

class="nav-bar"：和上面的 <div> 用了同一个类名，后续可以通过这个类名给它们设置相同的样式（比如字体、颜色、布局）。

补充：实际开发中的用法示例：

html 复制代码

<!-- 带内容的写法 -->
<h1 id="title">我的网站</h1>
<div class="nav-bar">首页 | 关于我们 | 联系我们</div>
<h2 class="nav-bar">侧边栏标题</h2>

<!-- 用 style 标签给 class 和 id 设置样式 -->
<style>
  /* 给 id 为 title 的元素设置样式（唯一） */
  #title {
    color: blue;
    font-size: 30px;
  }
  /* 给所有 class 为 nav-bar 的元素设置样式（共用） */
  .nav-bar {
    color: gray;
    font-size: 16px;
    margin-top: 10px;
  }
</style>

注：CSS 中：

"#" 是 id 选择器的专属符号，对应 HTML 元素的 id 属性。
**"."**是 class 选择器的专属符号，对应 HTML 元素的 class 属性。

html 复制代码

<style>
  /* id选择器：# + id名 */
  #title {
    
  }
  
  /* class选择器：. + class名 */
  .nav-bar {

  }
</style>

超链接标签<a>常用属性

1）href 属性：

作用：指定超链接的目标地址（跳转的网址 / 路径），是 <a> 标签的核心属性。

示例：href="https://example.com" 表示点击链接会跳转到这个网址。

2）target 属性：

作用：指定链接的打开方式。

target 属性的所有有效值：

|------------|-----------------------------------------|--------------------|
| 属性值 | 核心作用 | 使用场景 |
| _self | 默认值，在当前窗口 / 标签页中打开链接（会覆盖当前页面） | 大多数普通链接（不写则默认） |
| _blank | 在新的空白窗口 / 标签页中打开链接（不会覆盖当前页面） | 跳转外部网站、重要新页面 |
| _parent | 在父框架集（frameset）中打开链接；若无父框架，效果等同于 _self | 框架页面（现在极少用） |
| _top | 在整个浏览器窗口中打开链接（突破所有框架）；若无框架，效果等同于 _self | 框架页面中跳出框架限制 |
| framename | 在指定名称的框架（frame）中打开链接（值为自定义的框架名） | 框架页面（现在几乎不用） |

注：框架（frameset/frame）是早期 HTML 布局方式，现在已被 CSS 布局替代，所以 _parent、_top、framename 几乎不用，仅作知识补充。

图片标签<img>常用属性

<img>类型：单标签，用于在页面中嵌入图片。

src 属性：指定图片的路径 / 网址，是 <img> 必须的属性；

alt 属性：替代文本，核心作用：图片加载失败时，页面会显示这个文本（提示用户 "图片未能加载出来"）；

width/height 属性：指定图片的宽度和高度（单位默认是像素 px），注意：只设置 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>HTML 属性</title>
</head>
<body>
    <!-- 带内容的写法 -->
    <h1 id="title">我的网站</h1>
    <div class="nav-bar">首页 | 关于我们 | 联系我们</div>
    <h2 class="nav-bar">侧边栏标题</h2>

    <!-- 用 style 标签给 class 和 id 设置样式 -->
    <style>
    /* 给 id 为 title 的元素设置样式（唯一） */
    #title {
        color: blue;
        font-size: 30px;
    }
    /* 给所有 class 为 nav-bar 的元素设置样式（共用） */
    .nav-bar {
        color: gray;
        font-size: 16px;
        margin-top: 10px;
    }
    </style>
    <a href="https://docs.geeksman.com">这是一个超链接</a>
    <!-- br:换行 -->
    <br>
    <a href="https://docs.geeksman.com" target="_blank">这是第二个超链接</a>
    <br>
    <!-- hr:分割线 -->
    <hr>
    <!-- alt用于指定未加载出图片时的替换文本 -->
    <img src="知识点.png" alt="图片未能加载出来" width="660" height="350">
    <p style="color: red; font-size: 16px;">这是一段红色的文字</p>
</body>
</html>

HTML 区块 -- 块元素与行内元素

一、块元素（block）

核心作用：用于组织和布局页面的主要结构 / 内容，将内容分隔成逻辑块（如段落、标题、列表等）。

显示特点：

从新行开始，占据整行宽度，呈现为独立内容块。

嵌套规则：可以包含其他块级元素和行内元素。
常见示例：<div>、<p>、<h1>~<h6>、<ul>、<ol>、<li>、<table>、<form> 等。

二、行内元素（inline）

核心作用：用于添加文本样式或作为文本的一部分（如超链接、强调文本）。

显示特点：

在同一行内呈现，不会独占一行；

只占据内容所需宽度，而非整行。

嵌套规则：不能包含块级元素，可包含其他行内元素。
常见示例：<span>、<a>、<strong>、<em>、<img>、<br>、<input> 等。

三、常用块 / 行内元素

1、容器标签 <div>

作用：划分页面区域、组织内容结构。

语法：<div class="类名">内容</div>

作用：块级通用容器，用于划分页面区域（比如 .nav 和 .content 是两个独立的块区域）。

2、行内容器标签 <span>

核心作用:精细化控制文本 / 行内元素的样式或行为。

语法：<span>文本内容</span>

作用：行内通用容器，用于包裹文本的一部分（不独占一行，仅占内容宽度）。

练习

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>
</head>
<body>
    <div class="nav">
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
        <a href="#">链接4</a>
        <a href="#">链接5</a>
    </div>
    <div class="content">
        <h1>文章标题</h1>
        <p>文章内容</p>
        <p>文章内容</p>
        <p>文章内容</p>
        <p>文章内容</p>
        <p>文章内容</p>
    </div>

    <span>这是第1个span标签</span>
    <span>这是第2个span标签</span>
    <span>这是第3个span标签</span>
    <hr>
    <span>链接点击这里<a href="#"></a></span>
</body>
</html>

HTML 表单

一、表单的核心概念

表单的本质是**"信息收集容器"**，专门用来收集用户输入信息（比如登录、注册、提交反馈、下单等）的页面区域。

二、表单的核心语法与组成

一个完整的表单由 <form> 容器 + 表单控件（输入框、按钮、单选框等）组成，核心结构如下：

1. 表单容器 <form>（块级元素）

html 复制代码

<!-- 基础语法 -->
<form action="提交地址" method="提交方式">
  <!-- 表单控件（输入框、按钮等）写在这里 -->
</form>

1）action：必填，指定表单数据提交到的服务器地址（比如后端接口 https://xxx.com/login）；

2）method：提交方式，常用 GET（默认，数据拼在 URL 后，适合简单 / 非敏感数据）或 POST（数据在请求体中，适合敏感数据如密码）。

2. 常用表单控件（核心交互元素）

基础语法

html 复制代码

<表单控件标签 name="自定义名称">

1）<input> 通用输入控件（多类型）

表单中最灵活的输入控件，通过 type 属性切换不同输入类型：

文本框（text）：用于输入普通文本。示例：<input type="text" name="username" placeholder="请输入用户名">
密码框（password）：用于输入密码（输入内容会被隐藏）。示例：<input type="password" name="pwd">
单选框（radio）：用于多选一的场景，同一组单选框需用相同 name。示例：<input type="radio" name="gender" value="male"> 男
复选框（checkbox）：用于多选多的场景，同一组复选框需用相同 name。示例：<input type="checkbox" name="hobby" value="game"> 游戏
提交按钮（submit）：触发表单提交的按钮。示例：<input type="submit" value="登录">

2）<textarea> 多行文本输入控件

专门用于输入大段文本，支持自定义行数和列数：

作用：多行文本输入，区别于 <input type="text"> 的单行输入。

示例：<textarea name="feedback" rows="5" cols="30">请输入反馈内容</textarea>

（rows 定义显示行数，cols 定义每行字符数，标签内的文字是默认提示）

3）<select> 下拉选择框控件

用于从预设选项中选择一个（或多个），适合选项较多的场景。

作用：下拉选择，节省页面空间

示例：<select name="city"> <option value="beijing">北京</option> </select>

（<option> 是下拉框的选项，value 是提交给服务器的值，标签内是显示给用户的文字）

4）<button> 按钮控件

用于触发表单操作（提交、重置）或自定义点击行为，比 <input type="submit"> 更灵活。

提交按钮：触发表单提交。

示例：<button type="submit">提交</button> <button type="reset">重置</button>

3. 表单的关键属性

1）name：所有表单控件必须加。服务器通过 name 识别数据（比如 name="username"，服务器拿到的就是 username: 用户输入的内容）；

2）value：控件的 "实际提交值"（比如单选框 value="male"，选中后提交的是 gender: male）；

3）placeholder：输入框的提示文字（比如 "请输入用户名"）；

4）required：可选，加了该属性的控件必须填写，否则表单无法提交（前端校验）。

练习

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 表单</title>
    <style>
        form {
            padding: 20px;
            font-size: 16px;
        }
        label {
            display: inline-block;
            width: 80px;
        }
    </style>
</head>
<body>
    <!-- action用#占位（实际开发替换为后端接口） -->
    <form action="#" method="POST">
        <label>用户名: </label>
        <!-- 后端需通过name接收数据 -->
        <input type="text" name="username" placeholder="请输入用户名"> <br><br>
        
        <label for="pwd">密码: </label>
        <!-- name属性与for绑定的id保持语义一致 -->
        <input type="password" id="pwd" name="password" placeholder="请输入密码"> <br><br>
        
        <label>性别: </label>
        <!-- value属性使其后端才能接收具体值 -->
        <input type="radio" name="gender" value="male" id="male"> 
        <label for="male">男</label>
        <input type="radio" name="gender" value="female" id="female"> 
        <label for="female">女</label>
        <input type="radio" name="gender" value="other" id="other"> 
        <label for="other">其他</label> <br><br>

        <label>爱好: </label>
        <!-- value属性使其后端接收多选值 -->
        <input type="checkbox" name="hobby" value="sing" id="sing"> 
        <label for="sing">唱歌</label>
        <input type="checkbox" name="hobby" value="dance" id="dance"> 
        <label for="dance">跳舞</label>
        <input type="checkbox" name="hobby" value="rap" id="rap"> 
        <label for="rap">RAP</label>
        <input type="checkbox" name="hobby" value="basketball" id="basketball"> 
        <label for="basketball">篮球</label> <br><br>

        <input type="submit" value="提交">
        <input type="reset" value="重置" style="margin-left: 10px;">
    </form>
</body>
</html>