[Day 03] 我所認識的HTML tag

2018 iT 邦幫忙鐵人賽

DAY 3

自我挑戰組

蚵蚵攻城記系列第 3 篇

2018鐵人賽

在繡房偷吃藕粉丸子

2017-12-13 23:58:17

3421 瀏覽

分享至

HTML感覺既熟悉又對他陌生
印象中會出現在瀏覽器的網址欄的最後四個字

在我還沒開始學HTML之前
我對做一個網頁的方法的認知
跟做報告用的PPT一樣
放上想要的圖片
超連結連一連就能放到網路上去使用啦!!!!

開始學之後才發現原來非常的深奧
而且需要些邏輯才能達成
這對邏輯差的我很痛苦

我先到W3School HTML5 Tutorial 的每一個章節每一個練習題練習
最早遇到會是長這樣的東西

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

用" <> " 刮起來的是 tag name，形成一個 tag。
每個 tag 通常都有一個和它長得很像的 tag長這樣 </tag name> ，
叫做closing tag，(總覺得它跟RNA的stop codon很像)
這兩個 tag包起來的地方形成一個element。

<!DOCTYPE html> : 這是用來宣告這個文件是HTML

<html> : HTML的 root element

<head> : 一般使用者看不到這邊，它包含了一些關於這份文件的訊息，像是可以引用CSS或是JavaScript。

<title> : 文件的標題

<title>Html heading exercise</title>

會有這樣的結果
title
瀏覽器分頁的地方就出現我打的內容呢!!!

<body> : 從這裡開始就是一般使用者可以看到的內容了

<h1> : 標題的 tag，從<h1>一直到<h6> 並且逐漸變小。

<h1>Hello!!</h1>
<h2>Hello!!</h2>
<h3>Hello!!</h3>
<h4>Hello!!</h4>
<h5>Hello!!</h5>
<h6>Hello!!</h6>

h1~h6

<p> : 內文的 tag

<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdoom, with a metropoltan area of 13 million inhabitants.</p>

HTML的 tag在W3School HTML tag list上可以查詢
上面介紹了一些較基本的 tags，接著我想記錄一下我常用到的一些 tags。

<a> : 超連結，通常都會伴隨著一個重要的屬性(attribute) href，並且加上文字寫成這樣

<a href="https://www.w3schools.com/tags/tag_a.asp">HTML <a> Tag</a>

<ul> 和 <ol> : 無序列的 list和有序列的list，在tag 中用<li> 將項目列出來

<ul>
	<li>Pen</li>
	<li>Pencil</li>
	<li>Pencil box</li>
</ul>
<ol>
	<li>Pen</li>
	<li>Pencil</li>
	<li>Pencil box</li>
</ol>

list

<style> 可以在這之中寫 CSS，但是如果 CSS另外一個檔案寫的，
需要用 <link> 這個tag 。
<script> 可以把JavaScript寫在這個 element之中，如果 JavaScript是 external，
也可以直接用src的attribute將檔案引用進來。

<div> 這個 tag對我來說有點玄，它有點像一個包裝，可以把一個部份的 elements包起來，形成一個區塊。