HTML基礎,及基礎標籤

阿新 • • 發佈：2021-07-20

HTML基礎,及基礎標籤
1.什麼是HTML
2.HTML基本語法
3.標籤分類
4.標籤屬性
5.常用標籤

HTML基礎,及基礎標籤

1.什麼是HTML

HTML 指的是超文字標記語言 (HyperText Markup Language)。

超文字: 文字（文字）網頁上顯示的內容（圖片，超連結，視訊，音訊.....）。

標記: 標籤；標記資訊。
HTML可以用來開發工具。
使用開發工具HbuilderX
來建立一個基本專案
js,css,img,index.html。

2.HTML基本語法

<!DOCTYPE html>
<!--宣告html語言版本 是html5  告訴瀏覽器-->
<!-- html是網頁檔案的根，所有內容都必須寫在html中 -->
<html>
<!-- 頭標籤 -->
	<head>
        <!-- 設定當前網頁字符集 -->
		<meta charset="utf-8" />
        <!-- title 定義網頁標題 -->
    	<title>百度一下，你就知道</title>
        <!-- 匯入標題處圖示 -->
		<link href="img/baidu.ico" rel="icon" />
	</head>
	<body>
	內容區
	</body>
	</html>

可以使用

<!---->

來進行註釋,在HbuilderX中也可以使用Ctrl鍵＋shift鍵+/鍵對選中的欄位進行註釋。

3.標籤分類

閉合標籤:開始標籤內容結束 (雙標籤);
自閉和標籤:標籤名在內部結束完成某個特定功能不修飾別的內容 (單標籤)。

4.標籤屬性

標籤可以擁有屬性，屬性進一步說明了該標籤的顯示或使用的特性；
例如：

<body text="red" bgcolor="green">

語法:
屬性名="屬性值"；
一個標籤可以擁有多個屬性；
屬性必須寫在開始標籤中。

5.常用標籤

(1)標題標籤

<h1>一級標題</h1>
<h1>二級標題</h1>
<h1>三級標題</h1>
<h1>四級標題</h1>
<h1>五級標題</h1>
<h1>六級標題</h1>

標題標籤會獨佔一行。

(2)段落標籤

<p> 寫入段落內容</p>

段落標籤會獨佔一行；段落與段落之間有間隔。

(3)換行標籤

<br/>

可以插入一個簡單的換行符號。

(4)列表標籤

有序列表 ol li

<ol>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ol>

無序列表 ul li

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

在開發工具HbuilderX中可使用快捷鍵生成。
ul（或者ol）>li*行數 +tab鍵可快速得出

type=""改變列表項 type屬性： circle,disc,square

(5)超連結

HTML 使用超級連結與網路上的另一個文件相連，通俗的說就是通過連線來訪問其他網頁資源。

  <a href="" target=""></a>

target: _self(預設) 在當前視窗開啟新文件
:_blank 在新視窗開啟新文件
: #錨點名稱
定義錨點
&lt a name="" &gt $lt /a &gt name屬性值可以自定義

(6)影象標籤

img標籤

border 邊框
src="圖片地址"
width 寬
height 高
title 滑鼠移動到標籤上提示資訊
alt="圖片不能正常顯示時提示資訊"（網速卡頓，圖片無法加載出來，顯示的文字提示）
例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>騰訊網</title><!--導航欄標題-->
		<link href="img/5.png" rel="icon"> <!--導航欄圖示-->
	</head>
	<body>
		<img src="img/qq_logo.png" border="10" width="100" height="100" title="騰訊網址" alt="無法顯示">
		
	</body>
</html>