2

分享

簡單了解html --新手教程篇

這篇我JavaScript的新手教程篇一起寫的,嘿嘿ԅ(¯﹃¯ԅ),
沒到才第一次認真寫部落格,就一次寫兩篇,會不會太硬🤣?
好啦,我們進入正題!
這篇就不分章節了,簡單地介紹,讓你在步入JavaScript之前,能對html有基本認識,就讓我們速速前進。
新手 程式 教程 html 基礎

Photo by Cookie the Pom on Unsplash

html是什麼?

html是一種網頁所使用的語言,主要用來表示整個頁面的樣子,可以使用它來設計出網頁。
html本身不能就不像是C++那類的程式語言,它屬於一種非常基礎的標記示語言,等等看了範例之後就會非常明白。

網頁的html長什麼樣子?

現在,你可以試著按下F12,或是點擊滑鼠右鍵按「檢查」,會看到像這樣的介面:
新手 程式 教程 html 基礎

開發人員視窗範例,圖為探路客撰寫文章時的頁面。

上面「元素」的地方(英文叫element)就能看到網頁它最原始的樣子了。
可能你會想說:「哇~怎麼那麼複雜,該怎麼下手讀懂它」,新手現階段要完全理解還有些吃力,讓我們一步一步慢慢來。

簡單的html樣貌

以下是自己寫的範例:(無法用Tab,所以用空白排版QAQ)
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset = "utf-8">
  5.         <title> Hello World </title>
  6.         <style>
  7.             h2{
  8.                     color: darkorange;
  9.             }
  10.         </style>
  11.     </head>
  12.     <body>
  13.         <h2> Hello World!! </h2>
  14.     </body>
  15. </html>
以下是該頁面:
新手 程式 教程 html 基礎

test.html的頁面

藍色底線為title,在程式碼第5行;
紅色底線為顯示出來的h2,在第13行;
第1行的部分不講解太多,基本上都長那樣子XD,寫上去就對了😆。

五個重點:
  1. 第四行<meta charset = "utf-8">:
    表示頁面的編碼,如果沒有這一行,只要在裡面打上中文,就會出現像亂碼一樣的東西。這裡剛好出現一項不用以</>結尾的元素(像<body>結尾有</body>),寫久了就會知道哪些需要(九成需要),而哪些不用。
  2. <style>(在第6行):
    這裡面我簡單的塞了個CSS格式,改變h2的字體顏色,通常這裡面可以塞一些CSS,改變字體、背景的樣式,到div的排版都有,而這涉略到過多CSS的東西了,有機會再介紹,這篇先告訴你<style>在做什麼。

  3. 上面1及2點兩個元素,皆位於<head>內
  4. h1、h2等等常用於標題,其中h6預設的字體最小。
    h1 > h2 > h3 > h4 > h5 > h6
  5. html頁面註解方式:
    <!--註解內容-->
讀到這裡,就可以自己去試試喔😁。
用記事本、Notepad++、Visual Studio Code(最推薦),皆能撰寫,
副檔名為.html。
新手 程式 教程 html 基礎

Photo by Sam Albury on Unsplash


id 以及 class

  

<button id = "xd">clickme</button>
<h2 class = "title1">I love Timelog.</h2>

照以上範例來看,第一項的button,就有著xd這個id,
而第二項的h2,則有title1這個class,兩者可以同時出現,如下:
  

<button id = "xd" class = "circle1">clickme</button>

這個button同時有了xd這個id以及circle1這個class。
重點(非常重要):
  1. 一種id在一個頁面上只能存在一個:
    例如:已經有一個id為xd的button了,不能再有id為xd的元素。
  2. 一個元素不能多個id
  3. class可以重複,常用於套用css樣式(很方便XD)
  4. 一元素能有多個class:
  

<button id = "xd" class = "circle1 yellowline jam">clickme</button>

<!--這麼一來這個button就有了circle1、yellowline、jam三個class-->

class看似比較強大,但接下來我們進入到JavaScript需要的其實是id的獨特性辨認目標,就算JavaScript寫到後來,配合id用的機會仍然不少。
新手 程式 教程 html 基礎

Photo by Blake Connally on Unsplash

結語

這篇主要介紹部分基礎html,讓讀者減少看到網頁碼的恐懼感與困惑感,也為邁入JavaScript做準備,對網頁有簡單認知。
讀完這篇之後,就能讓我們來玩有趣的JavaScript了!🤣
至於想把網頁弄得美美的,不妨可以先去學CSS跟更深入的html
CSS Tutorial (w3schools.com)
HTML Tutorial (w3schools.com)
這個網站的資源很多,適合初學者!

今天分享到這裡~🤗 喜歡的朋友幫忙按讚按鼓勵喔🤩
謝謝大家😁
#新手  #程式  #教程  #html  #基礎 
分類:學習

用blog紀錄學習歷程,公開的程式筆記本! 歡迎各位交流,還請多多指教。目前大ㄧXD, 筆名就叫做 clover幸運草(❁´◡`❁) ~2021/1/20加入~ C++ Python HTML JavaScript php SQL

評論
上一篇
  • #新手上路 第一次寫部落格的心情
  • 更多文章
    載入中... 沒有更多了