[HTML自學筆記]

Published on:

HTML與CSS


  • html (就像是一張素顏的臉)
    有著各種不同含義標籤的網頁格式,而一個網頁就是由各種不同的標籤所組成的。

  • css(就像是化妝品)
    最主要就是設定整個網頁的排版

在最開始html只是單純的定義網頁的架構與內容,隨著人們對網頁的美觀越來越要求的同時,大家也開始在html裡面加了排版的元素,導致html越來越複雜。在一個html裡要管理網頁的架構、又要管理網頁的排版,而css的出現,便可以幫html分擔一半的工作,html只要管理網頁的架構就好,排版就都交給css。

html就是一張素顏的臉,而css就是化妝品,能把原本不怎麼起眼的html頁面打扮得美美的。


div / span 的不同


<div> </div>:塊級元素。
<span> </span>:行內元素。
  • div :網頁中的區塊。透過DIV標籤搭配CSS可以在網頁中創造各個不同的排版。

  • span:是區域性質,提供了一種添加到文本或文檔的一部分的一個組成,應用在較小的範圍裡。可以用來標示一些特定的網頁元素(element)或文字串(string),然後進行一些樣式風格設計,例如將一些特定文字標示為粗體字、斜體或修改文字顏色,使用起來相當方便。

    div/span 在css的運用

    Q:那為什麼在html裡看得到div/span,css裡也有div/span?這兩個是不一樣的東西嗎??
    A:在HTML和在CSS裡看到的div/span是一樣的。如同一開始所說HTML是素顏的臉,我們透過css幫他上妝讓他變漂亮。
    這兩個標籤,其應用上並不像其他一般的 HTML 標籤一樣,有著某種特殊的功能,它們是利用其 STYLE 的屬性,靠著 CSS 來定義更多的屬性及規則,再來套用到所屬的文字區塊上。

    div/span 差異

參考資料:
前端研究室
div和span的不同


class 与 id 的不同


  id  : 是唯一性的、不可重覆的
class : 可被拿來被重覆使用的,可將同一群組或類別來進行設定
  • ID
  • class

這兩者最大的不同,是在於 ID 選擇器在一個 HTML 文件中只能被使用一次,而 Class 選擇器在一個 HTML 文件中可以被使用多次。第二個不同的地方,是 ID 選擇器可以被 Javascript 中的 GetElementByID 函數所運用,而 Class 選擇器無法被 Javascript 運用到。

決定什麼時候要用 ID 及什麼時候要用 Class?
建議是盡量用 Class,因為這樣子最靈活 (同一個 HTML 文件可以利用這類的選擇器多次)。唯一的例外,是當你要用 Javascript 的 GetElementByID 函數時。在這個情況下,你就應該要用 ID。

Class 名稱及 ID 名稱都是對大小寫敏感的。舉例來說,.classone 及 .ClassOne 是代表兩個不同的 Class 選擇器。

class/id 在css的使用方法

參考資料:
class與id的區別
[CSS]id與class別再傻傻分不清楚


p 与 br 的不同


<p> </p>:定義段落
<br/>:插入換行
  • 相同之處是都是有換行的屬性及意思
  • 不同的地方

<br>
只需一個可單獨使用,用在「分行」,寫文章內容因為文字太長需要跳到下一行

<p></p>
是成對的一起使用,用在「分段」,因主題不同分段落時使用

  • 範例

如何使用 table 排版


如何使用呢?
首先先知道直行橫列

step 1

先使用<table></table> 的標籤把內容包起來

step 2

想好表格要幾行幾列
<tr></tr> 標籤代表的是一行,
<td></td> 標籤則代表一列,

step 3

為 table 加上了 border="1" 的設定,這代表這個 table 的邊框粗細是 1

  • 範例

 <table></table>   此標籤是表格的基本。
<tr></tr>   此標籤是行。而每行中可有很多的儲存格。("tr" 為 "table row" 的縮寫)
<th></th>   此標籤是標題之意,也屬儲存格的一種。其中的文字會自動變為粗體。
<td></td>   此標籤是列。屬一般的資料儲存格。Table Data之意。
border=設定   此標籤是設定外框的厚度大小,例如border=3,若0則沒有外框[內定]。

參考資料
HTML Table表格

Comments

comments powered by Disqus