Liz's Blog

HTML5學習筆記

| Comments

在學習Ruby on Rails過程中,不免會碰到一些HTML,以下紀錄一下學習筆記,完整內容請參考W3School的HTML5 Tutorial,若想挑戰自己拿證書,W3School也有提供喔!

以下是html簡單版的範例:(瀏覽器只能看到

到中間的內容)
<!DOCTYPE html>
<html>
<head>
<title>請輸入頁面名稱</title>
</head>
<body>

<h1>文章標題</h1>
<p>第一個文章段落是......</p>

</body>
</html>

1.<!DOCTYPE html>:代表HTML5
2.<html>:代表HTML的根本元素,並以</html>結尾。
——在也可以標註語言,例如:<html lang="en-US">(美式英文)及<html lang="zh-Hant-TW">(台灣版的繁體中文)。
3.<head>:包含較開始的資訊內容,通常會包含頁面名稱、scripts、字元編碼等內容,但不會顯示在瀏覽器上。
4.<title>:標題。
5.<body>:包含可見的資訊內容,並以</body>結尾。
6.<h1>:最重要的標題,重要逐次遞減至<h6>,並以</h1>結尾。特別注意,此項應只用來顯示標題,而非讓字體較大或者變成粗體。
7.<p>:段落,並以</p>結尾。
8.<a>:代表連結,如:<a href="https://www.google.com">This is a link</a>
——target="_blank"代表連結時顯示在新視窗中。
——在Ruby on Rails view的寫法,則是= link_to "Add New Inspiration", new_post_path
9.<img>:代表圖片,如:<img src="xxx.jpg" alt="W3Schools.com" width="104" height="142">。src表示檔名,alt代表說明文字,width代表寬度,height代表長度。
——在Ruby on Rails view的寫法,則是<%= image_tag("xxx.png") %>
10.<br>:跳下行。
11.<pre>:類似縮排的段落,以</pre>結尾,會保留空格及跳下行的設定。
12.<b>:粗體,以</b>結尾。
13.<strong>:比較重要的意思,以</strong>結尾,但瀏覽器顯示和<b>相同,但本質上不同。
14.<i>:斜體,以</i>結尾。
15.<em>:強調的意思,以</em>結尾,但瀏覽器顯示和<i>相同,但本質上不同。
16.<small>:較小的字體,以</small>結尾。
17.<mark>:用螢光筆標注,以</mark>結尾。
18.<del>:表刪除的文字,以</del>結尾。
19.<q>:引用較短的句子,會以''顯示,以</q>結尾。
20.<blockquote>:整段引用,以</blockquote>結尾。
21.<table>:表格。<tr>:每行。<th>:首列。<td>:其他列資料。

<table>
  <tr>
    <th>First</th>
    <th>Second</th>
  </tr>
  <tr>
    <td>me</th>
    <td>you</th>
  </tr>
</table>

22.<ul>:沒順序的清單,<li>:條目。

<ul>
  <li>First</li>
  <li>Second</li>
</ul>

23.<div>:可用來顯示特定區塊的段落,以</div>結尾。
24.<span>:常應用在某段落特定幾個文字上,以<span>結尾。
25.HTML4轉成HTML5
——<div id="header">改成<header>
——<div id="menu">改成<nav>
——<div id="content">改成<section>
——<div class="article">改成<article>
——<div id="footer">改成<footer>
26.用CSS來裝飾HTML:
——Inline CSS:可用來顯示特殊的段落或文字。
<h1 style="color:red;">Heading is red</h1>
——Internal CSS:可用來顯示特定頁面的風格設定,通常會放在<head>之後。
——External CSS:可用來同時控制好幾個網頁,甚至是整個網站的外觀設定。

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Comments

comments powered by Disqus