.

iT邦幫忙

2023 iThome 鐵人賽

DAY 2
1

講到網頁實作,就一定得提到網頁開發三大巨頭:

HTML、CSS、JavaScript。

  • HTML : 一個網頁的骨架,建立起基本架構
  • CSS : 一個網站的衣服,負責外觀設計
  • JavaScript : 決定網站的動作

而今天先講HTML的部分~

首先,平常瀏覽網頁時使用的步驟如下

  • 我們透過網址對遠端伺服器發出http request
  • 伺服器再回傳相對應的網頁html原始碼
  • 網頁遊覽器再自動地將html原始碼轉為我們看得懂的圖形化介面

這麼神奇的原始碼到底長什麼樣子,來看看平常常見的網頁的html原始碼吧。

網址前面輸入view-source:即可看到html原始碼

  • 舉it邦幫忙網頁的html原始碼為例https://ithelp.ithome.com.tw/upload/images/20230917/20162596jrxwLaOFRP.png

可以看到裡面的東西,像是程式碼又不是程式碼,看似有規律又有點像亂碼。
那HTML到底是什麼呢?

  • HTML(HyperText Markup Language)
    • 為一種標籤語言,利用標籤去描述網頁上文字的特性
    • HTML在網頁上的結構
      • head:放網頁的基本資料
      • title 網頁名稱
      • meta metadata
      • link CSS 樣式表
      • style CSS 樣式表
      • script JavaScript code
      • body:要編輯的網頁內容
    • 三大要素
      • 標籤 Tag:
      • 屬性 Attribute:描述標籤
      • 內容 content:看到的文字
      • <tag attribute=”something”>content</tag>
    • 標籤
      • <>將標籤名包住
      • 開始<…>;結束</…>,但不是每個標籤都有結束標籤
    • 屬性
      • 為標籤提供更多資訊,ex: 將這個區塊命名為名字
      • 型式→名稱=“值”
      • 只會出現在開始標籤中
    • 內容
      • 就是內容,顯示的部分(如顯示的文字內容等等)

接下來記載一下常用的語法,一樣以HTML三大要素個別去講

  • 常見標籤

    • <font></font> :調整文字樣式

    • <u>: 底線

    • <i>: 斜體

    • <b>: 粗體

    • block元素:會佔一整行

    • https://ithelp.ithome.com.tw/upload/images/20230917/20162596x541TUSdXB.png

      • <div>…</div> : 描述編輯的區域,容器

      • <h>: 字型大小 → h1 > h2 > h3

      • <p>: 分段

      • <hr>: 分割線

      • list元素https://ithelp.ithome.com.tw/upload/images/20230917/20162596JKsiTcFnoZ.png

        • <ul>:unorder list,列表用點來表示
        • <ol>:order list,編號清單,用1. 2. 3. …來表示
        • <li>:list,可包或不包在<ul>,<ol>裡面,僅放資料,沒顯示任何額外的東西
    • inline元素:用多少佔多少

      • <span>
    • <a>: 超連結

    • <br>:換行

    • <form> :製作表單讓使用者填入資料

    • <table> : 表格

  • 常見屬性

    • href :放超連結的網址
    • class : 說明目的
  • 常見的內容

    • 沒有常見的內容啦!就是想打什麼自己決定XD

今天先講到這,我們明天見/images/emoticon/emoticon58.gif


上一篇
【DAY01】前言
下一篇
【DAY03】HTML(2)
系列文
30天全端:關於網站實作的聊聊30
.
圖片
  直播研討會

尚未有邦友留言

立即登入留言