html中的各種標籤:標題標籤(h1~h6)、段落標籤(p)、標題標籤與段落標籤的嵌套、超鏈接(href、title、target)的使用與實踐

Ⅰ、html中的各種標籤的含義及解釋
1、html中的標題顯示:
h1~h6是給文本賦以標題含義(展示效果):
①、代碼已親測,可直接摘用;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>123</title>
</head>
<body>
    <h1>一級標題</h1>
    <h2>二級標題</h2>
    <h3>三級標題</h3>
    <h4>四級標題</h4>
    <h5>五級標題</h5>
    <h6>六級標題</h6>
</body>
</html>

②、展示結果:
會發現其標題爲123,展示結果爲從h1到h6的不同的標題結果;;
在這裏插入圖片描述
2、段落標籤的使用:p
①、代碼已親測,可直接摘用;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>123</title>
</head>
<body>
    <h1>一級標題</h1>
    <h2>二級標題</h2>
    <h3>三級標題</h3>
    <h4>四級標題</h4>
    <h5>五級標題</h5>
    <h6>六級標題</h6>
    <p>從今天起我要好好學習2020年3月27日10:08:32</p>
    <p>爲中華而崛起而讀書</p>
</body>
</html>

②、展示結果:
p來開頭代表着另起一段,其結果如下圖所示:
在這裏插入圖片描述
3、標題可以套p標籤(使p標籤裏的文字標題化,可以加粗加黑),而p標籤不可套p;
①、代碼已親測,可直接摘用;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>123</title>
</head>
<body>
    <h1>一級標題</h1>
    <h2>二級標題</h2>
    <h3>三級標題</h3>
    <h4>四級標題</h4>
    <h5>五級標題</h5>
    <h6>六級標題</h6>
    <h1><p>爲中華而崛起而讀書</p></h1>
</body>
</html>

②、展示結果:
可以看出p內的文字使得和h1的字體類型相同;
在這裏插入圖片描述
4、超鏈接的使用規則:
A、href的使用:表示鏈接跳轉地址 可以是網址也可以是本地資源文件地址;
①、代碼已親測,可直接摘用;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>123</title>
</head>
<body>
    <h1>一級標題</h1>
    <h2>二級標題</h2>
    <h3>三級標題</h3>
    <h4>四級標題</h4>
    <h5>五級標題</h5>
    <h6>六級標題</h6>
    <p><h1>爲中華而崛起而讀書</h1></p>
    <a href="http://www.baidu.com">百度一下</a>
</body>
</html>

②、展示結果:
點擊鏈接之前與之後的對比如下;
a、點擊之前會發現,其標題爲123,結果如下:
在這裏插入圖片描述
b、點擊之後會發現直接跳轉到了百度的界面,其標題爲百度一下,內容如下所示,已經完全變成了一個百度的界面;
在這裏插入圖片描述
B、超鏈接中title的作用:爲懸停文本(即當鼠標凡在上面時,其將顯示出來titile中所賦予的值)
①、代碼已親測,可直接摘用;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>123</title>
</head>
<body>
    <h1>一級標題</h1>
    <h2>二級標題</h2>
    <h3>三級標題</h3>
    <h4>四級標題</h4>
    <h5>五級標題</h5>
    <h6>六級標題</h6>
    <p><h1>爲中華而崛起而讀書</h1></p>
    <a href="http://www.baidu.com" title="點我搜索">百度一下</a>
</body>
</html>

②、展示結果:
當將鼠標放在“百度一下”時,其懸停文本將會顯示爲:點我搜索;
在這裏插入圖片描述
C、超鏈接中的target的用法:作用是打開新的一個頁面來打開超鏈接的地址;當target的值爲_blank時,則代表着新打開一個頁面;l
①、代碼已親測,可直接摘用;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>123</title>
</head>
<body>
    <h1>一級標題</h1>
    <h2>二級標題</h2>
    <h3>三級標題</h3>
    <h4>四級標題</h4>
    <h5>五級標題</h5>
    <h6>六級標題</h6>
    <p><h1>爲中華而崛起而讀書</h1></p>
    <a href="http://www.baidu.com" title="點我搜索" target="_blank">百度一下</a>
</body>
</html>

②、展示結果:
從圖片可以看出來,當打開文本中的“百度一下”之後,會再打開另一個頁面而原來的頁面保持不變(title裏的123);
在這裏插入圖片描述
☺寄語:
Ⅰ、此程序在Visual Studio上運行的;
Ⅱ、如果我給的程序有問題,或在敘述方面有問題,或者看不懂我講解的意思,請及時指出或留言和我討論,謝謝各位大佬!!!
Ⅲ、本程序是簡單的介紹以及不同的標籤之間的實現,請大家多多指教!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章