当前位置： 首页 > news >正文

一口气入门前端——HTML5入门

news 来源：原创 2025/5/19 18:50:48
  1. HTML5

1.1 HTML 介绍

HTML（超文本标记语言）是一种用于 Web 开发的标记语言，主要用来格式化和显示网页内容。可以将其视为一种文本文件，浏览器能够读取该文本文件并显示其中的内容。HTML支持多种元素（也称作标签），例如：使用单标签 <img> 插入图片，使用双标签 <html></html> 定义HTML文档的起始和结束。借助这些元素，我们可以在网页中嵌入图像、标题、段落等不同的内容，构建起网页的页面。以下是 HTML 的基本骨架：

<!DOCTYPE html>					<!-- 用来声明这是一个 HTML5 文档，而非其他格式的文档，一般位于文档的最前面 -->
<html>							<!-- <html>、</html> 是一对双标签，用来标定该 HTML 文档的范围 -->
    
<head>							<!-- <head>、</head> 标签用来包含文档的元数据，即关于网页本身的描述信息。这部分的内容通常不直接显示在网页上 -->	
<meta charset="utf-8">			<!-- <meta> 用来提供网页的元信息，例如字符集、作者、关键词等。charset="utf-8" 代表网页字符集使用的是 UTF-8 字符集 -->	
<title>我的网页</title>			 <!-- <title>、</title> 标签定义了网页的标题，即浏览器的标签栏显示的内容 -->	
</head>
    
<body>							<!-- <body>、</body> 标签包含网页的实际内容，即用户在浏览器中看到和互动的部分。这里包含所有展示内容，如文本、图片等 -->	
</body>
    
</html>

在这里插入图片描述

1.2 标题元素

标题是通过 <h1>~<h6> 来定义的，<h1> 定义最大的标题，<h6> 用来定义最小的。可以用 h$*6 快捷键直接生成 <h1>~<h6> 。

<!DOCTYPE html>				
<html>						
    
<head>							
<meta charset="utf-8">			
<title>我的网页</title>			
</head>
    
<body>							
    <h1>这是一个一级标题</h1>
    <h2>这是一个二级标题</h2>
    <h3>这是一个三级标题</h3>  
    <h4>这是一个四级标题</h4>
    <h5>这是一个五级标题</h5>
    <h6>这是一个六级标题</h6>  
</body>
    
</html>

示例效果：

在这里插入图片描述

每一个元素（标签），都有不同的属性可以设置，例如标题元素的 align 属性，我们可以通过设置 align 属性，来调整标题的位置，这个属性有三个可选的值 left | center | right。

<!DOCTYPE html>					<!-- 用来声明这是一个 HTML5 文档，而非其他格式的文档，一般位于文档的最前面 -->
<html>							<!-- <html>、</html> 是一对双标签，用来标定该 HTML 文档的范围 -->
    
<head>							<!-- <head>、</head> 标签用来包含文档的元数据，即关于网页本身的描述信息。这部分的内容通常不直接显示在网页上 -->	
<meta charset="utf-8">			<!-- <meta> 用来提供网页的元信息，例如字符集、作者、关键词等。charset="utf-8" 代表网页字符集使用的是 UTF-8 字符集 -->	
<title>我的网页</title>			 <!-- <title>、</title> 标签定义了网页的标题，即浏览器的标签栏显示的内容 -->	
</head>
    
<body>							<!-- <body>、</body> 标签包含网页的实际内容，即用户在浏览器中看到和互动的部分。这里包含所有展示内容，如文本、图片等 -->	
    <h1 align="left">这是一个一级标题</h1>
    <h2 align="left">这是一个二级标题</h2>
    <h3 align="center">这是一个三级标题</h3>  
    <h4 align="center">这是一个四级标题</h4>
    <h5 align="right">这是一个五级标题</h5>
    <h6 align="right">这是一个六级标题</h6>  

</body>
    
</html>

示例效果：
在这里插入图片描述

但是在实际应用中，我们一般用 CSS 来调整标题的位置和样式，一般不直接通过该属性来调整标题位置。

1.3 段落、换行、水平线

<!DOCTYPE html>					
<html>						
    
<head>						
<meta charset="utf-8">			
<title>我的网页</title>			 
</head>
    
<body>							
    <p>这是一段段落</p>
    <p>这是另外一段段落</p>                                 
    <p>这是换行标签<br>可以看到我们已经实现了换行</p>    <!-- br是换行标签,是一个单标签,同时可以嵌套使用,例如嵌套在<p></p>的段落标签中使用 -->	
    <hr>                                            <!-- 水平线标签 -->	
</body>
    
</html>

示例代码：

<hr color="" width="" size="" align="">
这里介绍四个很通用的属性
color="" 设置水平线的颜色 
width="" 设置水平线的宽度，单位是像素（px）
size=""  设置水平线的高度，单位是像素（px）
align="" 设置水平线的位置

<!DOCTYPE html>					
<html>						
    
<head>						
<meta charset="utf-8">			
<title>我的网页</title>			 
</head>
    
<body>							
    <p>这是一段段落</p>
    <p>这是另外一段段落</p>                                 
    <p>这是换行标签<br>可以看到我们已经实现了换行</p>  <!-- br是换行标签,是一个单标签,同时可以嵌套使用,例如嵌套在<p></p>的段落标签中使用 -->	
    <hr color="red" width="200px" size="100px" align="center">                                            <!-- 水平线标签 -->	
</body>
    
</html>

示例效果：
在这里插入图片描述

1.4 图片元素

图片是 HTML 中很重要的一个元素（标签），我们使用 <img> 来表示图片元素。这个标签有如下几个常用的属性：

  • src：路径，图片的路径。

  • alt：规定图像加载失败时的替代文本。

  • width：图像的宽度。

  • height：图像的高度。

  • title：鼠标悬停在图像上时的提示文本信息。

    图片路径分为三种：绝对路径、相对路径和网络路径。绝对路径是从根目录开始的完整地址；相对路径通过 . 、… 等符号来表示当前目录或上一级目录的相对关系来定位图片；网络路径则是调用网络上的图片资源。

对应的三个例子：

  • 绝对路径：/images/photo.jpg（从根目录开始，位于根目录下images文件夹中的photo.jpg图片）
  • 相对路径：…/images/photo.jpg（当前目录的上一级目录下的images文件夹中的photo.jpg图片）
  • 网络路径：https://example.com/images/photo.jpg（从网络地址example.com的images文件夹中调用photo.jpg图片）

1.5 超文本链接、文本

超文本链接 <a> </a> 的概念类似于快捷方式，我们可以通过点击超文本链接来快速的跳转到另外一个网站。在超文本链接中最常用的属性是 href 用来描述跳转的地址。当然，超链接的格式也可以是图片等其他格式。

<!DOCTYPE html>					
<html>						
    
<head>						
<meta charset="utf-8">			
<title>我的网页</title>			 
</head>
    
<body>							
    <p> 百度跳转超链接 </p>
    <a href="https://www.baidu.com/"> 百度搜索 </a>
</body>
    
</html>

在这里插入图片描述

常用文本标签：

标签(都是双标签) 描述
轻微斜体，用来标记比较重点的文字
粗体
斜体
轻微粗体，一般用来表示加重语气
 删除效果
无特殊含义，一般配合 CSS 使用

<!DOCTYPE html>					
<html>						
    
<head>						
<meta charset="utf-8">			
<title>我的网页</title>			 
</head>
    
<body>							
    <p> 文本标签示例： </p>
    <p> em效果：<em> 着重文字（轻微斜体效果） </em> </p>
    <p> b效果：<b> 粗体文字 </b> </p>
    <p> i效果：<i> 斜体文字 </i> </p>
    <p> strong效果：<strong> 加重语气 </strong> </p>
    <p> del效果：<del> 删除字效果 </del> </p>
    <p> span效果：<span> span文字 </span> </p>
</body>
    
</html>

在这里插入图片描述

文本与段落不同，但是我们可以嵌套使用两者。

1.6 有序列表、无序列表、表格

有序列表用 <ol>、</ol>、<li>、</li> 来表示，拥有 type 属性，该属性用来规定列表的格式：

<!DOCTYPE html>					
<html>						
    
<head>						
<meta charset="utf-8">			
<title>我的网页</title>			 
</head>
    
<body>							
    <ol type="1">               <!-- 阿拉伯数字列表 -->
        <li > 第一行列表 </li>
        <li> 第二行列表 </li>
        <li> 第三行列表 </li>
        <li> 第四行列表 </li>
        <li> 第五行列表 </li>
    </ol>

    <ol type="a">               <!-- 小写字母列表 -->
        <li > 第一行列表 </li>
        <li> 第二行列表 </li>
        <li> 第三行列表 </li>
        <li> 第四行列表 </li>
        <li> 第五行列表 </li>
    </ol>

    <ol type="A">               <!-- 大写字母列表 -->
        <li > 第一行列表 </li>
        <li> 第二行列表 </li>
        <li> 第三行列表 </li>
        <li> 第四行列表 </li>
        <li> 第五行列表 </li>
    </ol>

    
    <ol type="i">               <!-- 小写罗马数字列表 -->
        <li > 第一行列表 </li>
        <li> 第二行列表 </li>
        <li> 第三行列表 </li>
        <li> 第四行列表 </li>
        <li> 第五行列表 </li>
    </ol>

    <ol type="I">               <!-- 大写罗马数字列表 -->
        <li > 第一行列表 </li>
        <li> 第二行列表 </li>
        <li> 第三行列表 </li>
        <li> 第四行列表 </li>
        <li> 第五行列表 </li>
    </ol>
</body>
    
</html>

在这里插入图片描述

有序列表用 <ul>、</ul>、<li>、</li> 来表示，也拥有 type 属性：

<!DOCTYPE html>					
<html>						
    
<head>						
<meta charset="utf-8">			
<title>我的网页</title>			 
</head>
    
<body>							
    <ul type="disc">               <!-- 实心圆 -->
        <li > 第一行列表 </li>
        <li> 第二行列表 </li>
        <li> 第三行列表 </li>
        <li> 第四行列表 </li>
        <li> 第五行列表 </li>
    </ul>

    <ul type="circle">               <!-- 空心圆 -->
        <li > 第一行列表 </li>
        <li> 第二行列表 </li>
        <li> 第三行列表 </li>
        <li> 第四行列表 </li>
        <li> 第五行列表 </li>
    </ul>

    <ul type="square">               <!-- 小方块 -->
        <li > 第一行列表 </li>
        <li> 第二行列表 </li>
        <li> 第三行列表 </li>
        <li> 第四行列表 </li>
        <li> 第五行列表 </li>
    </ul>

    
    <ul type="none">               <!-- 不显示 -->
        <li > 第一行列表 </li>
        <li> 第二行列表 </li>
        <li> 第三行列表 </li>
        <li> 第四行列表 </li>
        <li> 第五行列表 </li>
    </ul>

</body>
    
</html>

在这里插入图片描述

表格用 <table>、</table> 来表示，其中行用 <tr> 实现，列用 <td> 来实现。

表格的属性：

  • border：设置表格的边框。

  • width：设置表格宽度。

  • height：设置表格的高度。

    我的网页
    一行一列 一行二列 一行三列
    二行一列 二行二列 二行三列

在这里插入图片描述

单元格合并：水平合并 colspan ，垂直合并 rowspan

<!DOCTYPE html>					
<html>						
    
<head>						
<meta charset="utf-8">			
<title>我的网页</title>			 
</head>
    
<body>
<p> 合并 6 和 7 格子 </p>							
<table align="center" border="10px">
    <tr>
        <td>格子1</td>
        <td>格子2</td>
        <td>格子3</td>
        <td>格子4</td>
        <td>格子5</td>
    </tr>
    <tr>
        <td colspan="2">格子6</td>

        <td>格子8</td>
        <td>格子9</td>
        <td>格子10</td>
    </tr>
    <tr>
        <td>格子11</td>
        <td>格子12</td>
        <td>格子13</td>
        <td>格子14</td>
        <td>格子15</td>
    </tr>
    <tr>
        <td>格子16</td>
        <td>格子17</td>
        <td>格子18</td>
        <td>格子19</td>
        <td>格子20</td>
    </tr>
    <tr>
        <td>格子21</td>
        <td>格子22</td>
        <td>格子23</td>
        <td>格子24</td>
        <td>格子25</td>
    </tr>
</table>

</body>
    
</html>

在这里插入图片描述

1.7 表单

表单是用来给用户填写信息的，是让用户能够输入信息的重要元素。使用 <form>  </form> 来表示。表单由容器和控件组成，例如按钮叫做控件，表单就是容器，它能够容纳各种控件。

表单的属性：

  • action：服务器的地址，即用户输入的数据提交到哪里。
  • name：表单的名称，识别不同的表单就是通过 name 识别的。
  • method：有 get 和 post 两个值，决定了数据的提交方式。get 提交的数据 url 可以看到，但是 post 提交的数据 url 看不到，get 一般用于提交少量数据，post 一般用来提交大量数据。

表单有三个基本组成部分：表单标签（即 form 的 name）、表单域（输入框）、表单按钮（提交按钮）

<!DOCTYPE html>					
<html>						
    
<head>						
<meta charset="utf-8">			
<title>我的网页</title>			 
</head>
    
<body>
    <form> 
        <input type="text">
        <input type="submit">
        <button> 提交按钮 </button>
    </form>

</body>
    
</html>



input 的 type 的值：

表单元素 描述
text 文本框
password 密码框，输入的文本不会直接显示
submit 提交，可以通过 value=“ … ” 来改变提交按钮上显示的文本信息

在这里插入图片描述

1.8 块元素与行内元素（内联元素）

块元素和内联元素的区别：

块元素 内联元素
独占一行，自上向下排列 不会单独占一行，只占自身的大小
可以设置 width ， height 属性 不可以设置 width ， height 属性
一般块级元素可以包含行内元素和其他块元素 一般内联元素可以包含内联元素，但包含不了块级元素
div、form、h1~h6、hr、p、table、ul a、b、em、i、span、strong等

但也有一些特例，button、img、input 等，他们是内联元素，他们可以设置 width ， height 属性

1.9 div等

<div>  </div> 容器元素，该元素常用于划分网页的区域，使得我们的网页规划的更加清晰。我们一般配合 CSS 使用来划分网页。div，我们可以想象为一个一个盒子，用这些盒子来规划网页的分区。

div 的通用属性：

  • id: 指定div元素的唯一标识符。
  • class: 为div元素添加一个或多个类名，以便应用CSS样式。
  • lang: 指定div元素中内容的语言。
  • dir: 定义div元素中内容的文本方向，如ltr（从左到右）或rtl（从右到左）。
  • title: 提供div元素的提示信息，通常显示为工具提示文本。
  • data-*: 用于存储与div元素相关的自定义数据。

在这里插入图片描述

相关文章：

  • 内网穿透简单使用
  • QEMU参数与使用
  • nginx播放视频（auth_request鉴权）
  • 人工智能行为识别之slowfast源码解读
  • Linux Mem -- MTE in AArch64 Linux
  • 树莓集团全国拓展：产业园服务与人才培养的协同发展
  • 【开源项目】数字孪生武汉～超经典智慧城市CIM/BIM数字孪生可视化项目——开源工程及源码
  • DeepSeek操作Excel，实现图表自动化生成
  • 实用教程：用微服务搭建你的2025项目
  • HDFS应用-后端存储cephfs-文件存储和对象存储数据双向迁移
  • Node.js NativeAddon 构建工具：node-gyp 安装与配置完全指南
  • uni-app中常用的指令语句有哪些?
  • 获取 Windows 视频时长的正确方式——Windows Shell API 深度解析
  • vscode C/C++ CMake 调试
  • huggingface.co 网站无法访问的解决办法
  • TestHubo基础教程-创建项目
  • 如何评估云原生GenAI应用开发中的安全风险（上）
  • 如何优化React应用的性能？
  • Navicat 迁移数据库 传输数据
  • 光伏设计软件分类：无人机、Unity3D引擎齐上阵
  • 石家庄桥西区通报“中药液”添加安眠药问题：对医院立案调查
  • 《缶翁的世界》首发：看吴昌硕等湖州籍书画家的影响
  • 意德首脑会谈，梅洛尼警告欧盟绿色政策面临“工业荒漠化”
  • 北方首场高温将进入鼎盛阶段，江南华南多地需警惕降雨叠加致灾
  • 体坛联播｜水晶宫队史首夺足总杯，CBA总决赛爆发赛后冲突
  • 南京艺术学院博导、雕塑家尹悟铭病逝，年仅45岁