html标签属性和css属性的优先级哪个比较高

这篇文章给大家分享的是有关html标签属性和css属性的优先级哪个比较高的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

蕉岭网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站开发等网站项目制作,到程序开发,运营维护。创新互联于2013年成立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

html标签属性和css属性相比,css属性的优先级高。原因:W3C标准提倡使用CSS样式,提倡用CSS样式代替HTML标签属性;网页制作标准是标签跟样式分离;且在标签属性里设置样式,重复使用比较难。

今天在看w3c的CSS教程中的尺寸(Dimension)那一节,进行了如下实验:




 
W3Cschool教程(w3cschool.cn) 






运行结果如下:

html标签属性和css属性的优先级哪个比较高
当时令我不解的是,为什么相比于img标签里的height属性,反而是内部样式表中的img的height属性起了作用,然后就进行了各种的百度搜索。


最终得出了相关结论:
(1) 现在发现当时的我把标签内的属性设置和内联样式搞混了,所以刚开始才会那么惊讶无法理解,之后尝试内联样式


实验结果表明还是内联样式的优先级高于内部样式表。

(2) 重新搞清楚概念后,再观察会发现其实是内部样式表的样式设置优先级高于html标签属性的样式设置,随后进行了外部样式表的实验




 
W3Cschool教程(w3cschool.cn) 





发现外部样式表的优先级也高于img标签内部的height属性,由此可知,css的样式会优先于标签的属性

(3) W3C标准提倡使用CSS样式,提倡用CSS样式代替HTML标签属性;网页制作标准是标签跟样式分离。因为在标签属性里设置,重复使用比较难,个人猜测这可能就是css样式优先级高于标签属性的原因。


(4) 虽然提倡使用CSS样式,但是W3School中进行了详细的介绍:“为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性,就可以在页面加载时为图像预留空间。如果没有这些属性,浏览器就无法了解图像的尺寸,也就无法为图像保留合适的空间,因此当图像加载时,页面的布局就会发生变化。”

“请不要通过 height 和 width 属性来缩放图像。如果通过 height 和 width 属性来缩小图像,那么用户就必须下载大容量的图像(即使图像在页面上看上去很小)。正确的做法是,在网页上使用图像之前,应该通过软件把图像处理为合适的尺寸。”

“height 和 width 属性的两个值可以比实际的尺寸大一些或小一些,浏览器会自动调整图像,使其适应这个预留空间的大小。但需要注意的是:浏览器还是必须要下载整个文件,不管它最终显示的尺寸到底是多大,而且,如果没有保持其原来的宽度和高度比例,图像会发生扭曲。
使用 height 和 width 属性的另外一种技巧,是可以非常容易地实现对页面区域的填充,同时还可以改善文档的性能。设想一下,如果你想在文档中放置一个彩色的横条。您不需要创建一个具有完整尺寸的图像,相反,您只要创建一个宽度和高度都为 1 个像素的图像,并把自己希望使用的颜色赋给它。然后使用 height 和 width 属性把它扩展到更大的尺寸。”

“如果提供了一个百分比形式的 width 值而忽略了 height,那么不管是放大还是缩小,浏览器都将保持图像的宽高比例(因为不设置height时的默认值为auto自适应)。这意味着图像的高度与宽度之比将不会发生变化,图像也就不会发生扭曲。”

就像露兜文章中一个ID为“于江水”的评论:“img 的 alt 属性是必须的,width 和 height 是推荐的。因为 img 在网页的加载是要比 p 这些结构慢的,所以往往是结构和文字先加载了,再加载的图片。这时候,由于浏览器预先不知道图片的尺寸大小,所以无法渲染图片在网页中的位置和尺寸。等图片加载进来之后,再进行渲染,这时候就产生重绘(就是浏览器重新计算相关元素的位置,具体表现就是图片出现了,图片下面的文字跑到下面了,淘宝的商品介绍页面,这里非常明显。)
而带有 width 和 height 的 img,浏览器会计算出来,留空,然后等待图片加载,避免页面重绘,提高前端性能和用户体验,这里在知乎上多图的答案可以看出来。

在响应式布局(一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本;这个概念是为解决移动互联网浏览而诞生的)的图片处理中,应该对 img标签设置 max-width: 100%; height: auto; 这两条属性,才可以保证成比例拉伸。”

html有什么特点

1、简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便,适合初学前端开发者使用。 2、可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。  3、平台无关性:超级文本标记语言能够在广泛的平台上使用,这也是万维网盛行的一个原因。 4、通用性:HTML是网络的通用语言,它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。

感谢各位的阅读!关于“html标签属性和css属性的优先级哪个比较高”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


本文名称:html标签属性和css属性的优先级哪个比较高
当前网址:http://myzitong.com/article/gipjdg.html