...
...
Description of the Main Characters
...
資訊專欄INFORMATION COLUMN
摘要：重要或強調文本表示重要的文本，表示強調。標記代碼使用標記代碼文件名工程名等，要顯示多帶帶的一塊代碼，可以使用元素包住元素以維持其格式。不要將作為以逃避合適的語義標記內容和控制樣式的快捷方式。和元素旁注標記，通常表示生僻字的發音。
第三章 文本 段落 p
作者聯系信息 address毫不奇怪，p是最常用到的HTML元素之一
address并不是用于標記郵政地址，而是定義與HTML頁面或頁面一部分有關作者、相關人士或組織的聯系信息。
...
...
address是其最近的外層結構（article元素或body）的作者信息，且它只能包含作者的聯系信息，不能包含其他內容。此外，HTML5禁止在address里包含以下元素：h1~h6、article、address、aside、footer、header、hgroup、nav和section。
圖 figure之前主要用div，HTML5引入了figure。
Figure 3:2011 Revenue by Industry
figure元素可以包含多個內容塊，但只允許有一個figcaption，且figcaption必須與其他內容一起包含在figure里面，不能多帶帶出現在其他位置，它必須是figure的第一個或最后一個元素。
時間 timeHTML5新增了time元素來標記一個準確的時間或日期。
The train arrives at and on .
沒有datetime屬性時，必須使用合法的格式（YYYY-MM-DDThh:mm:ss）表示日期和時間。前三個例子在time元素里都包含了時間和日期的文本(datetime和文本最好反映同樣的時間)，這些文字會在屏幕上顯示，但最后一個例子不會，當前瀏覽器不能顯示屬性中的值。
包含pubdate屬性的time表示其最近的祖先article元素的發布日期，若沒有article，則表示整個頁面的發布日期。既可以用，也可以用指定pubdate。不過，一旦包含它，就必須提供datetime或時間的文本內容。
重要或強調文本 strong & emstrong表示重要的文本，em表示強調。根據需要，這兩個文本可以多帶帶使用，或者一起使用，甚至同一個標簽可以嵌套使用。
不能用b代替strong，也不能用i代替em。因為b和i沒有任何語義，接下來看一下HEML5中對b和i的新定義。
b元素表示出于實用的目的提醒讀者注意的一塊文字，不表達額外的重要性，不傳達額外的重要性，也不表達其他的語態和語氣，用于如文檔摘要的關鍵詞、評論里的產品名、基于文本的交互式軟件中指示操作的文字、文章導語等。
i元素表示一塊不同于其他文字的文字，具有不同的語態或語氣，或其他不同與常規之處，用于如分類名稱、技術術語、外語里的慣用語、思想、西方文字中的船舶名稱等。
也可以說，b和i是其他元素（如strong、em、cite等）都不適用時的最后選擇。
引用或參考citecite指明對某內容源的引用或參考，默認以斜體呈現。
引述文本 blockquote & qbolckquote和q用以標記引述的文本。引述塊級文本使用blockquote，引述行內文本使用q。
...[被引述的文本]...
She tried again,this time in French:
Avez-vous lu le livre High Tide in Tucson de Kingsolver? C"est insprirational.
應盡量避免將文本直接放在blockquote開始和結束標記之間。應該將文本放在blockquote中p或其他語義上合適的元素。
可以對blockquote和q使用可選的cite屬性，但是瀏覽器通常不會將cite的URL呈現給用戶，這個屬性本身不是特別有用。建議在內容中使用鏈接（a元素）重復這個URL，讓訪問者可以查看來源。
blockquote是HTML5的區塊根，這意味著它可以有h1~h6的標題（及其自身的大綱），但文檔大綱不會包含這些標題。
q元素引用的內容不能跨越不同的段落。
不要僅僅因為需要在字詞兩端加引號就使用q。
blockquote和q可以嵌套，嵌套的q元素應該自動加上正確的引用，由于內外引號在不同語言中處理的方式是不一樣的，因此需要根據需要在q元素中加上lang屬性。
突出顯示文本markmark最常見的使用場合是在搜索結果頁面，對搜索詞進行突出顯示。
對于某段引述，如果作者在原來的格式中沒有對其進行突出顯示，可以用mark對它進行突出顯示。
...15 minutes...
引起對代碼片段的注意。
.greenText {
color: green;
}
不要僅僅因為要給文字加上背景顏色或其他視覺上的考慮而使用mark。如果只是要給一塊文字添加樣式而沒有合適的語義化元素，就可以使用span元素，并用CSS添加樣式。
解釋縮寫詞abbrThat"s nothing compared to what MLB (Major League Baseball) did.
The NFL promised ...
當縮寫詞有title屬性時，Firefox和Opera會添加虛線下劃線引起注意。當鼠標移至縮寫詞上，該元素title屬性的內容就會顯示在一個提示框里。
定義術語dfnThe contestant was asked to spell "pleonasm".She requested the definition and was told that pleonasm means "a redundant word or expression".
盡管pleonasm出現了兩次，但只對第二個進行標記，因為那時才定義術語。
dfn在適當的情況下可以包住其他的短語元素。例如：Jr.。
上標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元素以維持其格式。
The
showPhoto()function displays the full-size photo of the thumbnail in ourcarousel list.This CSS shorthand example applies a margin to all sides of paragraphs:
p {margin: 20px; }. Take a look atbase.cssto see more example.
如果代碼中需要顯示<或>，應分別使用<和>。
.greenText {
color: green;
}
預格式化的文本可以保持文本固有的換行和空格，它是計算機阿代碼示例的理想元素，不過也可以應用于文本（比如，ASCII藝術）。
不要將pre作為以逃避合適的語義標記內容和CSS控制樣式的快捷方式。不要為了保留原來的格式，將一篇在字處理軟件中寫好的文章直接粘貼在pre里，應該使用相關的文本元素標記內容，編寫CSS控制頁面的布局。
指定細則smallsmall表示細則一類的次要注釋，通常包括免責聲明、注意事項、法律限制、版權信息等，有時還用來署名，或用來滿足許可要求。它只適用于短語，因此不要用它來標記長的法律聲明。
Order now to receive free shipping.(Some restrictions may apply.)
一定要在small符合內容予以的情況下使用該元素，而不是為了減小字號。
換行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創建動畫。
在頁面中插入圖像注意，“/”前有一個空格。可以使用float等CSS屬性改變對齊方式或讓文字環繞圖像。
提供替代文本可以為圖像添加一段描述性文本，當圖像處于某種原因不顯示的時候，就將這段文字顯示出來。同時屏幕閱讀器可以朗讀這些文字。
如果圖像有標題，或周圍的文本可以準確地描述圖像，也可以設置alt=""。
指定圖像尺寸指定圖像尺寸，瀏覽器就會預留空間，在圖像加載的同時讓文本顯示在周圍，保持布局的穩定。
width和height屬性不一定要反映圖像的實際尺寸。瀏覽器會根據HTML（或CSS）中指定的尺寸，對圖像進行放大或縮小。這種方式雖然快捷但并不優雅，更好的方法是使用圖像編輯器修改圖像尺寸。
為網站添加圖標出現在地址欄、標簽頁和書簽上的小圖標稱為favicon（favorite icon，收藏夾圖標的簡稱）。
Farm Training Podcasts
...
第五章 鏈接
創建指向另一個頁面的鏈接
Cats in the Pioneer Valley...
href指hypertext reference（超文本引用）。
當訪問者指向鏈接（在大多數瀏覽器中，默認顯示為帶下劃線的藍色字體）時，目標URL會顯示在狀態欄中。
HTML5的塊級鏈接
HTML5允許在鏈接內包含除交互式的內容（如其他鏈接、audio、video、表單元素、iframe等）外的其他任何類型的元素或元素組（如段落、列表、整篇文章、區塊等）。
但是也要避免在鏈接中放入過多的內容（如一整篇文章），制作精巧是塊級鏈接是值得推薦的。
不要讓鏈接的標簽過長，應避免使用“點擊此處”作為標簽。
錨anchor如果需要激活一個鏈接跳至網頁的特定區域，可以創建一個錨，并在連接中引用該錨。
...Table of contents
Introduction
This is the intro...
... Description of the Main Characters
...
為錨的id命名，應避免使用anchor1、item5這樣的id，id中不能使用空格，應該使用短橫線分隔不同的單詞。
如果錨位于另一個文檔，就使用引用該區域。（URL和#之間沒有空格。）如果位于另一臺服務器上的頁面，就使用。
創建其他類型的鏈接其實我們可以創建指向任何URL的鏈接，對于指向萬維網上的任何文件（包括圖像、ZIP文件、程序、PDF、Excel電子表格等）的鏈接，使用href="http://www.site.com/path/file.ext"。
You can create links directly to a photo.
For example, here are cookie and woody again,except this time they are linked to other pages.
You can link derictly to a video file.
Although you can make a link to someone"s mail address with...
盡管可以鏈接到PDF和其他非HTML文檔（Word、Excel等），單應避免這樣做，因為它們可能要花更長的時間加載。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49983.html
摘要：例如現在的入門學習手記系列。收到粉絲留言和打賞的喜悅。安裝上一篇入門學習手記一，主要是介紹了的核心概念，是整個學習過程的基礎知識。新生成的類似如下入門學習手記因為生成的內容過多，我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公眾號：前端修煉之路，歡迎關注。 最近開始想要維護一個個人的公眾...
摘要：入門學習筆記整理一搭建環境入門學習筆記整理二簡介與語法入門學習筆記整理三組件入門學習筆記整理四事件入門學習筆記整理五入門學習筆記整理六組件通信入門學習筆記整理七生命周期入門學習筆記整理八入門學習筆記整理九路由React 入門學習筆記整理（一）——搭建環境 React 入門學習筆記整理（二）—— JSX簡介與語法 React 入門學習筆記整理（三）—— 組件 React 入門學習筆記整理（...
摘要：刪除指定的屬性，這個方法就不可以使用匿名函數，傳遞和均無效。遍歷對象數組索引，鍵，屬性名屬性值，值相當于遍歷原生對象數組時，為元素。在使用使用時，可以使用傳入匿名函數的方法，實現由默認到幾個之間的切換。 轉自個人博客 基礎 DOM 和 和 CSS 一. 設置元素及內容 我們通過前面所學習的各種選擇器、過濾器來得到我們想要操作的元素。這個時候，我們就可以對這些元素進行 DOM 的操作。...
摘要：筆記說明重學前端是程劭非前手機淘寶前端負責人在極客時間開的一個專欄，每天分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入的專欄學習原文有的語音，如有侵權請聯系我，郵箱。 筆記說明 重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以...
閱讀 3351·2021-10-13 09:40
閱讀 2586·2021-10-08 10:17
閱讀 3989·2021-09-28 09:45
閱讀 922·2021-09-28 09:35
閱讀 1805·2019-08-30 10:51
閱讀 2898·2019-08-26 12:11
閱讀 1645·2019-08-26 10:41
閱讀 3091·2019-08-23 17:10
