?HTML 5新的標(biāo)簽? ??
<article>標(biāo)簽定義外部的內(nèi)容嫩码。比如來自一個(gè)外部的新聞提供者的一篇新的文章洗搂，或者來自 blog 的文本缨称，或者是來自論壇的文本讯沈。亦或是來自其他外部源內(nèi)容郁岩。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??<aside>標(biāo)簽定義 article 以外的內(nèi)容。aside 的內(nèi)容應(yīng)該與 article 的內(nèi)容相關(guān)缺狠。? ? ? ? ? ? ? <audio>?標(biāo)簽定義聲音问慎，比如音樂或其他音頻流。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <canvas>?標(biāo)簽定義圖形挤茄，比如圖表和其他圖像如叼。這個(gè) HTML 元素是為了客戶端矢量圖形而設(shè)計(jì)的。它自己沒有行為穷劈，但卻把一個(gè)繪圖 API 展現(xiàn)給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上笼恰。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <command>?標(biāo)簽定義命令按鈕，比如單選按鈕歇终、復(fù)選框或按鈕? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <datalist>?標(biāo)簽定義可選數(shù)據(jù)的列表社证。與 input 元素配合使用，就可以制作出輸入值的下拉列表练湿。<details>?標(biāo)簽定義元素的細(xì)節(jié)猴仑，用戶可進(jìn)行查看，或通過點(diǎn)擊進(jìn)行隱藏肥哎。與 <legend> 一起使用辽俗，來制作 detail 的標(biāo)題。該標(biāo)題對(duì)用戶是可見的篡诽，當(dāng)在其上點(diǎn)擊時(shí)可打開或關(guān)閉 detail崖飘。 ? ? ? ? ? ? ? ? ? ? <embed>?標(biāo)簽定義嵌入的內(nèi)容，比如插件杈女。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<figcaption>標(biāo)簽定義 figure 元素的標(biāo)題朱浴〉趸”figcaption” 元素應(yīng)該被置于 “figure” 元素的第一個(gè)或最后一個(gè)子元素的位置。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<figure>?標(biāo)簽用于對(duì)元素進(jìn)行組合翰蠢。使用元素為元素組添加標(biāo)題? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<footer>?標(biāo)簽定義 section 或 document 的頁腳项乒。典型地，它會(huì)包含創(chuàng)作者的姓名梁沧、文檔的創(chuàng)作日期以及/或者聯(lián)系信息檀何。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<header>?標(biāo)簽定義 section 或 document 的頁眉。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<hgroup>?標(biāo)簽用于對(duì)網(wǎng)頁或區(qū)段（section）的標(biāo)題進(jìn)行組合廷支。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<keygen>?標(biāo)簽定義生成密鑰频鉴。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<mark>主要用來在視覺上向用戶呈現(xiàn)那些需要突出的文字。標(biāo)簽的一個(gè)比較典型的應(yīng)用就是在搜索結(jié)果中向用戶高亮顯示搜索關(guān)鍵詞恋拍。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<meter>?標(biāo)簽定義度量衡垛孔。僅用于已知最大和最小值的度量。必須定義度量的范圍施敢，既可以在元素的文本中周荐，也可以在 min/max 屬性中定義。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<nav>?標(biāo)簽定義導(dǎo)航鏈接的部分悯姊。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<output>?標(biāo)簽定義不同類型的輸出羡藐，比如腳本的輸出。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<progress>?標(biāo)簽運(yùn)行中的進(jìn)程悯许∑袜拢可以使用? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<rp>?標(biāo)簽在 ruby 注釋中使用，以定義不支持 ruby 元素的瀏覽器所顯示的內(nèi)容先壕。? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<rt>?標(biāo)簽定義字符（中文注音或字符）的解釋或發(fā)音瘩扼。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<ruby>?標(biāo)簽定義 ruby 注釋（中文注音或字符）。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<section>?標(biāo)簽定義文檔中的節(jié)（section垃僚、區(qū)段）集绰。比如章節(jié)、頁眉谆棺、頁腳或文檔中的其他部分栽燕。? ? ?<source>?標(biāo)簽為媒介元素（比如 <video> 和 <audio>）定義媒介資源。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<summary>?標(biāo)簽包含 details 元素的標(biāo)題改淑，”details” 元素用于描述有關(guān)文檔或文檔片段的詳細(xì)信息碍岔。”summary” 元素應(yīng)該是 “details” 元素的第一個(gè)子元素朵夏。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<time>?標(biāo)簽定義日期或時(shí)間蔼啦，或者兩者。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<video>?標(biāo)簽定義視頻仰猖，比如電影片段或其他視頻流捏肢。
tab切換
<!DOCTYPE html>
<html>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<head><meta charset="utf-8" />
<title>CSS3代碼實(shí)現(xiàn)的tab標(biāo)簽切換</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">標(biāo)簽1</a></li>
<li><a href="#div2">標(biāo)簽2</a></li>
<li><a href="#div3">標(biāo)簽3</a></li>
</ul>
? ? ? ? ? ? ? ? ? ? <div id="div1">歡迎來到鄭州奈籽，這是標(biāo)簽1的內(nèi)容，這里是商朝古都</div>
? ? ? ? ? ? ? ? ? <div id="div2">歡迎來到濮陽鸵赫，這是標(biāo)簽2的內(nèi)容衣屏，這里是顓頊遺都</div>
? ? ? ? ? ? ? ? ?<div id="div3">? 歡迎來到洛陽，這是標(biāo)簽3的內(nèi)容奉瘤，這里是九朝古都</div>
????????????</div>
????</body>
</html>
使一個(gè)元素在頁面中水平垂直居中
(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));
