怎么写网络小说,管理书籍排行榜

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

12個(gè)可能你沒(méi)見(jiàn)過(guò)，但非常實(shí)用的HTML標(biāo)簽

一、center

零一

效果如下：

鼓樓網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,鼓樓網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為鼓樓上千多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營(yíng)銷網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的鼓樓做網(wǎng)站的公司定做！

水平居中

原理也很簡(jiǎn)單，其實(shí)就是這個(gè)標(biāo)簽自帶了 text-align: center 的樣式

二、abbr

abbr 全稱是 abbreviations ，意思是縮寫。應(yīng)用場(chǎng)景也很簡(jiǎn)單，為一些文章中的縮寫增加注釋

以前在文章中對(duì)于縮寫的解釋經(jīng)常會(huì)這么做：

DAU（Daily Active User），日活躍用戶數(shù) ......

那我們用 abbr 標(biāo)簽?zāi)兀?/p>


    DAU

，日活躍用戶數(shù) ......

展示的效果如下：

這個(gè)標(biāo)簽就可以把全稱隱藏掉，弱化信息量，讓真正不知道該縮寫的用戶主動(dòng)去獲取縮寫的具體意思，這個(gè)在 markdown 里經(jīng)常會(huì)出現(xiàn)

三、mark

在 markdown 中也是很常用的，用于將包裹的文本高亮展示

高亮文本

效果如下：

如果全文統(tǒng)一高亮樣式，可以專門對(duì) mark 標(biāo)簽進(jìn)行樣式重置，這樣就不用對(duì)你用的每個(gè) div 加一個(gè) highlight 的類名了，又不語(yǔ)義化，又徒增文檔大小

四、sup、sub

^{和 _{分別表示上標(biāo)和下標(biāo)，在 markdown 中出現(xiàn)得也很頻繁，比如數(shù)學(xué)公式和引用}}

3^[2]

4₂

效果如下：

上標(biāo)和下標(biāo)的樣式原理也比較簡(jiǎn)單，主要就是利用了 vertical-align 的 top 和 sub 屬性值，然后將字號(hào)縮小，不過(guò)有現(xiàn)成的標(biāo)簽，干嘛不用呢？

五、figure

figure 是用于包裹其它標(biāo)簽的內(nèi)容的，然后再利用另一個(gè)標(biāo)簽 figcaption ，可以對(duì)包裹的內(nèi)容進(jìn)行一個(gè)文本描述，例如：


             alt="大象">
    這是一張大象的照片

效果如下：

那要是圖片掛了呢？

再友好點(diǎn)處理，我們把 img 標(biāo)簽的 alt 屬性去掉

漂亮，終于把我一直厭煩的圖裂icon給干掉了，樣式還巨好看

當(dāng)然不止能包裹 img 標(biāo)簽，其它任何都是可以的

嘿嘿，給大家在本文來(lái)個(gè)實(shí)戰(zhàn):point_down:，下面這個(gè)可以點(diǎn)擊，樣式也是利用了 figure 這個(gè)標(biāo)簽

我是figure標(biāo)簽產(chǎn)生的

六、progress

說(shuō)到這個(gè)標(biāo)簽就很有意思了，去年有段時(shí)間我做的業(yè)務(wù)里涉及到了進(jìn)度條，當(dāng)時(shí)是前同事做的，然后有一些性能問(wèn)題，我就在研究如何優(yōu)化，減少進(jìn)度條改變帶來(lái)的性能問(wèn)題，當(dāng)時(shí)還寫了一篇我優(yōu)化了進(jìn)度條，頁(yè)面性能竟提高了70%

雖然最后問(wèn)題時(shí)解決了，但是也有幸收到了張?chǎng)涡翊罄械脑u(píng)論，他告訴我 progress 這個(gè)標(biāo)簽就足夠了，既有語(yǔ)義化，又有進(jìn)度條的功能，性能還好，兼容性也很不錯(cuò)。后來(lái)經(jīng)過(guò)一番嘗試，還真是，當(dāng)時(shí)是我孤陋寡聞了，也安利給大家

瀏覽器自帶的樣式就已經(jīng)很好看了，效果如下：

業(yè)務(wù)中我們也就可以通過(guò)控制 value 屬性，來(lái)改變進(jìn)度條的進(jìn)度了

七、area

area 這個(gè)標(biāo)簽也非常有意思，它的作用是為圖片提供點(diǎn)擊熱區(qū)，可以自己規(guī)定一張圖的哪些區(qū)域可點(diǎn)擊，且點(diǎn)擊后跳轉(zhuǎn)的鏈接，也可以設(shè)置成點(diǎn)擊下載文件，我們來(lái)舉個(gè)例子：

area 一般要搭配 map 標(biāo)簽一起使用，每個(gè) area 標(biāo)簽表示一個(gè)熱區(qū)，例如上面代碼中，我們定義了兩個(gè)熱區(qū)，熱區(qū)形狀都為 rect （矩形），他們的熱區(qū)分別是：

坐標(biāo) (0,0) 到坐標(biāo) (100,50) 的一個(gè)矩形
坐標(biāo) (0,50) 坐標(biāo) (100,100) 的一個(gè)矩形

我們都知道，默認(rèn)的坐標(biāo)軸是這樣的：

因此，我們劃分的兩個(gè)熱區(qū)就是:

最后再來(lái)看一下我們的實(shí)際效果：

八、details

details 字面意思是 "詳情"，在markdown里也經(jīng)常用，用該標(biāo)簽包裹了的內(nèi)容默認(rèn)會(huì)被隱藏，只留下一個(gè)簡(jiǎn)述的文字，我們點(diǎn)擊以后才會(huì)展示詳細(xì)的內(nèi)容


  我是一段被隱藏的內(nèi)容

效果如下：

這還沒(méi)有加任何一行的 js 代碼，我們點(diǎn)擊后， details 標(biāo)簽上會(huì)多一個(gè) open 的屬性，被隱藏的內(nèi)容就展示出來(lái)了

默認(rèn)情況下，簡(jiǎn)要文字為 "詳情" ，想要修改這個(gè)文字，要搭配 summary 標(biāo)簽來(lái)使用


  點(diǎn)擊查看更多

  我是一段被隱藏的內(nèi)容

就搞定了

九、dialog

瀏覽器自帶彈窗方法 alert 、 confirm 、 prompt ，樣式固定且每個(gè)瀏覽器不同，同時(shí)還會(huì)阻塞頁(yè)面運(yùn)行，除了這個(gè)還提供了一個(gè) dialog 標(biāo)簽，它的使用方式有點(diǎn)類似于現(xiàn)在各大組件庫(kù)的 Modal 組件了，瀏覽器還為該標(biāo)簽提供了原生的 dom 方法： showModal 、 close ，可以直接控制彈窗的展示和隱藏

效果如下：

細(xì)心的你有沒(méi)有發(fā)現(xiàn)，這原生的彈框還自帶背景蒙層，點(diǎn)擊是關(guān)閉不掉的，但起碼它不會(huì)阻塞頁(yè)面

然后我們?cè)趶棿罢故緯r(shí)，也可以通過(guò) esc 鍵來(lái)關(guān)閉彈窗

十、datalist

datalist 是用于給輸入框提供可選值的一個(gè)列表標(biāo)簽，類似咱們常用的 Select 組件

我可以用其實(shí)現(xiàn)一個(gè) "輸入聯(lián)想" 的功能

 輸入C開(kāi)頭的英文單詞：

來(lái)試一試：

剛點(diǎn)擊時(shí)會(huì)把所有推薦的選項(xiàng)都列出來(lái)，然后根據(jù)后面輸入的內(nèi)容，會(huì)過(guò)濾掉不匹配了的選項(xiàng)，比如我輸入 cl ，會(huì)過(guò)濾掉不是 cl 開(kāi)頭的單詞，最后只剩下 Click 和 Close 了

最后我發(fā)現(xiàn)，他這個(gè)下拉框有點(diǎn)好看啊？為啥這原生的 input 框默認(rèn)樣式那么丑，啥時(shí)候改改

十一、fieldset

fieldset 標(biāo)簽是用于分組管理 form 表單內(nèi)的元素的，若 fieldset 設(shè)置了 disabled 屬性，則被其包裹的所有表單元素都會(huì)被禁用置灰，且不會(huì)隨著表單一起提交上去，是的就成了擺設(shè)

什么意思呢？看個(gè)例子：


  
    被禁用區(qū)域
    ID：
    
    郵箱：
    
  

  名字：

這里我們把 ID 和郵箱的表單包裹了起來(lái)，且設(shè)置了 disabled ，只開(kāi)放了一個(gè) name 的輸入控件，此時(shí)界面如下：

可以看到除了 name 輸入框，其它的兩個(gè)輸入框都被禁用了，此時(shí)點(diǎn)提交會(huì)是什么樣子呢？

嗯，只提交了 name 字段

十二、noscript

這個(gè)標(biāo)簽是在瀏覽器不支持或禁用了 javascript 時(shí)才展示的，大多用于對(duì) js 強(qiáng)依賴的應(yīng)用，比如現(xiàn)在大部分的 SPA 頁(yè)面，一旦不支持 javascript ，頁(yè)面基本上什么內(nèi)容都沒(méi)了，此時(shí)可以靠這個(gè)標(biāo)簽做友好提示

一般我們不需要特地去使用，大多都是在打包過(guò)程中自動(dòng)插入到 html 靜態(tài)文件里去了的，例如：

// init.js
const root = document.getElementById('root')
const button = document.createElement('button')
button.innerText = '點(diǎn)擊出彈窗'
root.appendChild(button)

未禁用 javascript 時(shí)，頁(yè)面時(shí)這樣的：

禁用了 javascript 時(shí)，是這樣的：

? ?

文章題目：12個(gè)可能你沒(méi)見(jiàn)過(guò)，但非常實(shí)用的HTML標(biāo)簽
本文地址：http://fisionsoft.com.cn/article/dhepico.html

新聞中心

一、center

二、abbr

三、mark

四、sup、sub

五、figure

六、progress

七、area

八、details

九、dialog

十、datalist

十一、fieldset

十二、noscript

其他資訊

一、center

二、abbr

四、sup、sub

六、progress

七、area

八、details

九、dialog

十、datalist

十一、fieldset