【前端就业课 第一阶段】HTML5 零基础到实战（五）基础元素
注意：手機（APP）打開，內容顯示更佳，不會的私聊博主即可（知識點結構參考《HTML5入門到精通》）
想要拿代碼或加入學習計劃（** 博主會監督你并且教你寫文章 **）的拉到最下面（PC端Web打開）加博主即可，目錄也在最下面。
參加1_bit博主前端學習計劃發文時再頭部記得機上本專欄鏈接，示例如下：
我已加入 1_bit 博主的免費前端 站起來 學習計劃，專欄鏈接：https://blog.csdn.net/a757291228/category_11609526.html
基礎 HTML5 元素
👸小媛：這一節咱們講啥？
🐶1_bit：這一節我們緩解一下壓力，將下面的這個代碼拿去本地保存為html就可以了，然后要講的內容都在里面，然后通過以下學習的內容自己做一個文檔的web頁出來基本上這一節就ok了。這篇可能你看完有不少疑問，在下一篇有一個很大的疑問將會讓你明白其答案。
princess:小媛：問題不大，收到。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1_bit 的前端實戰課程 基本H5元素</title> </head> <body><!--導航使用 nav 組合，nav 的作用是標注--><nav><a href="#">導航鏈接1</a> <a href="#">導航鏈接2</a> <a href="#">導航鏈接3</a> <a href="#">導航鏈接4</a></nav><section><h1>section 標簽</h1><p>section 標簽一般用作定義一個明確主題的文本，通常內部將會有 h 標簽例如章節、一個文檔的某個區域、頁腳等</p></section><article><header><h1>header 標簽</h1><p>header 標簽用于定義頁眉</p></header><h1>article 標簽</h1><p>article 標簽一般用于完整的文章，在article內編寫對應的內容</p><aside><h4>aside 標簽</h4><p>這里的 aside 標簽是用來做輔助區域內容標注</p></aside></article><article><hgroup><h1>這是一個標簽</h1><h2>這是其他的標題</h2></hgroup><p>hgroup 主要是對連續的標題做統一的組合</p><h2>figure 標簽用于標注圖像</h2><figure><img src="./img/1.png" width="200" height="200"><!--img 是圖片標簽，用于顯示圖片，src 表示圖片來源，后面是圖片的路徑（所在位置）--></figure><h2>video 標簽用于標注視頻</h2><!--video 是視頻標簽，用于在內部顯示視頻，內部的 source 表示視頻的來源 source 內的 src是視頻來源type="video/mp4" 表示視頻類型 --><video width="200" height="200" controls ><source src="./mp4/movie.mp4" type="video/mp4"></video><h2>mark 標簽</h2><p>mark 標簽用于凸顯<mark>某些</mark>文本</p><h2>progress 標簽</h2><p>progress 標簽用于進度條顯示，例如單獨使用 progress 標簽不做任何在不同瀏覽器上有不同的效果</p><progress><p>progress 可以給予 value值以及 max 值指定當前進度條顯示，例如如下：</p><progress value="10" max="100"></progress><h2>meter 標簽</h2><p>有一個標簽跟進度條在顯示上有一點類似用法也十分簡單，value 表示當前值 min 表示最小值、max表示最大值根據不同值之間的比例從而顯示一個進度條類似的顯示</p><meter value="3" min="0" max="10">10分之3</meter><br><meter value="0.9">0.9就是90%</meter><h2>time 標簽</h2><p>time 標簽用于對時間進行標準，例如“我明天早上<time>11:59</time>起床”</p><h2>wbr 標簽</h2><p>一段文字在網頁中顯示時，會隨著窗口大小進行換行，若一些文字或者英文換行會導致“不適”，這個時候使用 wbr 標簽就可以規定在長度不夠時某處進行換行，例如“我喜歡你在吃蘋果時笑起來的樣子真好看”，若在“我喜歡你”時進行換行，這樣就在一起了不是很好，所以咱們可以選擇在“吃蘋果時”后面寄一個 wbr 標簽，這樣就不會有可怕的事情發生了，所以代碼可以寫成如下示例。</p><p>我喜歡你<wbr>在吃蘋果時笑起來的樣子真好看</p><h2>datalist 標簽</h2><p>datalist 標簽可以給輸入框，也就是input 標簽元素添加一些待選值；input 標簽是輸入框標簽，例如如下示例：</p><input type="text"><p>以上input標簽中 type是類型，text 表示是文本，所以是一個輸入框標簽。那么 datalist 可以給這個文本框一些待選項，例如在 input 標簽中添加一個 list 即可，例如如下標簽所示：</p><input type="text" list="data"><p>以上input標簽中添加了一個 list="data" 其中 data 指的是 datalist 標簽的id，用來規定待選項的來源，現在咱們就來給這個 input 添加一個 id值為 data 的 datalist 標簽，如下：</p><datalist id="data"><option value="這是待選項1"><option value="這是待選項2"><option value="這是待選項3"><option value="這是待選項4"><option value="這是待選項5"></datalist><p>以上的datalist 標簽中的option為選項值列，每個 option 表示當前 datalist 的值之一。</p><h2>details 標簽</h2><p>details 是詳情標簽，只能在谷歌瀏覽器和Safari 6瀏覽器上使用，暫時其他瀏覽器不支持。details 標簽可以給一段內容增加詳情，例如如下使用案例：</p><details><summary>Copyright 1999-2011.</summary><p> - by Refsnes Data. All Rights Reserved.</p><p>All content and graphics on this web site are the property of the company Refsnes Data.</p></details><p>以上示例中，summary 標簽是整個詳情標簽 details 的標題，而其他內容例如 p 標簽將會收起。</p><h2>details 標簽</h2><p>details 是詳情標簽，只能在谷歌瀏覽器和Safari 6瀏覽器上使用，暫時其他瀏覽器不支持。details 標簽可以給一段內容增加詳情，例如如下使用案例：</p><h2>address 標簽</h2><p>address 標簽用于對地址進行標準，并且有對應自帶的地址樣式。</p><address>郵編：518000<br/>廣東省深圳市高新科技園南區<br/>高新南一道</address></article><footer><p>footer 標簽</p><p>footer 標簽一般用于標注作者、版權信息等</p></footer> </body> </html>目錄
【前端就業課 第一階段】HTML5 零基礎到實戰（九）列表
【前端就業課 第一階段】HTML5 零基礎到實戰（八）表單詳解
【前端就業課 第一階段】HTML5 零基礎到實戰（七）文字及圖片樣式
【前端就業課 第一階段】HTML5 零基礎到實戰（六）表格詳解
【前端就業課 第一階段】HTML5 零基礎到實戰（五）基礎元素
【前端就業課 第一階段】HTML5 零基礎到實戰（四）偽類與偽元素
【前端就業課 第一階段】HTML5 零基礎到實戰（三）一篇文CSS基礎入門
【前端就業課 第一階段】HTML5 零基礎到實戰（二）超鏈接
【前端就業課 第一階段】HTML5 零基礎到實戰（一）基礎代碼結構詳解
總結
以上是生活随笔為你收集整理的【前端就业课 第一阶段】HTML5 零基础到实战（五）基础元素的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【前端就业课 第一阶段】HTML5 零基
- 下一篇： 【前端就业课 第一阶段】HTML5 零基