html基础练习1

是小穆啊

已于 2023-04-13 13:17:41 修改

阅读量158

点赞数

文章标签： html5

于 2023-04-13 10:53:03 首次发布

本文链接：https://blog.csdn.net/weixin_48055520/article/details/130125089

版权

这篇文章介绍了前端开发中img标签的基本使用，包括src属性指定图像路径，alt属性提供替代文本，title属性显示鼠标悬停提示，以及相对路径和绝对路径的概念。内容结合了《西游记》中的角色唐僧，作为示例解释路径的应用。

摘要由CSDN通过智能技术生成

今天是学习前端的第一天

练习重点
1、img标签的src属性用于指定图像文件的路径和文件名
在这里插入图片描述

 <img src="唐僧.webp" alt="唐僧" title="唐僧" width="500" height="500"  vspace="10" hspace="50" align="left">

2、img标签的alt属性和title属性的区别–alt属性是图像不能显示时的替换文本，title属性是鼠标指针悬停时显示的内容

3、相对路径和绝对路径–相对路径就是相对于当前文件的路径；绝对路径是网页上的文件或目录在硬盘上的真正路径
在这里插入图片描述
图像文件和HTML文件位于同一文件夹：只需要输入图像文件的名称

<img src="唐僧.webp" alt="唐僧" title="唐僧" width="500" height="500"  vspace="10" hspace="50" align="left">
        <h2>唐僧</h2>
        <p><strong>别名：</strong>唐三藏、金蝉子、玄奘、旃檀功德佛、江流儿、唐玄奘、御弟</p>
        <p><strong>人物经历</strong><h6><font color="red"><ins>西天取经前</ins></font></h6>
            唐僧为如来佛祖座下二弟子金蝉长老投胎。他是遗腹子，由于父母凄惨、离奇的经历，自幼在寺庙中长大，在金山寺出家，最终迁移到京城的著名寺院中落户、修行。
            唐僧勤敏好学，悟性极高，在寺庙僧人中脱颖而出。唐太宗李世民请他开“水陆大会”，又被观音菩萨选定为取经人，与唐太宗结拜并前往西天取经。<br/>
            <h6><font color="red"><ins>通天河遇险</ins></font></h6>
            唐僧师徒来至通天河畔陈家庄，得知有妖怪灵感大王（通天河金鱼精）。每年一度祭祀，要吃童男童女（陈关保、一秤金）。悟空、八戒为救陈家庄百姓之苦，变作小儿女，打败了妖怪。 妖怪用鱼女所献之计，作法使夏日满天飞雪，冻结了通天河。唐僧取经心切，踏冰渡河，沉入水底。
            妖怪得到唐僧，大喜。欲与鱼女成婚，用唐僧作为婚宴。 悟空、八戒几番营救师父，皆未能胜过妖怪，只得求助南海观音。观音手挽鱼篮，收了鱼精。 唐僧师徒上路，过河时，老鼋自愿前来驮送，并请唐僧向如来询问自己何时方能转为人身，唐僧允诺。<br/>
            <h6><font color="red"><ins>师徒生二心</ins></font></h6>
            第一次是悟空打死白骨精，唐僧肉眼凡胎不识妖怪，遂赶走悟空。
            第二次是西行途中，悟空打死强盗，唐僧怒其伤害生灵，责备悟空，悟空心中不平。 唐僧四人借宿于强盗之家。夜间，悟空见强盗杀妻，欲除之，又惧唐僧，故隐忍不发。</p>
        <hr size="1" width="100%">

在首页这里插入图片描述
4、首页标题的小图标在head标签里面的link标签

<head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html">
        <meta name="keywords" content="西游记，孙悟空，唐僧，猪八戒，沙僧">
        <link rel="icon" href="西游记.webp">
        <title>西游记</title>
    </head>

在这里插入图片描述