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

前言：
在完成 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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

WPF实现文字纵向排布的TabItem

WPF实现文字纵向排布的TabItem

文章目录 基本用法文字竖排显示 WPF布局 基本用法 WPF中的TabControl是一个容器控件&#xff0c;用于在单个窗体或页面中承载多个选项卡。每个选项卡可以包含不同的控件&#xff0c;用于显示不同的内容&#xff0c;其最简单的调用方法如下&#xff0c;只需在TabControl中无脑…
阅读更多...
Qt Creator 11.0.3同时使用Qt6.5和Qt5.14.2

Qt Creator 11.0.3同时使用Qt6.5和Qt5.14.2

Qt Creator 11.0.3同时使用Qt6.5和Qt5.14.2 概要方法1.打开Qt Creator中的Kit&#xff0c;这里我直接附上几张截图&#xff0c;不同的版本打开位置可能有所不同&#xff0c;总之最终目的是要打开构建套件&#xff08;Kit&#xff09;2.可以看到构建套件里面有包含了“构建套件K…
阅读更多...
Java基础-----Date类及其相关类（一）

Java基础-----Date类及其相关类（一）

文章目录 1. Date类1.1 简介1.2 构造方法1.3 主要方法 2. DateFormat 类2.1 简介2.2 实例化方式一&#xff1a;通过静态方法的调用2.2 实例化方式二&#xff1a;通过创建子类对象 3. Calendar类4. GregorianCalendar 1. Date类 1.1 简介 java.util.Date:表示指定的时间信息&a…
阅读更多...
Structured Streaming: Apache Spark的流处理引擎

Structured Streaming: Apache Spark的流处理引擎

欢迎来到我们的技术博客&#xff01;今天&#xff0c;我们要探讨的主题是Apache Spark的一个核心组件——Structured Streaming。作为一个可扩展且容错的流处理引擎&#xff0c;Structured Streaming使得处理实时数据流变得更加高效和简便。 什么是Structured Streaming&#…
阅读更多...
高端大气简历模板（精选8篇）

高端大气简历模板（精选8篇）

想要让简历在众多求职者中脱颖而出&#xff0c;吸引HR的眼球吗&#xff0c;可以看看这8篇精选的高端大气简历模板&#xff01;本文为大家提供了多种行业、职位的简历案例&#xff0c;助大家打造一份令人惊艳的简历&#xff0c;轻松斩获心仪职位&#xff01; 高端大气简历模板下…
阅读更多...
【Vulnhub 靶场】【HackathonCTF: 2】【简单】【20210620】

【Vulnhub 靶场】【HackathonCTF: 2】【简单】【20210620】

1、环境介绍 靶场介绍&#xff1a;https://www.vulnhub.com/entry/hackathonctf-2,714/ 靶场下载&#xff1a;https://download.vulnhub.com/hackathonctf/Hackathon2.zip 靶场难度&#xff1a;简单 发布日期&#xff1a;2021年06月20日 文件大小&#xff1a;2.6 GB 靶场作者&…
阅读更多...
Opencv拖动条控制均值滤波卷积核大小,拖动条控制是否保存(涉及知识点：cv2.createTrackbar和cv2.getTrackbarPos的使用)

Opencv拖动条控制均值滤波卷积核大小,拖动条控制是否保存(涉及知识点：cv2.createTrackbar和cv2.getTrackbarPos的使用)

带拖动条的均值滤波import timeimport cv2 import numpy as npdef callback(int):passcv2.namedWindow(dst,cv2.WINDOW_AUTOSIZE)# 创建trackbar (trackbarname,winname,value,count,callback,userdata) cv2.createTrackbar(ksize, dst, 3, 30, callback) cv2.createTrackbar(s…
阅读更多...
基于Amazon Bedrock的企业级生成式AI平台

基于Amazon Bedrock的企业级生成式AI平台

基于Amazon Bedrock的企业级生成式AI平台 2023.12.2版权声明&#xff1a;本文为博主chszs的原创文章&#xff0c;未经博主允许不得转载。 Amazon Bedrock 是一项新的 AWS 服务&#xff0c;可让企业通过 API 轻松利用和自定义生成式 AI 模型。公司现在可以构建和扩展人工智能应…
阅读更多...
Kubernetes学习笔记-Part.09 K8s集群构建

Kubernetes学习笔记-Part.09 K8s集群构建

目录 Part.01 Kubernets与docker Part.02 Docker版本 Part.03 Kubernetes原理 Part.04 资源规划 Part.05 基础环境准备 Part.06 Docker安装 Part.07 Harbor搭建 Part.08 K8s环境安装 Part.09 K8s集群构建 Part.10 容器回退 第九章 K8s集群构建 9.1.集群初始化 集群初始化是首…
阅读更多...
vue项目node-sass^4.14.1 python gyp 报错解决办法

vue项目node-sass^4.14.1 python gyp 报错解决办法

npm i node-sass4.14.1 --sass_binary_sitehttps://npm.taobao.org/mirrors/node-sass/参考链接&#xff1a;链接
阅读更多...
主要分布式文件系统架构对比分析：GFS vs. Tectonic vs. JuiceFS

主要分布式文件系统架构对比分析：GFS vs. Tectonic vs. JuiceFS

随着技术的进步和数据的不断爆炸&#xff0c;传统的磁盘文件系统已经暴露出它们的局限性。为了满足不断增长的存储需求&#xff0c;分布式文件系统作为动态且可扩展的解决方案应运而生。在本文中&#xff0c;我们探讨了三种代表性分布式文件系统的设计原则、创新和解决的挑战&a…
阅读更多...
网站有必要使用SSL证书吗

网站有必要使用SSL证书吗

随着互联网的快速发展&#xff0c;网络安全问题也变得日益突出&#xff0c;SSL证书的作用日益凸显。 什么是SSL证书&#xff1f; SSL证书&#xff08;Secure Sockets Layer Certificate&#xff09;&#xff0c;也称为TLS证书&#xff08;Transport Layer Security Certifica…
阅读更多...
基于springboot,vue高校图书馆管理系统

基于springboot,vue高校图书馆管理系统

开发工具&#xff1a;IDEA 服务器&#xff1a;Tomcat9.0&#xff0c; jdk1.8 项目构建&#xff1a;maven 数据库&#xff1a;mysql5.7 系统分前后台&#xff0c;项目采用前后端分离 前端技术&#xff1a;vueelementUI 服务端技术&#xff1a;springbootmybatisredis 本项…
阅读更多...
工业机器视觉megauging（向光有光）使用说明书（十二，轻量级的visionpro）

工业机器视觉megauging（向光有光）使用说明书（十二，轻量级的visionpro）

关于最后一个工具的介绍&#xff1a;就是这个“相机图像” 我们可以鼠标双击点进去看一看&#xff1a; 在图像上点击&#xff0c;就可以截取一块图像&#xff0c;是可以放大缩小的&#xff0c;这个放大很low&#xff0c;是我以前研究缩放入门时的版本&#xff0c;本想删除&…
阅读更多...
文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《基于多场景模糊集和改进二阶锥方法的配电网优化调度》

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《基于多场景模糊集和改进二阶锥方法的配电网优化调度》

这个标题涉及到配电网&#xff08;Distribution Network&#xff09;的优化调度问题&#xff0c;其中使用了两个关键的方法&#xff1a;多场景模糊集和改进二阶锥方法。 多场景模糊集&#xff1a; 多场景&#xff1a; 这可能指的是在考虑不同情景或条件下的配电网运行状态。每个…
阅读更多...
[UnityWebGL]修改webgl启动模板

[UnityWebGL]修改webgl启动模板

首先了解什么是WEBGGL启动模板&#xff0c;如下图&#xff1a; 其次&#xff0c;启动模板在哪里设置&#xff0c;如下图&#xff1a; 最后&#xff0c;怎么改启动模板里面的内容&#xff08;提供最简单的方式&#xff0c;直接改官方的&#xff09;&#xff1a; 1、首先在Asset…
阅读更多...
＜DB2＞《AIX服务器DB2数据库裸设备表空间扩容方案》

＜DB2＞《AIX服务器DB2数据库裸设备表空间扩容方案》

《AIX服务器DB2数据库裸设备表空间扩容方案》 1 表空间状态查看1.1 连接数据库&#xff08;实例用户操作&#xff09;1.2 查看表空间剩余&#xff08;实例用户操作&#xff09;1.3 查看所属表空间的容器属性&#xff08;实例用户操作&#xff09; 2 VG状态和LV状态查看2.1 查看…
阅读更多...
宝塔+docker+jenkins部署vue项目----笔记版

宝塔+docker+jenkins部署vue项目----笔记版

宝塔dockerjenkins部署vue项目&#xff08;保姆级教程&#xff09;https://blog.csdn.net/weixin_47284756/article/details/129339940 基于上述教程&#xff0c;不同的地方。 1.我使用的是gitee&#xff0c;所以需要在jenkins中安装gitee插件 配置gitee&#xff0c;其他默认配…
阅读更多...
前端入口教程_web01

前端入口教程_web01

web标准 记得看&#xff01; html&#xff1a;表示整个页面 head&#xff1a; titile&#xff1a; body&#xff1a; 常用标签 1.标题标签 2.段落标签 3.换行标签 4.文本格式化标签 5. 和 标签 6.图像标签 相对路径–用来插自己本地的图片 #### 绝对路径–用来插网上找的图…
阅读更多...
二叉树_翻转二叉树

二叉树_翻转二叉树

//给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 // // // // 示例 1&#xff1a; // // // // //输入&#xff1a;root [4,2,7,1,3,6,9] //输出&#xff1a;[4,7,2,9,6,3,1] // // // 示例 2&#xff1a; // // // // //输入…
阅读更多...
最新文章

Copyright @ 2022~2023