【前端就业课 第一阶段】HTML5 零基础到实战（五）基础元素
注意：手機（APP）打開，內容顯示更佳，不會的私聊博主即可（知識點結構參考《HTML5入門到精通》）
想要拿代碼或加入學習計劃（** 博主會監(jiān)督你并且教你寫文章 **）的拉到最下面（PC端Web打開）加博主即可，目錄也在最下面。
參加1_bit博主前端學習計劃發(fā)文時再頭部記得機上本專欄鏈接，示例如下：
我已加入 1_bit 博主的免費前端 站起來 學習計劃，專欄鏈接：https://blog.csdn.net/a757291228/category_11609526.html
基礎 HTML5 元素
👸小媛：這一節(jié)咱們講啥？
🐶1_bit：這一節(jié)我們緩解一下壓力，將下面的這個代碼拿去本地保存為html就可以了，然后要講的內容都在里面，然后通過以下學習的內容自己做一個文檔的web頁出來基本上這一節(jié)就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 的前端實戰(zhàn)課程 基本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 標簽例如章節(jié)、一個文檔的某個區(qū)域、頁腳等</p></section><article><header><h1>header 標簽</h1><p>header 標簽用于定義頁眉</p></header><h1>article 標簽</h1><p>article 標簽一般用于完整的文章，在article內編寫對應的內容</p><aside><h4>aside 標簽</h4><p>這里的 aside 標簽是用來做輔助區(qū)域內容標注</p></aside></article><article><hgroup><h1>這是一個標簽</h1><h2>這是其他的標題</h2></hgroup><p>hgroup 主要是對連續(xù)的標題做統(tǒng)一的組合</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 標簽就可以規(guī)定在長度不夠時某處進行換行，例如“我喜歡你在吃蘋果時笑起來的樣子真好看”，若在“我喜歡你”時進行換行，這樣就在一起了不是很好，所以咱們可以選擇在“吃蘋果時”后面寄一個 wbr 標簽，這樣就不會有可怕的事情發(fā)生了，所以代碼可以寫成如下示例。</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，用來規(guī)定待選項的來源，現在咱們就來給這個 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/>廣東省深圳市高新科技園南區(qū)<br/>高新南一道</address></article><footer><p>footer 標簽</p><p>footer 標簽一般用于標注作者、版權信息等</p></footer> </body> </html>目錄
【前端就業(yè)課 第一階段】HTML5 零基礎到實戰(zhàn)（九）列表
【前端就業(yè)課 第一階段】HTML5 零基礎到實戰(zhàn)（八）表單詳解
【前端就業(yè)課 第一階段】HTML5 零基礎到實戰(zhàn)（七）文字及圖片樣式
【前端就業(yè)課 第一階段】HTML5 零基礎到實戰(zhàn)（六）表格詳解
【前端就業(yè)課 第一階段】HTML5 零基礎到實戰(zhàn)（五）基礎元素
【前端就業(yè)課 第一階段】HTML5 零基礎到實戰(zhàn)（四）偽類與偽元素
【前端就業(yè)課 第一階段】HTML5 零基礎到實戰(zhàn)（三）一篇文CSS基礎入門
【前端就業(yè)課 第一階段】HTML5 零基礎到實戰(zhàn)（二）超鏈接
【前端就業(yè)課 第一階段】HTML5 零基礎到實戰(zhàn)（一）基礎代碼結構詳解
總結
以上是生活随笔為你收集整理的【前端就业课 第一阶段】HTML5 零基础到实战（五）基础元素的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【前端就业课 第一阶段】HTML5 零基
- 下一篇： 【前端就业课 第一阶段】HTML5 零基