(摘要)HTML 學習

HTML是描述網頁文件的Markup Language

HTML(Hyper Text Markup Language)是含有超連結文字,用來描述網頁文件的一種Markup Language(標記語言)。網頁瀏覽器用來讀取HTML文件的內容並顯示<body>…</body>之間的內容。

Markup Language是多組Markup tags所組成。

HTML是由多組HTML tags所組成。

HTML的Tags

一組tag通常會由一個start tag(或稱opening tag)和一個end tag(或稱closing tag)所組成,使用不同組tag描述不同的內容。

start tag寫為<tagname>,end tag寫為</tagname>。

HTML5的tagname可以使用大、小寫文字,但建議使用小寫文字以相容HTML4、 XHTML等其他版本。

HTML的Elements

The HTML element is everything from the start tag to the end tag, but some HTML element do not have an end tag. The tag content is everything between the start tag and end tag.

element 等同於 <tagname> content</tagname>

沒有content的element即為empty element,例如<br>,沒有強制使end tag,但可以使用<tagname />當作end tag。

HTML elements can contain elements, which is called nested.

HTML的elements可以分為兩類:

(1)block-level element:A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

例如:<div>、<h1> – <h6>、<p>、<form>

(2)inline element:An inline element does not start on a new line and only takes up as much width as necessary.

例如:<span>、<a>、<img>

產生並編輯HTML文件

使用任何文字編輯器產生近似以下內容的文件,並儲存成.html或.htm格式即可。

在瀏覽器檢視網頁的HTML文件內容

在瀏覽器的網頁點選右鍵,再選擇顯示"檢視原始碼",可以看到該網頁的html文件內容。

HTML文件的註解

Comment tags <!– and –> are used to insert comments in HTML.也可使用Conditional comment格式。

HTML文件的基本範例

<!DOCTYPE html>  <!-- 用以告知瀏覽器此文件是HTML格式及所採用的HTML版本為HTML5,"html"大小寫皆可-->
<html>
    <head>  <!--放置不會顯示於頁面的meta data, Meta data means data about data. HTML meta data is data about the HTML document.  -->
        <meta charset='utf-8'>  <!-- 用以告知此文件內容所採用的編碼,建議採用utf-8,ANSI編碼只適用於美國和西歐文字 -->
  </head> 
<body>  <!-- 此範圍內放置主要內容 -->
  Hello! 你好! 
  <a href="http://tw.yahoo.com/">Yahoo!</a>   <!--a是anchor(錨)的意思,href是hyperlink reference -->
</body> 
</html>

  • The DOCTYPE declaration defines the document type to be HTML
  • The text between <html> and </html> describes an HTML document
  • The text between <head> and </head> provides information about the document
  • The text between <title> and </title> provides a title for the document
  • The text between <body> and </body> describes the visible page content
  • The text between <h1> and </h1> describes a heading
  • The text between <p> and </p> describes a paragraph

HTML的<head> element

其內容用來放置不會顯示於頁面的meta data, Meta data means data about data. HTML meta data is data about the HTML document.
下面列舉一些meta data的tag:
Tag name Description
title Defines the HTML document’s title.
meta Defines the character set, and other information about the HTML document.
style Defines internal CSS style sheets.
link Defines external CSS style sheets.

 

HTML的Attributes

  1. HTML elements can have attributes
  2. Attributes provide additional information about an element
  3. Attributes are always specified in the start tag
  4. Attributes come in name/value pairs like: name="value"
  5. HTML5的Attributes 可以使用大、小寫文字,但建議使用小寫文字以相容HTML4、 XHTML等其他版本。
  6. HTML5 大部份的Attributes的value的左右邊可以不使用引號,但建議使用引號以相容HTML4、 XHTML等其他版本。建議使用雙引號,其內容有包含引號時再使用單引號。
  7. Attribute Description
    disabled Specifies that an input element should be disabled
    href Specifies the URL (web address) for a link
    class 將相同tag的不同elements進行分組,使方便各組elements套用CSS styles。
    id Specifies a unique id for an element
    src Specifies the URL (web address) for an image
    style Specifies an inline CSS style for an element.

    The HTML style attribute has the following syntax:

    style="property:value;"

    The property is a CSS property. The value is a CSS value.

    CSS property範例如下:

    1.background-color:背景顏色

    2.color:文字顏色

    3.font-family:字體

    4.font-size:文字大小

    5.text-align:文字水平擺放位置

    6.Use the CSS border property for visible element borders

    7.Use the CSS padding property for space inside the border。(padding: 垂直方向間距px  水平方向間距px)

    8.Use the CSS margin property for space outside the border

    9.float:(圖片)置左或置右。

    title Specifies extra information about an element (displayed as a tool tip)
    width , height attributes provide size information for images

HTML的Tags

1. <br> 換行(line break)
2. <i> </i> 文字斜體(Italic)
3. <b> </b>文字粗體(Bold)
4. <strong> </strong> 加強語氣,文字粗體
5. <em> </em> 強調重點(emphasized),文字斜體
6. <sup> </sup> 文字上標化
7. <sub> </sub> 文字下標化
8. <p> </p> 文字段落(paragraph)。Browsers automatically add some white space before and after a paragraph.
9. <h1> </h1> ~ <h6> </h6> 由大到小的六種標題(heading)層次,

<h1> defines the most important heading. <h6> defines the least important heading.

Browsers automatically add some empty space (a margin) before and after each heading.

Use HTML headings for headings only.Don’t use headings to make text BIG or bold.Search engines use your headings to index the structure and content of your web pages.Users skim your pages by its headings.

It is important to use headings to show the document structure.h1 headings should be main headings, followed by h2 headings, then the less important h3, and so on.

10. <title> </title> 網頁最上方的標題
11. <img src="圖片相對路徑"> 放置圖片。

建議總是使用style attribute的width和height properties設定圖片大小(單位是px或%),否則圖片在載入時會閃爍。

建議總是使用style attribute而不是width和height attributes,避免圖片大小被internal或external的CSS Style所影響。

可使用alt attribute設定未正確顯示圖片時所要顯示的文字。

建議在style attribute中加入 “border:0;" property, 避免IE9以前的版本顯示圖片邊線。

可搭配使用usemap attribute和<map>、<area> tags,使圖片可以局部超連結。

12.
<table> 放置表格
<tr> <!– table row –>
<th> </th>  <!– table header,主流的瀏覽器會使其粗體置中 –>
</tr>
<tr>
<td> </td>  <!– table data,可以於置任何HTML element –>
</tr>
</table>

border建議使用css style的border property進行設定,而不是用table的border attribute。

使用css style的border-collapse: collapse,可以使border為單線。

使用css style的 padding: 5px,調整border的內容和border之間的距離。

使用css style的 border-spacing,可調整雙格線border的粗度。

使用colspan或rowspan attribute,可分別合併column或row。

可使用<captain> element設定表格的標題,必須在<table> start tag之後馬上使用。
13. <ul> 無編號項目清單(unordered list)
<li> </li> 清單項目(list item)
</ul>

A style attribute can be added to an unordered list, to define the style of the marker:

Style Description
list-style-type:disc The list items will be marked with bullets (default)
list-style-type:circle The list items will be marked with circles
list-style-type:square The list items will be marked with squares
list-style-type:none The list items will not be marked

14.<ol> 有編號項目清單(ordered list)
<li> </li>
</ol>

A type attribute can be added to an ordered list, to define the type of the marker:

Type Description
type="1″ The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

15.Description List

<dl>
<dt>Coffee</dt>
<dd>– black hot drink</dd>
</dl>
HTML Lists的item可以是任何HTML element。
HTML Lists可以使用CSS Style的display:inline property,使各item以一個空格為間距,顯示在同一行。

16. 表單(Form):可以讓使用者輸人的文件

17.<hr>  一個水平線(horizontal line)。

18.<pre>…</pre>

The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks

19.The HTML <q> element defines a short quotation.

20.The HTML <blockquote> element defines a quoted section.

21.HTML links are hyperlinks.

A hyperlink is a text or an image you can click on, and jump to another document.

<a href=url>link text</a>

The link text does not have to be text. It can be an HTML image element or any other HTML element.

url可以是:

  1. 網路位置:http://doman-name/page-name/ (最後面一定要加上/符號)
  2. 本機位置且與該網頁在同一個資料夾:page-name.xxx (without http://www&#8230;.)
  3. 本機位置且位於子資料夾: /subFolder/page-name.xxx
  4. 相同網頁的特定element: #id
  5. 本機位置不同網頁的特定element: page-name.xxx#id

22.<div> 做為其他element的container(也就是其content是其他element),可搭配style設定所包含的elements的CSS style。

23.<span>的content通常是文字。

24.<iframe src=URL></iframe>

用以在網頁中顯示其他網頁(可稱為iframe page)。

25.<script> 其內容為JavaScript

26. <noscript> 的內容只有在客戶端的瀏覽器無法正常使用JavaScript時才會顯示。

27.<style> element:定義HTML文件的排版、顯示格式。

28.<link> element:連結外部資源。

29.<meta> element:可以放置多個<meta> element,以Key-value的方式提供多種網頁相關的資訊給瀏覽器、搜尋引擎。

 

<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another source
<cite> Defines the title of a work
<q> Defines a short inline quotation

Website Layout Using HTML5

HTML5 offers new semantic elements that define different parts of a web page:

HTML5 Semantic Elements
  • <header> – Defines a header for a document or a section
  • <nav> – Defines a container for navigation links
  • <section> – Defines a section in a document
  • <article> – Defines an independent self-contained article
  • <aside> – Defines content aside from the content (like a sidebar)
  • <footer> – Defines a footer for a document or a section
  • <details> – Defines additional details
  • <summary> – Defines a heading for the <details> element

避免使用<table> element 完成網頁的排版。

Responsive Web Design

Responsive Web Design 是調整CSS和HTML使網站在不同的裝置上有不同的最佳排版。

不建議忽略<html>、<head>、<body>

在HTML5中,<html>、<head>、<body>標籤可以忽略,但可能導致撰寫不良的DOM軟體或是舊版的瀏覽器造成讀取異常。

建議採用<html lang="en-US">的方式提示頁面內容的語言。

 

 

參考資料

  1. 陳鍾誠 – HTML 網頁的基本語法
  2. W3School HTML Turorial

 

Advertisements

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s