2015年12月18日 星期五

認識html(基本架構/段落/屬性)

把一些手寫的筆記騰上來...如有錯誤請不吝嗇指教 : )

另外,不要心急想一次學好所有語言,建議專心一次學一種就好

不是說混著學會學不好,只是許多語言之間只是格式上的變換,功能都很相似

應用時容易在觀念上重疊,有時出現一些奇怪的小錯誤(例如把html的語法搞成css..)

不要覺得說只是一些小錯誤而以無傷大雅,等你debug的時候可就笑不出來了...

有時真的是一個中括弧、一個空白、一個冒號..就足夠耗上不少時間(笑)


基本架構標籤


<!doctype html> 宣告文件類型為html

<html> </html> 文件開始與結束的地方,要寫在網頁裡面的任何資訊就放在裡面吧

<head> </head>文件的頭部,通常會放入<title>網頁的標題

<body> </body>主體部分,你想出現的一切東西都放在裡面

<h1> ~ <h6> 6個預設帶有粗體效果的標題,由大至小

<p> </p> 段落 (區塊元件:自成段落) (行內元件:運用在段落裡面)

<a href="URL"> 要顯示的連結文字/圖片</a>   超連結

<img src="圖片的URL(相對/絕對位置)"/>放入圖片



hmtl語法的組成


簡單來說,html的語法是由標籤屬性屬性值 三者所組成

以下列這一個<p>為例:

 <p style="font-size:12px">文字內容</p>

標籤:p     屬性:font-size    屬性值:12px 

基本上每一個標籤都是成雙成對的*,一個開頭與一個加入/符號的結尾(<p>...</p>)

style=只是一個前置元素,代表說我們要賦予p屬性,整個屬性與屬性值由 " " 包裹起來

屬性這裡font-size舉例的是設定字體大小,屬性與屬性值之間透過:冒號隔開,

而屬性值12px這裡舉例的是我們要設定的大小為12px

白話來說明設一段:段落元素設定字體大小為12

*沒有成對的標籤又稱空標籤,本身是沒有訊息內容的標籤,像是img或是br等等


段落屬性應用(可應用在 <p> <h> <li> 等各種文字)


<p> 內容 </p>          一般段落格式

<p style="color:red"> 內容 </p>        字體顏色(舉例為紅色)

<p style="font-family:arial"> 內容 </p>        字形設定(舉例為arial字體)

<p style="background-color:blue"> 內容 </p>       段落背景顏色(舉例為藍色)

html標籤有各種屬性,族繁不齊備載,這邊只舉例部分應用情況


想了解更多可以到w3school裡面或者運用你的搜尋引擎找找


對齊


"text-align:left"         "text-align:center"          "text-align:right"            
     置左                              置中                               置右


粗體


<strong> 這裡的文字會是粗體 </strong>


斜體


<em> 這裡的文字會是斜體   </em>


引言


<blockquote> 這裡的文字會自成一個段落並斜體 </blockquote>

與em很像,但他會自成一個縮排的段落,所以還是要視使用時機來運用

如果你是段落內的某些字要斜體,建議用em

如果你是整段要獨立出來,並有縮排效果的話,那就是用他了



項目符號


<ol> </ol> 帶有數字項目符號的"有序列表"

<ul> </ul> 帶有黑點項目符號的"無序列表"

<li> </li> 項目內容




沒有留言:

張貼留言