HTML入門學習筆記（二）

時間 2019-12-09

標籤 html 入門學習筆記欄目 HTML 简体版

原文原文鏈接

第三章文本

段落 p

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

做者聯繫信息 address

address並非用於標記郵政地址，而是定義與HTML頁面或頁面一部分有關做者、相關人士或組織的聯繫信息。css

<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~h六、article、address、aside、footer、header、hgroup、nav和section。html

圖 figure

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

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

figure元素能夠包含多個內容塊，但只容許有一個figcaption，且figcaption必須與其餘內容一塊兒包含在figure裏面，不能單獨出如今其餘位置，它必須是figure的第一個或最後一個元素。express

時間 time

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

<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或時間的文本內容。ruby

重要或強調文本 strong & em

strong表示重要的文本，em表示強調。根據須要，這兩個文本能夠單獨使用，或者一塊兒使用，甚至同一個標籤能夠嵌套使用。服務器

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

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

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命名，應避免使用anchor一、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等），單應避免這樣作，由於它們可能要花更長的時間加載。