模塊9“關(guān)于我們”模塊設(shè)計(jì)本模塊主要介紹HTML5多媒體標(biāo)簽與字體庫的使用方法，并通過這些標(biāo)簽進(jìn)行更為豐富的多媒體網(wǎng)頁設(shè)計(jì)。“關(guān)于我們”模塊的布局與樣式設(shè)計(jì)任務(wù)1任務(wù)概述本任務(wù)通過講解<audio>、<video>、<canvas>、<svg>等標(biāo)簽的使用，幫助讀者掌握HTML5多媒體網(wǎng)頁設(shè)計(jì)，進(jìn)行“關(guān)于我們”模塊設(shè)計(jì)。任務(wù)1“關(guān)于我們”模塊的布局與樣式設(shè)計(jì)1.1HTML5多媒體標(biāo)簽HTML5對(duì)音視頻文件的格式和播放條件等都有所限制，因此要想在網(wǎng)頁中嵌入音視頻文件，首先需要選擇符合要求的音視頻格式并掌握其正確的使用方法。本任務(wù)將對(duì)HTML5音視頻的使用方法進(jìn)行具體介紹。<audio>標(biāo)簽用于在文檔中嵌入音頻內(nèi)容，目前支持ogg、mp3、wav三種格式。例如：

<audio>標(biāo)簽<audiosrc="crow.mp3"controls="controls"></audio><audio>標(biāo)簽的頁面效果其中，src屬性用于指定音頻源地址；controls屬性用于控制音頻控件是否可見，如果未添加該屬性，則音頻控件默認(rèn)是不可見的。不同瀏覽器對(duì)音頻格式的支持有所不同，而<audio>標(biāo)簽可以包含多個(gè)音頻資源（這些音頻資源可以使用<source>標(biāo)簽來描述），瀏覽器將會(huì)選擇最合適的一個(gè)來使用。例如：<audiocontrols="controls"><sourcesrc="crow.ogg"type="audio/ogg"><sourcesrc="crow.mp3"type="audio/mpeg"><sourcesrc="crow.wav"type="audio/wav"></audio><video>標(biāo)簽<video>標(biāo)簽用于在文檔中嵌入視頻內(nèi)容，目前支持ogg、mpeg4、webm三種格式。例如：<videosrc="video.mp4"controls="controls"></video><video>標(biāo)簽的頁面效果Chrome瀏覽器和絕大部分移動(dòng)端瀏覽器不支持<video>標(biāo)簽內(nèi)視頻的有聲自動(dòng)播放，但是允許靜音自動(dòng)播放。使用方法如下：<videosrc="video.mp4"autoplay="autoplay"muted="muted"></video>1.2SVG圖形的引用SVG是一種圖形文件格式，意為可縮放矢量圖形，它使用XML格式定義圖像。SVG圖形與JPEG和GIF圖形相比，其尺寸更小，且可壓縮性更強(qiáng)，在放大或改變尺寸的情況下，其圖形質(zhì)量都不會(huì)有所損失。SVG也有可以被JavaScript訪問的文檔對(duì)象模型和事件，允許開發(fā)者創(chuàng)建豐富的動(dòng)畫和可交互的圖像。0域名SVG圖形的引用可以通過標(biāo)簽將SVG文件嵌入HTML5文檔，也可以將SVG代碼直接嵌入HTML頁面。（1）使用<embed>標(biāo)簽<embedsrc="dog.svg"type="image/svg+xml"/>

優(yōu)勢(shì)：所有主要瀏覽器都支持，并允許使用SVG中定義的腳本。

缺點(diǎn)：不推薦在HTML4和XHTML中使用（但在HTML5中允許使用）。（2）使用<object>標(biāo)簽<objectdata="dog.svg"type="image/svg+xml"></object>

優(yōu)勢(shì)：所有主要瀏覽器都支持，并支持HTML4、XHTML和HTML5標(biāo)準(zhǔn)。

缺點(diǎn)：不允許使用SVG中定義的腳本。（3）使用<iframe>標(biāo)簽<imgsrc="dog.svg"alt="狗狗">優(yōu)勢(shì)：所有主要瀏覽器都支持，并支持HTML4、XHTML和HTML5標(biāo)準(zhǔn)。

缺點(diǎn)：不允許使用SVG中定義的腳本。（4）使用<img>標(biāo)簽<iframesrc="dog.svg"frameborder="0"></iframe>優(yōu)勢(shì)：SVG圖像可以像普通圖像一樣使用，直接通過<img>標(biāo)簽或background-image屬性引用，方便易用。缺點(diǎn)：大多數(shù)瀏覽器不支持加載SVG中引用的其他文件（如圖像、字體等），且禁止使用SVG內(nèi)部定義的腳本。（5）直接在HTML頁面中嵌入SVG代碼<svgxmlns="/2000/svg"><circlecx="100"cy="50"r="40"stroke="black"stroke-width="2"fill="red"/></svg>HTTP與HTTPSSVG語法和基礎(chǔ)屬性SVG代碼的書寫需要遵循一定的語法規(guī)則，例如：<svgwidth="100px"height="100px"xmlns="/2000/svg"version="1.1"viewBox="50505050"><circlecx="50"cy="50"r="50"style="fill:#7fff00"/></svg>SVG圖形無法正常顯示viewBox屬性效果SVG有兩個(gè)版本，1.0和1.1，1.1在1.0基礎(chǔ)上增加了模塊化內(nèi)容。SVG2.0類似CSS3，不再使用version屬性。viewBox屬性包含四個(gè)數(shù)字，代表左上角橫縱坐標(biāo)和視口寬高。SVG屬性通常在<svg>標(biāo)簽內(nèi)，包括width和height屬性，定義寬高。未指定寬高時(shí)，默認(rèn)為100%或300px×150px。xmlns屬性綁定命名空間，必須正確使用，否則圖形無法顯示。SVG圖形繪制SVG有一些預(yù)定義的形狀標(biāo)簽，可被開發(fā)者使用和操作，具體包括：

l矩形標(biāo)簽<rect>。l圓形標(biāo)簽<circle>。l

橢圓形標(biāo)簽<ellipse>。l線標(biāo)簽<line>。l

折線標(biāo)簽<polyline>。l多邊形標(biāo)簽<polygon>。l路徑標(biāo)簽<path>。通過<rect>標(biāo)簽繪制矩形<svgwidth="250px"height="200px"xmlns="/2000/svg"version="1.1"><rectx="50"y="20"width="150"height="150"rx="20"ry="20"

style="fill:red;stroke:orange;stroke-width:5;opacity:0.5"/></svg>（1）<rect>標(biāo)簽。<rect>標(biāo)簽可用于創(chuàng)建矩形及矩形的變種，例如：HTMLSVG圖形繪制（2）<circle>標(biāo)簽。<circle>標(biāo)簽可用于繪制圓形，例如：<svgxmlns="/2000/svg"version="1.1"><circlecx="50"cy="50"r="40"stroke="skyblue"

stroke-width="5"fill="orange"/></svg>通過<circle>標(biāo)簽繪制圓形（3）<ellipse>標(biāo)簽。<ellipse>標(biāo)簽可用于創(chuàng)建一個(gè)橢圓形，橢圓形與圓形很相似，不同之處在于橢圓形有不同的水平半徑和豎直半徑，而圓形的半徑是相同的，例如：<svgxmlns="/2000/svg"version="1.1"><ellipsecx="120"cy="60"rx="100"ry="50"style="fill:yellow;stroke:purple;stroke-width:3"/></svg>通過<ellipse>標(biāo)簽繪制橢圓形Web標(biāo)準(zhǔn)SVG圖形繪制（4）<line>標(biāo)簽。<line>標(biāo)簽可用于創(chuàng)建一條直線，例如：<svgxmlns="/2000/svg"version="1.1"width="300px"height="300x"><linex1="50"y1="10"x2="200"y2="10"style="stroke:#fa9668;stroke-width:3px;"/><linex1="50"y1="30"x2="200"y2="70"style="stroke:#64f590;stroke-width:3px;"/><linex1="50"y1="50"x2="200"y2="150"style="stroke:#c17af0;stroke-width:3px;"/><linex1="50"y1="70"x2="50"y2="200"style="stroke:#f07abf;stroke-width:3px;"/></svg>通過<line>標(biāo)簽繪制直線（5）<polygon>標(biāo)簽。<polygon>標(biāo)簽可用于創(chuàng)建含有不少于3條邊的圖形。多邊形是由直線組成的，其形狀是封閉的（即所有的線條必須連接起來）。例如：<svgxmlns="/2000/svg"version="1.1"width="300px"height="300x"><polygonpoints="150,10200,150150,220100,150"style="fill:pink;stroke:red;stroke-width:4"/></svg>通過<polygon>標(biāo)簽繪制多邊形SVG圖形繪制（6）<polyline>標(biāo)簽。<polyline>標(biāo)簽可用于創(chuàng)建一系列直線來連接多個(gè)點(diǎn)。典型的<polyline>標(biāo)簽用來創(chuàng)建一個(gè)開放的形狀，最后一點(diǎn)不與第一點(diǎn)相連，例如：<svgxmlns="/2000/svg"version="1.1"><polylinepoints="0,4040,4040,8080,8080,120120,120120,160"style="fill:white;stroke:black;stroke-width:4"/></svg>通過<polyline>標(biāo)簽繪制多條直線（7）<text>標(biāo)簽。<text>標(biāo)簽用于定義文本。例如：<svgxmlns="/2000/svg"version="1.1"

xmlns:xlink="/1999/xlink"><axlink:href="/"target="_blank"><textx="20"y="20"fill="red">SVG文本</text></a></svg><text>標(biāo)簽定義文本SVG圖形繪制（8）<image>標(biāo)簽。<image>標(biāo)簽可用于插入圖形文件，例如：<svgwidth="150px"height="150px"xmlns="/2000/svg"version="1.1"

xmlns:xlink="/1999/xlink"><imagexlink:href="rain.png"width="100px"height="100px"/></svg>通過<image>標(biāo)簽插入圖形（9）<path>標(biāo)簽。<path>標(biāo)簽用于繪制一段路徑。例如，通過<path>標(biāo)簽繪制一個(gè)箭頭形狀的路徑：<svgxmlns="/2000/svg"version="1.1"><pathd="M18,3L46,3L46,40L61,40L32,68L3,40L18,40Z"fill="skyblue"

stroke="orange"stroke-width="3"/></svg>通過<path>標(biāo)簽繪制路徑SVG圖形繪制（10）<use>標(biāo)簽。<use>標(biāo)簽可用于復(fù)制一個(gè)圖形，例如：<svgxmlns="/2000/svg"version="1.1"><rectid="myrect"x="10"y="10"width="50"height="50"fill="#feac5e"/><usehref="#myrect"x="70"y="0"fill-opacity="50%"stroke="skyblue"/></svg>通過<use>標(biāo)簽復(fù)制圖形（11）<g>標(biāo)簽。<g>標(biāo)簽可用于將多個(gè)形狀合成一個(gè)組（group），以便復(fù)用。例如：<svgxmlns="/2000/svg"version="1.1"><gid="myrect"><textx="60"y="40">矩形</text><rectx="50"y="50"width="50"height="50"fill="#feac5e"/></g>

<usehref="#myrect"x="70"y="0"fill-opacity="50%"stroke="skyblue"/></svg>復(fù)制<g>標(biāo)簽組合1.2.23D變形（12）<defs>標(biāo)簽。<defs>標(biāo)簽用于自定義形狀，但該形狀不會(huì)顯示在頁面上，僅供其他標(biāo)簽引用。例如：<svgxmlns="/2000/svg"version="1.1"><defs><circleid="mycircle"cx="50"cy="50"r="50"fill="pink"/></defs><usehref="#mycircle"x="50"y="50"stroke="skyblue"stroke-width="4"/></svg>通過<defs>標(biāo)簽自定義的形狀<defs>標(biāo)簽中的內(nèi)容并未在頁面上顯示，但通過<use>標(biāo)簽可對(duì)其中的內(nèi)容進(jìn)行引用復(fù)制，如下圖所示：Chrome瀏覽器SVG圖形變換SVG圖形可以通過transform屬性定義一系列應(yīng)用于元素及其子元素的變換規(guī)則集合。transform屬性包括translate、scale、rotate、skewX、skewY幾種變換方式。（1）translate。translate(x,y)變換函數(shù)通過x向量和y向量移動(dòng)元素。如果y向量沒有被提供，那么其默認(rèn)為0。例如：<svgxmlns="/2000/svg">

<!--原形狀--><rectx="5"y="5"width="40"height="40"fill="red"/>

<!--水平平移--><rectx="5"y="5"width="40"height="40"fill="yellow"transform="translate(50)"/>

<!--豎直平移--><rectx="5"y="5"width="40"height="40"fill="blue"transform="translate(050)"/>

<!--水平、豎直平移--><rectx="5"y="5"width="40"height="40"fill="green"transform="translate(50,50)"/></svg>通過translate()變換函數(shù)平移元素（2）scale。scale(x,y)變換函數(shù)通過x和y指定一個(gè)等比例放大或縮小操作。如果y沒有被提供，那么它將與x的值相等。例如：<svgviewBox="-50-50200200"width="250px"height="250px"xmlns="/2000/svg">

<!--等比例放大4倍--><circlecx="0"cy="0"r="10"fill="red"transform="scale(4)"/>

<!--豎直放大4倍--><circlecx="0"cy="0"r="10"fill="yellow"transform="scale(1,4)"/>

<!--水平放大4倍--><circlecx="0"cy="0"r="10"fill="pink"transform="scale(4,1)"/>

<!--原始大小--><circlecx="0"cy="0"r="10"fill="black"/></svg>通過scale()變換函數(shù)縮放元素SVG圖形變換（3）rotate。rotate(angle,x,y)變換函數(shù)通過一個(gè)給定角度（angle），圍繞一個(gè)指定的點(diǎn)(x,y)進(jìn)行旋轉(zhuǎn)變換。如果x和y沒有被提供，則默認(rèn)點(diǎn)為當(dāng)前元素坐標(biāo)系原點(diǎn)，否則以(x,y)為原點(diǎn)進(jìn)行旋轉(zhuǎn)變換。需要注意的是，angle是無單位的值。例如：<svgviewBox="-15-5100100"xmlns="/2000/svg"><rectX="0"Y="0"width="10"height="10"fill="orange"/><rectX="0"Y="0"width="10"height="10"fill="yellow"transform="rotate(100)"/><rectX="0"Y="0"width="10"height="10"fill="skyblue"transform="rotate(100,10,10)"/></svg>通過rotate()變換函數(shù)旋轉(zhuǎn)元素（4）skewX。skewX(angle)變換函數(shù)指定了沿X軸傾斜一定角度（angle）的變換方式。例如：<svgviewBox="-5-5100100"xmlns="/2000/svg"><rectx="-3"y="-3"width="6"height="6"fill="gray"/><rectx="-3"y="-3"width="6"height="6"fill="red"transform="skewX(30)"/></svg>通過skewX()變換函數(shù)水平傾斜元素SVG動(dòng)畫（1）<animate>標(biāo)簽。<animate>標(biāo)簽用于定義一個(gè)元素的某個(gè)屬性在指定持續(xù)時(shí)間里的變換效果。<animate>標(biāo)簽需要放置于變換元素的內(nèi)部。例如：<svgviewBox="00100100"xmlns="/2000/svg"><rectwidth="10"height="10"fill="yellowgreen"><animateattributeName="rx"values="0;5;0"dur="5s"repeatCount="indefinite"/></rect></svg>過渡變化效果（2）<animateTransform>標(biāo)簽。<animate>標(biāo)簽對(duì)transform屬性不起作用，如果需要通過transform屬性產(chǎn)生動(dòng)畫，可以使用<animateTransform>標(biāo)簽。例如：<svgxmlns="/2000/svg"version="1.1"width="300px"height="300px"><polygonpoints="150,10160,80150,110140,80"style="fill:#4bc0c8"><animateTransformattributeName="transform"type="rotate"dur="10s"from="0150110"to="360150110"repeatCount="indefinite"/></polygon></svg>多邊形圍繞點(diǎn)(150,110)進(jìn)行旋轉(zhuǎn)1.3Canvas<svgviewBox="00100100"xmlns="/2000/svg"><rectwidth="10"height="10"fill="yellowgreen"><animateattributeName="rx"values="0;5;0"dur="5s"repeatCount="indefinite"/></rect></svg>Canvas表示畫布，同樣可用于繪制圖形與設(shè)計(jì)動(dòng)畫，與SVG圖形不同的是，Canvas繪制的是位圖，而SVG圖形為矢量圖形。Canvas主要通過JavaScript進(jìn)行圖形繪制，由于渲染性能高，所繪制的圖形經(jīng)常被用于網(wǎng)頁游戲、數(shù)據(jù)展示等場(chǎng)景。<canvas>標(biāo)簽和<img>標(biāo)簽很像，唯一的不同就是，它并沒有src和alt屬性。實(shí)際上，<canvas>標(biāo)簽只有width和height屬性，且這些屬性都是可選的，當(dāng)沒有設(shè)置寬度和高度時(shí)，<canvas>會(huì)初始化寬度為300px、高度為150px。因?yàn)镃anvas主要是通過JavaScript進(jìn)行圖形繪制的，所以此處僅對(duì)Canvas繪圖進(jìn)行初步了解。SVG動(dòng)畫1使用畫布使用<canvas>標(biāo)簽進(jìn)行圖形繪制時(shí)，首先需要準(zhǔn)備好一張畫布和一支“畫筆”。例如：<body><canvasid="myCanvas"width="250"height="250"></canvas></body>

<script>

//獲取畫布letmyCanvas=document.querySelector("#myCanvas");

//準(zhǔn)備“畫筆”letctx=myCanvas.getContext("2d");</script>HTML代碼創(chuàng)建了一個(gè)寬度和高度為250px的畫布，ID為“myCanvas”。JavaScript代碼獲取了該畫布，并創(chuàng)建了用于2D圖形繪制的“畫筆”ctx。2．繪制線條在Canvas圖形的繪制中，可以通過moveTo()方法指定圖形繪制的起點(diǎn)坐標(biāo)，通過lineTo()方法指定下一個(gè)點(diǎn)的坐標(biāo)位置，最后通過stroke()方法進(jìn)行線條描邊。例如，通過以下代碼繪制線條例如：<body><canvasid="myCanvas"width="250"height="250"></canvas></body><script>letmyCanvas=document.querySelector("#myCanvas");letctx=myCanvas.getContext('2d');

//繪制線條ctx.moveTo(50,50)//指定起點(diǎn)坐標(biāo)ctx.lineTo(100,100)//下一個(gè)點(diǎn)的坐標(biāo)位置ctx.lineTo(150,50)ctx.lineTo(200,100)ctx.lineWidth="3"http://線條寬度ctx.strokeStyle="skyblue";//線條顏色ctx.stroke();//進(jìn)行線條描邊繪制線條SVG動(dòng)畫3．繪制形狀不同于SVG圖形，Canvas只支持繪制矩形和路徑。所有其他類型的圖形都是通過一條或者多條路徑組合而成的。（1）繪制矩形。<body><canvasid="myCanvas"width="250"height="250"></canvas></body><script>letmyCanvas=document.querySelector("#myCanvas");letctx=myCanvas.getContext('2d');ctx.fillStyle="green";ctx.fillRect(10,10,200,100);</script>（2）繪制多邊形<body><canvasid="myCanvas"width="250"height="250"></canvas></body><script>letmyCanvas=document.querySelector("#myCanvas");letctx=myCanvas.getContext('2d');ctx.beginPath();//開始繪制路徑ctx.moveTo(100,0);//指定起點(diǎn)坐標(biāo)ctx.lineTo(200,100);//下一個(gè)點(diǎn)的坐標(biāo)位置ctx.lineTo(0,100);ctx.fillStyle="red";//指定填充顏色ctx.fill();//填充多邊形繪制三角形（3）繪制弧形<body><canvasid="myCanvas"width="250"height="250"></canvas></body><script>letmyCanvas=document.querySelector("#myCanvas");letctx=myCanvas.getContext('2d');ctx.beginPath();//開始繪制路徑ctx.arc(75,75,50,0,1*Math.PI);//2*Math.PI為一個(gè)完整的圓形ctx.lineTo(125,75)ctx.fillStyle="orange"ctx.fill()繪制半圓形任務(wù)1“關(guān)于我們”模塊的布局與樣式設(shè)計(jì)2.1任務(wù)實(shí)施根據(jù)下圖完成“關(guān)于我們”模塊的布局與樣式設(shè)計(jì)。關(guān)于我們”模塊效果2.1任務(wù)實(shí)施（1）在index.html文件的<main>標(biāo)簽中布局“關(guān)于我們”模塊，左側(cè)為新聞欄，右側(cè)為招聘欄，并在index.css文件中設(shè)置對(duì)應(yīng)的樣式。<!--主體內(nèi)容區(qū)域--><main>

<!--“關(guān)于我們”模塊-->