前端笔记（一）：HTML5 入门学习

news2025/1/24 22:31:53

前言：
在完成 Java 的 SpringBoot 学习并练习了几个项目后，出于对编程的兴趣和没有组织的局限性，为了开发一些个人的小项目，我将开始前端部分的学习，预计会学到 Vue 框架，同时会把自己的学习笔记发布成博客，希望与大家共勉！

HTML（超文本标记语言）是一种标记语言，用于创建网页结构。它由一系列称为标签（tags）的元素组成，每个标签描述了文档中不同的内容类型，如文本、图像、链接等。HTML标签以尖括号包围，其中包括标签名称和可能的属性。这些标签通常是成对出现的，有开标签和闭合标签，但也有一些单标签，表示没有内容的元素。

开发工具：VSCode + 谷歌浏览器

HTML 基本骨架

HTML 基本骨架指的是是网页模板，可以使用 VSCode 中的英文 ! 快速生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    网页主体
</body>
</html>

这段代码是一个基本的 HTML 结构。让我逐步解释它的作用：

  1. <!DOCTYPE html>：声明文档类型为 HTML5，通知浏览器使用 HTML5 标准解析页面。
  2. <html lang="en">：开始HTML文档的根元素。lang="en"属性表示页面的语言是英语。该属性有助于搜索引擎和辅助技术确定页面的语言。
  3. <head>：这部分包含了文档的元数据，不会直接显示在浏览器窗口中，包括：
  • <meta charset="UTF-8">：指定文档使用的字符编码为 UTF-8，确保能够正确显示多种语言和符号。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">：设置移动设备的视口宽度等于设备宽度，并且初始缩放级别为 1，有助于响应式网页设计在移动设备上正确显示。
  1. <title>网页标题</title>：定义了网页的标题，显示在浏览器标签页上，也在搜索引擎结果中作为页面标题显示。
  2. <body>：网页的主体部分，其中包含了实际显示在浏览器窗口中的内容。在这个示例中，网页主体是简单的文本内容，但通常会包含更多的HTML标签来构建页面的结构和内容。

在开发的初期我们只需要关注 中的部分即可， 中的部分会在后续的学习中学到。

标签的基本介绍

标签的基本语法

  1. 标签成对出现，中间包裹内容，标签分为开始标签和结束标签。
  2. <…> 里面放英文字母（标签名）。
  3. 结束标签比开始标签多一个 /。
  4. 拓展：成对出现的标签为双标签，只有开始标签的称为单标签。

标签的关系

一个标签中包含多个标签称为父子关系或者嵌套关系，比如后面提到的

就可以包裹多个标签，被包裹的这些标签与 div 形成父子关系，这些平级的标签彼此之间为兄弟关系。
image.png
如上图中，红框是一个父级标签，里面的图片部分和文字部分是子级标签，图片和文字互为兄弟关系。

注释

注释就是对代码的解释和说明，能够提高代码的可读性。方便理解查找和方便项目组中的其他程序员了解你的代码，方便之后对代码的修改。

注释的格式为： ，注释不会在浏览器中显示，在 VSCode 中注释的快捷键是 ctrl + /

常用标签

标题标签

一般用在新闻标题，文章标题，网页区域名称，产品名称等等，具有加粗加大展示的效果

标签名 h1 ~ h6 （双标签）
经验分享：h1 一个标签只能用一次，用于放标题和网页的 LOGO 等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="text-align: center;">
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>
    </div>
</body>
</html>

具体的显示效果：
image.png

段落标签

一般用在新闻段落、文章段落、产品描述信息等等

标签名：p（双标签）
显示特点：独占一行，段落之间存在间隙

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>HTML 是一种超文本标记语言，超文本（链接），标记也叫标签，就是带尖括号的文本。</p>
    <p>HTML 是一种超文本标记语言，超文本（链接），标记也叫标签，就是带尖括号的文本。</p>
    <p>HTML 是一种超文本标记语言，超文本（链接），标记也叫标签，就是带尖括号的文本。</p>
</body>
</html>

换行与水平线标签

我们需要知道的是，在 HTML 文件中敲回车浏览器是不会识别的。
换行 <br>、水平线 <hr>

文本格式化标签

image.png
开发的时候一般使用左边的部分，带有解释性质，一般字体的格式是由 CSS 文件控制的，这里略作了解。

图像格式标签

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
      <!-- src 为图片的路径， alt 为如果图片加载不出来显示的文本 -->
      <img src="./jpg/Redis.jpg" alt="这是一张图片">
  </body>
</html>
路径

路径就是查找文件的时候，从起点到终点经历的路线，分为相对路径和绝对路径

超链接标签

<a href="https://www.baidu.com:>跳转到百度</a>

  • 超链接默认是在本窗口打开页面，如果要指定在新窗口打开的话需要加上 target="_blank
  • 开发初期，不确定跳转地址的时候，href 的属性值可以写 #，就是在当前页面刷新一下

音频标签

<audio src=""></audio>
常见属性：
image.png
在书写 HTML5 的时候，如果属性名和属性值是相同的，可以缩写为一个单词

视频标签

<video src=""></video>
常见属性
image.png

列表、表格与表单

列表

布局内容排列整齐的区域，分为：无序列表、有序列表和定义列表

  1. 无序列表：布局片列整齐的不需要规定顺序的区域
    1. 标签：ul 嵌套 li，ul 是无序列表，li 是列表条目
  2. 有序列表：布局排列整齐的需要顺序的区域，顺序由数字或指定的其他样式显示
    1. 标签：ol 嵌套 li
    2. 需要注意的是 ol 只能包括 li 标签，但是 li 标签可以包裹任何内容
  3. 定义列表：用在网页底部，类似于帮助中心的位置
    1. 标签：dl 嵌套 dt 和 dd
    2. dl 表示整个定义列表，dt 表示定义列表的名称，dd 表示具体的信息，可以参考下面的显示效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 演示无序列表的使用 -->
    <ul>
        <li><a href="http://baidu.com" target="_blank">跳转到百度1</a></li>
        <li><a href="http://baidu.com" target="_blank">跳转到百度2</a></li>
        <li><a href="http://baidu.com" target="_blank">跳转到百度3</a></li>
    </ul>
    <!-- 演示有序列表的使用 -->
    <ol>
        <li>第一条</li>
        <li>第二条</li>
        <li>第三条</li>
    </ol>
    <!-- 演示定义列表的使用 -->
    <dl>
        <dt>服务中心</dt>
        <dd>申请售后</dd>
        <dd>请求服务</dd>
        <dt>服务中心</dt>
        <dd>申请售后</dd>
        <dd>请求服务</dd>
    </dl>
</body>
</html>

显示效果
image.png

表格标签

网页中的表格与 EXCLE 表的效果类似，用于清晰的展示数据

标签：table 嵌套 tr，tr 嵌套 td 和 th，我们可以在写表格标签的时候加上 thead、tbody、tfoot 标签来使得表 格更有可读性，这些标签不会实际显示。
为了更好的展示表格的范围这里使用 border 来展示单元格的边框，具体的展示样式的设定也是放在 CSS 的学习中进行。
image.png

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
      <table border="5px">
      <thead>
          <tr>
              <th>姓名</th>
              <th>年龄</th>
              <th>性别</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>Tom</td>
              <td>19</td>
              <td>男</td>
          </tr>
      </tbody>
      <tfoot>
          <tr>
              <td>你好</td>
          </tr>
      </tfoot>
      </table>
  </body>
</html>
合并单元格

作用：将多个单元格合并成一个单元格，来合并同类信息

合并单元格的步骤

  1. 确定需要合并的目标
  2. 保留最左或者最上边的单元格，添加属性，rowspan 或者 colspan 将其他的不需要的单元格删掉
  3. rowspan 表示跨行合并，保留最上面单元格的内容，colspan 表示跨列合并，保留最左边的单元格的内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="5px">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tom</td>
            <td rowspan="2">19</td>
            <td>男</td>
        </tr>
        <tr>
            <td>Jack</td>
            <td>男</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td  colspan="3">你好</td>
        </tr>
    </tfoot>
    </table>
</body>
</html>

展示效果：
image.png

表单标签

作用：
需要收集用户输入的信息的场景，比如登录注册界面，搜索等等。主要有 input 标签、下拉菜单、文本域等等。

很多常见的功能都是由 input 标签实现的，input 标签有一个 tyoe 属性值，这个属性值不同则功能不同。

<input type="...">，利用里面的 checked 属性可以实现单选框或者多选框的默认选中。
补充：如果属性名和属性值相同的话，只写属性名即可，比如上面提到的 checked属性实际上是
checked="checked"。
image.png
因为还没有学习 JavaScript，不用考虑和后端的交互，这里只需要了解它们的显示效果即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- placeholder 显示提示信息 -->
    账号：<input type="text" placeholder="请输入账号"><br>
    密码：<input type="password" placeholder="请输入密码"><br>
    <!-- 使用 name 属性加上单选功能，checked 表明默认选中该属性 -->
    <input type="radio" name="gender" checked>男
    <input type="radio" name="gender">女<br>
    <!-- 多选框加上 checked 属性也是默认选中 -->
    多选框：<input type="checkbox" checked="checked"><br>
    <!-- multiple 可以多选上传的文件 -->
    传文件：<input type="file" multiple>
</body>
</html>

image.png

下拉菜单

比如我们在填写基本信息的时候填写地址的时候，很多网页选择用下拉标签

标签：select 嵌套 option，selected 表示整个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    城市：
    <select>
        <option>北京</option>
        <option>山东</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
        <!-- 加上 selected 实现默认选中-->
        <option selected>武汉</option>
    </select>
</body>
</html>

文本域标签

作用：多行输入文本的表单控件，上面的 是单行文本

标签：<testarea>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 右下角有一个拖拽功能，但是未来为了减小影响会禁用掉 -->
    <textarea>请输入评论</textarea>
</body>
</html>

label 标签

作用：
网页中，某个标签的说明文本，可以使用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围。比如上面实现的性别选择的单选框，在很多网页中我们发现点击男或者点击女就会实现单选框的选中，提高了用户的体验。

使用 label 包裹 input 标签中的内容，当用户单击文本的时候就相当于单击了这个 input 标签
其实不只是 input 标签，很多标签都能通过 <label> 来实现和文字内容的关联。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <body>
        <label><input type="radio" name="gender">男</label>
        <label><input type="radio" name="gender">女</label>
    </body>
</html>

按钮

<button type="">按钮</button>
image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
    <button type="reset">按钮</button>
    <button type="submit">按钮</button>
</body>
</html>

这里不对它做过多的介绍，因为按钮的样式或者使用效果都需要配合 CSS 或者 JavaScript 来使用

无语义的布局标签

作用：布局网页（划分王爷区域，摆放内容）

  • div 独占一行
  • span 不换行

字符实体

当我们需要在网页上展示这些标签的时候，为了防止浏览器将其解释为一个标签，需要使用下面的实体名称代替。

image.png

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1279272.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

赤龙ERP项目

赤龙ERP项目

目录 ERP简介 &#xff08;1&#xff09;软件永久免费、持续迭代、gitee开源&#xff0c;github开源 &#xff08;2&#xff09;实现主流程的业务和财务闭环 &#xff08;3&#xff09;完备的文档&#xff0c;易于部署和二次开发 技术与平台 SpringBoot2MySQLRedisJDK1.8Tom…
阅读更多...
鸿蒙是Android套壳么，当然不是，ArkTS还是很有意思的

鸿蒙是Android套壳么，当然不是，ArkTS还是很有意思的

前段时间看新闻&#xff0c;说是明年开始鸿蒙就要和andorid脱钩了。 大概就是这样的&#xff1a; 看到这个&#xff0c;我兴趣就来了。我有个华为P30&#xff0c;升级过鸿蒙系统&#xff0c;用起来也没啥变化&#xff0c;兼容andorid应用&#xff0c;然后就是开机去掉了Powere…
阅读更多...
多表查询与子查询

多表查询与子查询

问题的引出&#xff1a; 这里有一个留言板&#xff0c;其中一条评论包含了商品名称good&#xff08;商品表&#xff09;&#xff0c;留言content(留言表)。 那么请问如将这个评论从数据库查询出来&#xff1f;这就涉及到了多表查询。 多表查询是指基于两个和两个以上的表查询.…
阅读更多...
mediapipe+opencv实现保存图像中的人脸，抹去其他信息

mediapipe+opencv实现保存图像中的人脸，抹去其他信息

mediapipeopencv MediaPipe本身不提供图像处理功能&#xff0c;它主要用于检测和跟踪人脸、手势、姿势等。如果您想要从图像中仅提取人脸主要信息并去除其他信息. # codingutf-8 """project: teatAuthor&#xff1a;念卿 刘file&#xff1a; test.pydate&…
阅读更多...
【KPDK】概述

【KPDK】概述

DPDK的主要目标是为数据平面应用程序中的快速数据包处理提供一个简单、完整的框架。用户可以使用代码来理解所采用的一些技术&#xff0c;构建原型或添加自己的协议栈。可提供使用DPDK的替代生态系统选项。 DPDK框架通过创建环境抽象层&#xff08;EAL&#xff09;为特定环境创…
阅读更多...
LeetCode Hot100 169.多数元素

LeetCode Hot100 169.多数元素

题目&#xff1a; 给定一个大小为 n 的数组 nums &#xff0c;返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。 你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 方法一&#xff1a;哈希表 ​ class Solution {public int…
阅读更多...
记录一次vscode markdown的图片路径相关插件学习配置过程

记录一次vscode markdown的图片路径相关插件学习配置过程

插件及说明查找过程 csdn搜索markdown图片路径&#xff0c;找到关于这一款插件的回答。打开vscode拓展搜索Paste Image这款插件&#xff0c;看到下载量挺高的&#xff0c;应该不赖。 点击仓库,进入该插件开源的github仓库,查看README文件阅读说明. 淡然在Vscode 插件项目下的细…
阅读更多...
C语言之结构体

C语言之结构体

一.前言引入. 我们知道在C语言中有内置类型&#xff0c;如&#xff1a;整型&#xff0c;浮点型等。但是只有这些内置类 型还是不够的&#xff0c;假设我想描述学⽣&#xff0c;描述⼀本书&#xff0c;这时单⼀的内置类型是不⾏的。描述⼀个学⽣需要名字、年龄、学号、⾝⾼、体…
阅读更多...
vue $nextTick 样式私有化

vue $nextTick 样式私有化

$nextTick 先updated中更新&#xff0c;再nextTick 状态更改做什么事情&#xff1a; updated $nextTick 同步执行完之后&#xff0c;把当前放到队列中 $forceUpdate->sub.update() // 把更新操作放在队列里面 队列机制 基于发布订阅模式&#xff0c;callbacks队列 更新完毕…
阅读更多...
Java类的初始化顺序

Java类的初始化顺序

类初始化顺序遵循以下三个原则&#xff08;优先级依次递减&#xff09; 1、静态对象&#xff08;变量&#xff09;优先于非静态对象&#xff08;变量&#xff09;初始化&#xff0c;其中静态对象&#xff08;变量&#xff09;只初始化一次&#xff0c;而非静态对象&…
阅读更多...
揭秘原型链：探索 JavaScript 面向对象编程的核心（上）

揭秘原型链：探索 JavaScript 面向对象编程的核心（上）

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…
阅读更多...
[UnityWebGL]修改webgl启动模板

[UnityWebGL]修改webgl启动模板

首先了解什么是WEBGGL启动模板&#xff0c;如下图&#xff1a; 其次&#xff0c;启动模板在哪里设置&#xff0c;如下图&#xff1a; 最后&#xff0c;怎么改启动模板里面的内容&#xff08;提供最简单的方式&#xff0c;直接改官方的&#xff09;&#xff1a; 1、首先在Asset…
阅读更多...
Spring Cloud Gateway与spring-cloud-circuitbreaker集成与理解

Spring Cloud Gateway与spring-cloud-circuitbreaker集成与理解

官方文档 spring-cloud-gateway文档地址&#xff1a; https://spring.io/projects/spring-cloud-gateway#overview spring-cloud-circuitbreaker文档地址&#xff1a; https://spring.io/projects/spring-cloud-circuitbreaker 两者关系 首先spring-cloud-gateway集成了断路…
阅读更多...
[c++]——string类____详细初步了解string类的运用

[c++]——string类____详细初步了解string类的运用

在成为大人的路上喘口气. 目录 &#x1f393;标准库类型string &#x1f393;定义和初始化string对象 &#x1f4bb;string类对象的常见构造 &#x1f4bb;string类对象的不常见构造 &#x1f4bb;读写string对象 &#x1f393; string类对象的修改操作 &#x1f4…
阅读更多...
Opencv制作电子签名(涉及知识点：像素过滤,图片通用resize函数,像素大于某个阈值则赋值为其它的像素值)

Opencv制作电子签名(涉及知识点：像素过滤,图片通用resize函数,像素大于某个阈值则赋值为其它的像素值)

import cv2def resize_by_ratio(image, widthNone, heightNone, intercv2.INTER_AREA):img_new_size None(h, w) image.shape[:2] # 获得高度和宽度if width is None and height is None: # 如果输入的宽度和高度都为空return image # 直接返回原图if width is None:h_ratio …
阅读更多...
git-6

git-6

1.如何用project管理issue&#xff1f; 用project看板管理issue 有五种类型&#xff1a;None、Basic kanban、Automated kanban、Automated kanban with reviews、Bug triage 首先选用Bug triage 利用看板就会很直观&#xff0c;很便捷&#xff0c;Issues也支持&#xff0c;有…
阅读更多...
OpenTelemetry系列 - 第4篇 OpenTelemetry K8S生态

OpenTelemetry系列 - 第4篇 OpenTelemetry K8S生态

目录 一、【Helm】添加OTel Helm repo二、【Helm Chart】OTel Collector2.1 daemonset2.2 deloyment 三、【K8S Operator】OTel Operator3.1 安装OTel Operator3.2 部署OpenTelemetryCollector3.2.1 Deloyment Mode3.2.2 DeamonSet Mode3.2.3 StatefulSetMode3.2.4 Sidecar Mod…
阅读更多...
思维模型 莫扎特效应

思维模型 莫扎特效应

本系列文章 主要是 分享 思维模型&#xff0c;涉及各个领域&#xff0c;重在提升认知。音乐激发无限潜能。 1 莫扎特效应的应用 1.1 莫扎特效应在教育领域的应用-Baby Einstein”公司 在美国&#xff0c;有一家名为“Baby Einstein”的公司&#xff0c;该公司生产和销售专门为…
阅读更多...
SQL自学通之简介

SQL自学通之简介

目录 一、SQL 简史 二、数据库简史 1、Dr. Codds 对关系型数据库系统的十二条规则 2、设计数据库的结构 3、数据库的前景 4、对于什么是客户机/服务器型电脑系统 BernardH.Boar的定义如下&#xff1a; 5、交互式语言 6、易于实现 7、SQL 总览 三、流行的 SQL 开发工具…
阅读更多...
前端小记--2.element-ui中级联选择器cascader如何默认展开下拉框

前端小记--2.element-ui中级联选择器cascader如何默认展开下拉框

最近做项目时&#xff0c;遇到一个需求&#xff1a;在一个排班表中&#xff0c;展示人员的值班情况&#xff0c;点击单元格&#xff0c;弹出下拉框&#xff0c;修改人员排班信息。 由于下拉框选择内容是树状结构&#xff0c;这里使用了element-ui中级联组件cascader&#xff0c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023