菜鳥html教程

文章導讀：本期小編就給各位初學html語言的小伙伴帶來菜鳥html教程，在下文中小編整理了一些常用的html標簽，希望對那些正在學習html的小伙伴有所幫助。除此之外，小編還整理了多個html學習鏈接，以便幫助你更好的進行學習。感興趣的小伙伴就來看一看吧！

本期小編就給各位初學html語言的小伙伴帶來菜鳥html教程，在下文中小編整理了一些常用的html標簽，希望對那些正在學習html的小伙伴有所幫助。除此之外，小編還整理了多個html學習鏈接，以便幫助你更好的進行學習。感興趣的小伙伴就來看一看吧！

html常用標簽

一、首先來講第一種：標題標簽 h1~h6

   <h1>一級標題</h1>
   <h2>二級標題</h2> 
   <h3>三級標題</h3>
   <h4>四級標題</h4>
   <h5>五級標題</h5>
   <h6>六級標題</h6>

標題標簽的默認樣式是自動加粗的;字體大小一級標題最大，六級最小;標題與標題之間有較大的間距 獨占一行。

標題標簽代表著一個標題，一級標題的語義最重，六級標題的語義最輕。

標題標簽是塊元素。

標題標簽的作用是幫助推廣部門進行推廣優化的，其重要性僅次于title標簽。一般而言一個頁面只有一個h1標簽。

二、第二種：段落標簽 p

<p>段落標簽</p>

段落標簽的默認樣式是行與行之間有較大間距并獨占一行。它代表著一個自然段。

段落標簽也是塊元素。

三、第三種：hgroup標簽

   <hgroup>
       <h1>登高</h1>
       <h2>杜甫</h2>
   </hgroup>

hgroup標簽主要作用是用來為標題分組，可以將一組相關的標題放到hgroup里面。

四、第四種：強調標簽 em strong

    你們真<em>帥</em>
    你們真<strong>帥</strong>

em和strong標簽都表示強調，但是它們還是有一定的差別的

1、第一em標簽的樣式是斜體，而strong標簽的樣式是加粗

2、第二em標簽是強調語義的，而strong標簽是強調內容的

em標簽和strong標簽都是行內元素。

五、第五種：引用標簽 q blockquote

    老子曰
    <blockquote>孔子說的不對</blockquote>
    孔子曰
    <q>老子才不對</q><br>

q標簽和blockquote標簽都是引用，不同的是q標簽是短引，用而blockquote標簽是長引用會換行的。

六、第六種：換行標簽 br

    點點關注<br>
    謝謝你們<br>
    薩瓦迪卡<br>
    外比八不<br>

br標簽的作用是，強制換行，它是一個自結束標簽。

七、第七種：hr標簽

    <hr>

hr標簽就是給頁面加一個分割線。

八、第八種：del標簽

     原價 <del>19999</del>
     現價 999

這個del標簽就是刪除標簽，就很常見了，什么不要998，不要997現價只有99!等等的廣告，還有淘寶上啊、京東上啊，都有這個標簽的存在。

九、第九種：center標簽

     <center> <hgroup>
        <h1>登高</h1>
        <h2>杜甫</h2>
    </hgroup></center>

center標簽的作用就是劇中，把文字啊圖片啊啥的全部居中到頁面中間，這可以讓頁面更美觀。

十、第十種：div標簽

    <div>
        用來布局
    </div>

div標簽是用來布局的，并沒有語義，只是一個區塊。

div標簽是塊元素

十一、第十一種：span標簽

    <span>
        包裹文字
    </span>

span標簽，沒有語義，一般用來包裹文字,讓文字更好被選中。

常用的布局標簽

header 網頁的頭部

main 網頁的主體部分(一般只有一個)

footer 網頁的底部

nav 網頁的導航

aside 和主題相關的內容

article 文章之類的

section 獨立的塊區，上面的標簽都不合適，就用這個

div 塊元素

常用的圖片標簽

一般來說我們都是使用img標簽來引入圖片，img標簽有四個屬性

1.src屬性 引入圖片路徑 通過./或者../開頭

./ 若引用的圖片在同一個目錄下

../ 若引用圖片不在同一個目錄(../到上一級目錄，可疊加../../)

2.alt屬性 對圖片的描述，對圖片引用不成功的時候顯示文字

也會幫助瀏覽器做一些收錄功能

3. width屬性 設置圖片的寬度

屬性值里直接寫數值或者帶單位

4.height屬性 設置圖片的高度

屬性值里直接寫數值或者帶單位

注意：一般情況 width和height只設置一個，另一個讓瀏覽器按比例縮放。

行內元素和塊元素

想必大家都看到文章中有很多行內元素和塊元素被標記出來了吧，是不是不太清楚是什么，沒關系現在我就來給大家說一說

塊元素(block element) 常用來布局

特點：

1.塊元素會獨占一行,從上往下依次排列

2.塊元素的寬度是父元素的100%(body是父元素，頁面邊小隨之變小)

3.塊元素的高度默認是被內容撐開的

常用塊元素：div h1-h6 p header footer nav......

行內元素(inline element)

特點

1.不會獨占一行，它是自左向右排列，一行排滿再換行

2.行內元素的寬和高，默認是被內容撐開的

常用行內元素：span em strong a i ......

行內塊元素

特點

1.兼具塊元素和行內元素特點

2.不會獨占一行，可自定義寬高

注意：

1.塊元素里什么都能放，可以是塊元素，行內元素，行內塊元素

2.行內元素里一般只放行內元素，如：文字，不能放塊元素

3.特殊的塊元素p標簽它里面一般只放文字或者圖片，不能放塊元素

4.特殊的行內元素a標簽，它里面什么都能放，可以塊元素，行內元素，行內塊元素，除了a標簽它自己不能放進去。

相關html學習網站

1、【菜鳥教程】>>>>>點此開始學習html

2、【w3cschool】>>>>>點此開始學習html

ps：本文部分轉自：https://blog.csdn.net/rbh200812/article/details/125996971，版權歸原作者所有！

以上就是菜鳥html教程-html常用標簽大全的全部內容了，了解更多教程請持續關注173軟件站!