溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
什么是HTML的基本結(jié)構(gòu)與標簽？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。
一、初步了解HTML
HTML是一種超文本標簽語言，瀏覽器則是用來“解釋和執(zhí)行”HTML源碼的工具。
HTML的基本結(jié)構(gòu)
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body></body></html>
其中<!DOCTYPE html>是文檔類型聲明，聲明這個文件必須是HTML5文件，讓瀏覽器按照HTML5準備進行解析，必須在HTML5中，必須要有，且是一定要寫在文件的最上方滴。
<title></title>是網(wǎng)頁的標題，顯示在最上方的文字：
<head> </head>是用來描述網(wǎng)頁的一些關鍵信息。例如網(wǎng)頁的配置、設置、關鍵字等等。。。這些信息，大多在瀏覽器看不到，但是對網(wǎng)頁的解析至關重要！
<body> </body>則是所有的代碼都寫在其中。
二、初步了解標簽
鏈接網(wǎng)頁的小圖標，網(wǎng)頁選項卡上面的小圖片
其中rel="icon"表示當前l(fā)ink的作用是鏈接網(wǎng)頁圖標
href="img/ss.gif"表示圖標的地址所在的位置
<link rel="icon" href="img/sss.gif" />
2)meta:用于描述網(wǎng)頁的各種信息
①其中<meta charset="utf-8" />設置網(wǎng)頁的編碼格式為utf-8格式
常見的中文編碼格式：GB2312：國標碼，簡體中文；GBK：擴展國標碼，簡體中文
utf-8：萬國碼，兼容各種語言編碼，常用！
<meta charset="utf-8" />
②可以設置網(wǎng)頁的關鍵字有助于搜索引擎的搜索，多個關鍵字用英文逗號分開
<meta name="keywords"content="杰睿教育,網(wǎng)頁開發(fā)" />
③設置網(wǎng)頁的詳細信息，搜索引擎時標題下面的一段文字！
name="description" 表示這個meta標簽設置的是網(wǎng)頁的描述信息；
content="" 表示描述信息的詳細內(nèi)容?。?/span>
<meta name="description"content="這是我在，，，，"/>
1）標簽的分類
①塊級標簽：顯示為塊狀，獨占一行，自動換行。
②行級標簽：在一行中，從左往右依次排列，不會自動換行。
2）塊級標簽
常見的塊級標簽有：
a.標題標簽：<h2></h2>......<h7></h7> 特點:h2最大，h7最小且自動加粗。
b.水平線標簽：<hr/>
c.段落標簽：<p></p>
d.換行標簽：<br/>
e.引用標簽：<blockquote></blockquote>
要的cite屬性表明引用的來源，一般為網(wǎng)址，且網(wǎng)址不會在網(wǎng)頁中展示，瀏覽器一般顯示為首行縮進
f.預格式標簽：<pre></pre>
瀏覽器默認顯示樣式：①顯示為等寬字體
②代碼中的換行，空格等元素可在瀏覽器中直接顯示。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML基本塊級標簽</title></head>
<body><h2>這是h2標簽</h2><h3>這是h3標簽</h3><h4>這是h4標簽</h4><h5>這是h5標簽</h5><h6>這是h6標簽</h6><h7>這是h7標簽</h7><hr/><p>這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！這是一段文字！
哈哈啊哈哈哈啊哈哈哈哈啊哈！<br/>這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！</p><p>這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！</p><pre>if(entity != null){
tring result = EntityUtils.toString(entity,"UTF-8");//HttpEntity轉(zhuǎn)為字符串類型
jsonObject = JSONObject.fromObject(result);//字符串類型轉(zhuǎn)為JSON類型
} </pre><blockquote cite="http://www.jredu100.com">光明正大的不要臉！這段話就是抄的！你能咋地！</blockquote></body></html>g.有序列表
<ol> （order list）
<li>...</li> 列表項可以有n多個
<li>...</li>
<li>...</li>
</ol>
h.無序列表
<ul> (unorder list)
<li>...</li> n多個
<li>...</li>
<li>...</li>
</ul>
i.定義描述列表
<dl>
<dt>一般只有一項</dt> （列表標題）
<dd>可以有很多項</dd> （列表描述項）
<dd>132</dd>
<dd>123</dd>
</dl>
g.組合標簽 顯示效果：上面是圖片，下面是圖片的標題，同時圖片和標題前代縮進。
<figure>
<img/> 圖片
<figcaption></figcaption> 圖片的標題。
</figure>
k.分區(qū)標簽
<div></div> 可以包裹任何標簽，也可以被包裹進任何標簽。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML基本塊級標簽</title></head>
<body><ul><li>這是無序列表第一項</li><li>這是無序列表第二項</li><li>這是無序列表第三項</li><li>這是無序列表第四項</li></ul>
<ol><li>這是無序列表第一項</li><li>這是無序列表第二項</li><li>這是無序列表第三項</li><li>這是無序列表第四項</li></ol>
<dl><dt>這是dl列表的標題</dt><dd>這是dl列表的描述項1</dd><dd>這是dl列表的描述項2</dd><dd>這是dl列表的描述項3</dd></dl>
<figure><img src="img/icon.jpg" /><figcaption>圖片的描述標題</figcaption></figure>
<div style="width: 500px; height: 100px; background-color: yellow;">這是div里面的文字！！！<p>11111</p></div>
<div style="height: 500px;"></div></body></html>3)行級標簽
常見的行級標簽：
（1）文本標簽span
① span標簽只是包裹作用，沒有任何其他含義；
② span作用與div類似，需配合CSS使用。只不過div是塊級標簽、span是行級標簽
（2）強調(diào)標簽em與strong；傾斜標簽i；加粗標簽b；四個之間的區(qū)別
① em和i都能傾斜。strong和b都能加粗！但是，i和b僅僅是單純的傾斜加粗，而em和Strong多了強調(diào)的語義。
② em和strong都表示強調(diào)，但是strong強調(diào)的級別更高??！
注意：
1、強調(diào)的目的：讓搜索引擎知道網(wǎng)頁重點強調(diào)的內(nèi)容！便于搜索引擎顯示！
2、Strong和em都可以多層嵌套，表示強調(diào)程度的遞增！
（3）短引用標簽q：表示短引用 。 cite屬性：用于聲明引用的來源。
【常用的引用標簽】
<blockquote>用于引用一段內(nèi)容</blockquote>
<q>用于引用一句話</q>
<cite>常用于引用作品名、書畫名等</cite>
相同點：三個引用標簽，都用cite屬性表示引用來源
不同點：① 引用的內(nèi)容不同。 blockquote->一段話，q->一句話，cite->作品名
② 顯示的默認效果不同。 blockquote->默認整段向右縮進； q->默認加引號； cite->默認傾斜！
（4）縮小標簽small：將字體縮小一號；big標簽：將字體放大一號。
注意：
① small和big可以多層嵌套，直到字體達到最小或最大為止；
② 這倆標簽已經(jīng)被淘汰，并不建議使用。
（5）圖片標簽img
① src屬性：表示圖片的路徑
[圖片路徑的合法方式]
A.網(wǎng)絡鏈接：由于圖片在其他網(wǎng)站，如果其他網(wǎng)站刪除圖片，我們也不能訪問，所以不建議使用這種方式；
<img src="https://www.baidu.com/img/bd_logo1.png" />
B.絕對路徑：使用絕對路徑的圖片，只有在本機使用file協(xié)議才能訪問！所以，嚴禁使用這種方式！
<img src="file:///E:/icon.jpg" />
C.相對路徑：
a、 圖片與當前文檔在同一層文件夾：直接寫圖片名
<img src="icon.jpg" />
b、圖片在當前文檔的下一層文件夾：文件夾名/圖片名
<img src="img/icon.jpg" />
c、 圖片在當前文檔的上一層文件夾： ../圖片名 (../表示后退一層)
<img src="../icon.jpg" />
但是，一定要注意：圖片必須包含在項目里面，不能訪問項目外的圖片。
② height:圖片的高度 width：圖片的寬度
<img src="img/icon.jpg" height="500" width="10" />
③ title：圖片的標題，也就是鼠標指上后看到的提示文字
<img src="img/icon.jpg" title="鼠標指上后看到的提示文字" />
④ alt: 圖片無法加載時顯示的文字
<img src="img/icon.jpg" alt="圖片無法加載時顯示的文字" />
⑤ align：圖片周圍的文字相對于圖片如何對齊。
可選值：top->圖片頂部 center->圖片中部 bottom->圖片底部
<img src="img/icon.jpg" align="top" />12345
（6）超鏈接標簽a
A、href屬性：表示超鏈接跳轉(zhuǎn)的頁面。
① 可以寫網(wǎng)絡地址：
<a href="http://www.baidu.com">這是一個超鏈接</a>
② 可以打開本地的html文件：
采用相對路徑確定文件地址。與img標簽確定方式相同。
<a href="01-HTMLhead部分index.html">這是一個超鏈接</a>
B、title屬性：鼠標指上后顯示的提示文字
<a href="01-HTMLhead部分index.html"title="ttt">這是一個超鏈接</a>
C、target屬性：設置新頁面打開的窗口位置
可選值：_self自身頁面打開（默認）
_blank 新窗口打開
<a href="01-HTMLhead部分index.html"target"_blank">這是一個超鏈接</a>
【超鏈接的特殊應用】
1、功能性鏈接：（了解）
mailto:// 點擊鏈接給指定郵箱發(fā)送郵件
<a href="mailto://jianghao@jerei.com"target"_blank">點擊發(fā)送郵件</a>
tencent://message/?uin=1105093212"
還有：tell://手機端點擊打電話
message://手機端點擊發(fā)送短信
ftp://使用ftp協(xié)議進行文件的上傳下載
2、錨點鏈接：
>>>本頁面錨鏈接
① 在頁面的指定位置中設置一個錨點，用那么屬性表示錨點名字：
a name="top"></a>
<div style="background-color: aqua;height: 1000px"></div>
② 將超鏈接的href屬性，設置為#加錨點名字
<a href="#top">點擊鏈接，跳轉(zhuǎn)到top錨點位置</a>
>>>頁面間錨鏈接
① 在新頁面的指定位置中設置一個錨點，用那么屬性表示錨點名字：
a name="top"></a>
<div style="background-color: aqua;height: 1000px"></div>
② 將超鏈接的href屬性，設置為“新頁面地址#加錨點名字”：
<a href="錨點.html#3">點擊鏈接，跳轉(zhuǎn)到錨地.html的top錨點位置</a>
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML基本行級標簽</title></head><body><a name="e"></a>
糖糖<span style="color: red; font-size: 48px;">真帥</span>！?。?lt;br />
<em>這是em標簽</em><br /><strong>這是strong標簽</strong><br /><i>這是i標簽</i><br /><b>這是b標簽</b><br /><u>這是b標簽</u><br />
<q cite="http://www.jianghaozhenshuai.com">我是q標簽引用</q><blockquote>我是blockqoute的引用?。。。。?lt;/blockquote><cite cite="">我是cite標簽的引用??！</cite><br />
<small><small>我比正常小兩號</small></small><br /><big>我比正常大一號</big><br />
<img src="img/icon.jpg" align="top" />12345
--><img src="img/icon.jpg" align="bottom" />12345 <a href="tencent://message/?uin=1105093212"target"_blank">點擊發(fā)送郵件</a><div style="background-color: aqua;height: 1000px"></div><a href="#e">點擊</a><a href="錨點.html#1">1</a><a href="錨點.html#2">2</a><a href="錨點.html#3">3</a></body></html>4）塊級標簽與行級標簽的區(qū)別
1、塊級標簽：默認寬度100%(占滿一行)；
塊級標簽自動換行(獨占一行，右邊不能有任何東西)；
塊級標簽可以使用CSS設置寬度高度！
2、行級標簽：默認寬度由內(nèi)容撐開(內(nèi)容多寬、寬度就占多寬)；
行級標簽不會自動換行(一行當中，從左往右依次排列)；
行級標簽的寬度高度不能設置！
5）表格
（1）表格table
表格用table表示，表格中的每一行tr表示，一行中的每一列用td表示
th表示的是：表頭。表頭中的文字，默認為加粗居中。th要放在tr中，用于替換掉td。
（2）table的常用屬性
A、border：給表格加邊框。 默認給所有td加邊框，并且給整個table加外邊框。 當增大border的值時，td上的邊框不變化，只有最外層大邊框變寬。
B、cellspacing：單元格與單元格之間的距離。
cellspacing="0" 表示單元格與單元格之間沒有距離，但是邊框線的寬度依然是兩條線的寬度。
[注意] 表格邊框合并的CSS寫法：
style="border-collapse: collapse;"
這條CSS與cellspacing="0"有什么區(qū)別？
cellspacing="0"僅僅是將單元格之間的距離調(diào)整為0，實際上單元格之間依然還是兩條線；
border-collapse: collapse; 是將表格相鄰的兩條邊框進行合并處理，只有一條線存在。(一旦邊框合并，cellspace屬性將會失效。)
C、cellpadding：單元格中的文字與單元格邊框的距離。
D、 height：表格的高度
width：表格的寬度
使用表格寬、高屬性設置大?。?br/> <table height="400" width="500"></table>
使用CSS樣式設置大?。?br/> <table style="height:400px; width:500px;"></table>
E、align：設置表格在瀏覽器中的位置。不建議使用了。
可選值：left 表格居左 /center 表格居中/right 表格居右
F、bgcolor：背景色
bordercolor:邊框顏色
background:背景圖 background="img/computer.jpg"
背景色和背景圖同時存在時，背景圖會覆蓋背景色
（3）tr與td常用屬性
A、width：單元格寬度
height：單元格的高度
B、bgcolor： 單元格的顏色
C、align:設置單元格中的文字，水平對齊方式。
left、center、right
valign:設置單元格中的文字，垂直對齊方式。
top、middle、bottom
D、 nowrap="nowrap" 當單元格文字過多時，設置單元格文字不斷行顯示。 但是，會把表格的寬度撐大!!!
（4）表格的跨行與跨列
①跨列：在td上使用屬性colspan="n"進行跨列。如果一個單元格跨n列，則，單元格右邊的n-1個單元格需要去掉。
②跨行：在td上使用屬性rowspan="n"進行跨行。如果一個單元格跨n行，則，單元格下邊的n-1個單元格需要去掉。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>表格</title></head><body><table border="1"><tr><th >標題一</th><th colspan="2">標題二</th></tr><tr><td rowspan="2">1-1</td><td>1-2</td><td>1-3</td></tr><tr><td>2-2</td><td>2-3</td></table>
<table border="10" width="500" height="400" bordercolor="#ff99cc" style="border-collapse: collapse;"><!--1--><tr><td rowspan="7"></td><td rowspan="4"></td><td rowspan="2"></td><td ></td></tr><!--2--><tr><td ></td></tr><!--3--><tr><td rowspan="2"></td><td></td></tr><!--4--><tr><td rowspan="4"></td>
</tr><!--5--><tr><td rowspan="2"></td><td rowspan="2"></td></tr><!--6--><tr>
</tr><!--7--><tr><td colspan="2"></td>
</tr></table>
</body></html>述內(nèi)容，你們掌握什么是HTML的基本結(jié)構(gòu)與標簽的方法了嗎？如果還想學到更多技能或想了解更多相關內(nèi)容，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
