HTML、CSS、JavaScript 簡易介紹

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

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

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

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的地方。