時間：2023-10-03 08:54:01 | 來源：網(wǎng)站運營
時間：2023-10-03 08:54:01 來源：網(wǎng)站運營
HTML零基礎(chǔ)入門教程， 零基礎(chǔ)學(xué)習(xí)HTML網(wǎng)頁制作（HTML 標(biāo)簽）：
在線咨詢
<div>標(biāo)簽與<span>標(biāo)簽：網(wǎng)頁開發(fā)中使用頻率最高的標(biāo)簽，類似于盒子，用于裝內(nèi)容；主要用于實現(xiàn)網(wǎng)頁布局。<div>標(biāo)簽與<span>標(biāo)簽的含義與作用；<h1>到<h6>。 <h1>:表示一級標(biāo)題 <h2>:表示二級標(biāo)題 以此類推，<h6>表示六級標(biāo)題。 <h1>我是一級標(biāo)題</h1>注意： <h1>標(biāo)簽是雙標(biāo)簽，標(biāo)簽內(nèi)部的文字就是具體的標(biāo)題內(nèi)容。 我們上面定義的是一級標(biāo)題，若定義二級標(biāo)題，可以采用如下寫法： <h2>我是二級標(biāo)題</h2>那么，其他四級標(biāo)簽如何書寫呢？ 聰明的你肯定已經(jīng)想到了吧？ 對，更改h后相應(yīng)的數(shù)字就可以啦！為了方便理解，我們要記?。?b>h，其實是 head 這個單詞的縮寫，表示頭部、標(biāo)題的意思。<h1>是最高等級的標(biāo)題標(biāo)簽。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博學(xué)谷</title> </head> <body> <h1>線上學(xué)習(xí)，就來博學(xué)谷</h1> <h2>線上學(xué)習(xí)，就來博學(xué)谷</h2> <h3>線上學(xué)習(xí)，就來博學(xué)谷</h3> <h4>線上學(xué)習(xí)，就來博學(xué)谷</h4> <h5>線上學(xué)習(xí)，就來博學(xué)谷</h5> <h6>線上學(xué)習(xí)，就來博學(xué)谷</h6> </body> </html> ?上述代碼中，設(shè)置了六個標(biāo)題，最終展示效果如下：<h1>標(biāo)簽字號最大，<h2>標(biāo)簽相比<h1>較小，<h6>標(biāo)簽最小，且一個標(biāo)題獨占一行。 有興趣的童鞋，可以嘗試一下上面的代碼，看看效果是否一樣??！關(guān)于<h1> ---<h6>標(biāo)簽，說法不正確的是？
A. 添加<h1>---<h6>標(biāo)簽的文字，除了字號會依次遞減，不會有其它的變化；
B. 為了使網(wǎng)頁更具語義化，經(jīng)常會在頁面中用到標(biāo)題標(biāo)簽，即<h1>-<h6>；
C. 標(biāo)題標(biāo)簽中 h，是單詞 head 的縮寫，意為頭部、標(biāo)題；
D. 添加<h1>-<h6>標(biāo)簽后，一個標(biāo)題獨占一行；
<p>標(biāo)簽，<p>標(biāo)簽用于定義段落，它可以將整個網(wǎng)頁分為若干個段落。 <p> 這是一個段落 </p>段落標(biāo)簽的語義，就是將 HTML 文檔分割成若干的段落。我們通過一個實例體驗一下段落標(biāo)簽的使用，如下圖所示：VSCode中，已經(jīng)按下回車鍵，將文章的內(nèi)容分成了兩段。通過瀏覽器瀏覽時，文案會分段顯示嗎？<p>標(biāo)簽，看看是否能實現(xiàn)分段？ <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博學(xué)谷</title> </head> <body> <p> 如今，多屏互動和多端兼容友好的界面日益成為所有系統(tǒng)重要的需求，因此優(yōu)秀的前端開發(fā)工程師在就業(yè)市場上也變得更為搶手。本文將為廣大的前端學(xué)習(xí)者介紹一下前端開發(fā)培訓(xùn)班的一些實戰(zhàn)項目，希望大家可以通過理論知識和項目實踐的學(xué)習(xí)，朝著中高級前端工程師的方向發(fā)展。 </p> <p> 電商后臺管理系統(tǒng)項目通過使用vue官方vue-cli3.0腳手架工具提供的工作流快速搭建和開發(fā)項目，運用阿里旗下餓了么 ElementUI組件庫搭建網(wǎng)頁結(jié)構(gòu)同時實現(xiàn)相應(yīng)頁面中的功能，通過axios請求后端相應(yīng)的接口，然后把請求到的數(shù)據(jù)展示到頁面中，通過Vue-router作為前端路由管理復(fù)雜頁面。該項目包括了前后端分離模式開發(fā)、vue-cli3.0、ElementUI組件庫（餓了么UI）、Echarts數(shù)據(jù)可視化庫等內(nèi)容。 </p> </body> </html> ?仔細閱讀上述代碼可以發(fā)現(xiàn)，我們添加了兩組<p>標(biāo)簽，每組<p> 標(biāo)簽內(nèi)部均包含一段文字，用<p> 標(biāo)簽將文字分成兩部分；<p> 標(biāo)簽實現(xiàn)了文章分段。 <p>標(biāo)簽用于定義段落，它可將整個網(wǎng)頁分為若干個段落，也就是想分幾段，就要用幾組<p>標(biāo)簽。?標(biāo)簽語法格式： <p> 這是一個段落 </p> ?我們通過一個練習(xí)題檢驗一下學(xué)習(xí)成果：對網(wǎng)頁中的文章進行分段，可以直接按下回車鍵來實現(xiàn)。以上說法是否正確？
<br />。 <br />注意：換行標(biāo)簽是一個單標(biāo)簽。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博學(xué)谷</title> </head> <body> <p> 如今，多屏互動和多端兼容友好的界面日益成為所有系統(tǒng)重要的需求，因此優(yōu)秀的前端開發(fā)工程師在就業(yè)市場上也變得更為搶手。 本文將為廣大的前端學(xué)習(xí)者介紹一下前端開發(fā)培訓(xùn)班的一些實戰(zhàn)項目，希望大家可以通過理論知識和項目實踐的學(xué)習(xí)，朝著中高級前端工程師的方向發(fā)展。 </p> <p> 電商后臺管理系統(tǒng)項目通過使用vue官方vue-cli3.0腳手架工具提供的工作流快速搭建和開發(fā)項目，運用阿里旗下餓了么 ElementUI組件庫搭建網(wǎng)頁結(jié)構(gòu)同時實現(xiàn)相應(yīng)頁面中的功能，通過axios請求后端相應(yīng)的接口，然后把請求到的數(shù)據(jù)展示到頁面中，通過Vue-router作為前端路由管理復(fù)雜頁面。該項目包括了前后端分離模式開發(fā)、vue-cli3.0、ElementUI組件庫（餓了么UI）、Echarts數(shù)據(jù)可視化庫等內(nèi)容。 </p> </body> </html> ?上述代碼中，添加了換行標(biāo)簽，解析效果如下：?標(biāo)簽在 HTML 中的含義是？
A. 加粗
B. 段落
C. 水平線
D. 斜線
關(guān)于下列段落和換行標(biāo)簽說法不正確的是？
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博學(xué)谷</title> </head> <body> <h1>前端開發(fā)培訓(xùn)班的實戰(zhàn)項目有哪些?</h1> <p> 如今，多屏互動和多端兼容友好的界面日益成為所有系統(tǒng)重要的需求，因此優(yōu)秀的前端開發(fā)工程師在就業(yè)市場上也變得更為搶手。本文將為廣大的前端學(xué)習(xí)者介紹一下前端開發(fā)培訓(xùn)班的一些實戰(zhàn)項目，希望大家可以通過理論知識和項目實踐的學(xué)習(xí)，朝著中高級前端工程師的方向發(fā)展。 </p> <h4>學(xué)成網(wǎng)在線項目</h4> <p> 學(xué)成在線案例是一個在線教育平臺，在該案例中使用HTML+CSS進行頁面的布局， 在首頁中主要有網(wǎng)頁的頭部區(qū)域、網(wǎng)頁的banner區(qū)域、文導(dǎo)航和文列表。 </p> <h4>品優(yōu)購電商項目</h4> <p> 品優(yōu)購電商項目屬于B2C電商平臺，類似于京東商城和淘寶，在該項目中使用HTML+CSS/CSS3進行頁面的布局和動態(tài)效果實現(xiàn)， 主要實現(xiàn)了電商首頁、列表頁面、詳情頁面，三個頁面之間能夠進行相互切切換。項目主要根據(jù)Photoshop進行效果圖的展示和頁面尺寸、顏色量取的輔助開發(fā)；綜合運用DIV+CSS知識，提高學(xué)員進行網(wǎng)頁布局的能力。 </p> <p> 來源：博學(xué)谷<br /> 作者：照照 </p> </body></html>我們通過綜合案例完成段落標(biāo)簽、標(biāo)題標(biāo)簽、換行標(biāo)簽的應(yīng)用，相信大家已經(jīng)能掌握其用法，深刻理解了其在網(wǎng)頁中的作用。 但是我們也明顯的看到一個問題：上述的實例實現(xiàn)的頁面效果與日常生活中看到的網(wǎng)頁相比還比較簡陋，似乎缺少了很多元素。沒錯，這只是網(wǎng)頁開發(fā)的第一步，接下來我們將帶領(lǐng)大家逐步實現(xiàn)一個完整的網(wǎng)頁！！<strong>標(biāo)簽與<b>標(biāo)簽。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博學(xué)谷</title> </head> <body> 我是一個<strong>大帥哥</strong> 我是一個<b>大帥哥</br> </body> </html> ?在此段代碼中，我們同時使用了<strong>標(biāo)簽與<b>標(biāo)簽。<strong>標(biāo)簽與<b>標(biāo)簽都可以實現(xiàn)文字加粗效果；<strong>標(biāo)簽。因為<strong>標(biāo)簽語義更加強烈。<strong>相當(dāng)于語氣更加的強烈，所以推薦使用<strong>標(biāo)簽。<em>標(biāo)簽與<i>標(biāo)簽。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博學(xué)谷</title> </head> <body> 我是大<em>美女</em> ? 我是大<i>美女</i> </body> </html> ?實際效果如下：<em>標(biāo)簽與<i>標(biāo)簽都可以實現(xiàn)斜體效果；<em>標(biāo)簽，因為該標(biāo)簽語義更加強烈。<del>標(biāo)簽與<s>標(biāo)簽。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博學(xué)谷</title> </head> <body> 商品價格<del>￥50</del> ? 商品價格<s>￥100</s> </body> </html> ?執(zhí)~行上面代碼后，效果如下圖所示：<del>標(biāo)簽與<s>標(biāo)簽均能實現(xiàn)刪除線效果。 但考慮到具體的應(yīng)用，若需要給文字添加刪除線效果，推薦使用<del>標(biāo)簽，因為其語義更加強烈。<ins>與<u>標(biāo)簽，而我們更推薦使用<ins> 標(biāo)簽，因為該標(biāo)簽語義更加強烈。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博學(xué)谷</title> </head> <body> 這是<ins>下劃線</ins> ? 這是<u>下劃線</u> </body> </html> ?執(zhí)行上面代碼后，效果如下圖所示：下列關(guān)于文本格式化標(biāo)簽說法正確的是【 】？
<div>與<span>兩個比較特殊的標(biāo)簽（這兩個標(biāo)簽沒有語義），它們類似一個盒子，用來裝內(nèi)容。也就是說，這兩個標(biāo)簽主要是用來完成網(wǎng)頁布局。<div>與<span>標(biāo)簽的作用： <div> 我是div標(biāo)簽 </div> <span> 我是span標(biāo)簽 </span>從上述代碼可知：<div>與<span>標(biāo)簽都是雙標(biāo)簽，可以在兩個標(biāo)簽中(兩個盒子)添加對應(yīng)的內(nèi)容。<div>標(biāo)簽用來進行網(wǎng)頁布局，但是就目前來說，一行中只能放一個<div>，相當(dāng)于一個大盒子。<div>標(biāo)簽的應(yīng)用，具體代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博學(xué)谷</title> </head> <body> <div>第一個div標(biāo)簽</div> <div>第二個div標(biāo)簽</div> </body> </html> ?上面代碼中，我們添加了兩個<div>標(biāo)簽，并在標(biāo)簽中添加了文字，相當(dāng)于這兩個盒子中裝的就是文字。 運行的效果，如下圖所示：<div>獨占一行，就像一個大盒子。<div>的應(yīng)用效果：<div>。<div> 標(biāo)簽的應(yīng)用后，我們來學(xué)習(xí)<span>標(biāo)簽的應(yīng)用，代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博學(xué)谷</title> </head> <body> <div>第一個div標(biāo)簽</div> <div>第二個div標(biāo)簽</div> <span>博學(xué)谷</span> <span>傳智播客</span> <span>博學(xué)谷</span> </body> </html> ?上面代碼中，我們添加了三組<span>標(biāo)簽，對應(yīng)在瀏覽器中展示效果如下：<span>標(biāo)簽內(nèi)容在一行中展示的，因此，<span>標(biāo)簽就像一行中的一個個小盒子；<div>標(biāo)簽與<span>標(biāo)簽，我們就學(xué)習(xí)完了，后面學(xué)習(xí)了 CSS 樣式以后，還會繼續(xù)深入學(xué)習(xí)這塊內(nèi)容。下面說法正確的選項是【】？
<img src="圖像路徑" />上述語法格式中，需要注意： （1）標(biāo)簽是一個單標(biāo)簽； （2）在標(biāo)簽中有一個屬性 src； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博學(xué)谷</title> </head> <body> <img src="m.jpg" /> </body> </html>由上面的代碼可知，我們直接給 img 標(biāo)簽的 src 屬性指定了圖片的名稱。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博學(xué)谷</title> </head> <body> 我的夢中情人 <img src="m.jpg" /> </body> </html>在代碼中，添加了一句話“我的夢中情人”；然后通過瀏覽器運行上面的代碼，效果如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博學(xué)谷</title> </head> <body> <h4>我的夢中情人</h4> <img src="m.jpg" /> </body> </html>運行效果如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博學(xué)谷</title> </head> <body> <img src="m1.jpg" alt="我的夢中情人" /> </body> </html>在代碼中，我們所插入的圖片名稱叫做 m1.jpg，但是注意，在當(dāng)前的 MyWeb 文件夾下是沒有該圖片的。 同時，給 img 標(biāo)簽添加了 alt 屬性，并給該屬性指定了一段文本，下面通過瀏覽器查看一下運行的效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博學(xué)谷</title> </head> <body> <img src="m.jpg" title="我的夢中情人" /> </body> </html>運行上面的代碼，效果如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博學(xué)谷</title> </head> <body> <img src="m.jpg" title="我的夢中情人" width="300" height="300" /> </body> </html>在代碼中，我們給<img>標(biāo)簽添加<title>屬性的同時，也指定了 width 與 height 屬性，設(shè)置圖片的寬度與高度，分別為300像素。 通過瀏覽器運行上面的代碼，對應(yīng)的運行效果如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博學(xué)谷</title> </head> <body> <img src="m.jpg" title="我的夢中情人" width="300" border="10" /> </body> </html>在代碼中，為<img>標(biāo)簽添加<border>屬性，設(shè)置邊框為10像素，對應(yīng)的效果如下所示：圖像標(biāo)簽中哪個屬性必須要寫？
關(guān)于 alt 屬性與 title 屬性的區(qū)別，說法正確的是？
關(guān)鍵詞：基礎(chǔ),標(biāo)簽,學(xué)習(xí),入門,教程
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
