HTML常用标签-最基础的标签

从本篇开始,我们围绕HTML原生标签开始,围绕整个前端三剑客进行,将进行一个大致的介绍和案例展示,没有啥技术含量,只是把学习前端的时候,案例全部展示出来,作为一个实时记录,或者说回顾记录吧。

文本标签

 <!DOCTYPE html>  <!-- 文档类型声明标签,告诉浏览器这个页面采用html5版本来显示页面 -->
 <html lang="zh-CN"> <!-- 定义为en就是英文网站,定义为zh-CN就是中文网页,也可以显示英文 -->
<head>
 <meta charset="UTF-8">     <!--  必须写,采取UTF-8保存文字,如果不写就会乱码。 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HTML常用标签</title>
</head>
<body>
    <h1>前端学习</h1>
    <h2>第一节</h2>
    <p>我是段落标签</p>
    <p>一天,小刺猬和小乌龟在逛街。忽然,它们看见动物警察局在门上贴了这样一张招聘:<br />对付强盗独眼狼的士兵还差二名,请赶快过来应聘。小刺猬和小乌龟决定去应聘。<br />(换行标签)哇!有好多士兵啊!有:小狗、小猫、小鸟、小兔等等。“出发!上车!”上了车,它们就去独眼狼的家里去了。战斗开始了!小狗使劲向独眼狼扔催眠瓦斯,独眼狼不一会就晕了。不过,它掉进了水池里,醒了!小鸟、小刺猬、小乌龟挺身而出,小乌龟当盾、小鸟飞过去使劲啄他的眼睛、小刺猬跑到独眼狼身上用刺狠狠地扎它!终于,独眼狼被逮捕了!</p>
    
   <p>
    我是<strong>加粗</strong>文字,方法一,更推荐这种方法<br />
    我是<b>加粗</b>文字,方法二
   </p> 

    <p>
    我是<em>倾斜</em>文字,方法一,更推荐这种方法<br />
    我是<i>倾斜</i>文字,方法二
    </p>

    <p>
        我是<del>删除线</del>,方法一,更推荐这种方法<br />
        我是<s>删除线</s>,方法二
    </p>

    <p>
        我是<ins>下划线</ins>,方法一,更推荐这种方法<br />
        我是<u>下划线</u>,方法二
    </p>
</body>
</html>

在这里插入图片描述

图片标签和文本标签混合:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML常用标签2</title>
</head>
<body>
    <div>我室友一共div标签,我一个人单独占一行</div>相当于一个大盒子
    <div>我室友一共div标签,我一个人单独占一行</div>
    <span>罗小黑</span>相当于一个小盒子
    <span>罗xiaohei</span>
    <span>luoxiaohei</span>
    <span>miaow.Y.Hu</span>


    <h2>图像标签和路径(重点)</h2>
    <h3>图像标签的显示</h3>
    <img src="https://cdn.jsdelivr.net/gh/luoxiaohei520/MyPics@img/img/202404011645073.png"/>

    <h3>alt 替换文本,图像显示不出来的时候用文字替换:</h3>
    <img src="https://cdn.jsdelivr.net/gh/luoxiaohei520/MyPics@img/img/202404011645073.png" alt="软考学习笔记"/>

    <h3> title 提示文本,鼠标放到图片上,提示文字为:</h3>
    <img src="https://cdn.jsdelivr.net/gh/luoxiaohei520/MyPics@img/img/202404011645073.png"  alt="软考学习笔记" title="这是软考学习笔记,我的软考笔记" />

    <h3> width 给图像设置宽度:</h3>
    <img src="https://cdn.jsdelivr.net/gh/luoxiaohei520/MyPics@img/img/202404011645073.png"  alt="软考学习笔记" title="这是软考学习笔记" width="300" />

    <h3> height 给图像设置宽度:</h3>
    <img src="https://cdn.jsdelivr.net/gh/luoxiaohei520/MyPics@img/img/202404011645073.png"  alt="软考学习笔记" title="这是软考学习笔记" height="500" />
    <p>一般在实际开发当中,要么修改宽度,要么修改高度,只需要修改其中一个就行,他会自动根据等比例缩放,不会出现压瘪的现象,不会失真</p>

    <h3> border 给图像设定边框:</h3>
    <img src="https://cdn.jsdelivr.net/gh/luoxiaohei520/MyPics@img/img/202404011645073.png"  alt="软考学习笔记" title="这是软考学习笔记" width="300" border="30"/>

</body>
</html>

在这里插入图片描述

同一级路径

存放图片到当前文件夹同级,可以通过如下方式调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<style>
		.animateImg:hover {

		    transform: rotate(666turn);
		    transition: all 59s cubic-bezier(.34,0,.84,1) 1s;
		  }
	</style>
</head>
<body>
   <img src="https://cdn.jsdelivr.net/gh/luoxiaohei520/MyPics@img/img/202404021941672.png" class="animateImg"/>
	
	<div class="animateImg">
	<!--同级目录,对应你存放图片的位置-->
		<img src="image/img1.jpg"/>
		
			<img src="image/myLogo.png" alt="" width="500px" height="530px"/>
	</div>
</body>
</html>

如果你真的运行这段代码,然后把鼠标放到你的目标图片上去的时候,你会发现一个很有趣的玩意,图片旋转起来了。

下一级路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!--你存放的图片的路径-->
    <img src="./image/img1.jpg" />
</body>
</html>

绝对路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="D:\CSS\img1.jpg" />
</body>
</html>

超链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
    在HTML标签中,<a>标签用于定义超链接,作用是从一个页面链接到另一个页面 
    语法格式:   <a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a> 

    href的作用:用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能
    target的作用:用于指定链接页面的打开方式,其中_self为默认值,_blank为新窗口中打开方式。
    -->

   <h3>1.外部链接</h3>
   <a href="https://cn.bing.com/">必应</a>
   <a href="https://www.qq.com/" target="_self">腾讯</a>
   <a href="http://www.baidu.com/" target="_blank">百度</a>
    target 打开窗口的方式,默认的值是_self(当前窗口打开页面)。 _blank (新窗口打开页面)

   <h3>2.内部链接:网站内部页面之间的相互链接</h3>
   <a href="#.html">个人简历</a>

   <h3>3.空链接:#</h3>
   <a href="#">公司地址</a>

   <h3>4.下载链接:地址链接的是 文件.exe 或者是 .zip等压缩包形式</h3>
   <a href="img1.jpg.rar">下载文件</a>

   <h3>5.网页元素链接</h3>
   <a href="http://www.baidu.com/"><img src="https://cdn.jsdelivr.net/gh/luoxiaohei520/MyPics@img/img/202404021941672.png"/></a>

   <h3>6.锚点链接:点我们的链接,可以快速定位到页面中的某个位置</h3>
   <h4>目录</h4>

   1.基本信息<br />
   2.1<br />
   3.<a href="#yanyi">2</a><br />
   4.<a href="#fazhan">3</a><br />



   <h5>基本信息</h5>

  Web服务器服务端的核心功能是数据处理,由于Web服务在数据传输方面具有协议分层的特征,即底层协议会包装上层协议(HTTP协议体中包含整个SOAP消息内容),因此需要数据内容的逐步分解与分阶段处理。比较选项中的架构风格,由于管道-过滤器的架构风格支持分阶段数据处理,因此特别适合该服务端处理软件的要求。

  Web服务器服务端的核心功能是数据处理,由于Web服务在数据传输方面具有协议分层的特征,即底层协议会包装上层协议(HTTP协议体中包含整个SOAP消息内容),因此需要数据内容的逐步分解与分阶段处理。比较选项中的架构风格,由于管道-过滤器的架构风格支持分阶段数据处理,因此特别适合该服务端处理软件的要求。
  Web服务器服务端的核心功能是数据处理,由于Web服务在数据传输方面具有协议分层的特征,即底层协议会包装上层协议(HTTP协议体中包含整个SOAP消息内容),因此需要数据内容的逐步分解与分阶段处理。比较选项中的架构风格,由于管道-过滤器的架构风格支持分阶段数据处理,因此特别适合该服务端处理软件的要求。
  Web服务器服务端的核心功能是数据处理,由于Web服务在数据传输方面具有协议分层的特征,即底层协议会包装上层协议(HTTP协议体中包含整个SOAP消息内容),因此需要数据内容的逐步分解与分阶段处理。比较选项中的架构风格,由于管道-过滤器的架构风格支持分阶段数据处理,因此特别适合该服务端处理软件的要求。

<h5>1</h5>

采用闭环结构的软件通常由几个协作构件共同构成,且其中的主要构件彼此分开,能够进行替换与重用,但闭环结构通常适用于处理简单任务(如机器装配等),并不适用于复杂任务。分层结构的特点是通过引入抽象层,在较低层次不确定的实现细节在较高层次会变得确定,并能够组织层间构件的协作,系统结构更加清晰。
采用闭环结构的软件通常由几个协作构件共同构成,且其中的主要构件彼此分开,能够进行替换与重用,但闭环结构通常适用于处理简单任务(如机器装配等),并不适用于复杂任务。分层结构的特点是通过引入抽象层,在较低层次不确定的实现细节在较高层次会变得确定,并能够组织层间构件的协作,系统结构更加清晰。
采用闭环结构的软件通常由几个协作构件共同构成,且其中的主要构件彼此分开,能够进行替换与重用,但闭环结构通常适用于处理简单任务(如机器装配等),并不适用于复杂任务。分层结构的特点是通过引入抽象层,在较低层次不确定的实现细节在较高层次会变得确定,并能够组织层间构件的协作,系统结构更加清晰。
采用闭环结构的软件通常由几个协作构件共同构成,且其中的主要构件彼此分开,能够进行替换与重用,但闭环结构通常适用于处理简单任务(如机器装配等),并不适用于复杂任务。分层结构的特点是通过引入抽象层,在较低层次不确定的实现细节在较高层次会变得确定,并能够组织层间构件的协作,系统结构更加清晰。

<h5 id="yanyi">2</h5>
需求分析阶段的任务是对现实世界要处理的对象(组织、部门和企业等)进行详细调查,在了解现行系统的概况,确定新系统功能的过程中收集支持系统目标的基础数据及处理方法。需求分析是在用户调查的基础上,通过分析,逐步明确用户对系统的需求。在需求分析阶段应完成的文档是数据字典和数据流图。
需求分析阶段的任务是对现实世界要处理的对象(组织、部门和企业等)进行详细调查,在了解现行系统的概况,确定新系统功能的过程中收集支持系统目标的基础数据及处理方法。需求分析是在用户调查的基础上,通过分析,逐步明确用户对系统的需求。在需求分析阶段应完成的文档是数据字典和数据流图。
需求分析阶段的任务是对现实世界要处理的对象(组织、部门和企业等)进行详细调查,在了解现行系统的概况,确定新系统功能的过程中收集支持系统目标的基础数据及处理方法。需求分析是在用户调查的基础上,通过分析,逐步明确用户对系统的需求。在需求分析阶段应完成的文档是数据字典和数据流图。
需求分析阶段的任务是对现实世界要处理的对象(组织、部门和企业等)进行详细调查,在了解现行系统的概况,确定新系统功能的过程中收集支持系统目标的基础数据及处理方法。需求分析是在用户调查的基础上,通过分析,逐步明确用户对系统的需求。在需求分析阶段应完成的文档是数据字典和数据流图。
需求分析阶段的任务是对现实世界要处理的对象(组织、部门和企业等)进行详细调查,在了解现行系统的概况,确定新系统功能的过程中收集支持系统目标的基础数据及处理方法。需求分析是在用户调查的基础上,通过分析,逐步明确用户对系统的需求。在需求分析阶段应完成的文档是数据字典和数据流图。

<h5 id="fazhan">3</h5>

 完整性约束为实体完整性约束、参照完整性约束和用户自定义完整性约束三类。其中实体完整性约束可以通过Primary Key指定,参照完整性约束通过Foreign Key指定,某些简单的约束可以通过Check、Assertion等实现。针对复杂的约束,系统提供了触发器机制,通过用户编程实现。本题中的约束条件只能通过编写职工表上的触发器,在对工资进行修改或插入新记录时触发,将新工资值与工资范围表中职工职务对应的工资范围对比,只有在范围内才提交,否则回滚。。
 完整性约束为实体完整性约束、参照完整性约束和用户自定义完整性约束三类。其中实体完整性约束可以通过Primary Key指定,参照完整性约束通过Foreign Key指定,某些简单的约束可以通过Check、Assertion等实现。针对复杂的约束,系统提供了触发器机制,通过用户编程实现。本题中的约束条件只能通过编写职工表上的触发器,在对工资进行修改或插入新记录时触发,将新工资值与工资范围表中职工职务对应的工资范围对比,只有在范围内才提交,否则回滚。。
 完整性约束为实体完整性约束、参照完整性约束和用户自定义完整性约束三类。其中实体完整性约束可以通过Primary Key指定,参照完整性约束通过Foreign Key指定,某些简单的约束可以通过Check、Assertion等实现。针对复杂的约束,系统提供了触发器机制,通过用户编程实现。本题中的约束条件只能通过编写职工表上的触发器,在对工资进行修改或插入新记录时触发,将新工资值与工资范围表中职工职务对应的工资范围对比,只有在范围内才提交,否则回滚。。
 完整性约束为实体完整性约束、参照完整性约束和用户自定义完整性约束三类。其中实体完整性约束可以通过Primary Key指定,参照完整性约束通过Foreign Key指定,某些简单的约束可以通过Check、Assertion等实现。针对复杂的约束,系统提供了触发器机制,通过用户编程实现。本题中的约束条件只能通过编写职工表上的触发器,在对工资进行修改或插入新记录时触发,将新工资值与工资范围表中职工职务对应的工资范围对比,只有在范围内才提交,否则回滚。。

</body>
</html>

特殊字符标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>&nbsp;&nbsp;&nbsp;&nbsp;<br />
    &lt;p &gt;  它是一个段落标签
<!-- 重点记住 空格、大于号、小于号这三个,其余使用的很少,如果需要回头查阅即可 -->
</body>
</html>

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

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

相关文章

《QT实用小工具·十三》FlatUI辅助类之各种炫酷的控件集合

1、概述 源码放在文章末尾 FlatUI辅助类之各种炫酷的控件集合 按钮样式设置。文本框样式设置。进度条样式。滑块条样式。单选框样式。滚动条样式。可自由设置对象的高度宽度大小等。自带默认参数值。 下面是demo演示&#xff1a; 项目部分代码如下所示&#xff1a; #ifnd…

c/c++ | socket tcp client server

突然想着&#xff0c;花一个socket tcp 客户-服务通信 这应该是很经典的流程了吧 感觉还是要训练这种随手画图的能力&#xff0c;毕竟文字的描述还是不及图片强烈 参考01

c# wpf style 简单试验

1.概要 wpf style 用来控制控件的样式 2.代码 <Window x:Class"WpfApp2.Window5"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.…

CKA 基础操作教程(二)

Kubernetes Deployment 理论学习 Kubernetes Deployment &#xff08;部署&#xff09;是一种 Kubernetes 资源对象&#xff0c;用于定义和管理容器化应用程序的部署和更新。Deployment 提供了一种声明性的方式来定义应用程序的期望状态&#xff0c;并负责确保所需数量的 Pod…

测开——Java、python、SQL、数据结构面试题整理

一、Java 1.Java中finally、final、finalize的区别 1.性质不同 &#xff08;1&#xff09;final为关键字; &#xff08;2&#xff09;finalize()为方法; &#xff08;3&#xff09;finally为为区块标志,用于try语句中; 2. 作用 &#xff08;1&#xff09;final为用于标识…

springboot项目引入swagger

1.引入依赖 创建项目后&#xff0c;在 pom.xml 文件中引入 Swagger3 的相关依赖。回忆一下&#xff0c;我们集成 Swagger2 时&#xff0c;引入的依赖如下&#xff1a; <dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2&…

“人性化设计”技术概要

本文是由《埃森哲技术愿景 2024&#xff1a;“人性化设计”技术将通过提高生产力和创造力来重塑行业并重新定义领导者》这个文章来翻译解读的。原文地址如下&#xff0c;大家可以自行下载&#xff1a; 下载地址 其实看到这篇文章的时候&#xff0c;联想到这些年机器人的市场发展…

51之定时器与中断系统

目录 1.定时器与中断系统简介 1.1中断系统 1.2定时器 1.2.1定时器简介 1.2.2定时器大致原理及其配置 1.2.3定时器所需的所有配置总介 2.定时器0实现LED闪烁 3.使用软件生成定时器初始化程序 1.定时器与中断系统简介 1.1中断系统 首先&#xff0c;我们需要来了解一下什么…

C++:赋值运算符(17)

赋值也就是将后面的值赋值给变量&#xff0c;这里最常用的就是 &#xff0c;a1那么a就是1&#xff0c;此外还包含以下的赋值运算 等于int a 1; a10 a10加等于int a 1; a1;a2-减等于int a 1; a-1;a0*乘等于int a 2; a*5;a10/除等于int a 10; a/2;a5%模等于int a 10; a%…

佑雅的小布谷数据平台获取token如何实现

小博股数据开放平台是面向全部用户的股票数据开放平台&#xff0c;通过调用接口可以获取股票的历史数据。在调用之前需要进行下面的准备工作&#xff0c;第一步注册&#xff1a; 用户在注册之后&#xff0c;登录点击头像进入个人中心&#xff0c;在功能模块的最下方有一个创建应…

nodejs实现TCP端口转发并截包的小工具

近期我正致力于开发一个基于 Go-CQHTTP 的 QQ 机器人应用程序项目&#xff0c;该项目现已成功实现了 Go-CQHTTP 的容器化部署&#xff0c;利用 Docker 技术确保其运行环境的一致性与便捷性。随着项目推进&#xff0c;接下来的工作重心转向部署配套的签名服务器&#xff08;qsig…

达梦disql登录数据库显示“未连接”

问题&#xff1a;达梦数据库在使用disql登录时&#xff0c;显示“未连接”。 指定了IP和端口号还是连接异常。 [dmdbatest ~]$ disql sysdba/Dameng123 disql V8 SQL> select * from v$instances; 未连接 SQL> exit [dmdbatest ~]$ disql sysdba/Dameng123localhost:52…

猜数字游戏

猜数字游戏 前些年清北的博士到中小学任教&#xff0c;曾经成为新闻热点。有一种声音是&#xff0c;国家为了培养这些博士生&#xff0c;提供了很好的资源和机会&#xff0c;他们本来应该做科学研究的&#xff0c;却去教中小学生&#xff0c;把学到的东西浪费了。我倒是觉得&a…

Poster:DoS 攻击的纵向分析

ABSTRACT 拒绝服务 (DoS) 攻击已成为当今数字世界中经常发生的情况。通过下载和僵尸网络服务提供易于使用的攻击软件&#xff0c;这些软件可以在暗网中廉价租用&#xff0c;使对手能够进行此类攻击&#xff0c;而无需全面了解这些技术。为了调查这一威胁&#xff0c;我们对 201…

申请代码签名证书详解

目录 那么什么是代码签名证书呢&#xff1f; 那么为什么非要部署代码签名不可呢&#xff1f; 代码签名证书是如何让软件“安全化”呢&#xff1f; 不同类型的代码签名证书&#xff1a; OV代码签名证书和EV代码签名证书的区别 背景&#xff1a;代码签名证书是使得软件开发商…

chabot项目介绍

项目介绍 整体的目录如下所示&#xff1a; 上述的项目结构中出了model是必须的外&#xff0c;其他的都可以根据训练的代码参数传入进行调整&#xff0c;有些不需要一定存在data train.pkl:对原始训练语料进行tokenize之后的文件,存储一个list对象&#xff0c;list的每条数据表…

4.4C++

1 #include <iostream> #include <cmath> using namespace std; class A{ private:int a;// 判断一个数是否为质数bool isP(int num) {if (num<2) return false;for (int i2;i<sqrt(num);i) {if (num % i 0) {return false;}}return true;} public:// 构造…

面试题:MySQL 高可用

&#x1f496; 主从同步 原理 核心&#xff1a;二进制日志 binlog 是 MySQL 的日志&#xff0c;redolog 和 undolog 是 innodo 引擎的日志。 &#x1f496; 分库分表 分类 问题和技术 数据一致性问题 使用分布式事务管理组件&#xff0c;如ShardingSphere的分布式事务功能&…

java自动化测试学习-03-06java基础之运算符

运算符 算术运算符 运算符含义举例加法&#xff0c;运算符两侧的值相加ab等于10-减法&#xff0c;运算符左侧减右侧的值a-b等于6*乘法&#xff0c;运算符左侧的值乘以右侧的值a*b等于16/除法&#xff0c;运算符左侧的值除以右侧的值a/b等于4%取余&#xff0c;运算符左侧的值除…

渗透测试靶机----sec123

渗透测试靶机----sec123 复现打靶,这里先需要搭建好环境 这里还需要将内网中的网站映射到公网中,完全模拟实战渗透测试使用frp轻松实现 这里就搭建好靶机了,准备开始渗透工作 先使用这个网址,扫描看看这里通过扫描,发现这三个端口对应三个网页: http://107.151.243.222:8…