HTML5实用大全(Part.2)

引言:

哈喽,各位小伙伴们大家好呀,学习了上一篇关于HTML5的文章后,你是否对于入门HTML5有了一定的基础了呢,本篇博客我们将继续学习HTML5的不同标签,跟上队伍,准备出发咯!

1.标签之图片

网站中最多的元素

说起网站中最多的元素,毋庸置疑,一定是图片,在HTML5中我们实用<img>标签来定义图片。

语法:

 <img src=" " alt=" " title=" " width=" " height=" ">

属性:

1.src:路径(图片的地址与名字)

2.alt:规定图像的替换文本

3.width:规定图像的宽度

4.height:规定图像的高度

5.title:鼠标悬停在图片上给予提示

 注意事项:

<img>是单标签,不需要进行闭合操作。

1.src属性详解

关于图片的路径,在打开相册时我们会看到很多(.pgn),(.webp)等后缀的图片,它们在HTML5中都可以显示在网页当中,例如:

我们想要在网页当中看到这样的图片,就可以搭配<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><img src="5.webp" alt="">
</body>
</html>

 

上图便是我在网页当中显示的图片,大小未作修改,可以通过width和height来进行修改。

2.alt属性详解

alt属性用于提供图像的替代文本,以便在图像无法显示时提供描述性文字。

例如,当我们把图片的路径名修改为一个不存在的路径,那么图片将无法正确显示,这时候alt就可以提示图片的大致内容,如下所示:

<!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><img src="15.webp" alt="智慧的只因哥">
</body>
</html>

我们发现,原本鸽鸽的图片路径是5.webp,而现在变成了15.webp,所以图片是无法正确显示的,这个时候网页上就会显示出“智慧的只因哥”这几个字,如下图所示:

 3.title属性详解

title属性用于提供关于图像的额外信息,用户将鼠标悬停在图像上时会显示这些信息。

例如,我们下述代码的title为鸽鸽,那么鼠标悬停在鸽鸽的图片上时会给出相应的文字提示:

<!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><img src="5.webp" alt="智慧的只因哥" title="鸽鸽">
</body>
</html>

至于图片呢,截图时碰到Ctrl键箭头就消失了,“鸽鸽”就消失了,感兴趣的观众老爷可以自己操作一下,可能会有意想不到的发现哟!

2.标签之超文本链接

1.超链接描述 

HTML实用<a>来设置超文本链接,超链接可以是一个字,一个词,或者一组次,也可以是一副画像,您可以点击这些内容跳转到新的文档。

语法:

<a herf="url">链接文本</a>

超链接属性:

在标签<a>中使用了href属性来描述链接的地址,默认情况下,链接将以以下形式出现在浏览器当中:

1.一个未访问过的链接显示为蓝色字体并带有下划线

2.访问过的链接显示为紫色并带有下划线。

3.点击链接时,链接显示为红色并带有下划线。 

特别提示:

后期学习了CSS后我们将修改掉这些不太美观的样式 

例如,我们把链接的地址改为百度的地址,当它未被点击时时时蓝色,点击的时候会变成红色,点击一次过后都会变成紫色:

<!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><a href="baidu.com">我是未点击过的百度网址</a>
</body>
</html>

 

 

2.超链接表现:

当我们把鼠标移动到网页中的某个链接上时,箭头会变成一只小手 

3.链接与图片嵌套实用案例

我想通过点击鸽鸽的图片找到鸽鸽微博的主页,这可以实现吗,当然没问题!

首先:准备好鸽鸽的图片与微博主页网址

其次:正确书写代码

最后:你已经是一名真爱坤了!

代码:

<!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><a href="https://weibo.com/u/1776448504"><img src="5.webp" alt="鸽鸽的微博主页"></a>
</body>
</html>

运行效果:

 

点击图片后的跳转效果: 

 

3.标签之文本

 

1.常用文本标签

<em>                   定义着重文字

<b>                      定义粗体文字

<i>                       定义斜体字

<strong>              定义加重语气

<del>                   定义删除字

<span>                元素没有特定的含义 

2.特别提示:

常用文本标签和段落是不同的,段落代表一段文本,而文本标签一般表示文本词汇

3.代码演示: 
<!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><p>我是p标签,快看哥的效果</p><br><em>我是em标签,快看哥的效果</em><br><b>我是b标签,快看哥的效果</b><br><i>我是i标签,快看哥的效果</i><br><strong>我是strong标签,快看哥的效果</strong><br><del>我是del标签,快看哥的效果</del><br><span>我是span标签,快看哥的效果</span>
</body>
</html>

 4.作业环节:

今天我们介绍的东西依然不是很多,还是希望读者老爷能够快速学习后迅速掌握,这也是我发表博客的初心,在作业上,我们就不嘻嘻哈哈了,最近在王者荣耀圈有一个很火的事件叫做胖猫事件,男主很好,也很不幸,在这里,我们结合这几天的知识制作一个小页面来缅怀一下这位梦奇天才吧!

1.页面显示效果

2.点击麦当劳后的效果

 

3.点击鲜花后的效果:

 这次的代码由三部分组成:

index1.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><img src="7.webp" alt="我不想吃菜,我想吃麦当劳" width="400px" height="300px"><b>选择一份礼物给胖猫吧</b><a href="index2.html"><img src="8.webp" alt="" width="400px" height="300px"></a><a href="index3.html"><img src="9.webp" alt="" width="400px" height="300px"></a>
</body>
</html>
index2.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><p>谢谢你的肯德基,梦奇在这里替胖猫谢谢你</p><img src="6.webp" alt="">
</body>
</html>
index3.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><p>谢谢你的花,梦奇在这里替胖猫谢谢你</p><img src="6.webp" alt="">
</body>
</html>

谢谢大家看到这里,致敬认真学习的你,缅怀胖猫先生!

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

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

相关文章

2024五一杯数学建模竞赛A题完整成品论文和代码分析:建立钢板切割的工艺路径动态规划、贪心与分层优化模型

2024五一杯数学建模竞赛A题&#xff1a;建立钢板切割的工艺路径动态规划、贪心与分层优化模型 2024五一数学建模A题完整代码和成品论文获取↓↓↓↓↓ https://www.yuque.com/u42168770/qv6z0d/gyoz9ou5upvkv6nx?singleDoc# 本文文章较长&#xff0c;建议先目录。经过不懈的…

在Ubuntu上怎么卸载qemu-system-x86_64

2024年5月3日&#xff0c;周五晚上 要在Ubuntu上卸载QEMU&#xff0c;你可以使用以下命令&#xff1a; sudo apt remove qemu-system-x86这个命令将卸载QEMU系统模拟器&#xff08;x86架构&#xff09;。你也可以使用purge参数来彻底删除QEMU及其配置文件&#xff1a; sudo a…

三星一季度利润飙涨932%!AI引爆存储热,未来研发狠砸AI

⏩三星一季度利润飙涨932%&#xff01;AI引爆存储热&#xff0c;未来研发狠砸AI 三星电子公布了第一季度财报数据&#xff0c;显示其利润飙涨932.8%。得益于AI拉动的广泛支出&#xff0c;三星电子一季度利润激增。三星表示&#xff0c;预计第二季度业务将主要由生成式人工智能…

001 springCloudAlibaba 负载均衡

文章目录 orderServerOrderController.javaProductClient.javaOrderServerApplication.javaServletInitializer.javaapplication.yamlpom.xml productServerProductController.javaProduct.javaProductServerApplication.javaServletInitializer.javaapplication.yamlpom.xml p…

算法学习系列(五十四):单源最短路的综合应用

目录 引言一、新年好二、通信线路三、道路与航线四、最优贸易 引言 关于这个单源最短路的综合应用&#xff0c;其实最短路问题最简单的就是模板了&#xff0c;这是一个基础&#xff0c;然后会与各种算法结合到一块&#xff0c;就是不再考察单个知识点了&#xff0c;而是各种知…

ASP.NET图书馆管理信息系统

摘  要 本文首先阐述了基于.NET Framework平台的图书馆管理信息系统的开发背景以及其实践意义&#xff0c;其次说明了图书馆管理信息系统的功能以及相比同类软件的创新之处。然后就图书馆管理系统开发中所使用的一些的技术进行研究探讨。主要针对数据库的设计技术、存储过程…

TS 泛型

泛型&#xff08;宽泛的&#xff0c;不确定的类型&#xff09; 使用场景&#xff1a;定义一个函数或类时&#xff0c;无法确定要使用的具体类型&#xff08;返回值、参数、属性的类型不能确定&#xff09;泛型使用时相当于一个参数 functiondemo<T>(arg: T): T{return …

Copilot Venture Studio創始合伙人楊林苑確認出席“邊緣智能2024 - AI開發者峰會”

隨著AI技術的迅猛發展&#xff0c;全球正逐步進入邊緣計算智能化與分布式AI深度融合的新時代&#xff0c;共同書寫著分布式智能創新應用的壯麗篇章。邊緣智能&#xff0c;作為融合邊緣計算和智能技術的新興領域&#xff0c;正逐漸成為推動AI發展的關鍵力量。借助分布式和去中心…

Docker——部署LNMP架构

目录 一、LNMP架构概述 1.项目环境 2.服务器环境 3.需求 二、搭建Linux系统基础镜像 三、部署Nginx 1.建立工作目录 2.编写Dockerfile脚本 3.准备Nginx.conf配置文件 4.生成镜像 5.创建自定义网络 6.启动镜像容器 7.验证Nginx 三、部署Mysql 1.建立工作目录 2.编…

Windows 系统运维常用命令

目标&#xff1a;通过本文可以快速实现windows 网络问题定位。 ipconfig:查看本机网络配置情况 C:\Users\zzg>ipconfigWindows IP 配置以太网适配器 以太网:媒体状态 . . . . . . . . . . . . : 媒体已断开连接连接特定的 DNS 后缀 . . . . . . . :无线局域网适配器 本地…

Edge浏览器

前言 作为一款现代化的网络浏览器&#xff0c;Microsoft Edge提供了许多功能和工具&#xff0c;使用户能够更加高效地浏览互联网&#xff0c;并享受更好的网络体验。下面是我对Edge浏览器的使用心得和深度探索&#xff1a; 使用心得&#xff1a; 性能和速度&#xff1a; Edge浏…

模拟退火算法matlab代码

模拟退火&#xff08;Simulated Annealing, SA&#xff09;算法是一种概率优化算法&#xff0c;它受到冶金学中的退火过程的启发。以下是使用 MATLAB 编写的模拟退火算法的简单示例&#xff0c;用于解决一个优化问题&#xff1a; function [x_min, f_min, T, x, f] simulated…

【Docker第一课】docker的基本命令和试启动容器(详细图解)

目录 知识梗概 docker的初步了解 了解docker常用命令 试开启容器&#xff08;这里演示nginx、python3和mysql&#xff09; 1、nginx容器的启动 2、python3容器的启动 docker的作用 虚拟机与容器的区别 写在前面&#xff1a; 本专栏你将了解docker一些入门知识&#xff…

如何使用 ArcGIS Pro 查找小区最近的地铁站

学习 GIS 除了可以用在工作上之外&#xff0c;还可以将其运用到生活之中&#xff0c;比如查找距离小区最近的地铁站&#xff0c;这里为大家介绍一下查找的方法&#xff0c;希望能对你有所帮助。 数据来源 教程所使用的数据是从水经微图中下载的POI数据&#xff0c;除了POI数据…

从零搭建自己的javaweb网站,Javaweb网站项目打包jar后上传到Linux操作系统的阿里云服务器,公网成功访问,全流程,流程精简,小白秒懂

背景 很多同学自己写了一个javaweb&#xff0c;能在本地跑了&#xff0c;但是还想用公网访问自己的javaweb&#xff0c;写完一个项目99%进度&#xff0c;就差1%最后一步部署网站了&#xff0c;这篇文章教你如何快速地将javaweb部署到云服务器&#xff0c;笔者亲手总结&#xff…

a-table 控制列的展示和隐藏

一、业务场景&#xff1a; 最近在使用 Antd-vue 组件库的时候&#xff0c;a-table需要根据不同角色的权限显示和隐藏 columns的列 为了避免大家走弯路&#xff0c;为大家整理了一下&#xff0c;粘走可以直接用的那种 二、具体实现步骤&#xff1a; 1.在需要显示与隐藏的列增加一…

Git客户端(TortoiseGit)使用详解

1.概述 使用TortoiseGit比直接使用git 客户端和命令实现代码版本管理更为方便&#xff0c;本文根据实际使用情况作一些记录&#xff0c;特别是对于解决冲突的处理。 2.Git安装与配置 下载 Git - Downloads&#xff0c; 可参考Git安装步骤完成Git的安装与配置。 3.TortoiseG…

python学习笔记B-20:序列实战--处理千年虫

将2位数表达的年份&#xff0c;转换为用4位数表达&#xff1a; print("将列表中的2位数年份转换为4位数年份") lst[88,89,90,00,99] print(lst) for index in range(len(lst)):if len(str(lst[index]))2:lst[index] 1900int(lst[index])elif len(str(lst[index]))1…

收单外包机构备案情况分析,广东备案机构遥遥领先

孟凡富 4月30日&#xff0c;中国支付清算协会公示了最新一批收单外包服务备案机构&#xff0c;较上期增加了689家。其中&#xff0c;新增聚合支付技术服务备案机构达6家。截至4月末&#xff0c;备案的收单外包服务机构总数为27714家&#xff0c;同时取消了330家机构的备案资格&…

学习,工作与生活,怎么平衡?

今晚夜景很美&#xff0c;我在校园里转了转...... 不知道大家有没有过这样的体验&#xff1a;在放假之前&#xff0c;愿望总是挺美好的&#xff0c;“原本想看看书给自己充充电&#xff0c;但是&#xff0c;当翻开书之后&#xff0c;很快就开始走神、犯困&#xff0c;甚至坐立…