什么是HTML的基本結(jié)構(gòu)與標(biāo)簽？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

我們提供的服務(wù)有：成都網(wǎng)站建設(shè)、做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、柞水ssl等。為上千余家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的柞水網(wǎng)站制作公司

                                                           一、初步了解HTML

HTML是一種超文本標(biāo)簽語言，瀏覽器則是用來“解釋和執(zhí)行”HTML源碼的工具。

HTML的基本結(jié)構(gòu)

其中是文檔類型聲明，聲明這個文件必須是HTML5文件，讓瀏覽器按照HTML5準(zhǔn)備進(jìn)行解析，必須在HTML5中，必須要有，且是一定要寫在文件的最上方滴。

是網(wǎng)頁的標(biāo)題，顯示在最上方的文字：

 是用來描述網(wǎng)頁的一些關(guān)鍵信息。例如網(wǎng)頁的配置、設(shè)置、關(guān)鍵字等等。。。這些信息，大多在瀏覽器看不到，但是對網(wǎng)頁的解析至關(guān)重要！

  則是所有的代碼都寫在其中。
二、初步了解標(biāo)簽

1、頭部部分

1）link：網(wǎng)頁標(biāo)題的圖標(biāo)

鏈接網(wǎng)頁的小圖標(biāo)，網(wǎng)頁選項卡上面的小圖片

其中rel="icon"表示當(dāng)前l(fā)ink的作用是鏈接網(wǎng)頁圖標(biāo)

href="img/ss.gif"表示圖標(biāo)的地址所在的位置

2)meta:用于描述網(wǎng)頁的各種信息

①其中設(shè)置網(wǎng)頁的編碼格式為utf-8格式
常見的中文編碼格式：GB2312：國標(biāo)碼，簡體中文；GBK：擴展國標(biāo)碼，簡體中文
utf-8：萬國碼，兼容各種語言編碼，常用！

②可以設(shè)置網(wǎng)頁的關(guān)鍵字有助于搜索引擎的搜索，多個關(guān)鍵字用英文逗號分開

③設(shè)置網(wǎng)頁的詳細(xì)信息，搜索引擎時標(biāo)題下面的一段文字！

name="description" 表示這個meta標(biāo)簽設(shè)置的是網(wǎng)頁的描述信息；
content="" 表示描述信息的詳細(xì)內(nèi)容??！

2、主體部分

1）標(biāo)簽的分類

①塊級標(biāo)簽：顯示為塊狀，獨占一行，自動換行。
②行級標(biāo)簽：在一行中，從左往右依次排列，不會自動換行。

2）塊級標(biāo)簽

常見的塊級標(biāo)簽有：

a.標(biāo)題標(biāo)簽：

b.水平線標(biāo)簽：

c.段落標(biāo)簽：

d.換行標(biāo)簽：

e.引用標(biāo)簽：

f.預(yù)格式標(biāo)簽：

②代碼中的換行，空格等元素可在瀏覽器中直接顯示。

    
這是h2標(biāo)簽
這是h3標(biāo)簽
這是h4標(biāo)簽
這是h5標(biāo)簽
這是h6標(biāo)簽
這是h7標(biāo)簽
這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！這是一段文字！
            
            哈哈啊哈哈哈啊哈哈哈哈啊哈！
這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！
這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！
if(entity != null){  
    tring result = EntityUtils.toString(entity,"UTF-8");//HttpEntity轉(zhuǎn)為字符串類型  
    jsonObject = JSONObject.fromObject(result);//字符串類型轉(zhuǎn)為JSON類型  
}  
光明正大的不要臉！這段話就是抄的！你能咋地！

g.有序列表
   

（order list）
    　　
1. ...
列表項可以有n多個
    　　
2. ...

    　　
3. ...

   

h.無序列表
   

(unorder list)
    　　
• ...
n多個
    　　
• ...

    　　
• ...

   

i.定義描述列表
   

    　　

一般只有一項

（列表標(biāo)題）
    　　

可以有很多項

（列表描述項）
    　　

132

    　　

123

   

g.組合標(biāo)簽 顯示效果：上面是圖片，下面是圖片的標(biāo)題，同時圖片和標(biāo)題前代縮進(jìn)。
   

    　　 圖片
    　　 圖片的標(biāo)題。
   

k.分區(qū)標(biāo)簽

    
這是無序列表第一項
這是無序列表第二項
這是無序列表第三項
這是無序列表第四項
        
這是無序列表第一項
這是無序列表第二項
這是無序列表第三項
這是無序列表第四項
        
這是dl列表的標(biāo)題
這是dl列表的描述項1
這是dl列表的描述項2
這是dl列表的描述項3
        

        
這是div里面的文字?。。?p>11111

                

3)行級標(biāo)簽

常見的行級標(biāo)簽：

（1）文本標(biāo)簽span

① span標(biāo)簽只是包裹作用，沒有任何其他含義；
② span作用與div類似，需配合CSS使用。只不過div是塊級標(biāo)簽、span是行級標(biāo)簽

（2）強調(diào)標(biāo)簽em與strong；傾斜標(biāo)簽i；加粗標(biāo)簽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）短引用標(biāo)簽q：表示短引用 。      cite屬性：用于聲明引用的來源。

【常用的引用標(biāo)簽】

用于引用一段內(nèi)容

（4）縮小標(biāo)簽small：將字體縮小一號；big標(biāo)簽：將字體放大一號。

注意：
① small和big可以多層嵌套，直到字體達(dá)到最小或最大為止；
② 這倆標(biāo)簽已經(jīng)被淘汰，并不建議使用。

（5）圖片標(biāo)簽img

① src屬性：表示圖片的路徑
 [圖片路徑的合法方式]
A.網(wǎng)絡(luò)鏈接：由于圖片在其他網(wǎng)站，如果其他網(wǎng)站刪除圖片，我們也不能訪問，所以不建議使用這種方式；
 

B.絕對路徑：使用絕對路徑的圖片，只有在本機使用file協(xié)議才能訪問！所以，嚴(yán)禁使用這種方式！

C.相對路徑：
a、 圖片與當(dāng)前文檔在同一層文件夾：直接寫圖片名

b、圖片在當(dāng)前文檔的下一層文件夾：文件夾名/圖片名

c、 圖片在當(dāng)前文檔的上一層文件夾： ../圖片名 (../表示后退一層)

但是，一定要注意：圖片必須包含在項目里面，不能訪問項目外的圖片。


② height:圖片的高度     width：圖片的寬度
 

③ title：圖片的標(biāo)題，也就是鼠標(biāo)指上后看到的提示文字
 

④ alt: 圖片無法加載時顯示的文字
 

⑤ align：圖片周圍的文字相對于圖片如何對齊。
  可選值：top->圖片頂部  center->圖片中部 bottom->圖片底部
 12345

（6）超鏈接標(biāo)簽a

A、href屬性：表示超鏈接跳轉(zhuǎn)的頁面。
 ① 可以寫網(wǎng)絡(luò)地址：
 這是一個超鏈接

 ② 可以打開本地的html文件：
采用相對路徑確定文件地址。與img標(biāo)簽確定方式相同。
 這是一個超鏈接

B、title屬性：鼠標(biāo)指上后顯示的提示文字
這是一個超鏈接

C、target屬性：設(shè)置新頁面打開的窗口位置
可選值：_self自身頁面打開（默認(rèn)）
_blank 新窗口打開
這是一個超鏈接

【超鏈接的特殊應(yīng)用】
1、功能性鏈接：（了解）
mailto://   點擊鏈接給指定郵箱發(fā)送郵件
點擊發(fā)送郵件
tencent://message/?uin=1105093212"
還有：tell://手機端點擊打電話
message://手機端點擊發(fā)送短信
ftp://使用ftp協(xié)議進(jìn)行文件的上傳下載
2、錨點鏈接：
  >>>本頁面錨鏈接
① 在頁面的指定位置中設(shè)置一個錨點，用那么屬性表示錨點名字：
a name="top">

        
        糖糖真帥?。?！

        這是em標(biāo)簽
這是strong標(biāo)簽
這是i標(biāo)簽
這是b標(biāo)簽
這是b標(biāo)簽

        我是q標(biāo)簽引用
我是blockqoute的引用！?。。?！
我是cite標(biāo)簽的引用！！

        我比正常小兩號
我比正常大一號

        
              12345
        -->12345        點擊發(fā)送郵件
點擊123

4）塊級標(biāo)簽與行級標(biāo)簽的區(qū)別

1、塊級標(biāo)簽：默認(rèn)寬度100%(占滿一行)；
塊級標(biāo)簽自動換行(獨占一行，右邊不能有任何東西)；
塊級標(biāo)簽可以使用CSS設(shè)置寬度高度！

2、行級標(biāo)簽：默認(rèn)寬度由內(nèi)容撐開(內(nèi)容多寬、寬度就占多寬)；
行級標(biāo)簽不會自動換行(一行當(dāng)中，從左往右依次排列)；
行級標(biāo)簽的寬度高度不能設(shè)置！

5）表格

（1）表格table

表格用table表示，表格中的每一行tr表示，一行中的每一列用td表示

th表示的是：表頭。表頭中的文字，默認(rèn)為加粗居中。th要放在tr中，用于替換掉td。

（2）table的常用屬性
A、border：給表格加邊框。 默認(rèn)給所有td加邊框，并且給整個table加外邊框。 當(dāng)增大border的值時，td上的邊框不變化，只有最外層大邊框變寬。

B、cellspacing：單元格與單元格之間的距離。
  cellspacing="0" 表示單元格與單元格之間沒有距離，但是邊框線的寬度依然是兩條線的寬度。

  [注意] 表格邊框合并的CSS寫法：
  style="border-collapse: collapse;"

這條CSS與cellspacing="0"有什么區(qū)別？
  cellspacing="0"僅僅是將單元格之間的距離調(diào)整為0，實際上單元格之間依然還是兩條線；
  border-collapse: collapse; 是將表格相鄰的兩條邊框進(jìn)行合并處理，只有一條線存在。(一旦邊框合并，cellspace屬性將會失效。)


C、cellpadding：單元格中的文字與單元格邊框的距離。

D、 height：表格的高度
  width：表格的寬度

 使用表格寬、高屬性設(shè)置大?。?br/>  

標(biāo)題一
標(biāo)題二
1-1
1-2
1-3
2-2
2-3
        
            
        

述內(nèi)容，你們掌握什么是HTML的基本結(jié)構(gòu)與標(biāo)簽的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！