菜鳥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>
標題標簽的默認樣式是自動加粗的;字體大小一級標題最大，六級最小;標題與標題之間有較大的間距 獨占一行。
標題標簽代表著一個標題，一級標題的語義最重，六級標題的語義最輕。
標題標簽是塊元素。
標題標簽的作用是幫助推廣部門進行推廣優(yōu)化的，其重要性僅次于title標簽。一般而言一個頁面只有一個h1標簽。
二、第二種：段落標簽 p
<p>段落標簽</p>
段落標簽的默認樣式是行與行之間有較大間距并獨占一行。它代表著一個自然段。
段落標簽也是塊元素。
三、第三種：hgroup標簽
<hgroup> <h1>登高</h1> <h2>杜甫</h2> </hgroup>
hgroup標簽主要作用是用來為標題分組，可以將一組相關(guān)的標題放到hgroup里面。
四、第四種：強調(diào)標簽 em strong
你們真<em>帥</em> 你們真<strong>帥</strong>
em和strong標簽都表示強調(diào)，但是它們還是有一定的差別的
1、第一em標簽的樣式是斜體，而strong標簽的樣式是加粗
2、第二em標簽是強調(diào)語義的，而strong標簽是強調(diào)內(nèi)容的
em標簽和strong標簽都是行內(nèi)元素。
五、第五種：引用標簽 q blockquote
老子曰 <blockquote>孔子說的不對</blockquote> 孔子曰 <q>老子才不對</q><br>
q標簽和blockquote標簽都是引用，不同的是q標簽是短引，用而blockquote標簽是長引用會換行的。
六、第六種：換行標簽 br
點點關(guān)注<br> 謝謝你們<br> 薩瓦迪卡<br> 外比八不<br>
br標簽的作用是，強制換行，它是一個自結(jié)束標簽。
七、第七種：hr標簽
<hr>
hr標簽就是給頁面加一個分割線。
八、第八種：del標簽
原價 <del>19999</del> 現(xiàn)價 999
這個del標簽就是刪除標簽，就很常見了，什么不要998，不要997現(xiàn)價只有99!等等的廣告，還有淘寶上啊、京東上啊，都有這個標簽的存在。
九、第九種：center標簽
<center> <hgroup> <h1>登高</h1> <h2>杜甫</h2> </hgroup></center>
center標簽的作用就是劇中，把文字啊圖片啊啥的全部居中到頁面中間，這可以讓頁面更美觀。
十、第十種：div標簽
<div> 用來布局 </div>
div標簽是用來布局的，并沒有語義，只是一個區(qū)塊。
div標簽是塊元素
十一、第十一種：span標簽
<span> 包裹文字 </span>
span標簽，沒有語義，一般用來包裹文字,讓文字更好被選中。
常用的布局標簽
header 網(wǎng)頁的頭部
main 網(wǎng)頁的主體部分(一般只有一個)
footer 網(wǎng)頁的底部
nav 網(wǎng)頁的導航
aside 和主題相關(guān)的內(nèi)容
article 文章之類的
section 獨立的塊區(qū)，上面的標簽都不合適，就用這個
div 塊元素
常用的圖片標簽
一般來說我們都是使用img標簽來引入圖片，img標簽有四個屬性
1.src屬性 引入圖片路徑 通過./或者../開頭
./ 若引用的圖片在同一個目錄下
../ 若引用圖片不在同一個目錄(../到上一級目錄，可疊加../../)
2.alt屬性 對圖片的描述，對圖片引用不成功的時候顯示文字
也會幫助瀏覽器做一些收錄功能
3. width屬性 設(shè)置圖片的寬度
屬性值里直接寫數(shù)值或者帶單位
4.height屬性 設(shè)置圖片的高度
屬性值里直接寫數(shù)值或者帶單位
注意：一般情況 width和height只設(shè)置一個，另一個讓瀏覽器按比例縮放。
行內(nèi)元素和塊元素
想必大家都看到文章中有很多行內(nèi)元素和塊元素被標記出來了吧，是不是不太清楚是什么，沒關(guān)系現(xiàn)在我就來給大家說一說
塊元素(block element) 常用來布局
特點：
1.塊元素會獨占一行,從上往下依次排列
2.塊元素的寬度是父元素的100%(body是父元素，頁面邊小隨之變小)
3.塊元素的高度默認是被內(nèi)容撐開的
常用塊元素：div h1-h6 p header footer nav......
行內(nèi)元素(inline element)
特點
1.不會獨占一行，它是自左向右排列，一行排滿再換行
2.行內(nèi)元素的寬和高，默認是被內(nèi)容撐開的
常用行內(nèi)元素：span em strong a i ......
行內(nèi)塊元素
特點
1.兼具塊元素和行內(nèi)元素特點
2.不會獨占一行，可自定義寬高
注意：
1.塊元素里什么都能放，可以是塊元素，行內(nèi)元素，行內(nèi)塊元素
2.行內(nèi)元素里一般只放行內(nèi)元素，如：文字，不能放塊元素
3.特殊的塊元素p標簽它里面一般只放文字或者圖片，不能放塊元素
4.特殊的行內(nèi)元素a標簽，它里面什么都能放，可以塊元素，行內(nèi)元素，行內(nèi)塊元素，除了a標簽它自己不能放進去。
相關(guān)html學習網(wǎng)站
1、【菜鳥教程】>>>>>點此開始學習html
2、【w3cschool】>>>>>點此開始學習html
ps：本文部分轉(zhuǎn)自：https://blog.csdn.net/rbh200812/article/details/125996971，版權(quán)歸原作者所有！
以上就是菜鳥html教程-html常用標簽大全的全部內(nèi)容了，了解更多教程請持續(xù)關(guān)注173軟件站!
