學習完了HTML5的新標簽,然后結合之前的案例做了第一個小案例。自我感覺良好。下面我來展示一下圖片
這是我瀏覽其他網站的時候以為發現的新功能可以運行代碼,這是運行之后截得圖片。自我感覺照片還是蠻高大上的。如果以后博客園也有運行代碼的功能就好了。
下面是我的代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>電影影評網</title> </head> <body> <header > <h2 align="center">電影影評網</h2> <p align="center"> <img width="80%" src="img/header.jpg" /> </p> </header> <nav> <p width="80%" align="center"> <img width="15%" height="200" src="img/01.jpg" /> <img width="15%" height="200" src="img/02.jpg" /> <img width="15%" height="200" src="img/03.jpg" /> <img width="15%" height="200" src="img/05.jpg" /> <img width="15%" height="200" src="img/06.jpg" /> </p> </nav> <article align="center"> <details > <summary >動作電影</summary> <ul align="left" contenteditable="true"> <li> <figcaption>《美人魚》</figcaption> <p >《美人魚》是由<mark>周星馳</mark>執導,由江玉儀監制的喜劇愛情片, <mark>鄧超、羅志祥、張雨綺、林允</mark>等領銜出演[1].該片講述 了富豪劉軒和為了拯救同族前往刺殺他的美人魚珊珊墜入 愛河,譜寫了一段人魚愛情童話的故事。</p> <img src="img/movie01.jpg" /> </li> <li> 大眾評分:<meter value="65" min="0" max="100" low="60" high="80" title="65分" optimum="100">65</meter> </li> <li> 媒體評分:<meter value="80" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter> </li> <li> 網站評分:<meter value="70" min="0" max="100" low="60" high="80" title="70分" optimum="100">70</meter> </li> </ul> <hr size="3" color="#ccc" /> <ul align="left" contenteditable="true"> <li> <figcaption>《陸垚知馬俐》</figcaption> <p>《陸垚知馬俐》是由<mark>文章</mark>,<mark>陳可辛</mark>監制, <mark>包貝爾、宋佳、朱亞文、焦俊艷</mark>主演的愛情喜劇電影。 影片講述了陸垚在上大學時重逢幼兒園同學馬俐, 雖然彼此心存好感,但由於陸垚有嚴重的“表白障礙症”, 只能眼巴巴看着自己的女神馬俐與別人談戀愛。 而自此之后很多年,陸垚只能以朋友的名義愛着馬俐, 也與她開始了一段“友情不甘、戀人不敢”的長跑。</p> <img src="img/movie02.jpg" /> </li> <li> 大眾評分:<meter value="75" min="0" max="100" low="60" high="80" title="75分" optimum="100">75</meter> </li> <li> 媒體評分:<meter value="90" min="0" max="100" low="60" high="80" title="90分" optimum="100">90</meter> </li> <li> 網站評分:<meter value="70" min="0" max="100" low="60" high="80" title="70分" optimum="100">70</meter> </li> </ul> </details> </article> </body> </html>