HTML文本基礎教學
本章節分析HTML文本分析,包含標題、段落、樣式,文本各式化、引用、註解等
HTML 標題
HTML文本中,標題(Heading)是通過<h1> - <h6> 標籤進行定義的。 <h1> 定義最大的標題。<h6> 定義最小的標題。標題很重要。我們舉一個例子來說明
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
標題很重要 請確保將HTML標題標籤只用於標題。不要僅僅是為了生成粗體或大號的文本而使用標題。 搜索引擎使用標題為您的網頁的結構和內容編制索引。 因為用戶可以通過標題來快速瀏覽您的網頁,所以用標題來呈現文檔結構是很重要的。 應該將h1 用作主標題(最重要的),其後是h2(次重要的),再其次是h3,以此類推。
HTML 水平線
<hr>標籤在HTML頁面中創建水平線。
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
HTML <head> 元素
HTML <head>元素在HTML頭部什麼也不做。 HTML <head>元素包含元數據。元數據不在頁面中顯示。
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
<p>The HTML head element contains meta data.</p>
<p>Meta data is data about the HTML document.</p>
</body>
</html>
HTML 段落
HTML <p>定義了一個段落。
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML <br>定義了一個跳行。
<p>This is<br>a para<br>graph with line breaks</p>
HTML<pre>定義了一個縮排。
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
HTML樣式屬性
設置HTML元素的樣式,可以使用樣式屬性。
style="property:value;"
HTML背景顏色
<body style="background-color:lightgrey;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
HTML文本顏色
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
HTML字體
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
HTML文本文字大小
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
HTML文本對齊
<h1 style="text-align:center;">Centered Heading</h1>
<h1 style="text-align:left;">Centered Heading</h1>
<h1 style="text-align:right;">Centered Heading</h1>
<h1 style="text-align:justify;">Centered Heading</h1>
<h1 style="text-align:inherit;">Centered Heading</h1>
<p>This is a paragraph.</p>
HTML 文本格式化
元素包含:粗體文本、重要文本、斜體文本、強調文本、標記文本、小文本、刪除文本、插入文本、上標與下標)
HTML Bold和Strong格式
HTML <b>元素定義了一個粗體 文本,它沒有任何額外的重要性。
<p>This text is normal.</p>
<p><b>This text is bold</b>.</
<p>This text is normal.</p>
<p><strong>This text is strong</strong>.</p>
HTML Italic和Emphasized格式
HTML <i>元素定義了一個斜體文本,它沒有任何額外的重要性。
<p>This text is normal.</p>
<p><i>This text is italic</i>.</p>
HTML <em>元素定義了一個強調 文本,它增加了語義的重要性。
<p>This text is normal.</p>
<p><em>This text is emphasized</em>.</p>
HTML Small格式
HTML <small>元素定義了一個小文本:
<h2>HTML <small>Small</small> Formatting</h2>
HTML Marked 格式
HTML <mark>元素定義了一個標記 或者高亮的文本:
<h2>HTML <mark>Marked</mark> Formatting</h2>
HTML Deleted 格式
HTML <del>元素定義了一個刪除 (移除)的文本。
<p>My favorite color is <del>blue</del> red.</p>
HTML Inserted 格式
HTML <ins>元素定義了一個插入 (添加)的文本。
<p>My favorite <ins>color</ins> is red.</p>
HTML Subscript格式
HTML <sub>元素定義了一個下標文本。
<p>This is <sub>subscripted</sub> text.</p>
HTML Superscript格式
HTML <sup>元素定義了一個上標文本。
<p>This is <sup>superscripted</sup> text.</p>
HTML 引用格式
HTML <q>元素用於定義一個短引用。
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
HTML <blockquote>用於長引用
HTML <blockquote>元素用於定義片段引用
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
HTML <abbr>用於縮略語
HTML <abbr>元素用於定義縮寫或首字母縮略語。
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
HTML <address>用於聯繫信息
HTML <地址>元素用於定義文檔/文章的聯繫信息(作者/所有者)。
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
HTML <cite>用於作品標題
HTML <cite>元素用於定義作品的標題。
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
HTML註釋標籤
註釋標籤 <!-- 和 --> 用於在HTML中插入註釋。
<!-- Write your comments here -->