第11章 在网页中使用图像

11.1 在网页上放置图像

        <!-- <img />标签的src和alt属性是XHTML网页要求的.src属性标识图像文件,alt属性指定关于图像的描述性文本 -->
        <img src ="myimage.gif"alt = "My Image" />

11.2 用文本描述图像

        <!-- title属性对<img />标签不是必需的.title属性类似于alt属性,实际上,在两个属性都指定的情况下,
            在工具提示中title属性将覆盖alt属性-->

11.3 指定图像高度和宽度

        <!-- width 和 height指定高度 -->
        <img src = "" alt = "" width = "200" height = "100" />

11.4 对齐图像

  11.4.1 水平对齐图像

        <!-- float:left 指定图像左对齐,float:right 指定图像右对齐 -->
        <img src = "" alt = "Tunnel View" width = "100" height = "80" style = "float: right; padding: 6px;" />

  11.4.2 垂直对齐图像

        <!--
            vertical-align: text-top //与同一行中最高的图像或者文本的顶部对齐
            vertical-align: text-bottom //与文本的底部对齐
            vertical-align: middle //与同一行中其他内容的中心对齐
            vertical-align: baseline //与文本的基线对齐
        -->

11.5 将图像变为链接

11.6 使用背景图像

        <!--
            background-color: 指定元素的背景颜色.
            background-image: 指定作为元素背景的图像,url("xxx")
            background-repeat: 指定图像重复的方式.可以是水平或者垂直方向
                repeat,repeat-x,repeat-y,no-repeat
            background-position: 指定图像开始相对于其容器的位置
                top-left,top-center,top-right,center-left,center-center,center-right,bottom-left,bottom-center,bottom-right
            -->

11.7 使用图像映射

  11.7.1 为什么图像映射不总是必要的?

  11.7.2 映射图像中的区域

  11.7.3 创建用于图像映射的HTML

        <img src = "map.png" usemap = "#countymap" style = "border: none;width: 650px;height: 509px" />
        <map name = "countymap" id = "contymap">
            <!-- shape 指明该区域为矩形,圆形还是不规则多边形
                coords给出区域的像素坐标,href指定区域链接的页面,alt让你能够提供于该区域形状相关联的一小段文字-->
            <area shape = "rect" coords = "100,136,116,152" href="http://www.whitemancounty.org/"
                  alt = "Whiteman County, WA" title = "Whiteman County WA" />
        </map>

11.8 总结

        <!--
            <img /> 将图像放在网页中
            <map>...</map> 客户端图像映射,由<img usemap="..." />引用,包含一个或多个<area />标签
            <area /> 在用户端图像映射中定义可单击的链接
            属性
            src = "地址"
            alt = "取代图像的描述"
            title = "标题"
            width = "宽度"
            height = "高度"
            style = "border-style:none"
            style = "vertical-align:alignment"
            sytle = "float:float"
            usemap = "名称"
            shape = "值"
            cords = "值"
            href = "链接URL
         -->

时间: 2024-10-11 01:29:00

第11章 在网页中使用图像的相关文章

第12章 在网页中使用多媒体

12.1 链接到多媒体文件 <a href = "test.mov">View the hocky video clip.</a> 12.2 嵌入多媒体文件 <object classid = "CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width = "320" height = "305"> <param name = "ty

Html 在网页中使用图像

设置图片尺寸 用 alt 属性为图像设置替换文本 用title属性为图像设置标题 原文地址:https://www.cnblogs.com/xyg-zyx/p/10184387.html

回顾JS如何向网页中输入内容,与浏览器窗口进行交互

第2章 请和我互动(常用互动方法) 本章节主要讲解如何向网页中输入内容,如何与浏览器窗口进行交互,通过简单的对象方法就可以轻松实现. 2-1 JavaScript-输出内容(document.write) 2-2 JavaScript-警告(alert 消息对话框) 2-3 JavaScript-确认(confirm 消息对话框) 2-4 JavaScript-提问(prompt 消息对话框) 2-5 JavaScript-打开新窗口(window.open) 2-6 JavaScript-关闭

微信端网页中图片的展示方式

一.微信端网页中图片的展示方式 微信端网页中图片有两种展示方式:平铺与图集.平铺的时候文档内的所有图片全部展开,点击图片则放大.图集的时候只展示一张图片,点击图片的时候以翻页的方式展示一组图片.实现原理对于如下一个图片标签,data-gid用于存放组标识,同一组的data-gid相同.data-index用于存放组中图片的展示顺序,不能相同.onclick中根据data-src处理图片展示.对于图集就只显示一张其他的img设置为隐藏,src与第一个图片一样,或者为空,这样可以减少网页的加载量,提

正则表达式相关:C# 抓取网页类(获取网页中所有信息)

类的代码: 1 using System; 2 using System.Data; 3 using System.Configuration; 4 using System.Net; 5 using System.IO; 6 using System.Text; 7 using System.Collections.Generic; 8 using System.Text.RegularExpressions; 9 using System.Threading; 10 using System

锋利的jQuery第2版学习笔记8~11章

第8章,用jQuery打造个性网站 网站结构 文件结构 images文件夹用于存放将要用到的图片 styles文件夹用于存放CSS样式表,个人更倾向于使用CSS文件夹 scripts文件夹用于存放jQuery脚本,个人更倾向于使用JS文件夹存放所有的js及jQuery脚本 编写CSS样式 推荐首先编写全局样式,接着编写可大范围内重用的样式,最后编写细节样式,这样根据CSS最近优先原则,可以较容易地对网站进行从整体到细节样式的定义 第9章,jQuery Mobile jQuery Mobile主要

敏捷软件开发:原则、模式与实践——第11章 DIP:依赖倒置原则

第11章 DIP:依赖倒置原则 DIP:依赖倒置原则: a.高层模块不应该依赖于低层模块.二者都应该依赖于抽象. b.抽象不应该依赖于细节.细节应该依赖于抽象. 11.1 层次化 下图展示了一个简单的层次化方案: 高层的Policy层使用了低层的Mechanism层,而Mechanism层又使用了更细节的Utility层.它存在一个隐伏的错误特征,那就是:Policy层对于其下一直到Utility层的改动都是敏感的.依赖关系是传递的. 下图展示了一个更为合适的模型: 每个较高层次都为它所需要的服

通过私有协议在Chrome浏览器网页中打开本地程序

最近甲方有这样一个需求:两套系统,一套基于Chrome开发,一套基于IE开发,想要在Chrome中增加一个链接,然后进入IE开发的系统.也就是说,想要在Chrome中创建链接跳转到IE浏览器指定页面,还要实现跳转动画效果.这个需求我们先来解决从Chrome跳转到IE的问题. 问题分析:从Chrome中跳转到IE,直接以http链接形式是不可能跳转到IE的,只能通过单独开发的本地程序打开IE,问题是如何让Chrome打开该程序.有一种方法可以实现:通过注册私有协议,用户点击链接的时候直接使用私有协

《The Django Book》实战--第二章--动态网页基础

这章演示了一些最基本的Django开发动态网页的实例,由于版本不一样,我用的是Django 1.,6.3,有些地方按书上的做是不行的,所以又改了一些,写出来让大家参考. 这是一个用python写的一个显示当前时间的网页. 1.开始一个项目. 在命令行中(指定要保存项目代码的盘或文件夹下)输入 python ...\django-admin.py startproject djangobook  (虽然在环境变量Path中加入了django-admin.py的地址,但是在前面还是要加上路径名,不知