顯示具有 HTML 標籤的文章。 顯示所有文章
顯示具有 HTML 標籤的文章。 顯示所有文章

2017年3月28日 星期二

HTML顏色

在HTML中顏色可以直接用英文代號輸入
例如
紅:red
藍:blue
橘:orange
其餘可參考連結

第二種表示法使用RGB數值
rgb(red,green,blue)
數值顯示最低為0(不顯示)到255(全部顯示)
rgb(255,0,0) 表示紅色全顯示
rgb(0,0,0)表示不顯示顏色,黑色
rgb(255,255,255)顏色全顯示,白色

第三種為HEX數值
原理同rgb,但是使用16進位法
以#000000表示,前兩個數字表示紅色顯示程度,再來是綠色,藍色
數字由小到大為0123456789ABCDEF
00為全關,FF為全開

HTML標註與註解

引用
使用blockquote可以使文章在分隔出一個區塊,使人分辨引用的區塊
<blockquote cite="http://www.worldwildlife.org/who/index.html">...<blockquote>

簡稱
當鼠標移至簡寫的文字處會顯示title中儲存的文字
<abbr title="World Health Organization">WHO</abbr>

聯絡訊息
<address>...<address>
包裹的文字通常會以斜體的方式出現,顯示聯絡資訊

物體的標題
<cite>...</cite>

反方向撰寫
使用bdo的文字在輸出後會顯示相反的順序
<bdo dir="rtl">This text will be written from right to left</bdo>
會顯示
This line will be written from right to left

註解(隱藏文字)
在HTML中撰寫如下
<!-- This is a comment -->
將不會顯示文字訊息在輸出後的畫面


HTML樣式屬性

HTML中樣式的宣告如下:
<tagname style="property:value;">
                       CSS的性質    數值
背景顏色
在body中設定性質background-color 可以改變整體背景顏色
<body style="background-color:powderblue;">

文字顏色
CSS性質用color改變文字顏色
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

字型
使用font-family改變文字字型
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

字體大小
使用font-size改變字體大小
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

改變文字位子(偏左偏右置中)
text-align 來指定字在文章中位置
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

改變文字格式
以下為不同的文字格式
方式為<格式>文字</格式>
<strong>This text is strong</strong>


  • <b> - 粗體字
  • <strong> - 加強重要
  • <i> - 斜體
  • <em> - 加強重要
  • <mark> - 標線
  • <small> - 縮小
  • <del> - 刪除
  • <ins> - 底線
  • <sub> - 下標
  • <sup> - 上標

  • 2017年3月27日 星期一

    HTML 表題與內文

    標題(headings) 字體由大至小為h1>....>h6 表示法
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>

    標題除了外觀上與內文不同外
    對瀏覽器來說,在查找文章大綱時是非常有幫助的
    內文請勿以標題來替代粗體或大字

    分隔線 <hr>
    單獨存在,用一條橫線來分隔區塊

    對HTML為暫存的地方 <head>
    放置於<html> 與<body>之間
    <html>
    <head>
      <title>My First HTML</title>
      <meta charset="UTF-8">
    </head>
    <body>...

    內文<p>
    在HTML中內文如果同一位至輸入多個空格
    瀏覽器會認為只有一個空格
    內文中的斷行也會被忽視

    分行<br>
    會自動換行,<br>單獨存在,不須結尾

    預先設定內文<pre>
    在pre中輸入的空白與段行會被瀏覽器認為是存在的
    可以避免再HTML處理與實際看到不一致



    HTML 元素與屬性

    HTML中起始與結束形式為
    <標籤名>內文</標籤名>
           <h1>標題</h1>
            <p>內文</p>
    而空白元素(empty elements)
    直接<標籤>即可
    例如跨行符號 <br>

    在HTML中所有元素都可以賦予屬性
    屬性可以提供額外的資訊
    表現通常如:name="value"
    <html lang="en-US">... </html>
    lang可以讓瀏覽器知道要用的文字格式
    en表示使用的語言,如果有方言則用US

    或是
    <p title="I'm a tooltip">
    This is a paragraph.
    </p>
    當鼠標移至內文上時會出現title中的資訊

    <a href="https://www.w3schools.com">This is a link</a>
    href提供連結,移至文字後可以點即開啟目標位置

    <img src="w3schools.jpg" width="104" height="142">
    src提供圖片的名稱
    width可以設定寬度(單位螢幕畫數)
    height可以設定高度(單位螢幕畫數)

    當文章中有"or'時(只具有一種)
    用不重複的符號來宣告
    <p title="John 'ShotGun' Nelson">
    內文有' 就用"

    HTML 基本

    在HTML中
    一開始要宣告類型 <!DOCTYPE html>.
    html檔案的開始與結束: <html> </html>
    html中可見的部分:<body> </body>
    以上是開始寫要記得打的

    標題(heading)
    從大到小 h1>h2.....>h6

    內文(paragraphs)
    表示法 <p> --內文-- </p>

    連結(link)
    以a表示
    <a href="http://www.google.com"> This is a link </a>
                    要連結的網站                       文字
    圖片
    <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
                圖片連結                       說明文字              寬度設定       高度設定