一、HTML確實給了我們很多好東西,包括audio標簽。
二、我們改改,src屬性就不要了,加個controls,它是控制的意思,可以顯示音頻控制。
三、點了,可是沒有歌呀,加歌進去吧,隨便下載一首歌。
四、你會發現播放和暫??梢渣c擊,還有進度條的拖動,都是可以用的,可如果你不喜歡那個按鈕,又怎么自己做按鈕來控制呢。
五、改成兩個圓形按鈕。
六、補點東西吧,audio標簽也應該有個id,然后再加兩個按鈕的點擊事件。
七、完成最后一步,讓按鈕可以控制audio。
一個網頁新聞中,出現最多的就是文字和圖片,圖片并茂能夠生動的表達新聞主題。創建一個圖片的簡單混排,具體步驟如下所示:
本實例要求在網頁的最上方顯示出標題,標題下方是正文,在正文部分顯示圖片。其實例效果圖如下所示:
(1)打開DW,編寫HTML代碼基本框架,具體如下:
(2)在<body>標簽中插入網頁標題設計代碼,具體如下:
<h1 style="text-align: center;text-shadow: 0.1em 2px 6px blue;font-size: 18px"折紙技術:綿羊</h1>
(3)在<body>標簽中插入圖片設計代碼,具體如下:
<img src="zz/88.png" style="text-align: center;width: 600px;float: left;border: #000000 solid 2px">
(4)在<body>標簽中完善文字段落內容設計代碼,具體如下:
<p style="text-indent: 8mm;line-height: 7mm">綿羊是常見的飼養動物。身體豐滿,體毛綿密。頭短。雄獸有螺旋狀的大角,雌獸沒有角或僅有細小的角。毛色為白色。綿羊現在世界各地均有飼養。性情膽怯。秋季、冬季發情。雌獸的懷孕期為145—152天。每胎產1—5仔。壽命為10—15年。綿羊耐渴,可以為人類提供肉和毛皮等產品。下面就讓我們一起來折一個可愛的綿羊吧。</p>
<p style="text-indent: 8mm;line-height: 7mm">綿羊體軀豐滿,被毛綿密,頭短。公綿羊多有螺旋狀大角具有威懾性,母綿羊無角或角細小。</p>
<img src="zz/88.png" style="text-align: center;width: 600px;float: left;border: #000000 solid 2px">
<p style="text-indent: 8mm;line-height: 7mm">常見的飼養動物。身體豐滿,體毛綿密。頭短。雄羊有螺旋狀的大角,非常有威嚴但其實是起好看的作用,雌羊沒有角或僅有細小的角。毛色為白色。綿羊在約11000年前在西南亞地區被最早馴化。綿羊現在世界各地均有飼養,性情既膽怯,又溫順,易馴化。目前高度馴化的飼養品種多為常年發情,地方放牧品種為季節發情,多在秋季、冬季發情。雌羊的懷孕期為145~152天。每胎產1~5仔。壽命為10~15年。綿羊耐渴,可以為人類提供肉和毛皮等產品。綿羊肉質鮮嫩,非常好吃,中國飼養綿羊最多的地方是內蒙古、青海等地。知名度最高的當然是科技產品克隆綿羊——多莉。<br>
一般認為綿羊可能起源于4種不同的野生種,即:棲息于地中海沿岸的摩弗侖羊(O.musimon)、分布于亞洲中部和西南部的東方羊(O.orientalis)、盤羊(O.ammon)和蠻羊(O.orientalis vignei)。野生綿羊馴化為家畜始于約11000年以前的新石器時代,發源地在中亞細亞,以后逐漸向世界各地擴展,經大量出土羊骨的碳測定認為,中國養羊歷史在8000年前。野生羊經過長時期的選擇(動物)和淘汰,其外形和特性有了許多變化;并由于各地自然條件和經濟需要的差異而出現了不同的品種類型。18世紀以來,品種的發展尤為迅速
</p>
(5)保存編輯好的網頁文件。
接上文
上面我們做到了這一步
將標題居中
需要新學一個屬性:
align 屬性規定內容的水平對齊方式。
align 屬性有3個值:
當 align="center" 的時候,就是居中對齊內容;當 align="left" 的時候,就是左對齊內容;當 align="right" 的時候,就是右對齊內容。
在 <h1>、<p> 標簽中添加 align 屬性,如下:
<h1 align="center">俄媒盤點三大性價較高的度假勝地</h2>
<p align="center"><font size="2" color="#545454">2020-08-20 00:02:38 來源:環球時報</font></p>
標題居中對齊了
總結:align的值:center:居中;left:左對齊;right:右對齊。
在標題下面有一條橫線,我們可以用 <hr/> 這個單標簽實現:
<hr> 標簽用于在 HTML 頁面中創建一條水平線。
再加入 <hr/> 后可以看到,只需要一個 <hr/> 即可在瀏覽器中顯示一條水平線,這就是單標簽和雙標簽區別,它只需要一個。不僅如此,我們還可以定義這條橫線的長短、粗細、顏色。
可以試試看在 <hr/> 里面加入以下內容:
<hr size="2" width=200px color="red"/>
中間紅色的線就是加屬性后的<hr/>
size:規定 hr 元素的厚度;width:規定 hr 元素的寬度(px是像素的意思,例如100px是100像素); color:規定 hr 元素呈現的顏色。
最后一步,把文字寫進<p>標簽里面
<p>世界上有許多美麗的國家,去那里旅游無需辦理繁瑣的證件手續,而且還可以欣賞到不一樣的風景。 俄羅斯“健康生活網”與旅游門戶網站“摩登門”為大家推薦一些經濟實惠、性價比比較高的旅游國度,讓大家好好暢游一番。
</p>
<p>1.亞美尼亞</p>
<p>2.黑山共和國</p>
<p>3.摩洛哥</p>
細心的你可能會發現,為什么成品圖3個國家名字的行高間隔很小,而上面的行高卻間隔很大
這時我們需要認識一個新標簽<br/>
<br/> 可以插入一個換行符,它與<p>標簽區別是:<p>標簽在換行時,還會在相鄰的段落之間插入一些垂直的行間距(行高)。這個標簽和上面的<hr/>同樣屬于單標簽。
所以我們稍微修改一下,并加入顏色:
<p><font color="#f00">1.亞美尼亞<br/>2.黑山共和國<br/>3.摩洛哥</font></p>
完全一樣了
以下是完整html代碼:
你學到了<h1> - <h6>標簽、<font>標簽、<!--注釋-->、align 屬性、<hr/>標簽、<br/>標簽。
你已經能自己做出一個簡單的網頁了。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。