iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 4
0

首先就來了解網路的運作吧!點圖看影片/images/emoticon/emoticon37.gif

How The Internet Works:

HTML是什麼

超文本標記語言(英語:HyperText Markup Language,簡稱:HTML)是一種用於建立網頁的標準標記語言。HTML是一種基礎技術,常與CSS、JavaScript一起被眾多網站用於設計網頁、網頁應用程式以及行動應用程式的使用者介面[3]。網頁瀏覽器可以讀取HTML檔案,並將其彩現成視覺化網頁。HTML描述了一個網站的結構語意隨著線索的呈現,使之成為一種標記語言而非程式語言。
擷取自wikipedia

現今的網站需要很多技術才能做出來,但絕對少不了HTML,HTML是網頁的基石。HTML的開發,是源自研究機構為了能夠在網路上分享文件,藉以梳理文章結構,比較好閱讀。演變至現在我們上網,就是在瀏覽一個一個HTML檔。

如果沒有用HTML的元素(element)來指定文章的結構,單純用enter來分行,瀏覽器是不會理會的,顯示在瀏覽器上依然沒有斷行,也沒有大小字區分,不知道標題、副標題是哪個,文章沒有段落。

番茄炒蛋食譜
材料
牛番茄 2顆
雞蛋 3顆
蔥花 少許
鹽 適量
做法
1. 生蛋拌勻,下鍋炒到香嫩即取出備用。
2. 番茄下鍋切塊炒出香味,再放入炒好的嫩蛋,加入鹽巴調味,稍微拌炒勻即可。
3. 起鍋前撒上蔥花

上面沒有HTML元素的內容,轉到瀏覽器變這樣。這樣是要怎麼看啊?

如果指定HTML的元素,瀏覽器就會讀取,並顯示在頁面上(又稱渲染):

<h1>番茄炒蛋食譜</h1>
<h3>材料</h3>
<ul>
  <li>牛番茄 2顆</li>
  <li>雞蛋 3顆</li>
  <li>蔥花 少許</li>
  <li>鹽 適量</li>
</ul>
<h3>做法</h3>
<p>1. 生蛋拌勻,下鍋炒到香嫩即取出備用。</p>
<p>2. 番茄下鍋切塊炒出香味,再放入炒好的嫩蛋,加入鹽巴調味,稍微拌炒勻即可。</p>
<p>3. 起鍋前撒上蔥花</p>

嗯~這樣就比較好讀了~

元素element

HTML就是依靠元素來對文檔產生作用。而元素是開始標籤跟結束標籤構成的,中間可以輸入內容,以p跟h元素為例子。

寫成文檔是這樣:

<h1>我的第一個標題</h1>
<p>我的第一個段落</p>

也有不需要結束標籤的元素,像是img:

<img src="./image/cute_pig.png"> 

屬性attribute & 值value

但上述的img元素沒有給予屬性,他在瀏覽器是不會有圖片的,所以必須給予屬性跟設定值。src屬性是來源,value值為檔案路徑。

HTML的世界裡,有非常多屬性,屬性可以用在不同的元素裡,但並不是每個元素都能用。

  • 點看HTML屬性列表,會有全部屬性的作用和可用在什麼元素上。

inline元素 & block元素

HTML用元素來結構文章,讓文章好閱讀,而每個元素主要就用兩個性值來讓文章產生結構:inline & block。

block元素

垂直排列。佔滿整個瀏覽器頁面,從左到右。

<h1>我是標題</h1><p>我是文章</p> 

上列指令h1跟p在文檔裡寫在同一行,可是顯示在瀏覽器上卻是分行。因為它們都是block元素,會從左到右佔滿寬度,垂直往下排列,所以在文章的結構上就會被清楚劃分出兩塊不同的段落。

*兩個block有重疊的區塊,叫margin(外邊距)重疊,該概念會在進到CSS筆記時介紹。

inline元素

水平排列。不換行,直到寬度容不下才會被擠到下一行。

<span>姓名:</span>
<input type:text> <!--這行是輸入框-->
<button>介紹我自己</button>

雖然指令是分行寫,但是給予inline元素,三個元素會水平排列,而在畫面上看起來三個元素的內容物都在同一行。

使用限制

block元素可以包含inline元素,但inline元素不可包含block元素。這邊所指的inline與block都是指元素,到了CSS時,樣式指定可以改變元素的顯示方式,到時候inline元素可以用block的排列方式,而block也可以換成inline的排列,咦?不知道在說什麼?總之,期待到時候的筆記吧(眼睛發亮)~

*有任何錯誤或描述不夠精準之處,歡迎指教,非常感謝。


上一篇
Day3 推薦的前端學習資源
下一篇
Day5 動手寫HTML之前(下)
系列文
從門外漢到前端新手30

1 則留言

0
Chris
iT邦新手 5 級 ‧ 2019-09-19 22:14:44

其實CSS是縮寫,要全大寫

JinWen iT邦新手 5 級‧ 2019-09-20 18:26:25 檢舉

感謝提醒~!

我要留言

立即登入留言