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

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

article 2025/2/10 0:01:52

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元素相关的自定义数据。

在这里插入图片描述

查看全文

http://www.kler.cn/a/538521.html

基于SpringBoot的校园社交平台

10vue3实战-----实现登录的基本功能

基于DeepSeek API和VSCode的自动化网页生成流程

模型冗余系统(系统科学)

索引失效的场景

C++，设计模式，【单例模式】

机器学习数学基础：14.矩阵的公式

CloudPaste：基于 Cloudflare Workers 的在线剪贴板和文件分享服务

Vim 多窗口编辑及文件对比

python_json转yolo文件

伪分布式Spark3.4.4安装

webview_flutter的使用

Vite 代理下的 POST 请求跨域问题排查与解决方案

搭建linux qt5.6环境

RabbitMQ 从入门到精通：从工作模式到集群部署实战（五）

vue封装组件进阶

Visual Basic语言的区块链

Unity做2D小游戏2------创建地形和背景

Spring Boot的常用注解

光伏-报告显示，假期内，硅料端签单顺序发货相对稳定。若3月份下游存提产，则不排除硅料价格有上调预期。

Java怎么记录网络安全情报 java转网络安全

微服务日志查询难解决方案-EFK

增加工作台菜单页面，AI问答应用支持上下文设置，数据库表索引优化，zyplayer-doc 2.4.8 发布啦！

deepseek+kimi自动生成ppt

【信奥赛CSP-J 需要掌握的STL知识有哪些？】

【HarmonyOS NEXT】systemDateTime 时间戳转换为时间格式 Date，DateTimeFormat

一行一列	一行二列	一行三列
二行一列	二行二列	二行三列

相关文章：