1、標題標簽
（1）概念
為了使網頁更具有語意化，我們經常會在網頁中用到標題標簽，一共分為6個等級，h1~h6，h是單詞head的縮寫，意為頭部、標題，根據重要性依次遞減
（2）代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h1>我是一級標題</h1> <h2>我是二級標題，</h2> <h3>我是三級標題</h3> <h4>我是四級標題</h4> <h5>我是五級標題</h5> <h6>我是六級標題</h6> </body> </html>
（3）測驗
可以看出，根據等級的不同，文字的粗細、大小、重要性也隨之改變
2、段落標簽
（1）概念
在網頁中要把文字有條理的顯示出來，需要將這些文字分段顯示，<p>標簽是單詞段落的縮寫，可以把文字分為若干個段落
（2）代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <p>小草偷偷地從土里鉆出來，嫩嫩的，綠綠的，園子里，田野里，瞧去，一大片一大片滿是的，坐著，躺著，打兩個滾，踢幾腳球，賽幾趟跑，捉幾回迷藏，風輕悄悄的,草軟綿綿的，</p> <p>桃樹、杏樹、梨樹，你不讓我，我不讓你，都開滿了花趕趟兒，紅的像火，粉的像霞，白的像雪，花里帶著甜味兒；閉了眼，樹上仿佛已經滿是桃兒、杏兒、梨兒，花下成千成百的蜜蜂嗡嗡地鬧著，大小的 蝴蝶飛來飛去，野花遍地是：雜樣兒，有名字的，沒名字的，散在草叢里，像眼睛，像星星，還眨呀眨的，</p> </body> </html>
（3）測驗
如果不添加分段標簽，所有的文字都會在一個段落顯示，添加標簽以后，文字的顯示更加有條理了，文字在一個段落中會根據瀏覽器視窗的大小自動換行，并且段落和段落之間會保留有空隙
3、換行標簽
（1）概念
一個段落中的文字會從左到右依次排列，直到瀏覽器視窗的右端才會自動換行，如果我們希望在中間換行，就要用到強制換行標簽，是單詞break的縮寫，意為：打斷、換行，
（2）代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <p> 床前明月光，<br/> 疑是地上霜，<br/> 舉頭望明月，<br/> 低頭思故鄉，</p> </body> </html>
（3）測驗
4、文本格式化標簽
（1）概念
文本格式化標簽主要是為文字設定粗體、斜體或下劃線等效果
（2）代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <p> <strong>床前明月光，</strong><br/> <em>疑是地上霜，</em> <br/> <del>舉頭望明月，</del><br/> <ins>低頭思故鄉，</ins></p> </body> </html>
（3）測驗
5、div和span
（1）概念
<div>標簽和<span>標簽都是用來布局的，一行只能放一個div，但是可以放多個span
（2）代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div>床前明月光，</div>123 <div>疑是地上霜，</div>456<br> <span>舉頭望明月，</span> <span>低頭思故鄉，</span> </body> </html>
（3）測驗
6、影像標簽
（1）代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <img src="img/1.jpg" title="小花"/><br /> <img src="img/2.jpg" alt="我是小花花"/> </body> </html>
（2）測驗
title屬性： 當滑鼠放到圖片上放的時候，會有文字提示
alt屬性：當圖片不存在的時候，會有文字提示，顯示屬性的文字資訊
（3）影像的大小、邊框
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <img src="img/1.jpg" title="小花" width="500px" height="300px" border="3px"/><br /> </body> </html>
測驗：
影像標簽可以有多個屬性，屬性之間不分先后順序，但是必須以空格分離，屬性必須寫在標簽的后面
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/36801.html
標籤：Html/Css
上一篇：循序漸進VUE+Element 前端應用開發(2）--- Vuex中的API、Store和View的使用
下一篇：ECharts介紹