時間：2023-10-03 10:36:01 | 來源：網(wǎng)站運營
時間：2023-10-03 10:36:01 來源：網(wǎng)站運營
HTML常用標(biāo)簽：
在線咨詢
<div>標(biāo)簽與<span>標(biāo)簽。這兩個標(biāo)簽就像一個盒子，可以用來裝內(nèi)容，在網(wǎng)頁設(shè)計中，主要用來實現(xiàn)網(wǎng)頁布局，關(guān)于網(wǎng)頁布局是以后課程重點講解的內(nèi)容。<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)容了?，F(xiàn)在我們定義的是一級標(biāo)題，如果想定義二級標(biāo)題，可以采用如下的寫法<h2>我是二級標(biāo)題</h2>那么，要是設(shè)置三級標(biāo)題、四級標(biāo)題、應(yīng)該怎樣寫呢？<!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)題，最終展示效果如下：<p>標(biāo)簽，<p>標(biāo)簽用于定義段落，它可以將整個網(wǎng)頁分為若 <p> 這是一個段落</p>段落標(biāo)簽的語義就是將HTML文檔分割成若干的段落。VSCode中，已經(jīng)按下回車鍵，將文章的內(nèi)容分成了兩段。現(xiàn)在通過瀏覽器瀏覽時，會分段顯示嗎？這里你可以思考一下。<p>標(biāo)簽來完成。下面咱們使用<p>標(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>你仔細(xì)閱讀上面的代碼可以發(fā)現(xiàn)，我們就是添加了兩組<p>標(biāo)簽。而<p> 標(biāo)簽內(nèi)部的文字就構(gòu)成了一個段落，這樣上面的文章，我們共分成了兩個段落。<p>標(biāo)簽用于定義段落，它可以將整個網(wǎng)頁分為若干個段落，也就是想分幾段，就要用幾個<p>標(biāo)簽。<p>標(biāo)簽語法格式<p> 這是一個段落</p><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è)市場上也變得更為搶手。<br />本文將為廣大的前端學(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)簽，下面看一下效果。<br />標(biāo)簽是一個單標(biāo)簽，作用就是將文本強(qiáng)制換行顯示。<h1>標(biāo)簽，同時可以看到文章是有段落的，所以會使用<p>標(biāo)簽。在這篇文章中不僅有一級標(biāo)題，還有子標(biāo)題，關(guān)于子標(biāo)題的設(shè)置，這里我們可以使用<h4>標(biāo)簽來完成，需要格外注意的一點就是最后文章的【來源】與【作者】這塊內(nèi)容，首先它們是在一個段落中，然后分到了不同的行中，所以這里會先有<p>標(biāo)簽，使其在一段中，然后再用<br />標(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進(jìn)行頁面的布局， 在首頁中主要有網(wǎng)頁的頭部區(qū)域、網(wǎng)頁的banner區(qū)域、課程導(dǎo)航和課程列表。 </p> <h4>品優(yōu)購電商項目</h4> <p> 品優(yōu)購電商項目屬于B2C電商平臺，類似于京東商城和淘寶，在該項目中使用HTML+CSS/CSS3進(jìn)行頁面的布局和動態(tài)效果實現(xiàn)， 主要實現(xiàn)了電商首頁、列表頁面、詳情頁面，三個頁面之間能夠進(jìn)行相互切切換。項目主要根據(jù)Photoshop進(jìn)行效果圖的展示和頁面尺寸、顏色量取的輔助開發(fā)；綜合運用DIV+CSS知識，提高學(xué)員進(jìn)行網(wǎng)頁布局的能力。 </p> <p> 來源：博學(xué)谷<br /> 作者：照照 </p> </body></html>現(xiàn)在，我們已經(jīng)完成整個案例了，在這個案例中，我們主要使用了段落標(biāo)簽,標(biāo)題標(biāo)簽，換行標(biāo)簽。<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)簽語義更加強(qiáng)烈。怎樣理解語義更加強(qiáng)烈呢？打個比方：你在與同學(xué)交流的時候，為了突出你的觀點，可以加重語氣，而<strong>相當(dāng)于語氣更加的強(qiá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> <br /> 我是大<i>美女</i> </body></html>效果展示：<em>標(biāo)簽與i標(biāo)簽都可以實現(xiàn)斜體，但是這里還是推薦<em>標(biāo)簽，因為該標(biāo)簽語義更加強(qiáng)烈。<del>標(biāo)簽與<s>標(biāo)簽。<del>標(biāo)簽，因為語義更加強(qiá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> 商品價格<del>￥50</del> <br /> 商品價格<s>￥100</s> </body></html>執(zhí)行上面代碼后，效果如下圖所示：<ins>與<u>，當(dāng)然這里推薦使用<ins> 標(biāo)簽，因為該標(biāo)簽語義更加的強(qiáng)烈。具體的實現(xiàn)代碼如下：<!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><br /> 這是<u>下劃線</u> </body></html>執(zhí)行上面代碼后，效果如下圖所示：<strong>標(biāo)簽，傾斜使用的是<em>標(biāo)簽，刪除線使用的是<del>標(biāo)簽，下劃線使用的是<ins>標(biāo)簽。<div>標(biāo)簽與<span>標(biāo)簽是兩個比較特殊的標(biāo)簽，因為這兩個標(biāo)簽是沒有語義的，它們就是一個盒子，用來裝內(nèi)容的。這兩個標(biāo)簽主要用來完成網(wǎng)頁布局的，我們通過下圖來體會一下：<div> 我是div標(biāo)簽</div><span> 我是span標(biāo)簽</span><div>與<span>標(biāo)簽都是雙標(biāo)簽，可以在這兩個標(biāo)簽中(兩個盒子)添加內(nèi)容。<div>標(biāo)簽是用來進(jìn)行網(wǎng)頁布局的，但是就目前來說在一行中只能放一個<div>,相當(dāng)于一個大盒子。<span>標(biāo)簽也是用來布局的，一行上可以有多個<spa>,相當(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)用后，下面看一下<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)簽就像一個小盒子?！?br><div>標(biāo)簽與<span>標(biāo)簽，在這我們就學(xué)習(xí)完了，后面學(xué)習(xí)了CSS樣式以后，還會繼續(xù)深入學(xué)習(xí)這塊內(nèi)容。目前，我們需要記住以下兩點就可以了：<div>標(biāo)簽是用來進(jìn)行網(wǎng)頁布局的，但是就目前來說在一行中只能放一個<div>,相當(dāng)于一個大盒子。<span>標(biāo)簽也是用來布局的，一行上可以有多個<spa>,相當(dāng)于一個小盒子。<img>標(biāo)簽用于定義HTML網(wǎng)頁中的圖像。<img src="圖像路徑" />在上面的語法格式中，首先要注意的就是<img>標(biāo)簽是一個單標(biāo)簽，然后還要注意在<img>標(biāo)簽中有一個屬性src.src是<img>標(biāo)簽必須要添加的屬性，它的作用是用來指定網(wǎng)頁中所展示的圖片的路徑和文件名(關(guān)于路徑概念后期課程會專門來講解，這里我們先記住src屬性取值為圖片文件名就可以)，也就是說如果沒有該屬性是無法在網(wǎng)頁中顯示圖片的。那什么是屬性呢？MyWeb這個文件夾中，除了有我們以前創(chuàng)建的html網(wǎng)頁以外，這里我還添加了一張圖片，叫做m.jpg,下面我們就把這張圖片添加到index.html這個網(wǎng)頁中。具體實現(xiàn)的代碼如下：<!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>通過上面的代碼，可以發(fā)現(xiàn)我們直接給img標(biāo)簽的src屬性指定了圖片的名稱。寫完以上代碼，打開瀏覽器查看對應(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" /> </body></html>在上面的代碼中，就是添加了一句話，然后通過瀏覽器運行上面的代碼，效果如下所示：<br /> 標(biāo)簽，可以實現(xiàn)文字與圖片的換行展示，或者把文字放到一個<div>標(biāo)簽中也可以實現(xiàn)換行展示。除了這兩種方式以外，還有沒有其他的方式呢？是不是也可以通過標(biāo)題標(biāo)簽來完成啊，在前面我們也學(xué)習(xí)過，標(biāo)題標(biāo)簽是獨占一行的。在這里，我們通過標(biāo)題標(biāo)簽來解決這個問題，因為標(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> <h4>我的夢中情人</h4> <img src="m.jpg" /> </body></html>現(xiàn)在，你也將代碼修改成如上的形式，看一下效果吧?。?br>src屬性，該屬性的作用就是用來指定網(wǎng)頁中所展示的圖片的路徑和文件名。那么除了src這個屬性以外，圖像標(biāo)簽還沒有其它的屬性呢？當(dāng)然是有的，如以下表格所示： alt屬性。alt屬性：當(dāng)圖片顯示不出來的時候，用alt屬性所指定的文字來替換圖片進(jìn)行展示。<!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屬性，并給該屬性指定了一段文本，下面通過瀏覽器查看一下運行的效果：m1.jpg, 所以瀏覽器中不會展示任何的圖片，只能顯示alt屬性所指定的文本。alt屬性是比較常用的一個屬性，因為在圖片顯示不出來的情況下，用戶可以通過文字來了解圖片的內(nèi)容。所以，一般建議給img標(biāo)簽添加上該屬性。alt屬性的內(nèi)容，下面學(xué)習(xí)一下title屬性：title屬性：該屬性的取值也是一段文本，這段文本是在用戶將鼠標(biāo)放到圖像上的時候才會展示出來，所以也叫做提示文本。具體代碼實現(xiàn)如下：<!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>運行上面的代碼，效果如下所示：title屬性的文本內(nèi)容。width與height 這兩個屬性，其實這里通過這兩個屬性的名稱，我們就知道其作用就是設(shè)置圖片的寬度與高度的。具體代碼如下：<!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)的運行效果如下所示：width 屬性與height 屬性，就會導(dǎo)致圖片的變形。所以，我們一般只需設(shè)置一個屬性就可以，也就是要么只設(shè)置width屬性，要么只設(shè)置height屬性，不會同時設(shè)置這兩個屬性。width屬性，那height屬性的值是多少呢？會自動等比例縮放，根據(jù)寬度值，自動計算出高度的值。同理，你只設(shè)置了height屬性，那么width屬性的值也會自動等比例縮放。width屬性或者是height屬性，看一下運行效果，是不是我們所說的，高度或者寬度會自動等比例縮放。<border>屬性，該屬性的作用是為圖片添加邊框，代碼如下：<!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)的效果如下所示：border 屬性給圖像添加了邊框，但是這個邊框效果并不是特別好看，所以我們后期要給圖像添加邊框都是通過CSS樣式來完成的。通過css樣式添加邊框不僅可以設(shè)置漂亮的顏色，同時還可以控制邊框的形狀，例如將邊框修成成圓角等。所以，關(guān)于border屬性，在這里你只需了解一下就可以了。<img>標(biāo)簽，而該標(biāo)簽必須有一個src屬性，用來指定圖片文件的路徑和文件名。width=100關(guān)鍵詞：標(biāo)簽
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
