您現在的位置是:電腦技術吧?>? 編程技術 ??>??什么是元素,元素??>??正文詳情

什么是元素,元素

休鴻熙2019-11-07 18:12:04 人圍觀
簡介元素B教程詳細信息摘要:HTML5詳細信息標簽困難:主要支持瀏覽器:Chrome 12 版本我最喜歡的新HTML5標簽是details元素,它剛剛集成到Chrome的E元素

教程細節 概要:HTML5的Details標簽 難度:初級 支持的瀏覽器:Chrome 12以上的版本我最喜歡的HTML5新標簽是details元素,它剛剛被集成到Chrome最新的12版中。

我將會在今天的快速入門中展示如何來使用它。

________________________________________Details標簽可以用來做什么?

它本質上允許我們在點擊標簽時顯示和隱藏內容。

你一定相當熟悉這種效果,但是直到現在,它總是用Javascript實現的。

想象頭部之后有一個箭頭,當你點擊它時,下面的附加信息將會呈現。

再次點擊箭頭內容消失。

FAQ頁面中經常使用這個功能。

Details元素允許我們完全拋開Javascript。

或者說,它將做到這樣,因為瀏覽器的支持還乏善可陳。

________________________________________一個示例現在讓我們深入和學習如何使用這個新標簽。

我們從創建一個新的details元素開始。

details/details然后,我們需要放入summary的內容。

detailssummary Who Goes to College? /summaryp Your mom. /p/details好,讓我們開始一些更實用的例子。

我想要使用details元素顯示不同的Nettuts 文章。

我們首先為每一篇文章創建一個標記。

detailssummaryDig Into Dojo/summaryimg src=http://d2o0t5hpnwv4c1.cloudfront.net/1086_dojo/dojo.jpg alt=Dojo /divh3 Dig into Dojo: DOM Basics /h3pMaybe you saw that tweet: jQueryis a gateway drug. It leads to full-on JavaScript usage. Part of that addiction, I contend, is learning other JavaScript frameworks. And thats what this four-part series on the incredible Dojo Toolkit is all about: taking you to the next level of your JavaScript addiction./p/div/details下一步,我們將為它加上簡單的樣式。

body { font-family: sans-serif; }details {overflow: hidden;background: #e3e3e3;margin-bottom: 10px;display: block;}details summary {cursor: pointer;padding: 10px;}details div {float: left;width: 65%;}details div h3 { margin-top: 0; }details img {float: left;width: 200px;padding: 0 30px 10px 10px;}注意,為了方便,我展示的是內容顯示的時候。

但是當頁面加載時,你將只會看到summary文本。

如果你想要默認顯示這樣的狀態,需要把openattribute添加到details元素里:。

________________________________________結語這是一個相當簡單的效果,但是展示出有這樣一個通用的內建特性是非常棒的事情。

在我們確定所有的瀏覽器里都可以使用details元素之前,你可以使用polyfill來提供支持。

最后要注意的一件事:在這篇文章寫作時,還不支持使用鍵盤控制內容的切換。

這可能是一個未來潛在的問題。

版權聲明:本文由 休鴻熙 整理編輯。

原標題:元素有多少種,元素周期表介紹

轉載注明出處:http://www.dn9ww09s.icu/program/11496.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦主要看什么配置,買電腦主要看哪些配置

    電腦主要看什么配置,買電腦主要看哪些配置 相關圖片如何查看電腦配置參數隨著網絡時代的到來,計算機的普及程度越來越高面對電腦問題,仍然有很多問題其他學校的很多人都會問,買電腦時需要看什么樣的配置,什么樣的品牌又好又...

  • 文字放置,文字放置類

    文字放置,文字放置類 相關圖片放置文字掛機游戲CSS不依賴于容器的底部來對齊文本布局參數,一個好的方法也更好即使用position屬性來解決問題看下面的代碼,利用位置的相對定位和絕對定位功能,很容易實現DI純文...

  • as ssd benchmark,ssdbenchmark怎么看

    as ssd benchmark,ssdbenchmark怎么看 相關圖片ssd固態硬盤測試軟件現在很多學生已經更換了固態硬盤,當然,他們也想測試它的性能比原來的機械硬盤快多少然后作為SSD基準,幫助用戶檢測SSD的連續讀取as ssd下載...

  • 3動畫,補間動畫

    3動畫,補間動畫 相關圖片c4d動畫HTML的第一個例子中的HTML標記非常簡單我們在頁面上創建一個UL列表標記,并在其中創建幾個div來控制其整體進度動畫代碼如下:123456789101213傳統補間動畫...

  • 路由器怎么連接筆記本,筆記本連接路由器

    路由器怎么連接筆記本,筆記本連接路由器 相關圖片無線網隱藏了筆記本怎么連接越來越多的人使用電腦有些人有不止一臺電腦如果他們想同時訪問互聯網,他們需要使用路由器與有線路由器相比,無線路由器更受歡迎但如何將筆記本電...

  • 什么地漫談,漫談

    什么地漫談,漫談 相關圖片心漫談我們對HTML5有很高的期望希望它能繼承web應用開發簡單、部署升級方便、跨平臺、本地應用等功能強大、操作簡單友好的優點我還談到了為什么HTML5如此流行,為什漫談式...

  • 電腦cpu散熱硅脂,cpu上的硅脂

    電腦cpu散熱硅脂,cpu上的硅脂 相關圖片cpu硅脂在臺式機的CPU上涂抹硅脂是非常重要的它關系到計算機的綜合性能和CPU的使用壽命有必要知道計算機CPU的重要性,即核心處理器有個朋友不知道怎么涂硅脂,CPU直接cpu散熱硅脂排...

  • win10電腦插耳機沒聲音,電腦耳機沒聲音怎么設置 windows

    win10電腦插耳機沒聲音,電腦耳機沒聲音怎么設置 windows 相關圖片win10插了耳機還外放計算機遇到各種問題是正常的耳機沒有聲音也是一個常見的問題這通常是一個駕駛問題或設置問題很容易解決有此問題的朋友可以看到以下解決方案據信,經常玩電腦...

  • 怎么換行,換行

    怎么換行,換行 相關圖片同個換行常見的文本段落換行情況表明,在實際應用中,我們經常會遇到這樣一個問題:一個段落的文本具有清晰的寬度,需要自動換行案例分析(如下圖所示):以上兩個圖不使用任...

  • 電腦沒有hdmi接口怎么辦,電腦有hdmi接口嗎

    電腦沒有hdmi接口怎么辦,電腦有hdmi接口嗎 相關圖片hdmi接口HDMI的英文全稱是“高清多媒體”,中文是高清多媒體接口HDMI接口可提供高達5Gbps的數據傳輸帶寬,可傳輸未壓縮音頻信號和高分辨率視頻信號hdmi接口有幾種...

熱評文章

  • 電腦顯示器調亮度,電腦顯示屏怎么調亮度調節

    電腦顯示器調亮度,電腦顯示屏怎么調亮度調節 相關圖片臺式電腦屏幕亮度怎么調電腦基本上是人手,很多人每天都會用電腦瀏覽網頁、上網、看視頻、面對電腦屏幕,眼睛有點受不了,對吧屏幕亮度是個大問題,那么如何調整電腦屏幕亮度...

  • 電腦酷狗怎么傳歌,酷狗傳歌到電腦

    電腦酷狗怎么傳歌,酷狗傳歌到電腦 相關圖片酷狗傳歌在哪里隨著科技時代的飛速發展,現在很多高科技越來越方便,那么你還在擔心電腦版的酷狗對著手機唱歌嗎現在它不像以前那么乏味了,也不需要數據線這對小白來說是個空...

  • ie瀏覽器假死,瀏覽器卡死

    ie瀏覽器假死,瀏覽器卡死 相關圖片瀏覽器看視頻卡死在web開發中,經常會遇到瀏覽器對事件沒有響應而進入偽死狀態的事件,甚至會彈出腳本運行時間過長的提示框如果發生這種情況,則意味著腳本失控瀏覽器中至少有...

  • 守望先鋒2配置,守望先鋒2配置要求

    守望先鋒2配置,守望先鋒2配置要求 相關圖片守望先鋒對電腦配置要求高嗎《守望先鋒》是暴雪制作的第一款團隊射擊游戲,目前在中國正式上市這個游戲是基于不久的將來的地球來自世界各地的超級英雄將用他們獨特的能力在戰...

  • 基礎換填應比基礎寬度超出多少,換填寬度為超出底面寬度的

    基礎換填應比基礎寬度超出多少,換填寬度為超出底面寬度的 相關圖片平板貨車寬度能超出多少當我們定義divwidth時,它可能包含很多內容,這些內容將超過它我們將大力支持div或tables,這將影響網頁的美觀介紹了一種利用CSS強制隱藏冗余內容和自床的寬度...

  • 局域網共享查看工具,一鍵局域網共享工具

    局域網共享查看工具,一鍵局域網共享工具 相關圖片局域網文件夾共享如果我們想訪問計算機局域網中的共享文件夾,我們需要計算機在同一個網絡中并建立一個局域網過去,計算機常常建立局域網,訪問計算機中的共享文件夾,但這也...

  • 電腦藍屏修復按哪個鍵,電腦突然死機怎么辦

    電腦藍屏修復按哪個鍵,電腦突然死機怎么辦 相關圖片電腦老是藍屏怎么修復如今,計算機已經走進千家萬戶,給人們的生活帶來了便利然而,電子產品不可避免地存在一些問題在使用計算機時,用戶將遇到計算機崩潰,這將影響計算機用...

  • 代碼示例文字英文,楔形文字

    代碼示例文字英文,楔形文字 相關圖片文ai聊天對話文本效果很簡單只需將以下代碼復制到您自己的頁面并按如下方式運行:DOCTYPE HTML public-//W3C//DTD XHTML 1.0 transitio楔形文字是哪個國家的文字...

  • gtx顯卡,gtx960顯卡怎么樣

    gtx顯卡,gtx960顯卡怎么樣 相關圖片顯卡買rtx還是gtx視頻卡是計算機中非常重要的硬件設備其主要功能是實現電信號與圖像信號的相互轉換如果您需要玩游戲或工作,您可能想添加一個更好的視頻卡,如果您有高要求的軟...

  • 模擬流體,免費流體模擬

    模擬流體,免費流體模擬 相關圖片流體模擬漢化版第1頁繪制橢圓把現實世界當中的物體模擬到計算機當中,一些簡單的物理實驗、碰撞旋轉等等難度還是不算很大,難度較大的應當算流體模擬。本文將在Canvas當中模擬出...

關注微信

变脸官网查询