清新区住房和城乡建设部网站,上海企业服务云app,网络营销策略分析案例,怎么制作干花目录 一.常用的图片标签和超链接标签#xff1a;
1.超链接标签#xff1a;
前言: 超链接的使用#xff1a;
target属性:
1)鼠标样式#xff1a;
2)颜色及下划线:
总结:
2.图片标签#xff1a;
前言:
img的使用:
设置图片#xff1a;
1.设置宽度和高度:
2.HTM…目录 一.常用的图片标签和超链接标签
1.超链接标签
前言: 超链接的使用
target属性:
1)鼠标样式
2)颜色及下划线:
总结:
2.图片标签
前言:
img的使用:
设置图片
1.设置宽度和高度:
2.HTML5中的:
图片映射:
shape和coords属性
总结: 一.常用的图片标签和超链接标签
1.超链接标签
前言:
在HTML中我们常常用a标签来表示超链接。所谓超链接(Hyperlink)简称(Link)是指用一个地址把一个网页和另外一个网页链接起来这个东西可以是另外一个网页的地址也可以当前网页中其他的位置比如点击回到顶部还可以是图片文件应用程序等链接的两端分别称为源锚点(当前锚点)和目标锚点(其他的网页)通过点击源锚点就可以跳转到目标锚点。
HTML常用文本标签-CSDN博客https://blog.csdn.net/lh11223326/article/details/137168202?spm1001.2014.3001.5501HTML标签的语法和属性-CSDN博客https://blog.csdn.net/lh11223326/article/details/137163794?spm1001.2014.3001.5501 超链接的使用
a标签的语法格式如下:
a hrefurl targetopentype里面的内容/a
其中的href属性是用来指明要跳转的url(地址)target属性用来指明新页面的打开方式可以重新创建也可以原地覆盖a和/a之间的内容可以是图片文本内容被a标签覆盖后只要点击就可以跳到a标签href填写的网址处。
如下示例代码:
a hrefhttps://www.bilibili.com/点击跳转至bilibili/a
a标签的href属性:
href属性是用来指定要链接的目标的也就是要跳转的位置href可以多种形式如:
href可以指向一个网页(.html,.php,.jsp,.asp),这是最常见的如hrefhttps://www.bilibili.com/href还可以指向图片hrefhttps://img95.699pic.com/photo/40188/6006.jpg_wh860.jpg,(.jpg,,gif,png等)音频(.mp4,.mkv格式)等媒体文件例如href/...../img/ahis.jpg;href可以指向压缩文件(.zip,.rar等格式)可执行程序(.exe)等一些下载网站的链接可以写成这种形式如href./..../data/ycakp.zip;href还可以指向本机文件只是很少这样做如:D:/.../img/ias.exe;
href本质上就是指向一个文件这个文件可以随便格式只要是浏览器支持此文件那么他就可以在浏览器上显示比如图片音频视频等如果浏览器不支持这个格式那么就提示用户下载。
另外href可以是绝对路径也可以是相对路径绝对路径往往以域名为起点,如https://www.bilibili.com/,相对路径往往以当前文件或者当前域名为起点如/.../img/ag.jpg.
target属性:
target是可选属性当我们点击一个链接是一般的如果没有设置target属性的话那么就是浏览器默认的打开方式如果设置了的话那就是按照对应的方式打开。如下是属性的值:
属性值说明_self默认在点击链接的窗口处打开原来的窗口被覆盖。_blank新建一个窗口里面的内容就是点击链接的网页。_parent在当前框架的上一层打开新的页面。_top在顶层框架中打开新页面。
在一般情况下target属性不会写要门保持默认的_self,要么手动将他设置为_blank,在新窗口打开。如下代码:
a hrefhttps://www.bilibili.com/覆盖现在的窗口换成bilibili/a
a hrefhttps://www.bilibili.com/ target_blank在新窗口打开bilibili/a a标签的默认样式
浏览器会给a标签设置一些默认样式。
1)鼠标样式
当鼠标移入链接区域时会变成一只小手当鼠标移出链接区域时会变回箭头形状。
2)颜色及下划线:
超链接被点击之前为蓝色超链接被点击之后为紫色。超链接默认带有下划线下划线颜色和文本颜色保持一致。
浏览器根据历史记录来判断超链接是否被点击过如果href属性和历史记录中的某条URL重合那么说明该链接被点击了清空浏览器的历史记录会让超链接的颜色再次变回蓝色。如下图所示 总结:
超链接是网页中最常见的元素之一可以这样说互联网是基于超链接建立的他把网页与网页链接起来使得网页之间不再是独立的它就像一个看不见的线把网页链接在一起形成一个网一样的形状正是因为这样互联网才能被称为互联网而这一切都是因为有超链接。 2.图片标签
前言:
一图胜千言图片比文件字更具有表现力可以让网页更加精美一段内容如果用文字只是描述出来而图片则是展示出来。
在HTML中常常用img来显示图片img是image的简称img是个自闭合标签它只包含属性没有结束的标签/img.
img的使用:
img的语法如下:
img srcurl alttext
说明
src是必选属性他是source的简称用来指明图片的地址或者路径src支持多种图片格式比如jpg,png,gif等src可以使用相对路径也可以使用绝对路径。alt是可选属性用来定义图片的文字描述信息当由于某些原因(如图片路径错误网络连接失败)导致图片无法显示的时候就会显示alt属性中的信息。
设置图片
1.设置宽度和高度:
如要为img标签设置宽度和高度的话需要使用width(宽度)和height(高度)属性来指定图片的宽度和高度默认情况下这些属性都是以像素为单位。如下图 img srchttps://tse1-mm.cn.bing.net/th/id/OIP-C.EpxMzbWHD39VZ-nmL0fs4AHaFj?w195h180c7r0o5dpr1.5pid1.7 alt此图片加载成功了 title此图片加载成功了 width150 height150
还可以使用style来指定图片的宽度和高度如下代码:
img srchttps://tse1-mm.cn.bing.net/th/id/OIP-C.EpxMzbWHD39VZ-nmL0fs4AHaFj?w195h180c7r0o5dpr1.5pid1.7alt此图片加载成功了 title此图片加载成功了 stylewidth: 150;height: 150;
需要注意的一点是width和height只是临时修改图片的尺寸并不会改变图片原始文件的大小。
关于width和height属性的建议:
一般建议为图片设置width和height属性以便浏览器可以在加载图片之前为其分配足够了空间否则图片加载过程可能会到最后网页布局失真或闪烁。如果页面使用了响应式布局(自适应布局)建议在上图图片之前裁剪好尺寸不要设置width和height属性这样图片会跟着屏幕的宽度自动改变尺寸从而不会变形或者超出屏幕宽度。
2.HTML5中的picture:
有时候我们需要按照比例来放大或缩小图片的尺寸以适应不同的设备避免图片过大超出屏幕的范围HTML5中新增加的picture标签可以解决这个问题该标签允许你针对不同的设备定义多个版本的图片。
在picture标签中可以包含source标签通过soucre标签的media属性可以设定匹配条件,通过srcset属性可以定义图片的路径另外在picture标签的最后还需要定一个img标签代码如下:
picturesource media(min-width: 1000px) srcsetlogo-large.pngsource media(max-width: 500px) srcsetlogo-small.pngimg srclogo-default.png altC语言中文网默认Logo
/picture
浏览器将评估每个source标签并选择最合适的source标签如果没有找到匹配项则使用img标签所定义的图片另外img必须是picture标签的最后一个元素。
图片映射:
图像映射允许在一个图片中定义超链接其实就是在图像中划分一些区域并在这些区域定义超链接。如下是代码示例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyimg src./img/06EE610BCC0208A67AFC6C4FB2DF97A2.jpg usemap#objects altbilibilimap nameobjectsarea shaperect coords0,0,82,126 hrefhttps://www.bilibili.com/ alt首页area shapecircle coords90,58,3 hrefhttps://www.bilibili.com/anime/?spm_id_from333.1007.0.0 alt动漫area shapecircle coords124,58,8 hrefhttps://game.bilibili.com/platform/?spm_id_from666.4.0.0 alt游戏/map
/body/html
map标签的name属性对应img标签的usemap属性area标签用于定义图片可以点击的位置(区域)不仅如此还可以再一张图片中定义多个可点击区域。
shape和coords属性
在area标签中可以通过shape属性来定义可点击区域的形状并通过coords属性来定义形状所对应的坐标其中shape属性的可选值有三个分别是rect(矩形)circle(圆形)和poly(多边形)coords属性中坐标的值取决于可点击区域的形状。
总结:
如今图片标签在网页设计中已经是不可或缺的一部分了很多信息可以使用图片直观有效的表达出来不容易造成误解由此图片标签的重要程度就不言而喻了。
HTML表格表单以及列表-CSDN博客
