찾다
웹 프론트엔드HTML 튜토리얼link和@inport详解以及脚本执行顺序探讨_html/css_WEB-ITnose

  先说一说两者之间的异同

  两者都可以引用外部CSS的方式,现在主流浏览器两者都支持(ps:@import是CSS2.1提出的),但是存在一定的区别:

1.link是XHTML标签,除了加载CSS外,还可以定义其他事务;@import属于CSS范畴,只能加载CSS也只能在css代码里面使用。

  link标签定义文档与外部资源的关系,最常见的用途是链接样式表以及浏览器标签图标。

  他主要有一下几个可用的属性

  href: 连接的外部文档的位置url

  media: 规定被链接文档将被显示在什么设备上,主流浏览器支持的值有 "screen"、"print" 以及 "all"

  rel: 规定当前文档与被链接文档之间的关系,目前只有stylesheet和icon支持的比较好,其中icon指的外部链接文档为浏览器标签图标。

  sizes: html5新特性,规定被链接资源的尺寸,该属性可接受多个值,值由空格分隔。仅适用于 rel="icon"。值为any(规定图标是可伸缩的)和heightxwidth。比如下面的例子定义标签图标

<link rel="icon" href="http://www.w3school.com.cn/i/demo_icon.ico" type="image/gif" sizes="16x16">

  type: 规定规定被链接文档的 MIME 类型。最常见的 MIME 类型是 "text/css"。MIME类型参考

  

  @import在css代码中引用外部文档,而且只能放在代码的最开头。比如下面的例子就不行

<style type="text/css">  .panel{    width:1000px;  }  @import url(extra.css);</style>

  需要改成

<style type="text/css">  @import url(extra.css);  .panel{    width:1000px;  }</style>

 

2:link引用CSS时,在页面载入时同时加载(按请求顺序加载);@import需要页面网页完全载入以后加载。

  这里面涉及一个概念,代码中引用文件都是在文档加载完成以后才开始加载的。如下面的例子

<style type="text/css">  @import url(extra.css);</style><script type="text/javascript">  document.write("<script src='extra.js'><\/script>");</script><script src="jquery.js"></script><link rel="stylesheet" type="text/css" href="test.css"><script type="text/javascript" src='test.js'></script> 

  加载的顺序是jquery.js->test.css->test.js->extra.css->extra.js。其中extra.css和extra.js就是代码中引用文件的典型。

  注意:虽然extra.css在加载顺序上是在test.css后面,但是浏览器认为extr.css样式表的定义在test.css的前面,所以样式上浏览器会用test.css中的样式覆盖extra.css的样式。js脚本也是同理。

  这里有一个原则,脚本(无论是html中内嵌的还是外部脚本)的优先级顺序是其引用的顺序,而非加载的顺序,并且其中的执行代码执行的必要条件是其引用顺序在其前列的脚本已经加载完毕(实际上脚本中代码的执行都是在所有脚本加载完成之后才执行的,只是不同脚本中的代码执行的上下文环境是不同的,下面会详细分析)。

  举例

<script type="text/javascript">    document.write("<script src='extra.js'><\/script>");</script><script type="text/javascript" src='test.js'></script> <script type="text/javascript">    a();</script><script src="new.js"></script>

//extra.jsfunction a(){    alert("extra")}alert("extra1")//test.jsfunction a(){    alert("test");}alert("test1");setTimeout(a,1000);//new.jsfunction a(){    alert("new")}alert("new1")

  引用顺序是

  extra.js -> test.js -> new.js。

  执行弹出弹出框的顺序是

  alert("extra1") -> alert("test1") -> alert("test") -> alert("new1") -> alert("test")

  解析,代码执行顺序及和引用顺序相同

  

  浏览器执行函数的原理是根据顺序扫描脚本将所有要执行的处理放入处理队列中并带上执行的上下文环境依次执行。

  比如执行到本地js的a()的时候上下文环境中函数a为function a(){alert("test")}。setTimeout(a,1000)执行后a函数携带上下文环境(a函数为function a(){alert("test")})被放置到另一个地方,等到时间间隔到期才被放入执行队列,这就是为什么最后弹出alert("test")的原因。

  我们再次拓展,在extra.js中定义一个function b(){a();},然后在本地js调用a()之后执行b();结果应当是弹出alert("test"),因为这个时候的上下文环境a函数为function a(){alert("test")}。

  

  css的请求顺序和覆盖也可以用上面的描述解释。覆盖顺序是谁先被引用谁就会被后引用的同样的样式覆盖(当然这里指的是除开内联样式以外的样式引用)

 

3:link支持使用Javascript控制DOM去改变样式;而@import不支持。

   因为link也属于DOM元素,而@import是css样式表中支持的东东

4: 用法

  @import

@import "style.css"@import url(style.css) @import url("style.css")

   推荐使用@import url(style.css)

  

  如果觉得本文不错,请点击右下方【推荐】!

 

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
텍스트에서 웹 사이트로 : HTML의 힘텍스트에서 웹 사이트로 : HTML의 힘Apr 13, 2025 am 12:07 AM

HTML은 웹 페이지를 작성하는 데 사용되는 언어로, 태그 및 속성을 통해 웹 페이지 구조 및 컨텐츠를 정의합니다. 1) HTML과 같은 태그를 통해 문서 구조를 구성합니다. 2) 브라우저는 HTML을 구문 분석하여 DOM을 빌드하고 웹 페이지를 렌더링합니다. 3) 멀티미디어 기능을 향상시키는 HTML5의 새로운 기능. 4) 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함됩니다. 5) 최적화 제안에는 시맨틱 태그 사용 및 파일 크기 감소가 포함됩니다.

HTML, CSS 및 JavaScript 이해 : 초보자 안내서HTML, CSS 및 JavaScript 이해 : 초보자 안내서Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

HTML의 역할 : 웹 컨텐츠 구조HTML의 역할 : 웹 컨텐츠 구조Apr 11, 2025 am 12:12 AM

HTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.

HTML 및 코드 : 용어를 자세히 살펴 봅니다HTML 및 코드 : 용어를 자세히 살펴 봅니다Apr 10, 2025 am 09:28 AM

"Code"는 "Code"BroadlyIncludeLugageslikeJavaScriptandPyThonforFunctureS (htMlisAspecificTypeofCodeFocudecturecturingWebContent)

HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구Apr 09, 2025 am 12:12 AM

HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임HTML, CSS 및 JavaScript의 역할 : 핵심 책임Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML은 초보자를 위해 쉽게 배우나요?HTML은 초보자를 위해 쉽게 배우나요?Apr 07, 2025 am 12:11 AM

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

HTML의 시작 태그의 예는 무엇입니까?HTML의 시작 태그의 예는 무엇입니까?Apr 06, 2025 am 12:04 AM

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구