HTML入門學習筆記（二）

竹與蜻蜓發表於2019-02-16
HTML筆記

第三章 文字

段落 p

<p>毫不奇怪，p是最常用到的HTML元素之一</p>

作者聯絡資訊 address

address並不是用於標記郵政地址，而是定義與HTML頁面或頁面一部分有關作者、相關人士或組織的聯絡資訊。

<article>
    <h1>...</h1>
    <p>...</p>

    <footer>
        <p>Tracey wong has written for <cite>The Paper of Papers</cite> since  receiving her MFA in art history three years ago.</p>
        <address>Email her at <a href="mailto:tracyw@thepaperofpapers.com">mailto:tracyw@thepaperofpapers.com</a>.
        </address>
    </footer>
</article>

address是其最近的外層結構（article元素或body）的作者資訊，且它只能包含作者的聯絡資訊，不能包含其他內容。此外，HTML5禁止在address裡包含以下元素：h1~h6、article、address、aside、footer、header、hgroup、nav和section。

圖 figure

之前主要用div，HTML5引入了figure。

<figure>
    <figcaption>Figure 3:2011 Revenue by Industry </figcaption>
    <img src="chart-revenue.png"/>
</figure>

figure元素可以包含多個內容塊，但只允許有一個figcaption，且figcaption必須與其他內容一起包含在figure裡面，不能單獨出現在其他位置，它必須是figure的第一個或最後一個元素。

時間 time

HTML5新增了time元素來標記一個準確的時間或日期。

<p>The train arrives at <time>08:45</time> and <time>16:45</time> on <time>2016-08-13</time>.</p>

<time datetime="1952-06-12T11:50:00">June 12,1952 at 11:50 a.m.</time>

<time datetime="2016-08-13T18:30:00">tonight at 6:30</time>

<time datetiem="2016-08-01"></time>

沒有datetime屬性時，必須使用合法的格式（YYYY-MM-DDThh:mm:ss）表示日期和時間。前三個例子在time元素裡都包含了時間和日期的文字(datetime和文字最好反映同樣的時間)，這些文字會在螢幕上顯示，但最後一個例子不會，當前瀏覽器不能顯示屬性中的值。

<time datetime="2011-10-15" pubdate="pubdate">October 15,2011</time>

包含pubdate屬性的time表示其最近的祖先article元素的釋出日期，若沒有article，則表示整個頁面的釋出日期。既可以用<time pubdate="pubdate"></time>，也可以用<time pubdate></time>指定pubdate。不過，一旦包含它，就必須提供datetime或時間的文字內容。

重要或強調文字 strong & em

strong表示重要的文字，em表示強調。根據需要，這兩個文字可以單獨使用，或者一起使用，甚至同一個標籤可以巢狀使用。

不能用b代替strong，也不能用i代替em。因為b和i沒有任何語義，接下來看一下HEML5中對b和i的新定義。

b元素表示出於實用的目的提醒讀者注意的一塊文字，不表達額外的重要性，不傳達額外的重要性，也不表達其他的語態和語氣，用於如文件摘要的關鍵詞、評論裡的產品名、基於文字的互動式軟體中指示操作的文字、文章導語等。

i元素表示一塊不同於其他文字的文字，具有不同的語態或語氣，或其他不同與常規之處，用於如分類名稱、技術術語、外語裡的慣用語、思想、西方文字中的船舶名稱等。

也可以說，b和i是其他元素（如strong、em、cite等）都不適用時的最後選擇。

引用或參考cite

cite指明對某內容源的引用或參考，預設以斜體呈現。

引述文字 blockquote & q

bolckquote和q用以標記引述的文字。引述塊級文字使用blockquote，引述行內文字使用q。

<blocekquote cite="http://www.marktwainbook.edu/the-adventure-of-huckberry-finn/">
    <p>...[被引述的文字]...</p>
</blockquote>

<p>She tried again,this time in French:<q lang="fr">Avez-vous lu le livre <cite>High Tide in Tucson</cite> de Kingsolver? C`est insprirational.</q></p>

  • 應儘量避免將文字直接放在blockquote開始和結束標記之間。應該將文字放在blockquote中p或其他語義上合適的元素。

  • 可以對blockquote和q使用可選的cite屬性，但是瀏覽器通常不會將cite的URL呈現給使用者，這個屬性本身不是特別有用。建議在內容中使用連結（a元素）重複這個URL，讓訪問者可以檢視來源。

  • blockquote是HTML5的區塊根，這意味著它可以有h1~h6的標題（及其自身的大綱），但文件大綱不會包含這些標題。

  • q元素引用的內容不能跨越不同的段落。

  • 不要僅僅因為需要在字詞兩端加引號就使用q。

  • blockquote和q可以巢狀，巢狀的q元素應該自動加上正確的引用，由於內外引號在不同語言中處理的方式是不一樣的，因此需要根據需要在q元素中加上lang屬性。

突出顯示文字mark

mark最常見的使用場合是在搜尋結果頁面，對搜尋詞進行突出顯示。

對於某段引述，如果作者在原來的格式中沒有對其進行突出顯示，可以用mark對它進行突出顯示。

<blockquote>
    <p>...<mark>15 minutes</mark>...</p>
</blockquote>

引起對程式碼片段的注意。

<pre>
    <code>
    <mark>.greenText</mark> {
        color: green;
    }
    </code>
</pre>

不要僅僅因為要給文字加上背景顏色或其他視覺上的考慮而使用mark。如果只是要給一塊文字新增樣式而沒有合適的語義化元素，就可以使用span元素，並用CSS新增樣式。

解釋縮寫詞abbr

<p>That`s nothing compared to what <abbr>MLB</abbr> (Major League Baseball) did.

<p>The <abbr title="National Football League">NFL</abbr> promised ...</p>

當縮寫詞有title屬性時，Firefox和Opera會新增虛線下劃線引起注意。當滑鼠移至縮寫詞上，該元素title屬性的內容就會顯示在一個提示框裡。

定義術語dfn

<p>The contestant was asked to spell "pleonasm".She requested the definition and was told that <dfn>pleonasm</dfn> means "a redundant word or expression".</p>

儘管pleonasm出現了兩次，但只對第二個進行標記，因為那時才定義術語。

dfn在適當的情況下可以包住其他的短語元素。例如：<dfn><abbr title="Junior">Jr.</abbr></dfn>。

上標sup & 下標sub

上下標字元會輕微的擾亂行距，可以用CSS解決這個問題：

sub,sup{
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}

標註編輯和不在準確的文字

  • 標記新插入文字ins

  • 標記已刪除文字del

  • 標記不在準確或不在相關的文字s

del和ins；是少有的既可以包圍短語內容又可以包圍塊級內容的元素。

標記程式碼code

使用code標記程式碼、檔名、工程名等，要顯示單獨的一塊程式碼，可以使用pre元素包住code元素以維持其格式。

<p>The <code>showPhoto()</code> function displays the full-size photo of the 
   thumbnail in our <code>&lt;ul id="thumbnail"&gt;</code> carousel list.</p>

<p>This CSS shorthand example applies a margin to all sides of paragraphs: 
   <code>p {margin: 20px; }</code>. Take a look at <code>base.css</code> 
   to see more example.</p>

如果程式碼中需要顯示<或>，應分別使用&lt和&gt。

<pre>
    <code>
    .greenText {
        color: green;
    }
    </code>
</pre>

預格式化的文字可以保持文字固有的換行和空格，它是計算機阿程式碼示例的理想元素，不過也可以應用於文字（比如，ASCII藝術）。

不要將pre作為以逃避合適的語義標記內容和CSS控制樣式的快捷方式。不要為了保留原來的格式，將一篇在字處理軟體中寫好的文章直接貼上在pre裡，應該使用相關的文字元素標記內容，編寫CSS控制頁面的佈局。

指定細則small

small表示細則一類的次要註釋，通常包括免責宣告、注意事項、法律限制、版權資訊等，有時還用來署名，或用來滿足許可要求。它只適用於短語，因此不要用它來標記長的法律宣告。

<p>Order now to receive free shipping.<small>(Some restrictions may apply.)</amall></p>

<footer>
    <p><small>&copy;2011 The Super Store.All Rights Reserved.</small></p>
</footer>

一定要在small符合內容予以的情況下使用該元素，而不是為了減小字號。

換行br

手動強制換行使用<br />或<br>.

要確保使用br是最後的選擇，因為該元素將表現樣式帶入了HTML，而不是將多有呈現樣式都交由CSS來控制。對於詩歌、街道地址等緊挨著出現的短行，都適合用br元素。

span

和div一樣，span元素沒有任何語義，只不過span只適合包圍字詞短語。

如果想將下面列出的專案應用到某一小塊內容，而HTML有沒有提供合適的語義化元素，就可以使用span。

  • 屬性，如class、dir、id、lang、title等。

  • CSS樣式。

  • JavaScript行為。

其他元素

以下元素通常極少數情況下才能使用，或者瀏覽器對其支援還不完善。

u元素

以前，u元素用於為文字新增下劃線，在HTML5中，它不再是無語義的、用於表現的元素。對它的定義是：

u元素為一塊文字新增明顯的非文字註解，比如在中文中將文字標明為專有名詞，或者標明文字拼寫有誤。

僅在cite、em、mark等其他元素語義上不合適的情況下才使用u元素。同時，最好改變u的文字樣式，以免與同樣預設新增下劃線的連結文字弄混。

wbr元素

HTML5為br元素引入了一個近親元素，稱為wbr元素，它代表一個可換行處。可以在一個比較長的無間斷短語（如URL）中使用該元素，表示此處可以在必要的時候進行換行。

ruby、rp和rt元素

旁註標記，通常表示生僻字的發音。

bdi和bdo元素

用於文字的左右順序。

meter元素

HTML5新元素，用於表示分數的值或已知的範圍測量結果，支援它的瀏覽器會將值展示為一個表示測量值的橫條。

progress元素

HTML5新元素，用它表示一個進度條。

第四章 影像

關於web影像

格式

Web上用的最廣泛是三種格式是GIF、PNG和JPEG。

JPEG格式適合彩色照片，它包含大量的顏色並進行了合理的壓縮，是檔案變得比較小；它是一種有損的格式，為了節省空間，可能會永久性的犧牲犧牲一些細節；它的壓縮資訊佔用了大量的空間，因此不適合小影像。

PNG和GIF格式通常用於儲存擁有大量純色和圖案或有透明度的標誌之類的檔案。它們是無損的格式，因此他們可以在保證質量的情況下壓縮影像。另外，PNG的壓縮質量比GIF好一些。

尺寸和解析度

分表率越高，畫素越多，在螢幕上，總是畫素越多，影像就越大。

由於長期以來，1024畫素*768畫素的螢幕分表率都是標準的解析度，網頁設計人員習慣於讓頁面保持960畫素寬，避免產生橫向滾動條。由於不同終端裝置的廣泛使用，更應該考慮寬度靈活的設計，讓內容可隨著瀏覽器視窗放大或縮小。

速度

如何讓影像下載速度最短？使用小影像或者對影像進行壓縮。

透明度

出於兩個原因，透明度很重要。首先，使用透明度將一個影像置於另一個影像的後面可以建立複雜度佈局。其次，利用透明度為影像建立非矩形的邊緣，增強頁面的視覺吸引力。

PNG和GIF都支援透明度，JPEG不支援。

GIF格式中，要麼是透明的要麼是不透明的，而PNG則支援alpha透明，可以支援半透明。

動畫

動畫可以儲存為GIF，但不能是JPEG或PNG。

也可以使用Flash、CSS動畫和JavaScript建立動畫。

在頁面中插入影像

<img src="image.url" />

注意，“/”前有一個空格。可以使用float等CSS屬性改變對齊方式或讓文字環繞影像。

提供替代文字

可以為影像新增一段描述性文字，當影像處於某種原因不顯示的時候，就將這段文字顯示出來。同時螢幕閱讀器可以朗讀這些文字。

<img src="cornermarket.jpg" alt="Fruit Stand in Market" />

如果影像有標題，或周圍的文字可以準確地描述影像，也可以設定alt=""。

指定影像尺寸

指定影像尺寸，瀏覽器就會預留空間，在影像載入的同時讓文字顯示在周圍，保持佈局的穩定。

<img src="cornermarket.jpg" alt="Fruit Stand in Market" width="300" height="399" />

width和height屬性不一定要反映影像的實際尺寸。瀏覽器會根據HTML（或CSS）中指定的尺寸，對影像進行放大或縮小。這種方式雖然快捷但並不優雅，更好的方法是使用影像編輯器修改影像尺寸。

為網站新增圖示

出現在位址列、標籤頁和書籤上的小圖示稱為favicon（favorite icon，收藏夾圖示的簡稱）。

<head>
    <meta charset="uft-8" />
    <title>Farm Training Podcasts</title>
    <link rel="shortcut icon" href="/favoite.ico" />
    <link rel="icon" type="image/png" href="favicon.png" />
    ...
</head>

第五章 連結

建立指向另一個頁面的連結

<p>Cats in the <a href="pioneer-valley.html">Pioneer Valley</a>...</p>

href指hypertext reference（超文字引用）。

當訪問者指向連結（在大多數瀏覽器中，預設顯示為帶下劃線的藍色字型）時，目標URL會顯示在狀態列中。

HTML5的塊級連結

HTML5允許在連結內包含除互動式的內容（如其他連結、audio、video、表單元素、iframe等）外的其他任何型別的元素或元素組（如段落、列表、整篇文章、區塊等）。

但是也要避免在連結中放入過多的內容（如一整篇文章），製作精巧是塊級連結是值得推薦的。

不要讓連結的標籤過長，應避免使用“點選此處”作為標籤。

錨anchor

如果需要啟用一個連結跳至網頁的特定區域，可以建立一個錨，並在連線中引用該錨。

...
<header>
    <h2>Table of contents</h2>
    <nav>
        <ul>
            <li><a href="#intro">Introduction</a></li>
            ...
        </ul>
    </nav>
</header>

<article>
    <section id="intro">
        <h2>Introduction</h2>
        <p>This is the intro...</p>
    </section>

    <section id="main-characters">
        <h2>Description of the Main Characters</h2>
        <p>...</p>
    </section>

    ...
</article>

為錨的id命名，應避免使用anchor1、item5這樣的id，id中不能使用空格，應該使用短橫線分隔不同的單詞。

如果錨位於另一個文件，就使用<a href="page.html#anchor-name">引用該區域。（URL和#之間沒有空格。）如果位於另一臺伺服器上的頁面，就使用<a href="http://www.site.com/path/page.html#anchor-name">。

建立其他型別的連結

其實我們可以建立指向任何URL的連結，對於指向全球資訊網上的任何檔案（包括影像、ZIP檔案、程式、PDF、Excel電子表格等）的連結，使用href="http://www.site.com/path/file.ext"。

<p>You can create links directly to <a href="img/buleflax.jpg">a photo</a>.</p>

<p>For example, here are cookie and woody again,except this time they are linked to 
  other pages. <a href="cookie.html" title="All about cookie"><img src="img/cookiefora.jpg" 
  width="143" height="131" alt="cookie" /></a></p>

<p>You can link derictly to <a href="http://www.sarahsnotecards.com/catalunyalive/segadors.mov">
  a video</a> file.</p>

<p>Although you can make a link to <a href="mailto:someone@somedomian.com">someone`s mail address</a> with...</p>

儘管可以連結到PDF和其他非HTML文件（Word、Excel等），單應避免這樣做，因為它們可能要花更長的時間載入。

相關文章