HTML5學習補充

2022-06-25 06:24:15 字數 3779 閱讀 4437

目錄svg影象

meta包含name和content兩個屬性,可以使用name="description",這樣content的內容會在搜尋引擎中顯示(title也會)。

link可以給頁面新增圖示。

元素用於展示介紹性內容,通常包含一組介紹性的或是輔助導航的實用元素。它可能包含一些標題元素,但也可能包含其他元素,比如 logo、搜尋框、作者名稱,等等。

html元素表示最近乙個章節內容或者根節點(sectioning root )元素的頁尾。乙個頁尾通常包含該章節作者、版權資料或者與文件相關的鏈結等資訊。

html元素 表示其中的 html 提供了某個人或某個組織(等等)的聯絡資訊。

html元素表示頁面的一部分,其目的是在當前文件或其他文件中提供導航鏈結。導航部分的常見示例是選單,目錄和索引。

html元素表示乙個和其餘頁面內容幾乎無關的部分,被認為是獨立於該內容的一部分並且可以被單獨的拆分出來而不會使整體受影響。其通常表現為側邊欄或者標註框(call-out boxes)。

htmlelement代表文件章節所屬的多級別的目錄,它將多個h1至h6的子元素組裝到一起。

html元素 無聯絡的小節。 一般來說,乙個應該出現在文件大綱中。

html元素包含了一組元素,這些元素表示其它表單控制項可選值.

和select有點類似,但是datalist需要有乙個id,並且有乙個輸入框來引用,不同的瀏覽器顯示效果不一。

摺疊。html元素可建立乙個掛件,僅在被切換成展開狀態時,它才會顯示內含的資訊。元素可為該部件提供概要或者標籤。

在寫css時,可有展開狀態,即details[open]

這是摺疊標題

這是摺疊的內容1

這是摺疊的內容2

這是摺疊的內容3

html元素將外部內容嵌入文件中的指定位置。此內容由外部應用程式或其他互動式內容源(如瀏覽器外掛程式)提供。大多數瀏覽器已取消對外掛程式的支援。

html標籤表示計算或使用者操作的結果。這相當於js了。

html中的元素用來顯示一項任務的完成進度。雖然規範中沒有規定該元素具體如何顯示,瀏覽器開發商可以自己決定,但通常情況下,該元素都顯示為乙個進度條形式. 屬性max、value等。元素類似。

這是progress 70%

這是meter 05

的配置

說明文字

html標籤裡,設定以列為單位的樣式可以用,如下:

為**設定標題,顯示在**頂部。

html元素用於對表單中的控制元素進行分組(也包括 label 元素)。html元素用於表示其父元素的內容標題。

非常便利但容易被濫用。由於它們沒有語義值,會使 html **變得混亂。要小心使用,只有在沒有更好的語義方案時才選擇它,而且要盡可能少用, 否則文件的公升級和維護工作會非常困難。

px畫素(pixel)。相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。

px特點

ie無法調整那些使用px作為單位的字型大小;

國外的大部分**能夠調整的原因在於其使用了em或rem作為字型單位;

firefox能夠調整px和em,rem,但是96%以上的中國網民使用ie瀏覽器(或核心)。

em是相對長度單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定,則相對於瀏覽器的預設字型尺寸。

em特點

1. em的值並不是固定的;

2. em會繼承父級元素的字型大小。

注意:任意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。為了簡化font-size的換算,需要在css中的body選擇器中宣告font-size=62.5%,這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10,然後換上em作為單位就行了。

所以我們在寫css的時候,需要注意兩點:

1. body選擇器中宣告font-size=62.5%;

2. 將你的原來的px數值除以10,然後換上em作為單位;

3. 重新計算那些被放大的字型的em數值。避免字型大小的重複宣告。

也就是避免1.2 * 1.2= 1.44的現象。比如說你在#content中宣告了字型大小為1.2em,那麼在宣告p的字型大小時就只能是1em,而不是1.2em, 因為此em非彼em,它因繼承#content的字型高而變為了1em=12px。

rem是css3新增的乙個相對單位(root em,根em),這個單位引起了廣泛關注。這個單位與em有什麼區別呢?區別在於使用rem為元素設定字型大小時,仍然是相對大小,但相對的只是html根元素。這個單位可謂集相對大小和絕對大小的優點於一身,通過它既可以做到只修改根元素就成比例地調整所有字型大小,又可以避免字型大小逐層復合的連鎖反應。目前,除了ie8及更早版本外,所有瀏覽器均已支援rem。對於不支援它的瀏覽器,應對方法也很簡單,就是多寫乙個絕對單位的宣告。這些瀏覽器會忽略用rem設定的字型大小。下面就是乙個例子:

p px 與 rem 的選擇?

對於只需要適配少部分手機裝置,且解析度對頁面影響不大的,使用px即可 。

對於需要適配各種移動裝置,使用rem,例如只需要適配iphone和ipad等解析度差別比較挺大的裝置。

無論是在iphone6上面還是其他機型上面都是750rpx的螢幕寬度,拿iphone6來講,螢幕寬度為375px,把它分為750rpx後, 1rpx = 0.5px。

svg 是用於描述向量影象的xml語言。 它基本上是像html一樣的標記,只是你有許多不同的元素來定義要顯示在影象中的形狀,以及要應用於這些形狀的效果。

以下是乙個svg手工編碼的例項:

svg除了迄今為止所描述的以外還有其他優點:

那麼為什麼會有人想使用光柵圖形而不是svg? 其實 svg 確實有一些缺點:

由於上述原因,光柵圖形更適合**那樣複雜精密的影象。

HTML5學習之 HTML 5 拖放

拖放 drag 和 drop 是 html5 標準的組成部分。拖放是一種常見的特性,即抓取物件以後拖到另乙個位置。在 html5 中,拖放是標準的一部分,任何元素都能夠拖放。internet explorer 9 firefox opera 12 chrome 以及 safari 5 支援拖放。注釋...

HTML5學習筆記一 簡單學習HTML5

html 是用來描述網頁的一種語言。html5 是下一代 html 標準。html html 4.01的上乙個版本誕生於 1999 年。自從那以後,web 世界已經經歷了巨變。html5 仍處於完善之中。然而,大部分現代瀏覽器已經具備了某些 html5 支援。html5 中的一些有趣的新特性 看一下...

HTML5學習筆記一 簡單學習HTML5

html 是用來描述網頁的一種語言。html5 是下一代 html 標準。html html 4.01的上乙個版本誕生於 1999 年。自從那以後,web 世界已經經歷了巨變。html5 仍處於完善之中。然而,大部分現代瀏覽器已經具備了某些 html5 支援。html5 中的一些有趣的新特性 看一下...