HTML經常使用標籤(上)

時間 2020-08-05

標籤 html 經常使用標籤欄目 HTML 简体版

原文原文鏈接

HTML經常使用標籤

1. web標準

1.1 web標準的構成

主要包括結構、表現和行爲三個方面。html

標準	說明
結構	用於對網頁元素進行整理和分類（HTML）
表現	用於設置網頁元素的外觀樣式（CSS）
行爲	網頁模型的定義及交互的編寫（JavaScript）

若是將web標準比喻爲一隻鳥，則web

結構=身體
表現=羽毛
行爲=動做（飛行、站立等）

1.2 標籤關係

雙標籤關係分爲：瀏覽器

包含關係（父子）
並列關係（兄弟）

(1)包含關係

<!--head標籤包含title標籤-->
<head>
    <title></title>
</head>

(2)並列關係

<!--head標籤與body標籤並列-->
<head></head>
<body></body>

2. HTML基本結構

標籤名	定義
<html></html>	html標籤
<head></head>	文檔的頭部
<title></title>	文檔的標題
<body></body>	文檔的主體

<!DOCTYPE html>   <!--文檔類型聲明標籤-->  
<html lang="en">    <!--en:英語，zh-CN:中文-->
    
    <head>
        <!--字符集，UTF-8爲萬國碼，統一使用-->
        <meta charset="UTF-8">
        <title></title>
    </head>
    
    <body>
        
    </body>
    
</html>

3. HTML經常使用標籤

3.1 標題標籤

一個標題獨佔一行。（塊級元素）ide

<h1>
    一級標題（字號最大）
</h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6>
    六級標題（字號最小）
</h6>

3.2 段落標籤

用於將HTML文檔分割爲若干段落。佈局

特色：網站

文本在一個段落中會根據瀏覽器窗口的大小自動換行
段落之間有空隙

<p>
    這是一個段落
</p>

3.3 換行標籤

用於強制換行。url

特色：spa

單標籤
換行沒有像段落那樣的空隙

<br>這是換行標籤

3.4 文本格式化標籤

語義	標籤
加粗	<strong></strong>
傾斜	<em></em>
刪除線	<del></del>
下劃線	<ins></ins>

3.5 盒子標籤

用於界面佈局。code

特色：htm

div一行只能放一個（塊級元素）
span一行能夠放多個（行級元素）

<div>
    這是大盒子
</div>
<span>這是小盒子</span>

3.6 圖像標籤和路徑

(1)圖像標籤

用於定義頁面中的圖像。

<!--屬性與屬性之間用空格分開-->
<img src="圖像的url" alt="" title="">

屬性	說明
src	圖片路徑（必須屬性）
alt	圖像不能顯示時的替換文本
title	鼠標放到圖像上顯示的提示文本
width	設置圖像的寬度
height	設置圖像的高度
border	設置圖像的邊框粗細（在CSS中修改）

注：圖像的寬和高通常只修改其中一個，另外一個會隨之調整。

(2)路徑

相對路徑：文件相對於HTML頁面的位置

相對路徑分類	符號	說明
同一級		src="文件名"
下一級	/	src="同一級文件夾名稱/文件名"
上一級	../	src="../文件名"

絕對路徑：完整的路徑名稱（通常不多用）。eg. C:\\xxx\\xxxx.jpg

注意：絕對路徑用「\」分隔，相對路徑用「/」分隔。

3.7 超連接標籤和連接分類

(1)超連接標籤

<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>

屬性	做用
href	連接目標的url（必須屬性）
target	連接頁面的打方式。_self：在當前窗口打開（默認值），_blank：在新窗口打開

(2)連接分類

外部連接：例如http://www.bilibili.com
內部連接：網站內部頁面之間的相互連接，例如index.html
空連接：#
下載連接：地址裏是一個文件或壓縮包
網頁元素連接：在網頁中的各類網頁元素均可以添加超連接
錨點連接：能夠快速定位到頁面中的某個位置
- 連接：<a href="#名字"></a>
- 找到目標位置標籤，裏面添加一個id屬性，<h2 id="名字"></h2>
- 返回頂部：<a href="#"></a>