HTML 基礎 Part2

發表於

HTML 基礎 Part 2

Style Attribute

style屬性可以更改 html 上顯示的樣式。
Syntax

1
<tagname style="property:value;">

property: CSS 中定義的 property
value: CSS 定義相對應property的value

Background Color

backgrond-color property設定 HTML element 的背景色

1
2
3
4
<body style="background-color:powderblue;">
<h1>This is heading.</h1>
</body>

Text Color

color property 設定 HTML element的 text color

1
<p style="color:red;">This a red text</p>

Fonts

font-family property 用來定義 HTML element 所使用的字體

1
<p style="font-family:verdana;">This is verdana font</p>

Text Size

font-size property 定義 HTML element 的字體大小

1
<h1 style="font-size:150%;">This font size scale to 150%</h1>

Text Alignment

text-align property 定義 HTML element 的文字對齊方式

1
<p style="text-align:center;">Centered Paragraph</p>

Text Formatting Element

HTML 中定義了一些特殊的Elements給 Text 使用，有以下這幾種：

  • <b> - Bold text
  • <strong> - Important text
  • <i> - Italic text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Small text
  • <delete> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Superscript text

b & strong

這兩個標籤在顯示上，並無差異都顯示為粗體字，差別在於 strong 在搜尋時會有較高的權重，而 b 只是一般的文字。

1
2
<b>This is a bold text</b>
<strong>This is a strong text</strong>

i & em

與上面有著一樣的相對關係， 顯示上都是斜體字，但 em 在搜尋上有較高的權重。

1
2
<i>This text is italic</i>
<em>This text is emphasized</em>

small

將文字縮小

1
<h2>HTML <small>Small</small> Formatting</h2>

mark

用來highlight文字

1
<h2>HTML <mark>Marked</mark> Formatting</h2>

del

在文字上多了刪除線 text

1
<p>My favorite color is <del>blue</del> red.</p>

ins

在文字上多了底線

1
<p>My favorite <ins>color</ins> is red.</p>

sub

subscripted 將文字下標顯示

1
<p>This is <sub>subscripted</sub> text.</p>

sup

superscripted 將文字上標顯示

1
<p>This is <sup>superscripted</sup> text.</p>

Comment Tags

Syntax

1
<!-- Write your comments here -->