从本篇开始,我们围绕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>
千 禧<br />
<p > 它是一个段落标签
<!-- 重点记住 空格、大于号、小于号这三个,其余使用的很少,如果需要回头查阅即可 -->
</body>
</html>