HTML 中CSS 图像详解
如何使用CSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
- 内联样式- 在HTML元素中使用"style" 属性
- 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
- 外部引用 - 使用外部 CSS 文件
最好的方式是通过外部引用CSS文件.
HTML 图像- 图像标签( <img>)和源属性(Src)
在 HTML 中,图像由<img> 标签定义。
<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。
要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。
定义图像的语法是: alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src="url" alt="some_text">
HTML 图像- 设置图像的高度与宽度
height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。
属性值默认单位为像素:
提示: 指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。
基本的注意事项 - 有用的提示:
注意: 假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。加载图片是需要时间的,所以我们的建议是:慎用图片。
注意: 加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就会显示一个破碎的图片。
创建图像映射
本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。
HTML 图像标签
标签 | 描述 |
---|---|
<img> | 定义图像 |
<map> | 定义图像地图 |
<area> | 定义图像地图中的可点击区域 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body><p>点击太阳或其他行星,注意变化:</p><img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"><map name="planetmap"><area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"><area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"><area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map></body> </html>
1、距形:(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>
2、圆形:(圆心坐标为(X1,y1),半径为r)
<area shape="circle" coords="x1,y1,r" href=url>
3、多边形:(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)
<area shape="circle" coords="x1,y1,r" href=url>
转载于:https://www.cnblogs.com/willamq/articles/8026521.html
HTML 中CSS 图像详解相关推荐
- DW中CSS属性详解
作者:未知 来源:5D多媒体 在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性,Dreamweaver把这些属性分为Type(类型).Background(背 ...
- css中table标签详解(一)
css中table标签详解(一) 什么是table标签,以及table标签的组成? 不叨叨,直接上代码 <table><tr><td></td>< ...
- CSS中line-height属性详解(CSS之四)
CSS中line-height属性详解 基本概念 line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 图中两行基线之间的距离就是行高,基线相关可以查看CSS ...
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | hand ...
- css名词解析,小说CSS样式详解
CSS格式详解 字体格式(font) 字体 表格题目位置 once:只朗读一次(默许值): always:多次朗读: inherit:启当: 文字年夜小 font-size: xx-small | x ...
- html语言 input,input标签(HTML中input用法详解)
input标签 Firstname: Lastname: HTML中input用法详解 1.type 格式:type="文本的类型" 当type设置为text时,text属性表示一 ...
- Asp.net中GridView使用详解(引)【转】
Asp.net中GridView使用详解(引) GridView无代码分页排序 GridView选中,编辑,取消,删除 GridView正反双向排序 GridView和下拉菜单DropDownList ...
- JSX设置CSS样式详解
JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...
- FLV文件中VideoPacket的详解
FLV文件中VideoPacket的详解 众所周知,FLV文件体主要有三种Tag组成:AUDIODATA.VIDEODATA和SCRIPTDATA,其中SCRIPTDATA中包含了MetaData,通 ...
最新文章
- Ubuntu终端回收站
- 玩“剪刀石头布“的脑机!密歇根大学开发由大脑意识精密控制的假肢
- 王爽《汇编语言(第三版)》检测点11.1
- presto spill to disk
- anaconda conda 的使用(指定镜像源、虚拟环境的创建)
- c语言界面飞机图形代码,求个用最简单的的代码来实现图形界面…
- html实现贪吃蛇游戏(源码)
- 这样的跳槽理由,会遭HR嫌弃!
- 图神经网络模型—PATCHY-SAN的基本思想与流程
- python多线程爬取王者荣耀高清壁纸过程
- 微软翻译与服务器断开,一水的机翻?微软中文翻译也闹笑话了
- html js 打印编辑页眉,js 设置网页打印的页眉页脚和页边距
- 银河麒麟操作系统(kylin os)学习
- 《金三银四》奉上35道胖乎乎的Kubernetes高频面试题
- 计算机木桶原理,何谓性价比?浅谈摩尔定律和木桶原理
- 焦点与焦距 (focal point, focal length)
- CEC2017基础函数说明Python版本
- C++中野指针产生的途径?避免野指针产生的方法。
- 交流电机直接转矩控制仿真设计
- 奥曲肽-葡聚糖-亲和索的偶联物TOC-Dx40-Av)|紫杉醇-DHA-右旋糖酐偶联聚合物
热门文章
- 【TensorFlow】TensorFlow函数精讲之tf.get_variable()和tf.get_variable_scope()
- 2020年还需要阅读的10篇人工智能论文
- Github | TensorFlow Extended (TFX) 面向机器学习工具
- ElasticSearch优化系列二:机器设置(内存)
- 全局路径规划:图搜索算法介绍6(A star)Matlab算法实现
- 华为xs第几批升级鸿蒙,华为鸿蒙升级名单已确认!这44款机型将优先升级,花粉有福了...
- k8s边缘节点_KubeEdge v0.2发布,全球首个K8S原生的边缘计算平台开放云端代码
- Win10 20H2正式发布,对比旧版新功能一览
- python元组添加元素_2分钟学会Python的元组使用
- c语言单链表_突破C语言难点之单链表?一绘图即可