HTML、CSS、JavaScript 簡易介紹

Fri, 05 Mar 2021 06:55:55 +0000

寫網頁時常聽到的三大名稱:

簡單來說:
html是網頁的結構，CSS是網頁的樣式，JavaScript是網頁的行為。

HTML 網頁的結構，看起來都方方正正。
CSS 把外貌給顯示出來，讓網頁的外貌看起來美觀一些
JavaScript 控制網頁裡面的內容以及使用者的操作行為

Table of Contents

<span class="ez-toc-title-toggle"><a href="#" class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle" aria-label="顯示/隱藏內容目錄"><span class="ez-toc-js-icon-con"><span class=""><span class="eztoc-hide" style="display:none;">Toggle</span><span class="ez-toc-icon-toggle-span"><svg style="fill: #999;color:#999" xmlns="http://www.w3.org/2000/svg" class="list-377408" width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z" fill="currentColor"></path></svg><svg style="fill: #999;color:#999" class="arrow-unsorted-368013" xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 24 24" version="1.2" baseProfile="tiny"><path d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"/></svg></span></span></span></a></span>

HTML 基本觀念

<li class='ez-toc-page-1 ez-toc-heading-level-2'>
 <a class="ez-toc-link ez-toc-heading-5" href="https://quietbo.com/2021/03/05/html%e3%80%81css%e3%80%81javascript-%e7%b0%a1%e6%98%93%e4%bb%8b%e7%b4%b9/#CSS" >CSS</a>
</li>
<li class='ez-toc-page-1 ez-toc-heading-level-2'>
 <a class="ez-toc-link ez-toc-heading-6" href="https://quietbo.com/2021/03/05/html%e3%80%81css%e3%80%81javascript-%e7%b0%a1%e6%98%93%e4%bb%8b%e7%b4%b9/#JavaScript_%E2%80%93_JS" >JavaScript &#8211; JS</a>
</li>

HTML 基本觀念

巢狀結構
元素(element)
屬性(attribute)
使用文本編輯軟件即可做開發，以 .html 或 .htm 為結尾的文件，最後使用瀏覽器開啟檔案即可顯示。

巢狀結構

簡單來說就是一層一層的概念
範例:

<html>
 <head>
 <title>Title</title>
 </head>
 <body>
 <h1>標題H1 </h1>
 </body>
</html>

因為巢狀結構有分層級，上層稱為父元素，下層稱為子元素。
而層級之間有一定上下、左右的規則，會透過Document Object Model (DOM)來進行遍歷的順序。

元素(element)

使用過程中，需要用 <> 括起來。
HTML元素網址

屬性(attribute)

可以藉由各種方式去設定元素或調整它們的行為。
簡單來說，除了最開頭的元素以外，中間都是屬性。

HTML屬性網址

CSS

CSS就是管理網頁的外貌。

.mainBody{
 min-width: 1024px;
 width: 100%;
 height: 100%;
}
.mainBody .logo{
 height: 45px;
 line-height: 45px;
 background-color: #214D8A;
}

JavaScript – JS

JavaScript 就是管理網頁的內容以及使用者的操作行為，為了要控制網頁的內容。

<script>
</script>

就是實做JavaScript的地方。

JS on Quietbo