HTML基礎標籤、路徑、圖片、影音播放器

# HTML基礎標籤、路徑、圖片、影音播放器 ###### tags: `HTML` ## 標籤 * b是單純粗體，strong是強調文字內容是重要的 ``` 粗體字 <b> 與 <strong> ``` * p是段落，br是換行 ``` 文字段落;換行 <p> 與 <br> ``` * 段落格式 ```htmlmixed= <pre></pre> //預先格式化 <blockquote></blockquote> //左右縮排 <hr> //水平線 ``` * 特殊符號 ``` | < | < | | --- | -------- | | > | > | | & | & | ``` * 編號與項目符號(項目符號使用CSS設定較好) ```htmlmixed= <ol type="A" start="6"> <li>特點商城我</li> <li>激動平台軟件一是力量</li> <li>分享不得已被農村移動</li> </ol> ``` * 區塊元素與行內元素 <div> <div>是區塊元素，會自動換行並分成段落 </div> <span> <span>是行內元素，不會換行 </span> --- * 文字格式標籤練習 ```htmlmixed= <p> <b>床前明月光(b)</b>，<br> <strong>疑似地上霜(strong)</strong><br> <i>舉頭望明月(i)</i>，<br> <em>低頭思故鄉(em)</em><br> </p> <p> <mark>黃河之水天上來(mark)</mark><br> <small>奔流到海不復回(small)</small><br> </p> <p> <s>君不見，高堂明鏡悲白髮，朝如青絲暮成雪。(s)</s><br> </p> <p> <del>人生得意須盡歡(del)</del><br> <u>莫使金樽空對月(u)</u><br> </p> <p> <ins>天生我材必有用(ins)</ins><br> <sub>千金散盡還復來(sub)</sub><br> </p> <p> <sup>會須一飲三百杯(sup)</sup> </p> ``` 實際顯示樣式: ![](https://i.imgur.com/PsrNqMR.png) --- ### 語意標籤 (不影響版面，但程式碼會較好維護與閱讀) ![](https://i.imgur.com/OA99xZF.png) ![](https://i.imgur.com/DEv4Kph.png) 練習:應用語意標籤排版(nav、header、article、section、aside) ```htmlmixed= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <header> <h1>小動物們</h1> <nav> <ul> <li>住沙漠的</li> <li>住家裡的</li> <li>常往外跑的</li> <li>裝可愛的</li> </ul> </nav> </header> <article> <section> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, fugit, aspernatur. Dicta accusantium impedit in dolor, suscipit! Dolorum nostrum at, nihil quae reiciendis sunt vel sapiente, eaque dolor saepe aut.</p> </section> <aside> <h2>毛茸茸的</h2> <ol> <li>花豹</li> <li>狗狗</li> <li>兔寶</li> <li>天豬</li> </ol> </aside> <section> <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti expedita nulla, et eveniet, unde incidunt iusto, magni ex beatae odio sapiente recusandae ipsa libero iste officiis voluptatem quos. Dignissimos, rem. </blockquote> </section> </article> </body> </html> ``` --- ## 絕對路徑、相對路徑 ```typescript= 絕對路徑 <img src="http://網址/膽案名稱"> 相對路徑 <img src="檔案名稱"> 上層資料夾 <img src="../檔案名稱"> 下層資料夾 <img src="資料夾名稱/檔案名稱"> target <a href="#" target="_連結開啟方式">顯示文字或圖片</a> _blank ←在新分頁開啟下面這四個現在很少用了(現在網頁很少寫框架) _parent //若有框架在上一層開啟 _self //開啟在目前視窗或框架中，是預設值 _top //重新整理框架視窗名稱 //開啟在指定名稱視窗中 ``` --- ## 頁內超連結在頁面任一位置加入id識別碼後，使用超連結語法跳至該區塊舉例:在H2的位置設定id=apple，指定到apple的位置 ```htmlmixed= <h2 id="apple"></h2> <a href="#apple">前往apple</a> ``` **小技巧:可以使用#top讓整個網頁捲到最上方(因為id不存在頁面中就會捲到網頁最上方)** --- ## 圖片 img * figure標示圖片及說明文字，figcaption包含說明文字區域 <figure> <img href="圖片檔案位置" alt="看不到圖片的說明文字" title="圖片名稱" width="寬度" height="高度"> <figcaption>圖片區塊的說明文字</figcaption> </figure> --- ## 音樂播放器如果沒打controls就不會顯示播放器，會自動播放(注意type屬性一定要寫) * audio的屬性 ![](https://i.imgur.com/KtQQIqV.png) * source的屬性 ![](https://i.imgur.com/MFWFmlf.png) <source>可以設定多個音檔來源，不同瀏覽器可辨識所支援的格式，並使用第一個可支援的音檔。練習:寫一個音檔播放器 ```htmlmixed= <audio controls> <source src="music.mp3" type="audio/mpeg"> <source src="music.wav" type="audio/wav"> 目前瀏覽器不支援此播放格式 </audio> ``` ## 影片播放器 * video的屬性 ![](https://i.imgur.com/g8WYPFU.png) * source的屬性 ![](https://i.imgur.com/ieG4uiM.png) 練習:寫一個音檔播放器 ```htmlmixed= <video height="300px" width="400px" autoplay controls> <source src="movie.mp4" type="video/mp4"> </video> ```