iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 7
0
自我挑戰組

用敏捷管理我跟 HTML&CSS 的 30 天親密接觸系列 第 7

|Day 07|調整 HTML 中的文字表示方式來符合使用者的期待

https://ithelp.ithome.com.tw/upload/images/20190916/20120833oeyXDJ7uwH.jpg

一直以來,文字透過適時地增加標點符號或文字格式的變化來強調內容或是語氣的轉折。
那在 HTML 中要怎麼做到呢?

之前已經有介紹過 h標籤、p標籤和 br標籤,接下來要為大家介紹更多:

|文字的形式|

<body>
<b>粗體</b> 
<i>斜體</i>
<s>刪除線</s>
<u>底線</u>
</body>

瀏覽器畫面如下,大家看出來了嗎?
https://ithelp.ithome.com.tw/upload/images/20190916/201208337L8Mxj5JNT.png

聊聊屬性
HTML 的標籤可以提供屬性 (attribute),而屬性通常有幾個特色:

  • 帶有值 (value),例如 <input type="text" id="name">typeid就是屬性,= 後面的 text name就是值。
  • 屬性出現在開始標籤

聊聊值

  • 出現在等於後面。
  • 可用單引號或雙引號標示之,但不能混著用。

舉個例子

<body>
 <h4 Align="center">標題置中</h4>
</body>

https://ithelp.ithome.com.tw/upload/images/20190916/20120833mgvU1Ljo8b.png

更多的屬性的文字例子:

  • font size:網頁文字大小設計
    • <font size="1">文字</font>
      <font size="2">文字</font>
      <font size="3">文字</font>
      
      https://ithelp.ithome.com.tw/upload/images/20190916/20120833nIynTEwKRl.png
  • font style:文字樣式設計
    • <font style="background-color:red">文字</font>
      <font style="background-color:red">文字</font>
      
      https://ithelp.ithome.com.tw/upload/images/20190916/20120833wa9lUXCMKj.png
  • font face:網頁文字的字型設定
    • <font face="新細明體">文字</font>
      <font face="微軟正黑">文字</font>
      <font face="cursive">文字</font>
      
      https://ithelp.ithome.com.tw/upload/images/20190916/20120833l5F0jMeoY3.png

NOTE

  1. 屬性是替 HTML 元素提供的附加信息
  2. 而這些屬性可以藉由各種方式去設定元素或調整它們的行為,以符合使用者的期待

上一篇
|Day 06|從 <p>、<br> 標籤來思考敏捷精神
下一篇
|Day 08|來聊聊 HTML5 的語意標籤和 SEO 的關係
系列文
用敏捷管理我跟 HTML&CSS 的 30 天親密接觸30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言