Как я могу вызвать CSS и Javascript в HTML-файле?

Question

Я довольно новичок, когда речь идет о CSS и JavaScript. Я нашел аккуратный таймер обратного отсчета для добавления на мой сайт, но я не совсем уверен, как добавить его туда, куда я хочу.

Вы можете просмотреть таймер здесь: https://jsfiddle.net/ft8zoghr/1/

CSS:

html,body{margin:0px;padding:0px} 
#cdt a img{border:0} 
#cdt .demo{position:absolute;z-index:999;right:0;top:0} 
#cdt #ie-fix{display:none} 
#cdt .digit{background-image:url(https://d3qhtuwg866bv9.cloudfront.net/oc-sprite?bg_color=00000000&date_label=&encoding=png&font=Kelly+Slab&font_push_down=0.01&height=90&overlay_size=700%2C180&quality=0.95&renderer=v1&scale=1.124&shadow=1&shadow_blur=4&shadow_color=ffffff77&shadow_y=0&style=TemplateDigits01&text_align=center&title=&txt_color=ffffffFF&unit_labels=DAYS%2CHOURS%2CMINUTES%2CSECONDS&use_overlay=1&width=393);background-repeat:no-repeat;width:34px} 
#cdt .digit-0{background-position:-315px -450px} 
#cdt .digit-1{background-position:0px -405px} 
#cdt .digit-2{background-position:-315px -360px} 
#cdt .digit-3{background-position:0px -315px} 
#cdt .digit-4{background-position:-315px -270px} 
#cdt .digit-5{background-position:0px -225px} 
#cdt .digit-6{background-position:-315px -180px} 
#cdt .digit-7{background-position:0px -135px} 
#cdt .digit-8{background-position:-315px -90px} 
#cdt .digit-9{background-position:0px -45px} 
#cdt .digit-x{width:17px;background-position:-730px -64px} 
#cdt.widget-wrapper{width:393px;height:90px;position:relative;margin:auto} 
#cdt .content-wrapper{width:100%;height:100%;background-position:0 -40px} 
#cdt .spr{background-image:url(https://d29am0ph5s0t8u.cloudfront.net/production/cdt/widgets/sprites/image/1405744/oc-sprite.png?version=57509bf5-6)}@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) 
{#cdt .spr{background-image:url(https://d29am0ph5s0t8u.cloudfront.net/production/cdt/widgets/sprites/retina_image/1405744/oc-sprite.png?version=57509bf5-6);background-size:899px 202px}} 
#cdt .counter-wrapper{width:374px;height:45.0px;margin-left:19px} 
#cdt .counter-wrapper .counter-item{height:48px;float:left} 
#cdt .counter-wrapper .counter-group{height:67px;float:left;position:relative;overflow:hidden} 
#cdt .counter-group .unit-label{position:absolute;height:25px;width:67px;left:0;top:46px} 
#cdt .days .unit-label{background-position:-393px -128px} 
#cdt .hours .unit-label{background-position:-461px -128px} 
#cdt .minutes .unit-label{background-position:-528px -128px} 
#cdt .seconds .unit-label{background-position:-596px -128px} 
#cdt .header{height:19px;width:100%} 

HTML:

<div id="cdt" class='widget-wrapper'> 
<div class='content-wrapper spr'> 
     <div class='header'> 
     </div> 
     <div class='counter-wrapper'> 

      <div class='days counter-group'> 
       <div class='counter-item'></div> 
       <div class='counter-item'></div> 
       <div class='counter-item'></div> 
       <div class='unit-label spr'> 
       </div> 
      </div> 
      <div class='counter-item'></div> 
      <div class='hours counter-group'> 
       <div class='counter-item'></div> 
       <div class='counter-item'></div> 
       <div class='unit-label spr'> 
       </div> 
      </div> 
      <div class='counter-item'></div> 
      <div class='minutes counter-group'> 
       <div class='counter-item'></div> 
       <div class='counter-item'></div> 
       <div class='unit-label spr'> 
       </div> 
      </div> 
      <div class='counter-item'></div> 
      <div class='seconds counter-group'> 
       <div class='counter-item'></div> 
       <div class='counter-item'></div> 
       <div class='unit-label spr'> 
       </div> 
      </div> 

     </div> 
    </div> 
</div> 

Javascript:

Too long to put here

В файлах моего сайта я создал файл count.css и файл count.js с соответствующей кодировкой. Я просто хочу знать, где я должен разместить их в файле index.html моего веб-сайта для показа счетчика.

Большое спасибо!

Answer 1

Я думаю, некоторые 1мин исследование было бы решить этот вопрос, но здесь вы идете:

Поместите это в - тег:

<link rel="stylesheet" href="count.css"> 

и это непосредственно перед закрывающей -tag:

<script src="count.js"></script> 

Answer 2

Разместите их в нижнем колонтитуле. Сценарии должны быть загружены последними для правильной работы. Не всегда, но лучше безопасно, потом извините.

<script src = "example.js"></script> 

Answer 3

Не совсем уверен, что вы просите, но вы собираетесь хотите разместить HTML где-то withen в <body> теги

Пример

<!DOCTYPE html> 
    <html> 
    <head> 
     <!--css and js stuff--> 
     <link rel="stylesheet" href="count.css"> 
    </head> 
    <body> 
     <!--THE HTML GOES HERE--> 
     <script src="count.js"></script> 
    </body> 
    </html> 

Answer 4

Вы должны сделать что-то вдоль линий:

<html> 
    <head> 
    <link rel="stylesheet" href="count.css"> 
    </head> 

    <body> 
    <script 
     src="./path_to/count.js"> 
    </script> 
    </body> 

Answer 5

Лучше всего добавить js после закрытия тега html, желательно перед тегом тега закрывается. В противном случае, если HTML не был готов к выполнению сценария времени, вы получите ошибки. Поместите вас css между заголовком.

<html> 
<head> 
<link rel="stylesheet" href="count.css"> 
</head> 
<body> 
<div id="cdt" class='widget-wrapper'> 
<div class='content-wrapper spr'> 
     <div class='header'> 
     </div> 
     <div class='counter-wrapper'> 

      <div class='days counter-group'> 
       <div class='counter-item'></div> 
       <div class='counter-item'></div> 
       <div class='counter-item'></div> 
       <div class='unit-label spr'> 
       </div> 
      </div> 
      <div class='counter-item'></div> 
      <div class='hours counter-group'> 
       <div class='counter-item'></div> 
       <div class='counter-item'></div> 
       <div class='unit-label spr'> 
       </div> 
      </div> 
      <div class='counter-item'></div> 
      <div class='minutes counter-group'> 
       <div class='counter-item'></div> 
       <div class='counter-item'></div> 
       <div class='unit-label spr'> 
       </div> 
      </div> 
      <div class='counter-item'></div> 
      <div class='seconds counter-group'> 
       <div class='counter-item'></div> 
       <div class='counter-item'></div> 
       <div class='unit-label spr'> 
       </div> 
      </div> 

     </div> 
    </div> 
</div> 
<script src="count.js"></script> 
</body> 
</html>