第二章HTML5基礎

一天進步一點發表於2020-10-01
HTML

2.2.1標記與元素
1.,,等都是標記
起始標記記為<…>,結束標記記為</…>

2.標記分為普通標記和空標記
（1）普通標記：成對出現，包含起始標記和結束標記
基本語法：控制的文字內容
起始標記告訴瀏覽器開始開始執行此標記的功能，結束標記告訴瀏覽器結束執行此標記。
注意：
標記可以成對巢狀但是不能交叉巢狀。
比如對於,,

來說
可以成對巢狀,這是正確的。 孫燕姿唱歌真好聽 不能交叉巢狀，這是錯誤的。 孫燕姿唱歌真好聽 (2)空標記，這種標記不想上面的一樣成對出現，它們單獨出現。 基本語法： 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<hr/>
</body>
</html>

2.2.2HTML屬性
屬性：與標記相關的特性描述稱為屬性。此外還要為屬性賦值。
1.超連結標記：…，href是它的屬性，要為href賦值，賦的值是連結。

<a href = "https://mail.qq.com/">QQ郵箱</a>

2.空標記也可以加一些屬性。就是一個空標記，src,width,height是它的屬性。

<img src = "img\Stefanie Sun.jpg" width = 200 height = 100 />

<img src = "img\Stefanie Sun.jpg" width = 200 height = 100 />

所以總結以下它的基本語法：
對於普通標記：<標記名 屬性1 = “” 屬性2 = “” …>控制的文字內容</標記名>
對於空標記：<標記名 屬性1 = “” 屬性2 = “” … />
注意：屬性放在起始標記的尖括號中(中)，控制的文字內容放在起始標記和結束標記之間。
屬性之間沒有先後順序。

2.3HTML5文件的結構

2.3.1HTML5文件的基本結構

1.HTML5文件的基本結構如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
...
</body>
</html>

2.（1）HTML文件分為文件頭和文件體。
（2）和之間存放頭部資訊，用來說明網頁的基本情況。
（3）和之間存主體資訊，用來描述網頁的正文部分。

2.3.2網頁標題

<title>中國傳統文化</title>

2.3.3定義後設資料meta
1.meta後設資料是什麼：後設資料定義在文件的head部分,用來描述HTML文件的資訊。這些資訊通常包括對網頁的描述，網頁中的關鍵詞等。
meta定義的資料不會顯示在網頁上，只在源程式中顯示。
2.一些經常使用的後設資料
（1）定義網頁的字符集

<meta charset="UTF-8">

（2）定義搜尋引擎關鍵字

<meta name = "keywords" content = "孫燕姿"/>

（3）對網頁的描述

<meta name = "description" content = "我遇見誰，會有怎樣的對白。"/>

(4)頁面的最新版本，將屬性值設定為revised，屬性值寫版本資訊

<meta name = "revised" content = "九歲阿,2020/10/01"/>

(5)將屬性http-equiv屬性的值修改為refresh，content設定秒數，就可以是頁面在幾秒內重新整理一次

<meta http-equiv = "refresh" content = "5"/>

3.後設資料的綜合應用
設定字符集是UTF-8，頁面描述是“張旭簡介”，頁面關鍵詞是“張旭，草聖，古詩”，10秒重新整理一次。程式碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name = "description" content = "張旭簡介">
<meta name = "keywords" content="張旭，草聖，古詩"/>
<meta http-equiv="refresh" content = "10"/>
<title>後設資料</title>
</head>
<body>

</body>
</html>

2.3.4HTML5新增的結構標記
1.header標記定義文件的頁首
2.footer定義文件的或章節的頁尾
3.nva標記定義導航連結的部分
4.section用於分組與主題相關的內容，例如一本書中的各章，通常可以作為資料庫的一部分。
4.綜合應用，程式碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新增結構標記</title>
</head>
<body>

<header>
這裡是頁首部分
</header>

<nav>
<a href = "https://weixin.qq.com/">微信</a>
<a href = "https://mail.qq.com/">QQ郵箱</a>
<a href = "https://www.foxmail.com/">Foxmail</a>
</nav>

<p>網頁的其它部分內容</p>

<footer>
這裡是頁尾部分
</footer>

</body>
</html>

2.4綜合案例——基本的HTML5網頁

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name = "description" content = "關於HTML5"/>
<meta name = "keywords" content = "HTML5,CSS,網頁設計"/>
<title>基本的html網頁</title>
</head>
<body>

<header>
HTML5特性
</header>

<nav>
<a href = "https://weixin.qq.com/">微信</a>
<a href = "https://mail.qq.com/">QQ郵箱</a>
<a href = "https://www.foxmail.com/">Foxmail</a>
<a href = "https://www.tencent.com/zh-cn">騰訊</a>
</nav>

<section>
<p>正文部分的內容1</p>
<p>正文部分的內容2</p>
<p>正文部分的內容3</p>
<p>正文部分的內容4</p>
<p>正文部分的內容5</p>
</section>


<footer>
聯絡方式：175xxxxx42@qq.com
</footer>
</body>
</html>

相關文章