如何为简单的 HTML 画廊添加标题

我是html新手，我只是想在下面的代码中在每个图像的顶部或下方添加一个标题;欢迎输入。似乎在包含图片的行上需要一个额外的选项;我已经尝试过 alt="我的图像描述"，它会在页面上添加和信息链接"i"，但我需要将其放置在图像上方或下方。

 <head>
    <title> identity </title>
    <meta http-equiv="content-type" 
        content="text/html;charset=utf-8" />
    <link href = "../includes/important.css" rel= "stylesheet" type ="text/css" />
    <link href="../includes/slide-out-menu-new.css" rel="Stylesheet" type="text/css"/> 
    <script src="../includes/js/slide-out-menu-new.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
        <script src="galleria/galleria-1.2.8.min.js"></script>
        <script src="../assignments/galleria/themes/classic/galleria.classic.css"></script>
<style>
    #galleria{ width: 700px; height: 400px; background: #000 }
</style>
</head>
<body>
<div class= "name"> 
<center> <img src= "../images/main_menu_me.jpg"><center>
</div>
     <STYLE TYPE="text/css">
#menu1 { display : none }
#menu2 { display : none }
#menu3 { display : none }
A:link {color:white; text-decoration:none}
A:hover {color:yellow; text-decoration:none}
</STYLE> 
<div class="body3">

<div id="galleria">
    <img src="../images/lafete1.jpg" image title="My image title" alt="My image description">
    <img src="../images/lafete2.jpg">
    <img src="../images/lafete3.jpg">
</div>
</div> 
<script>
    Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');    
    Galleria.run('#galleria');
</script>
<div class= "navigation2">
</br>
<p align="right"><a href = "../assignments/about.html"> about</a></p> 
<p align="right"><a href = "../assignments/contact.html"> contact</a></p> 
</body>
</head>

来自 galleria 的文档：

字幕和元数据
如果要从HTML源中提取元数据（例如标题和描述），则可以将其作为属性提供：

<img            src="image.jpg" 
         data-title="My title" 
   data-description="My <strong>description</strong>" 
          data-link="http://my.destination.com" 
>

旁注：在HTML5中，现在可以（根据规范）向元素添加自定义属性（在HTML标记中），但它们必须以data-为前缀。这就是后来版本的 galleria 现在使用的。

希望这有帮助！

相关内容

最新更新

热门标签：