a元素

<a>元素 (或HTML锚元素, Anchor Element)通常用来表示一个锚点/链接。但严格来说,<a>元素不是一个链接,而是超文本锚点,可以链接到一个新文件、用id属性指向任何元素。如果没有<a>元素没有href属性的话,可以作为原本链接位置的占位符,常用于home链接

[注意]任何文档流内容都可以被嵌套,只要不是交互内容类别(如按钮、链接等)

【href】
href属性表示地址,共包括以下3种:

链接地址:<a href="http://www.baidu.com">百度</a>
下载地址:<a href="test.zip">下载测试</a>
锚点:
href:#id名 
<a href="#test">目录</a>
<div id="test" style="height: 200px;width: 200px; border: 1px solid black;margin-bottom: 300px;">内容</div>

href:页面地址#id名
<a href="http://baike.baidu.com/view/2202.htm#2">足球比赛规则</a>

手机号码:
在移动端,使用<a href="tel:15012345678>15012345678</a>可以唤出手机拨号盘

href属性一定不要留空,若暂时不需要写地址,则写#或javascript:;。若href留空,会刷新页面

【href与src的区别】
href(hypertext reference)指超文本引用,表示当前页面引用了别处的内容
src(source)表示来源地址,表示把别处的内容引入到当前页面,相当于资源占位
所以<img><script><iframe>等应该使用src,而<a><map>应该使用href 

【target】
target属性表示链接打开方式
1、_self 当前窗口(默认)
2、_blank 新窗口
3、_parent 父框架集
4、_top 整个窗口
5、_framename 指定框架

【download】
download属性用来设置下载文件的名称(firefox/chrome/opera支持) 

<a href="test.zip" download="gogo">test</a>

 【注意事项】
1、<a>标签的文本颜色只能自身进行设置,从父级继承不到
2、<a>标签的下划线颜色跟随文本颜色进行变化
3、<a>标签不可嵌套<a>标签

img

<img>表示image图像,从技术上讲,<img>标签并不会在网页中插入图像,而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

【必须属性】
1、src:地址
2、alt:图像替代文本,供探索引擎抓取使用

【可选属性】
1、height:图像高度
2、width:图像宽度
3、ismap:为图像定义为服务器端图像映射
4、longdesc:与alt属性类似,提供多于1024字符的长文本描述
5、usemap:为图像定义客户端图像映射 usemap = "#\元素的name或id属性"
6、srcset:指定图片的地址和对应的图片质量。属性格式:图片地址 宽度描述w 多个资源之间用逗号分隔。对于srcset里面出现了一个w单位,可以理解成图片质量。如果可视区域小于这个质量的值,就可以使用,当然,浏览器会自动选择一个最小的可用图片。但是,会发现随着浏览器窗口宽度变大,图片也在不断变大

[注意]浏览器会自动匹配最佳显示的图片,如果大图既然缓存了就用大图了,再缩小也不会变成小图了

<img src="small.jpg" srcset="small.jpg 300w,middle.gif 500w,big.gif 800w">

7、sizes:用来设置图片的尺寸零界点,主要跟响应式布局打交道。属性格式:媒体查询 宽度描述(支持px),多条规则用逗号分隔

[注意]如果加上sizes属性,会发现,随着浏览器宽度变大,图片一直保持其初始尺寸。所以,应该sizes和srcset两个属性配合使用

<img src="small.jpg" srcset="small.jpg 300w,middle.gif 500w,big.gif 800w" sizes="(max-width:300px) 300px, (max-width:500px) 500px,800px">
Copyright © frankshi.com 2019 all right reserved,powered by Gitbook该文件修订时间: 2019-05-29 10:50:45

results matching ""

    No results matching ""