前端HTML基础知识

1.HTML介绍

HTML(HyperText Markup Language,超文本标记语言)是构成网页的基本元素,是一种用于创建网页的标准化标记语言。HTML不是一种编程语言,而是一种标记语言,通过标签来描述网页的结构和内容。

超文本:超文本是指超越纯文本的文本,这意味着HTML不仅能包含文本,还能包含图片/表格/列表/链接/按钮等内容。

标记语言:HTML 使用**标签**来标记网页内容。不同的标签有不同的功能,学习HTML就是学习如何使用这些标签来构建网页。

标签:也称为标记或元素,用于在网页中标记和定义内容。每个标签有特定的语法和功能。标签的基本语法是使用尖括号包围标签名,标签名不区分大小写,推荐使用小写字母书写。标签通常分为双标签和单标签两类:

  • - 双标签(例如`<p></p>`):用于定义一段内容,内容位于开始标签和结束标签之间。
  • - 单标签(例如`<img/>`):用于定义单一的元素或属性,没有结束标签。

标签属性:每个属性都为标签添加了额外的信息或设置,让浏览器知道如何正确处理内容。属性书写在开始标签中,使用空格与标签名隔开,属性名与属性值之间用等号连接,属性值用引号括起来。例如图片标签:`<img src="image.jpg" alt="描述">`。

2.HTML基本框架

<!-- 输入!+Tab键,会自动生成<!DOCTYPE html>标签。 -->
<!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>
</body>
</html>

基本框架内容说明

<!DOCTYPE html>
<!-- 告诉浏览器 按照html5的文档规范去解析  --><html lang="en"><!-- 所有网页最大的结构 网页中所有的标签存放在html标签中 --><!-- lang属性可以帮助搜索引擎了解网页的主要语言,从而改善搜索结果的相关性。 --><!-- en为英文,zh-CN为中文 --><head>
<!-- 头部存放页面相关的关键配置或者引入资源--><meta charset="UTF-8"><!-- meta标签:提供有关页面的元信息,用来设置网页的基本信息 --><!-- charset:表示网页编码格式浏览器打开网页的时候会使用charset指定的编码读取整个HTML文
档 --><!-- 告诉浏览器使用utf-8编码 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 配置移动端信息 --><!-- viewport:用于控制网页在不同设备上的显示方式 --><!-- width=device-width:设置视口宽度为设备的宽度 --><!-- initial-scale=1.0:设置初始缩放比例为1.0 --><title>Document</title><!-- 网页标题名称,可自定义修改 -->
</head>
<body><!-- 自定义内容 -->
</body>
</html>

3.HTML文本标签

3.1 标题标签

<!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>
<!-- 1.标题标签
用于定义不同级别的标题,通常用于网页的标题、章节标题等。
常见的标题标签有<h1>到<h6>,其中<h1>是最高级别的标题,<h6>是最低级别的标题。--><h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><h4>这是四级标题</h4><h5>这是五级标题</h5><h6>这是六级标题</h6></body>
</html>

运行结果:

3.2 段落标签

段落标签由开始标签<p>和结束标签</p> 组成,开始和结束标签之间的内容会被视为一个段落。段落 与段落之间有一定的间距。这有助于使页面内容更易读,提升用户体验。段落标签会独占一整行的,在 网页当中我们有单独显示的一行文字我们也是可以使用到p标签的。

<!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><!-- 2.段落标签
用于定义段落文本,通常用于网页的正文内容。
常见的段落标签有<p>,其中<p>用于定义一个段落。--><p>北国风光,千里冰封,万里雪飘。</p><!-- 添加换色与更改字体大小属性 --><p style="color: red;font-size: 20px;">望长城内外,惟余莽莽;大河上下,顿失滔滔。</p>
<!-- <span></span>更改部分字体属性 --><p>望长城内外,惟余莽莽;<span style="color: blue">大河上下</span>,顿失滔滔。</p></body>
</html>

运行结果:

3.3 其他标签


<!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><!-- 3.其他常用标签换行标签<br>粗体文本标签<b></b>和<strong></strong>(强调作用) 斜体文本标签<i></i>和<em></em>(强调作用)删除线标签<s></s>和<del></del>下划线标签<u></u>和<ins></ins>上标标签<sup></sup>和下标标签<sub></sub>--><p><i>北国风光</i>,<b>千里冰封</b>,<s>万里雪飘</s>。<u>望长城内外,惟余莽莽</u></p><p>H<sub>2</sub>O</p><!-- 定义一个水的化学式 --><p>x<sup>2</sup>+y<sup>2</sup>=1</p><!-- 定义一个单位圆 --></body>
</html>

 运行结果:

4. HTML特殊标签

4.1 字符实体

在HTML书写某些特殊字符的时候,可能会遇到问题,比如要在网页里面显示出字符 < >,就有可能和 我们的标签冲突,所以有些特殊字符需要用对应代替的写法( 字符实体 )表示:

<!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><!-- 1.字符实体  特殊代码  了解使用 &lt; 在页面中呈现 "<"使用 &gt; 在页面中呈现 ">"使用 &nbsp; 在页面中呈现一个空格使用 &copy; 在页面中呈现版权符号"©"使用 &yen; 在页面中呈现人民币符号"¥"-->&lt;hello world&gt;<br>&copy;&nbsp;&nbsp;&nbsp;&yen;648元</body>
</html>

运行结果:

4.2 容器标签

<!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><!-- 2.容器标签  div id属性补充:段落标签里面只能放span标签以其他文本标签,不能放段落标签,也不能放容器标签 !为什么用容器标签来做分区呢?div标签没有默认样式语义化标签:<main></main>       页面主要内容区域标签<footer></footer>   页面底部区域标签<nav></nav>         页面导航栏区域标签<header></header>      页面顶部区域标签--><div id="header">页面顶部区域</div><div id="main">页面中部区域</div><div id="footer">页面底部区域</div><p>我是第一个p标签</p><p>我是第二个p标签</p><!-- <p><div>错误写法</div></p> --><header><div><p></p></div></header><nav></nav><main></main><footer></footer></body>
</html>

运行结果:

 4.3 图片标签

HTML使用 <img>入图片,img是image的简称。<img>是单标签,只包含属性,没有结束标签。通过标签属性来要图片 在页面上显示。

属性注意点:

  • 标签的属性写在开始标签内部
  • 标签上可以同时存在多个属性
  • 属性之间以空格隔开
  • 属性之间没有顺序之分

<!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><!-- 3.图片标签  img  单标签
src属性:图片路径,必须要填,图片的后缀也要写上   jpg,png,gif,webp....绝对路径:网络图片地址,从电脑盘符(c或者d盘)触发的一个完整路径   相对路径:./本层文件夹或者../ 
width 属性:图片宽度
height属性:图片高度
如果只设置一个,另一边会根据图片的宽高比自动进行缩放
alt属性:图片加载失败的提示文字信息
title属性:设置图片标题(鼠标悬浮式显示的文字)--><p>林丹照片</p><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.EQ2mZbBjqplkUZdbKMOKqgHaEH?w=322&h=180&c=7&r=0&o=5&dpr=2&pid=1.7" alt="" title="林丹照片"><!-- 绝对路径: --><img src="./img1/image.png" width="300px" alt="图片加载失败" title="超级丹">
<!-- 相对路径: --></body>
</html>

运行结果:

4.4 超链接标签

超链接(Hyperlink)通常简称为链接(Link),是指从一个网页指向另一个目标的连接关系,这个目标可以 是另一个网页,也可以是当前网页中的其它位置,还可以是图片、文件、应用程序等。链接的两端分别 称为源锚点和目标锚点,通过点击源锚点即可以跳转到目标锚点。

<!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><!-- 4.超链接标签  a 点击跳转href:要跳转到的地址target:指定打开方式取值:_self  在本页面打开_blank   在新窗口打开_new   打开一个新的窗口,并将当前窗口作为新窗口的父窗口-->
<a href="http://www.jd.com" target="_blank">京东一下</a>
<a href="http://www.baidu.com" target="_blank">百度一下</a><!-- 怎么让图片变成超链接:a标签把img标签包裹起来 <a href="跳转到的网址" target="跳转类型指令"><img src="需要点击的图片" width="300px" alt="图片加载失败" title="悬浮名"></a>--><a href="https://cn.bing.com/images/search?q=%e6%9e%97%e4%b8%b9&form=HDRSC2&first=1" target="_blank"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.EQ2mZbBjqplkUZdbKMOKqgHaEH?w=322&h=180&c=7&r=0&o=5&dpr=2&pid=1.7" width="300px" alt="图片加载失败" title="超级丹"></a></body>
</html>

5. HTML列表标签

5.1 无序列表

HTML无序列表是用于组织并展示列表项,其中列表项的顺序不是特别重要,因此被称为“无序”列表。 使用圆点、方块或其他符号来标记每个列表项。

  • <ul>标签:标识了无序列表的开始和结束。所有的列表项都应包含在这个标签内部。
  • <li>标签:代表单个列表项,这是构成无序列表的基础。每个<li>都会被自动添加一个标记,通常是一个圆点。
<!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></li></ul>样式属性   type:disc     默认,实心圆点circle   空心圆点square   实心方块none     不显示符号  --><h2>水果</h2><ul type="disc"><li>香蕉</li><li>苹果</li><li>梨</li><li>西瓜</li></ul></body>
</html>

运行结果:

 5.2 有序列表

HTML有序列表用于组织一组需要按特定顺序展示的列表项,因此被称为“有序”列表。列表项前通常使 用数字作为标记,表明各项的顺序。

  • <ol>标签:这个标签定义了有序列表的开始和结束,是创建有序列表的容器。所有需要按顺序展示的 列表项都应该包含在这个标签内部。
  • <li>标签:代表有序列表中的单个列表项。与无序列表一样,每个列表项都使用 <li>标签来标记,但在有序列表中,每个<li>项前通常会自动添加一个数字,反映其在列表中的顺序。

在使用有序列表时,也应遵循将<li>标签直接嵌套在<ol>标签内的规范,以保持结构清晰和语义准 确。

<!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><!-- 有序列表   顺序很重要  ol  litype: 1  默认,数字a,A i,Inone--><h2>比赛排名</h2><ol type="1"><li>冠军</li><li>亚军</li><li>季军</li></ol></body>
</html>

运行结果: 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【IP101】图像滤波技术详解:从均值滤波到高斯滤波的完整指南

&#x1f31f; 图像滤波魔法指南 &#x1f3a8; 在图像处理的世界里&#xff0c;滤波就像是给图片"美颜"的魔法工具。让我们一起来探索这些神奇的滤波术吧&#xff01; &#x1f4d1; 目录 1. 均值滤波&#xff1a;图像的"磨皮"大法2. 中值滤波&#xff1…

LINE FRIENDS 正式与 Walrus 合作,全新 AI 驱动的游戏即将上线

风靡全球的 LINE FRIENDS 角色即将以“minini”迷你造型登陆 Walrus&#xff0c;虽然尺寸更小&#xff0c;但承诺带来“大”动作。IPX&#xff08;LINE FRIENDS 背后的公司&#xff09;打造了《minini universe: ROOM》游戏&#xff0c;这是一款基于其 minini 系列角色的多链游…

2025年信息素养大赛C++算法创意实践挑战赛初赛样题及答案解析(小学组)

一、选择题 1、下列代码&#xff0c;能够输出 hello world 的是_____ A. cout (hello world) B. cout << hello world C. cout:hello world D. cout << "hello world"; 答案&#xff1a;D 解析&#xff1a;cout输出的文本内容要用双引号引起来 2、…

[c语言日寄]检查环形链表

【作者主页】siy2333 【专栏介绍】⌈c语言日寄⌋&#xff1a;这是一个专注于C语言刷题的专栏&#xff0c;精选题目&#xff0c;搭配详细题解、拓展算法。从基础语法到复杂算法&#xff0c;题目涉及的知识点全面覆盖&#xff0c;助力你系统提升。无论你是初学者&#xff0c;还是…

黄雀在后:外卖大战新变局,淘宝+饿了么开启电商大零售时代

当所有人以为美团和京东的“口水战”硝烟渐散&#xff0c;外卖大战告一段落时&#xff0c;“螳螂捕蝉&#xff0c;黄雀在后”&#xff0c;淘宝闪购联合饿了么“闪现”外卖战场&#xff0c;外卖烽火再度燃起。 4 月30日&#xff0c;淘宝天猫旗下即时零售业务“小时达”正式升级…

如何在uni-app中自定义输入框placeholder的样式

在开发uni-app应用时&#xff0c;我们经常需要自定义输入框&#xff08;<input>&#xff09;的样式以匹配应用的整体设计。默认情况下&#xff0c;uni-app的输入框提供了一些基本的样式选项&#xff0c;但有时候我们需要更细致地控制输入框的每个部分&#xff0c;例如pla…

使用Node编写轻量级后端快速入门

使用Node编写轻量级后端快速入门 node 要作为轻量级后端需要下载一些对应模块可以参考下面命令。你可以借助 npm&#xff08;Node Package Manager&#xff09;来下载它们。 模块下载 express&#xff1a;这是一个广受欢迎的 Node.js Web 应用框架&#xff0c;能用于构建 Web…

从Markdown到专业文档:如何用Python打造高效格式转换工具

在技术写作、学术研究和企业报告领域,Markdown因其简洁高效的特性广受开发者喜爱。但当需要输出正式文档时,Word和PDF格式仍是行业标准。传统解决方案往往存在样式丢失、代码排版混乱、批量处理困难等痛点。本文将揭秘如何用Python构建一个支持多主题、保留代码高亮、自动生成…

【docker学习笔记】如何删除镜像启动默认命令

一些镜像会在它打镜像时&#xff0c;加入一些默认的启动命令&#xff0c;可以通过docker inspect \<image id\>来查看Entrypoint。如下图&#xff0c;docker run启动时&#xff0c;会默认执行 "python3 -m vllm.entrypoints.openai.api_server" 如果不想执行&…

任意无人机手柄链接Unity-100元的凤凰SM600手柄接入Unity Input System‌

网上教程真少&#xff01;奋发图强自力更生&#xff01;2025.5.1 目前有用的链接&#xff1a; unity如何添加自定义HID设备&#xff0c;自己开发的手柄如何支持unity。 - 哔哩哔哩 HID Support | Input System | 1.0.2 官方教程 https://zhuanlan.zhihu.com/p/503209742 分…

2024睿抗CAIP-编程技能赛-本科组(省赛)题解

蓝桥杯拿了个省三&#xff0c;天梯没进1队&#xff0c;睿抗是我最后的机会 RC-u4 章鱼图的判断 题目描述 对于无向图 G ( V , E ) G(V,E) G(V,E)&#xff0c;我们定义章鱼图为&#xff1a; 有且仅有一个简单环&#xff08;即没有重复顶点的环&#xff09;&#xff0c;且所…

Java 泛型参数问题:‘ResponseData.this‘ cannot be referenced from a static contex

问题与处理策略 问题描述 Data AllArgsConstructor NoArgsConstructor public class ResponseData<T> {private Integer code;private String msg;private T data;public static final int CODE_SUCCESS 2001;public static final int CODE_FAIL 3001;public static …

用TCP实现服务器与客户端的交互

目录 一、TCP的特点 二、API介绍 1.ServerSocket 2.Socket 三、实现服务器 四、实现客户端 五、测试解决bug 1.客户端发送了数据之后&#xff0c;并没有响应 2.clientSocket没有执行close()操作 3.尝试使用多个客户端同时连接服务器 六、优化 1.短时间有大量客户端访…

鸟笼效应——AI与思维模型【84】

一、定义 鸟笼效应思维模型指的是人们在偶然获得一件原本不需要的物品后,会为了这件物品的配套或使用需求,进而继续添加更多与之相关但自己原本可能并不需要的东西,仿佛被这个“鸟笼”牵着走,最终陷入一种惯性消费或行为模式的现象。简单来说,就是人们在心理上会有一种自…

加密解密记录

一、RSA 加密解密 密钥对生成 1.前端加密解密 &#xff08;1&#xff09;.vue页面引入 npm install jsencrypt&#xff08;2&#xff09;工具 jsencrypt.js import JSEncrypt from jsencrypt/bin/jsencrypt.min// 密钥对生成 http://web.chacuo.net/netrsakeypairconst p…

浅析 MegEngine 对 DTR 的实现与改进

分享笔者在学习 MegEngine 对 DTR 的实现时的笔记。关于 DTR 可以参考&#xff1a;【翻译】DTR_ICLR 2021 文章目录 MegEngine 架构设计MegEngine 的动态图部分Imperative RuntimeImperative 与 MegDNN / MegBrain 的关系静态图运行时管家 —— MegBrain动态图接口 —— Impera…

micro-app前端微服务原理解析

一、核心设计思想 基于 WebComponents 的组件化渲染 micro-app 借鉴 WebComponents 的 CustomElement 和 ShadowDom 特性&#xff0c;将子应用封装为类似 WebComponent 的自定义标签&#xff08;如 <micro-app>&#xff09;。通过 ShadowDom 的天然隔离机制&#xff0c;实…

CMake中强制启用option定义变量的方法

在CMake中&#xff0c;若要在另一个CMake文件中强制启用由option()定义的变量&#xff0c;可使用set(... FORCE)覆盖缓存变量。具体步骤如下&#xff1a; 使用set命令强制覆盖缓存&#xff1a; 在需要强制启用选项的CMake文件中&#xff0c;使用set命令并指定CACHE和FORCE参数。…

C++漫溯键值的长河:map set

文章目录 1.关联式容器2.set2.1 find2.2 lower_bound、upper_bound 3.multiset3.1 count3.2 equal_range 4.map4.1 insert4.2 operate->4.3 operate[ ]4.4 map的应用实践&#xff1a;随机链表的复制 5.multimap希望读者们多多三连支持小编会继续更新你们的鼓励就是我前进的动…

汽车用品商城小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的汽车用品商城小程序源码&#xff0c;从技术架构来看&#xff0c;ThinkPHP作为后端框架&#xff0c;提供了稳定且高效的开发基础&#xff0c;能够处理复杂的业务逻辑和数据交互。FastAdmin则进一步简化了后台管理系统的开发流程&#xff0c;提…