詳解HTML5中的figure元素、details元素和mark元素！

TML5中，不僅增加了很多的表單元素，同時也增加和改良了可以應用在整個頁面中的元素。下面為大家介紹常見的幾個html5中頁面元素。

figure元素和figcaption元素

figure元素是元素組合，帶有可選標題。figure元素用來表示網頁上一塊獨立的內容，將它從刪除后不會對網頁上的其他的內容造成任何影響。figure元素所表示可以是圖片、代碼統計或者示例，也可以用于視頻插件、音頻插件。figure元素支持accesskey、class、contenteditable、contentmene、date-*、draggable等html5全局屬性，figure元素支持onafterprint、onbeforeprint、onbeforeunload、onerror、onload等事件屬性。

figcaption元素

figcaption元素表示figure元素的標題，它從屬于figure元素，在figure元素內部書寫，在figure元素的從屬元素的前面或者后面。建議一個figure元素放置一個figcaption元素，可以放多個其他的元素。

details元素

details元素可以代碼javascript部分功能（畫布局部區域展開或收縮的方法），不建議使用這個功能，因為部分瀏覽器不支持details元素。sunmary元素從屬于details元素，鼠標點擊sunmary元素中的內容文字時，details元素中的元素會展開或者收縮。如果details元素內沒有sunmary元素，瀏覽器會提供文字供點擊，瀏覽器為提供一個諸如上下箭頭之類的圖標，標示區域可以被搜索或者展開。details元素可以設置open屬性，打開details元素所表示的局部區域處于展開狀態。details元素內不僅可以放置文字，也可以放置表單、插件或對于一個統計圖提供的詳細數據表格。

mark元素

mark元素用于突出或者高亮顯示，對于用戶有重要參考作用的一段文字，使用mark元素通常是為了引起讀者注意，因為標出來的文字與用戶的當前操作有關，通常該元素對于當前用戶具有很好的幫助作用。mark元素對原文內容具有補充作用的元素，它應該用于一段原文作者不認為重要，但為了與原文內容具有補充作用的一個元素。在全文檢索某個關鍵詞顯示的結果經常用到mark元素，現在許多搜索引擎用其他方法實現了mark元素所要達到的功能。

關于html5新增的頁面元素還有很多今天就先聊到這，每天學習一個知識點，每日寄語-“是非天天有，不聽自然無。”

atplotlib三種代碼風格

import numpy as np
import os
import matplotlib.pyplot as plt
#notebook模式下
%matplotlib inline

pyplot

x=np.arange(0,10,1)
y=np.random.randn(len(x))
plt.plot(x,y) #繪制以x為橫坐標，y為縱坐標的折線圖
plt.title('pyplot')
plt.show()

pylab

#pylab不推薦使用
from pylab import *
x=arange(0,10,1)
y=randn(len(x))
plot(x,y) #繪制以x為橫坐標，y為縱坐標的折線圖
title('pylab')
show()

Object Oriented

在matplotlib中，整個圖像為一個Figure對象。在Figure對象中可以包含一個，或者多個Axes對象。每個Axes對象都是一個擁有自己坐標系統的繪圖區域。其邏輯關系如下：

整個圖像是fig對象。我們的繪圖中只有一個坐標系區域，也就是ax。此外還有以下對象。

Data: 數據區，包括數據點、描繪形狀
Axis: 坐標軸，包括 X 軸、 Y 軸及其標簽、刻度尺及其標簽
Title: 標題，數據圖的描述
Legend: 圖例，區分圖中包含的多種曲線或不同分類的數據
其他的還有圖形文本 (Text)、注解 (Annotate)等其他描述

Title為標題。Axis為坐標軸，Label為坐標軸標注。Tick為刻度線，Tick Label為刻度注釋。各個對象之間有下面的對象隸屬關系：

# 推薦使用
x=np.arange(0,10,1)
y=np.random.randn(len(x))
fig=plt.figure() #定義圖像的對象
ax=fig.add_subplot(111) #定義坐標系區域
ax.plot(x,y) #繪制以x為橫坐標，y為縱坐標的折線圖
ax.set_title('object oriented')
plt.show()

子圖

x = np.arange(1,100)

fig = plt.figure()
ax1 = fig.add_subplot(221) # 定義2*2個子圖（左一）
ax1.plot(x,x) # 繪制左一折線圖

ax2 = fig.add_subplot(222)
ax2.plot(x,-x) # 繪制右一折線圖（右一）

ax3 = fig.add_subplot(223)
ax3.plot(x,x*x) # 繪制左二折線圖（左二）

ax4 = fig.add_subplot(224)
ax4.plot(x,np.log(x)) # 繪制右二折線圖（右二）

plt.show()

x = np.arange(1,100)
plt.subplot(221) # 第一行的左圖
plt.plot(x,x)
plt.subplot(222) # 第一行的右圖
plt.plot(x,-x)
plt.subplot(212) # 第二整行
plt.plot(x,x*x)
plt.show()

#簡化寫法
fig,axes = plt.subplots(ncols=2,nrows=2) #定義子圖為兩行兩列
ax1,ax2,ax3,ax4 = axes.ravel() #按照先行再列的順序分配子圖

x = np.arange(1,100)
ax1.plot(x,x)
ax2.plot(x,-x)
ax3.plot(x,x*x)
ax4.plot(x,np.log(x))
plt.show()

多圖

fig1 = plt.figure() # plt派生一個圖對象
ax1 = fig1.add_subplot(111)
ax1.plot([1,2,3],[3,2,1])

fig2 = plt.figure() # plt派生另一個圖對象
ax2 = fig2.add_subplot(111)
ax2.plot([1,2,3],[1,2,3])

plt.show() # plt統一顯示

參考

matplotlib核心剖析（http://www.cnblogs.com/vamei/archive/2013/01/30/2879700.html#commentform）

dd oncopy

Add oncut

Add onpaste

Modify header/footer content model to allow <header> and <footer> descendants

Allow blank <option>

Change mousewheel event to wheel event

Make stepup/down algorithm reflect reality

Allow <figcaption> anywhere in <figure>

Add HTMLMediaElement.srcObject

Make <script>'s event and htmlFor IDL attributes

Clear autoplaying flag when autoplaying

Make navigator.javaEnabled()

Support width="0" except for <td>

Make toblob() callback non-nullable

Make meta refresh parsing reflect reality

在線咨詢

上一篇：CSS-中英文兩端對齊，英文不斷詞，自動換行
下一篇：版圖中Metal專題-線寬選擇

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商