2015-08-13 63 views
0

http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/如何組裝HTML,CSS和JS海誓山盟

你可以看到整個代碼分爲三個部分(HTML,CSS和JS)的「看在行動」一節。我是與asp.net合作的新人。我知道我可以把css和js代碼放在不同的文件中,並且有一個包含html和asp.net標籤的web表單,但是我真的不知道如何組裝上面的代碼來獲得正確的輸出。

請幫忙嗎?

<html> 
    <head> 
    <style> 
     /* PUT YOUR CSS HERE */ 
    </style> 
    </head> 
    <body> 
    <!-- PUT YOUR HTML HERE --> 
    <script> 
     // PUT YOUR JS HERE 
    </script> 
    </body> 
</html> 

這樣,他們走到一起,在一個頁面,並且可以相互影響(CSS可以影響HTML和JS會影響HTML &:一種方式,他們都可以走到一起

回答

2

一個簡單的例子(也就是說,它也可以改變Css)

注 - HTML頁面中唯一真正需要的是HTML本身,您可以添加指向其他文件而不是複製副本的其他資源的鏈接腳本如果你已經有了預先製作的文件,這可能是更好,更有意義的方法但是如果你是新手,我寫的更容易理解,如果這是你第一次嘗試所有這些,可能是最好的。祝你好運,新的web開發人員,可能會與你同在。 (:

+0

將腳本放在head標籤中並不是一個好主意,因爲它會減慢頁面的加載時間,這是因爲執行將在腳本加載時暫停,如果腳本文件的大小很大,它會花費較長時間來呈現頁面。因此,建議在底部可能在正文結束之前將腳本標記放在底部。 – Novice

+0

@新手好吧,我已經改變了。當你通過參考鏈接到JS資源時,這也是真的嗎? –

+0

對不起,錯誤的腳本引用必須在body標籤結束之前,它是無效的在HTML標籤內的body標籤之後。 我不確定你指的JS資源是什麼意思,你可以詳細說明一下嗎? – Novice

2

這裏是文件結構我通常使用:

/ 
|_index.html 
| 
|_assets/ 
     |_css/ 
     | |_style.css 
     | 
     |_ js/ 
      |_script.js 

而且我的index.html一般是這樣的:

<!doctype html> 
<html> 
<head> 
    <title>Test page</title> 
    <link rel="stylesheet" href="assets/css/style.css"> 
</head> 
<body> 
    <h1>Hello world!</h1> 
    <script src="assets/js/script.js"></script> 
</body> 
</html> 

爲什麼CSS在頭部鏈接標籤?

因爲我希望CSS儘快加載,因此用戶看不到當它加載時,我的頁面的未格式化版本。

爲什麼腳本在頁面底部調用?

因爲這樣,我確信當我執行我的腳本時,整個文檔被加載和解析。