HTML寒假学习总结(一)HTML链接

寒假在家断断续续的终于把HTML的课程学完了,今天抽空来总结一下所学的知识,先从HTML链接开始吧:

链接

1、HMTL中表示链接,用一个a标签加上href
2、链接地址就是一个URL,由Scheme+Host+Path+Query+Hash组成

省略协议

在HTML中,省略URL的不同部分,含义也是不同的。
1、省略协议,http:// ,可以省略。【此时浏览器会根据你当前的协议,去补全URL】(这样省略的好处是,节约资源;页面同时支持http和https协议的话比较方便;如果https页面引用了http资源,用省略协议浏览器会加载(它会补全成https),否则https页面不会加载http页面)
2、省略协议和host,这时URL是以单斜杠开头的,此时浏览器会以当前的协议和host来补全这个url。(在浏览器中用$0 来选中元素,再用$0.herf来返回这个元素的url)。

相对路径与绝对路径

1、相对路径:相对于当前页面所在的目录去找文件,..的意思是访问上一级目录。
2、绝对路径:从根目录开始,也就是从斜杠开始,从root开始找。
ps:实际开发的时候一般是用绝对路径的,开发的时候页面的层级太多了,用相对路径容易出错。

锚点

(又名页面内链接)
1、使用场景:页面比较长,用锚点,让用户能够跳转到页面的某个位置。
2、实现方式:用href=”#”来实现,#后面是id的名字,如果没有则直接回到顶部。

链接目标

1、使用场景:链接在新窗口打开或者是在当前窗口打开。
2、实现方式:target属性,Self是当前窗口,blank是新窗口。
3、实用技巧:如果新窗口打开太多,用户体验不好,做一个优化,把target做一个固定值。

HTML图片

标签是img src="地址"

alt属性

1、使用场景:如果图片无法加载,或者是其他的情况(盲人),替代文字是必须要有的。或者是不加载图片的时候,就能加载alt(省流量模式)
2、实现方式:alt="替代文字"

指定图片的高宽

1、指定图片的高宽有四种实现方式:
(1)不指定高宽,则按照原图大小显示。
(2)指定宽度,按比例缩放到指定宽度
(3)指定高度,按比例缩放到指定高度
(4)指定高宽,强制按指定宽高显示。
2、实用技巧:宽度和高度属性是建议写的,如果不写,图片没有加载完的时候尺寸未定,可能导致页面闪烁。 虽然css可以写这个高和宽,但是内容性的图片一般还是建议在html中写。 css指定高和宽主要针对已经知道了高和宽的图片。

常用图片格式

(1)jpg:适用于照片,Jpg的算法比较适合表示色彩丰富的图片
(2)png:可以半透明!!色彩较少的时候使用
(3)gif:可以做多帧动画,不能半透明。gif也适合颜色少,但是不合适半透明效果,所以后来多用png,但是gif有动画,不过现在动画很多也不用gif做了,用css3来做的更多
(4)webp:google新出的图片压缩格式,webp压缩算法好,大小更小,但是目前很多浏览器不支持

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,991评论 19 139
  • 一、概念(载录于:http://www.cnblogs.com/EricaMIN1987_IT/p/3837436...
    yuantao123434阅读 8,441评论 6 152
  • 2018.2.23 银行乱象 陪老妈去银行办理业务,远远的就看到银行门口各种车辆乱七八糟的摆放着,门口人口攒动,赶...
    陆娴1983阅读 162评论 0 0
  • 自从高中文理分科后,接触的男生越来越少,看见男生就脸红,尴尬,不知道怎么沟通;读了大学,选了师范类的专业,看见男生...
    一北鱼阅读 368评论 2 6
  • 一路扯谈(八)慎终追远 曾子曰:慎终追远,民德归厚矣。 朱熹说:慎终者,丧尽其礼;追远者,祭尽其诚。 《资治通鉴》...
    一路狂奔2008阅读 631评论 2 3