html中常用的css引用和js引用,次序以及地址

關於HTML頁面中,css樣式和js引用次序的問題。引用各類js,css

之前是沒想過這個問題,後來頁面報錯啦什麼的,分析了一下。
首先,因爲瀏覽器生成[DOM樹](Doument Objecj Model (文本對象類型))的時候是一行一行讀HTML代碼的,script標籤放在最後面就不會影響前面的頁面的渲染。

JS和css的引用,一般放在head中也可以放在body後。把引用官方的放在自己編寫的之前,然後有被依賴的,放前面。比如bootstrap依賴jquery等。

下邊是使用各個包的引用。沒有下載鏈接的,引用的位置就是源文件位置
  • 引用vue:
    <script src="https://vuejs.org/js/vue.min.js"></script>

  • 引用jquey:
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>

  • 引用swiper:(需要jquery)下載鏈接
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="./js/swiper.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/swiper.min.css">

  • 引用bootstrap:(需要jquery)下載鏈接
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="./js/bootstrap.min.js"type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"/>

  • 引用animate:
    <link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css"/>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章