目錄
HTML5
HTML5介紹
HTML5的DOCTYPE聲明
HTML5基本骨架
html標簽
head標簽
body標簽
title標簽
meta標簽
在vscode中寫出第一個小框架
HTML5
HTML5介紹
HTML5是用來描述網頁的一種語言，被稱為超文本標記語言。用HTML5編寫的文件，后綴以.html結尾
HTML是一種標記語言，標記語言是一套標記標簽。標簽是由尖括號包圍的關鍵字，例如：<html>
標簽有兩種表現形式：
- 雙標簽，例如：
<html></html> - 單標簽，例如：
<img>
HTML5的DOCTYPE聲明
DOCTYPE是document type?(文檔類型) 的縮寫。<!DOCTYPE html >是H5的聲明位于文檔的最前面，處于標簽之前。?他是網頁必備的組成部分，避免瀏覽器的怪異模式。
<!DOCTYPE html>
HTML5基本骨架
html標簽
定義 HTML 文檔，這個元素我們瀏覽器看到后就明白這是個HTML文檔了，所以你的其它元素要包裹在它里面，標簽限定了文檔的開始點和結束點。
<!DOCTYPE html>
<html>
</html>
head標簽
head標簽用于定義文檔的頭部。文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題、在 Web 中的位置以及和其他文檔的關系等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。
<!DOCTYPE html>
<html><head></head>
</html>
body標簽
body 元素定義文檔的主體。
body 元素包含文檔的所有內容（比如文本、超鏈接、圖像、表格和列表等等。）
它會直接在頁面中顯示出來，也就是用戶可以直觀看到的內容
<!DOCTYPE html>
<html><head></head><body>我會顯示在瀏覽器中</body>
</html>
title標簽
- 可定義文檔的標題。
- 它顯示在瀏覽器窗口的標題欄或狀態欄上。
<title>?標簽是?<head>?標簽中唯一必須要求包含的東西，就是說寫head一定要寫title<title>的增加有利于SEO優化
SEO是搜索引擎優化的英文縮寫。通過對網站內容調整，滿足搜索引擎的排名需求
<!DOCTYPE html>
<html><head><title>第一個頁面</title></head><body>我會顯示在瀏覽器中</body>
</html>
meta標簽
meta標簽用來描述一個HTML網頁文檔的屬性，關鍵詞等，例如：charset="utf-8"是說當前使用的是utf-8編碼格式，在開發中我們經常會看到utf-8，或是gbk，這些都是編碼格式，通常使用utf-8。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>itbaizhan</title></head><body></body>
</html>
在vscode中寫出第一個小框架
其實在vscode中框架不需要編寫，只需要打出HTML就會自動生成一個基本的框架。
先創建一個html文件，后綴為.html
然后就會出現：
?在body中輸入的內容可以直接在網頁中顯示出來。
更詳細的框架
<!DOCTYPE html> <!-- 文檔類型聲明，指定使用HTML5 -->
<html>
<head><meta charset="UTF-8"> <!-- 設置字符編碼為UTF-8，支持多語言字符 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 適應移動設備的視口設置 --><title>My Basic HTML5 Framework</title> <!-- 網頁標題 --><link rel="stylesheet" href="styles.css"> <!-- 連接外部樣式表 --><script src="scripts.js" defer></script> <!-- 連接外部JavaScript文件，并延遲執行 -->
</head>
<body><header><h1>Welcome to My Website</h1><nav><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Services</a></li><li><a href="#">Contact</a></li></ul></nav></header><main><section><h2>About Us</h2><p>We are a passionate team...</p></section><section><h2>Our Services</h2><ul><li>Web Design</li><li>Graphic Design</li><li>Development</li></ul></section></main><footer><p>© 2023 My Company. All rights reserved.</p></footer>
</body>
</html>
-
<!DOCTYPE html>：這是文檔類型聲明，指定了你在使用HTML5。 -
<meta>標簽：用于設置字符編碼和視口設置，確保網頁在不同設備上顯示正常。 -
<title>標簽：定義網頁標題，顯示在瀏覽器標簽頁上。 -
<link>和<script>標簽：用于引入外部樣式表和JavaScript文件，這樣可以將樣式和腳本與HTML內容分離，使代碼更有組織性。 -
頁面主體部分包括
<header>、<main>和<footer>：這些標簽用于組織網頁的頭部、主體內容和頁腳。 -
在主體中的
<header>包含網頁標題和導航菜單。 -
<main>標簽用于包含網頁的主要內容，其中有兩個<section>標簽，每個標簽包含一個標題和內容。 -
在頁腳部分的
<footer>標簽中，顯示版權信息。
在接下來的學習中，我們也將會以這個為模板對各個部分刨析學習。
