iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 15
0

又是新的一天呢!
今天要來講很多很多的tag,基本上把他記下來或是至少有個印象就好了,真的忘了就去查一下一定都查的到。
然後最一開始先講一個不知道怎麼分類的tag,註解:<!-- -->,他不用<> </>,看起來很神奇。不過我其實不常碰到他XD

head的tag

昨天有說這些tag都是不會在網頁顯示出來的,只是網頁的基本資訊,可能會給搜尋引擎或是瀏覽器之類的讀。
然後昨天有說道大多數tag都是成對的,但是在head裡的tag成對的反而較少,所以看到不要覺得奇怪。
那我們就開始看看這一堆tag吧!

head

<head> </head>
整個head的最外層,一定要有的。

title

<title> </title>
中間放的是網頁標題,可以說是在head裡面唯一一般人會看到的東西。

meta

  1. <meta charset=''> 設定網頁編碼,一般會是utf-8。不寫也不一定會怎麼樣,但是可能就會跑出亂碼。
  2. <meta name='description' content=''> content裡可以自己填關於網頁的描述。
  3. <meta name='author' content=''> 很明顯是作者。但是他聽說已經很少被採用了所以加不加沒差。
  4. <meta name="keywords" content=""> 就是關鍵字,但是也用不多了,所以不用太理他。
  5. <meta http-equiv='refresh' content=''> 他是我比較常用的http-equiv,功用是定時重新整理。單位是秒喔。

link

然後接下來要講的是link的部分,他的功能都很重要,讓我們來看看:

  1. <link rel='icon' href='' [sizes=''] type=''> 這邊是用來加網頁的icon,href是你icon的位置,通常用相對路徑,現在所在的目錄就是這個HTML檔案所在的目錄。type可以是image/pngimage/jpg之類的,一定要打他是image然後/再加副檔名。
  2. <link rel='stylesheet' href=''> 這是用來引入CSS的。href放的是CSS的檔案路徑。
    講了引入CSS就要講引入JS,JS的引入不是用link喔,要用script:

script

<script src=''></script>
src(source)裡面放的就是JS的路徑。tag中間基本上不會有東西。而src可以記一下,以後會很常看到。

style

<style> </style>
有時候你可能懶得引入CSS,或是不管怎樣沒用link弄CSS的時候,你就需要他。你可以在他們之間放CSS的語法,然後就會有link CSS進來的效果了。

如果還想要知道更多的話(尤其是meta跟link的部分)可以去這裡看看。(好像有點太多了XD)

body的tag(1)

今天要講的是關於單純文字的部分,之後還會講到body的結構、插入圖片、影片等等。

h1~hn

<h1> </h1>
標題,<h1>是最大的,也可以<h2><h3><h6>,他會看起來比較大、比較粗。當然用CSS也可以調啦。

p

<p> </p>:段落,會有蠻大的外圍(講CSS會提到)。

b

<b> </b>:粗體。用CSS也可以辦到。

i

<i> </i>:斜體。一樣,CSS也可以做出來。

hr

<hr>:一條水平線。

br

<br>:換行。

span

<span> </span>:一段字,不會占掉整行。

div

<div> </div>:一行字,整行都會占掉。

sub

<sub> </sub>:有時候想要打化學式的H2O之類的,要讓2縮小就可以用他。
舉例:H<sub>2</sub>O2被sub了,所以他會縮小。

sup

<sup> </sup>:這個是次方。
舉例:3<sup>2</sup>,然後就會有2的三次方的效果。

a

<a href='' [target=''] [download]> </a>
他是超連結,基本上網頁一定要有吧!兩個tag中間要放的是這連結的文字(或圖片之類的)
href要放的是連結的網址(當然也可以放在同一台主機上的東西,用相對路徑就可以了)
target是超連結要怎麼開,預設就是在現在這個網頁開,如果是_blank的話就會開啟新分頁,當然還有很多種開法,只是不常用到,我也不贅述了
download,明顯就是一個按了可以下載檔案的網址,如果是要做甚麼工具小站之類的就會用到。然後預設會有底線跟字變藍色,可以用CSS消掉。

今日小結

結果我發文了才發現忘了打結語XD
今天就是一堆的HTML tag轟炸,我覺得也沒有甚麼背的必要啦,需要再去查一下都會有,在W3C也有完整的列表,有需要可以去看看。
話說我本來想說可能HTML佔三天,現在顯然要不只了呢...


上一篇
【Day14】HTML(1)
下一篇
【Day16】HTML(3)
系列文
30天學會用FreeBSD & Apache架網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言