Web前端基礎 ——【01】HTML和HTML5 ①


一、瀏覽器介紹

1.1 認識網頁

1.2 常見瀏覽器

1.3 瀏覽器內核

①IE內核:Trident
[外鏈圖片轉存中...(img-VIc3110751649.png#pic_center)
②Firefox內核:Gecko
在這裏插入圖片描述
③Safari內核:Webkit
在這裏插入圖片描述
④Chrome內核:Webkit→Blink
在這裏插入圖片描述
⑤Opera內核:Presto→Blink
在這裏插入圖片描述
Notes:移動端瀏覽器內核
在這裏插入圖片描述

1.4 web標準

在這裏插入圖片描述
在這裏插入圖片描述



二、HTML基本結構

2.1 HTML初識

HTML:Hyper Text Markup Language
在這裏插入圖片描述

2.2 HTML骨架格式

HTML語法格式

<!DOCTYPE html>
<html lang=“en”>   <!-- 根標籤 -->
	<head>   <!-- 頭部標籤 -->
		<meta charset=“UTF-8”>
		<title></title>  <!-- 標題標籤 -->
	</head>
	<body>  <!-- 主體標籤 -->	
	</body>
</html>


三、HTML常用標籤☆☆☆

3.1 快速生成html骨架(vscode爲例)

在這裏插入圖片描述
①html:5
在這裏插入圖片描述
②!
在這裏插入圖片描述
在這裏插入圖片描述

3.2 文檔類型DOCTYPE

<!DOCTYPE html>

在這裏插入圖片描述

3.3 字符集charset

<meta charset="UTF-8">

在這裏插入圖片描述

3.4 排版標籤

在這裏插入圖片描述

3.4.1 標題標籤

<h1> </h1>
單詞縮寫:head 頭部、標題
在這裏插入圖片描述

3.4.2 段落標籤

<p> </p>
在這裏插入圖片描述

3.4.3 水平線標籤

<hr />
在這裏插入圖片描述

3.4.4 換行標籤

<br />
在這裏插入圖片描述

3.4.5 div span標籤

在這裏插入圖片描述

3.5 文本格式化標籤

在這裏插入圖片描述

3.6 標籤屬性

在這裏插入圖片描述
在這裏插入圖片描述

3.7 圖像標籤

<img src="test01.jpg" alt="圖片顯示不出來" title="我是一隻圖片" width="300" border="5">

在這裏插入圖片描述
在這裏插入圖片描述

3.8 鏈接標籤

<a href="#" target="_blank">超鏈接</a>

在這裏插入圖片描述

3.9 錨點定位

 <a href=“#life”>個人生活</a>
<h3 id=“life”>個人生活</h3>

在這裏插入圖片描述

3.10 base標籤

在這裏插入圖片描述

<head>
    <base target="_blank">
</head>

3.11 特殊字符標籤

在這裏插入圖片描述

3.12 註釋標籤

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