本篇內(nèi)容主要講解“HTML5文檔結(jié)構(gòu)及相關(guān)元素有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“HTML5文檔結(jié)構(gòu)及相關(guān)元素有哪些”吧!

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供威信網(wǎng)站建設(shè)、威信做網(wǎng)站、威信網(wǎng)站設(shè)計、威信網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、威信企業(yè)網(wǎng)站模板建站服務(wù)，十余年威信做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

SVG文檔的元素基本可以分為以下幾類：

•動畫元素：animate,animateColor,animateMotion,animateTransform,set；

•解釋元素：desc,metadata,title；

•圖形元素：circle,ellipse,line,path,polygon,polyline,rect；

•結(jié)構(gòu)元素：defs,g,svg,symbol,use；

•漸變元素：linearGradient,radialGradient；

•其他元素：a,altGlyphDef,clipPath,color-profile,cursor,filter,font,font-face,foreignObject,image,marker,mask,pattern,script,style,switch,text,view等。

其中圖形元素，漸變元素，文本，圖像元素和組合等都介紹過了，下面介紹另外幾個與結(jié)構(gòu)相關(guān)的元素。

視窗-svg元素

可以在svg元素中以任何順序放置任何的其他元素，包括嵌套svg元素。

svg元素支持的屬性常用的也就是id,class,x,y,width,height,viewBox,preserveAspectRatio,以及fill和stroke的相關(guān)屬性。

svg元素支持的事件也是常用的onload,onmouseover,onmousemove,onmousedown,onmouseup,onclick,onfocusin,onfocusout,onresize,onscroll,onunload等。svg元素就不多說了，完整的屬性和事件列表參看后面的官方文檔。

解釋性元素-desc元素與title元素

每個容器元素(可以包含其他容器元素或者圖形元素的元素，例如：a,defs,glyph,g,marker,mask,missing-glyph,pattern,svg,switch和symbol)和圖形元素都可以包含desc和title元素，這兩個元素都是輔助性的元素，用于解釋相關(guān)情境；它們的內(nèi)容都是文本。當(dāng)SVG文檔被渲染的時候，這2個元素不會被渲染到圖形中。這個2個元素之間差別不是太大，title在有些實現(xiàn)中是作為提示信息出現(xiàn)的，所以通常title是放到父元素的第一個位置上。

典型的用法如下：

復(fù)制代碼 代碼如下:

Thisisabarchartwhichshows

companysalesbyregion.

通常，最外層的svg元素要配以title說明，這樣程序可讀性更好。

標(biāo)記-marker元素

標(biāo)記定義了附加到一個或者多個頂點(path,line,polyline或者polygon的頂點)上的圖形元素(箭頭和多點標(biāo)記)。箭頭可以通過把一個標(biāo)記附加到path,line或者polyline的起點或者終點上。多點標(biāo)記可以把一個標(biāo)記附加到path,line,polyline或者polygon的所有頂點上。

標(biāo)記是由marker元素定義的，然后在path,line,polyline或者polygon中設(shè)置相關(guān)的屬性(marker,marker-start,marker-mid,和marker-end)就可以了?？磦€例子：

復(fù)制代碼 代碼如下:

viewBox="0040002000"version="1.1"

xmlns="http://www.w3.org/2000/svg">

viewBox="001010"refX="0"refY="5"

markerUnits="strokeWidth"

markerWidth="4"markerHeight="3"

orient="auto">

Placinganarrowheadattheendofapath.

fill="none"stroke="black"stroke-width="100"

marker-end="url(#Triangle)"/>

下面詳細(xì)看看marker的相關(guān)知識：

1.marker是容器元素，可以存放任意順序的圖形元素，容器元素，動畫，漸變元素等。

2.marker元素可以創(chuàng)建新的視窗：設(shè)置viewBox的值。

3.marker比較重要的屬性：

markerUnits="strokeWidth|userSpaceOnUse"

這個屬性定義了屬性markerWidth,markerHeight和marker的內(nèi)容使用的坐標(biāo)系統(tǒng)。這個屬性有2個值可選，第一個值strokeWidth是默認(rèn)值，代表屬性markerWidth,markerHeight和marker的內(nèi)容使用的坐標(biāo)系統(tǒng)的單位等于引用該marker的圖形元素的stroke-width設(shè)置的值。

例如上面的例子中，marker元素的width是400,height是300，不過千萬不要混淆了，mark元素中的path使用的坐標(biāo)是viewBox設(shè)置的新的用戶坐標(biāo)系。

該屬性另外一個取值userSpaceOnUse，代表屬性markerWidth,markerHeight和marker的內(nèi)容使用引用該marker的圖形元素的坐標(biāo)系統(tǒng)。

refX,refY：定義了引用的點與marker對齊的位置坐標(biāo)。例如上面的例子中，引用的點是終點，要把它對齊到marker的(0,5)位置。注意refX,refY使用的是經(jīng)過viewBox變換過的最終用戶坐標(biāo)系。

markerWidth,markerHeight：marker視窗的寬和高，這個很好理解。

orient：定義了marker旋轉(zhuǎn)的角度?？梢灾付ㄒ粋€角度或者直接賦值auto。

auto代表x軸正方向按照下列規(guī)則旋轉(zhuǎn)：

a.如果marker所在的點只屬于一個path，則marker的x軸正向與path走向相同。參看上面例子。

b.如果marker所在的點屬于兩個不同的path，則marker的x軸正向與兩個path的夾角的角等分線走向一致。

4.圖形元素的marker屬性

圖形元素要引用一個marker則需要使用相關(guān)的屬性，主要是這3個：marker-start(把引用的marker放到起點),marker-mid(把引用的marker放到除起點和終點外的所有點),marker-end(把引用的marker放到終點)。這3個屬性的取值可能是none(代表不引用marker),marker的引用(引用某marker)，inherit(這個不用多說了)。

從上面的例子中也可以看到marker的用法。

腳本與樣式-script元素與style元素

實際上，基本上所有的屬性(對于所有元素，不僅是文本)都可以用CSS與一個元素關(guān)聯(lián)，并且所有CSS屬性都在SVG圖像中可用。可以直接用樣式屬性設(shè)計元素的樣式，或者引用樣式表設(shè)計元素的樣式。對XML文件來說不應(yīng)該解析樣式表(因為它們偶爾包含會引起問題的字符)，因此需要將它們置于XMLCDATA節(jié)。腳本也是同樣的道理，需要放到XMLCDATA節(jié)中。看下面的CSS例子：

復(fù)制代碼 代碼如下:

Text

.abbreviation{text-decoration:underline;}

]]>

Colorscanbespecified

bytheir

R

G

Bvalues

orbykeywordssuchas

lightsteelblue,

再看腳本的例子：

復(fù)制代碼 代碼如下:

Scriptingtheonclickevent

functionhideReveal(evt){

varimageTarget=evt.target;

vartheFill=imageTarget.getAttribute("fill");

if(theFill=='white')

imageTarget.setAttribute("fill","url(#notes)");

else

imageTarget.setAttribute("fill","white");

}

]]>

patternTransform="rotate(15)"

patternUnits="userSpaceOnUse">

stroke-width="3"stroke="black"/>

stroke-width="3"stroke="black"/>

fill="url(#notes)"stroke="black"stroke-width="5"/>

條件處理-switch元素

條件處理屬性是能控制所在元素渲染與否的屬性?；旧洗蠖鄶?shù)的元素(特別是圖形元素)都可以指定條件處理屬性。條件處理屬性有3個：requiredFeatures,requiredExtensions和systemLanguage。這些屬性就是一組測試，都允許指定一個值列表(前面兩個屬性是空格隔開的，語言這個屬性是使用逗號隔開的)，默認(rèn)值都為true。

SVG的switch元素提供了按指定條件渲染的能力。switch元素是一個容器元素，可以包含圖形元素，解釋性元素，動畫元素，a,foreignObject,g,image,svg,switch,text,use等元素。switch元素會按順序檢查直接子元素的條件處理屬性，然后渲染滿足自身條件的的第一個子元素，其他的子元素都會被忽略。這些屬性與display屬性一樣，只會影響直接使用這些屬性的元素的渲染，不會影響引用的元素(比如use引用的元素)。簡單的說，這3個屬性會影響a,altGlyph,foreignObject,textPath,tref,tspan,animate,animateColor,animateMotion,animateTransform,set等元素，不會影響defs,cursor,mask,clipPath,pattern等元素(這些元素那么不是可渲染的，要么就是引用別的元素)。

注意：子元素的display和visibility屬性值并不影響switch元素條件判斷的結(jié)果。

條件處理屬性的取值列表參看官方文檔，這里就看一個小例子：

復(fù)制代碼 代碼如下:

x="10"y="10"width="322"height="502"opacity="0.6"

fill="black"stroke="none"filter="url(#gblurshadow)"/>

fill="black"stroke="none"/>

這個例子的意思簡單的說就是：使用的瀏覽器支持filter特性，那么就繪制上面的矩形(帶filter屬性)，如果不支持filter特性，就繪制下面的矩形。

其實更多的時候，用的比較多的屬性是systemLanguage，就是文本的多語言處理能力。例如：

復(fù)制代碼 代碼如下:

de-HAHA

en-haha

到此，相信大家對“HTML5文檔結(jié)構(gòu)及相關(guān)元素有哪些”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！