JS file included in the <script> block with SCR reference, CSS in link and @import to reference, CSS is not the focus of this article, directly quoted a blogger's summary:
“
The difference between 1:link is XHTML tags, in addition to loading CSS, you can also define RSS and other transactions, @import belong to the CSS category, can only load CSS.
The difference between 2:link referencing a CSS, loading at the same time when the page loads, @import need to load the page after full loading.
The difference between 3:link is XHTML label, no compatibility problem, @import is proposed in CSS2.1, the lower version of the browser is not supported.
The difference 4:ink supports using JavaScript to control the DOM to change styles, while @import does not support it.
Supplement: @import the best wording
@import are generally written in the following ways:
@import ' style.css '//windows ie4/ns4, Mac OS X IE5, Macintosh IE4/IE5/NS4 not recognized
@import "Style.css"//windows ie4/ns4, Macintosh IE4/NS4 does not recognize
@import URL (style.css)//windows NS4, Macintosh NS4 does not recognize
@import url (' style.css ')//windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4 not recognized
@import url ("style.css")//windows NS4, Macintosh NS4 does not recognize
By the analysis of the above, @import URLs (style.css) and @import URLs ("Style.css") are the best choice, compatible with the most browsers. From a byte-optimized point of view, the @import URL (style.css) is most recommendable. ”
As can be seen from the above, we try to use link as much as possible, conform to the standard and facilitate web optimization.
OK below to focus on, in reference to external JS when there are two large methods, one is the absolute reference to a relative reference, absolute reference, is the direct write dead station inside the path, relative reference may have to consider the parent file and so on, of course, and direct use of the URL, direct usage should belong to absolute reference (doubtful);
On the code:
1 <HTML>2 <Head>3 <Scriptsrc= "Http://localhost/test.js">Alert ("OK");</Script>4 </Head>5 <Body>6 <P>7 haha.8 </P>9 </Body>Ten </HTML> One/*test.js placed under www folder, url reference */
Test.js placed in the WWW folder, url reference, this is very understood, we usually use the jquery library is so used. Attach picture of successful operation
1 <HTML>2 <Head>3 <Scriptsrc= "//www/test.js"></Script>4 </Head>5 <Body>6 <P>7 haha.8 </P>9 </Body>Ten </HTML> One/*html and test.js stored in the WWW folder, the absolute path in the station */
HTML and test.js are stored in the WWW folder, the absolute path within the station, WWW is the root directory of the Web site, so access is absolute path access.
1 <HTML>2 <Head>3 <Scriptsrc=".. /js/test.js "></Script>4 </Head>5 <Body>6 <P>7 haha.8 </P>9 </Body>Ten </HTML> One/*html placed in the HTML folder, Test.js placed in the JS folder, using the relative parent path */
.. /This means access to the previous level of the folder, because the HTML in the HTML folder, so it first access to the previous level of the folder and then in the access to the JS folder, the last access to test.js. Note that there is no//writing in front of this
Src= ". /js/test.js "></script instead of
Src= "//.. /js/test.js "></script
1 <HTML>2 <Head>3 <Scriptsrc= "Js/test.js"></Script>4 </Head>5 <Body>6 <P>7 haha.8 </P>9 </Body>Ten </HTML> One/*test placed in the JS file, HTML under the WWW folder, www folder is the root directory of the website */
The principle of the same, but the change in the HTML is not placed in an HTML folder, only JS placed in the JS folder, so do not need to use. /access the parent file.
JS file reference the problem incidentally review CSS reference