?HTML 5新的標簽? ??
<article>標簽定義外部的內(nèi)容。比如來自一個外部的新聞提供者的一篇新的文章，或者來自 blog 的文本，或者是來自論壇的文本。亦或是來自其他外部源內(nèi)容。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??<aside>標簽定義 article 以外的內(nèi)容。aside 的內(nèi)容應(yīng)該與 article 的內(nèi)容相關(guān)。? ? ? ? ? ? ? <audio>?標簽定義聲音，比如音樂或其他音頻流。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <canvas>?標簽定義圖形，比如圖表和其他圖像。這個 HTML 元素是為了客戶端矢量圖形而設(shè)計的。它自己沒有行為，但卻把一個繪圖 API 展現(xiàn)給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <command>?標簽定義命令按鈕，比如單選按鈕、復(fù)選框或按鈕? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <datalist>?標簽定義可選數(shù)據(jù)的列表。與 input 元素配合使用，就可以制作出輸入值的下拉列表。<details>?標簽定義元素的細節(jié)，用戶可進行查看，或通過點擊進行隱藏。與 <legend> 一起使用，來制作 detail 的標題。該標題對用戶是可見的，當在其上點擊時可打開或關(guān)閉 detail。 ? ? ? ? ? ? ? ? ? ? <embed>?標簽定義嵌入的內(nèi)容，比如插件。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<figcaption>標簽定義 figure 元素的標題?！眆igcaption” 元素應(yīng)該被置于 “figure” 元素的第一個或最后一個子元素的位置。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<figure>?標簽用于對元素進行組合。使用元素為元素組添加標題? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<footer>?標簽定義 section 或 document 的頁腳。典型地，它會包含創(chuàng)作者的姓名、文檔的創(chuàng)作日期以及/或者聯(lián)系信息。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<header>?標簽定義 section 或 document 的頁眉。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<hgroup>?標簽用于對網(wǎng)頁或區(qū)段（section）的標題進行組合。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<keygen>?標簽定義生成密鑰。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<mark>主要用來在視覺上向用戶呈現(xiàn)那些需要突出的文字。標簽的一個比較典型的應(yīng)用就是在搜索結(jié)果中向用戶高亮顯示搜索關(guān)鍵詞。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<meter>?標簽定義度量衡。僅用于已知最大和最小值的度量。必須定義度量的范圍，既可以在元素的文本中，也可以在 min/max 屬性中定義。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<nav>?標簽定義導(dǎo)航鏈接的部分。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<output>?標簽定義不同類型的輸出，比如腳本的輸出。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<progress>?標簽運行中的進程?？梢允褂? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<rp>?標簽在 ruby 注釋中使用，以定義不支持 ruby 元素的瀏覽器所顯示的內(nèi)容。? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<rt>?標簽定義字符（中文注音或字符）的解釋或發(fā)音。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<ruby>?標簽定義 ruby 注釋（中文注音或字符）。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<section>?標簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分。? ? ?<source>?標簽為媒介元素（比如 <video> 和 <audio>）定義媒介資源。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<summary>?標簽包含 details 元素的標題，”details” 元素用于描述有關(guān)文檔或文檔片段的詳細信息。”summary” 元素應(yīng)該是 “details” 元素的第一個子元素。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<time>?標簽定義日期或時間，或者兩者。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<video>?標簽定義視頻，比如電影片段或其他視頻流。
tab切換
<!DOCTYPE html>
<html>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<head><meta charset="utf-8" />
<title>CSS3代碼實現(xiàn)的tab標簽切換</title>
<style>
*{padding:0px;margin:0px;}#tab{margin:20px;20px;position:relative;}
ul{list-style:none;}ul li{float:left;}
ul li a{background:#f90;color:#fff;font-weight:500;height:30px;line-height:30px;border-bottom:0px;
? ? ? ? ? ? display:block;text-decoration:none;padding:0px 10px;margin-right:1px;}
ul li a:hover{background:blue;} #div1{clear:left;}
#tab>div{border:1px solid blue;width:170px; height:100px;text-indent:2em;
padding:5px 5px;position:absolute;top:31px;background:#fff;}
#div1:target,#div2:target,#div3:target{z-index:2;}
</style>
</head>
<body>
<div id="tab">
<ul>
<li><a href="#div1">標簽1</a></li>
<li><a href="#div2">標簽2</a></li>
<li><a href="#div3">標簽3</a></li>
</ul>
? ? ? ? ? ? ? ? ? ? <div id="div1">歡迎來到鄭州，這是標簽1的內(nèi)容，這里是商朝古都</div>
? ? ? ? ? ? ? ? ? <div id="div2">歡迎來到濮陽，這是標簽2的內(nèi)容，這里是顓頊遺都</div>
? ? ? ? ? ? ? ? ?<div id="div3">? 歡迎來到洛陽，這是標簽3的內(nèi)容，這里是九朝古都</div>
????????????</div>
????</body>
</html>
使一個元素在頁面中水平垂直居中
(1)position:absolute/fixed;top:50%;left:50%;margin-left:-(width/2);margin-top:-(height/2);(2)position:absolute/fixed;top:0;left:0;right:0;bottom:0;margin:auto;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? (3)display:flex;justify-content:center;align-items:center;如果寫的父元素為body，加上html,body{height:100%}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 已知寬高? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? (4)position:absolute/fixed;top:50%;left:50%;transform:translate(-(width/2),-(height/2));
