HTML固定基本結構 · 教案-標準教案-開發類預科(v1)

## HTML固定基本結構 [TOC] ### HTML固定基本結構網頁的固定基本結構包括以下標簽，標簽之間可以嵌套存在。 HTML 頁面的結構包括頭部 head 和主體 body 兩大部分：頭部描述瀏覽器所需的信息；主題包含網頁中的具體內容。所以，我們所見到的網頁內容，都是寫在主體\(body\)中的。 `<html>`------- 根控制標記 `<head> `------- 頭控制標記 `<title>` ------- 標題標記 `<head>`-------頭控制標記（尾） `<body>` ------- 網頁顯示區域 </body> `<html>` ------- 根控制標記 \( 尾 \) 在上一節我們寫的網頁中，并不符合網頁的固定基本結構，現在來修改一下。 ```html <html> <head> <title> 南通青鳥歡迎你！ </title> </head> <body> <h1>這是我的第一節HTML課</h1> <p>這是我的課堂筆記</p> <a href="http://www.ntqingniao.com">南通青鳥歡迎您</a> </body> </html> ``` 現在的網頁就更加完整和規范了！ ### HTML頭部 * 文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題等。 * 絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。 * 可以添加在頭部區域的元素標簽為: `<title>`,`<style>`,`<meta>`,`<script>`,`<noscript>`,`<base>`。 1. `<title>`標簽：在`<title>`和`</title>`標簽之間的文字內容是網頁的標題信息，它會出現在瀏覽器的標題欄中。 2. `<link>` 標簽定義文檔與外部資源的關系，最常見的用途是鏈接樣式表。 ```html <link rel="stylesheet" type="text/css" href="style.css"> ``` 3. `<meta>` 標簽提供了 HTML 文檔的元數據。元數據不會顯示在客戶端，但是會被瀏覽器解析。META元素通常用于指定網頁的描述，關鍵詞，文件的最后修改時間，作者及其他元數據。元數據可以被使用瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他 Web 服務調用。 4. `<script>` 標簽用于定義客戶端腳本，比如 JavaScript。`<script> `元素既可包含腳本語句，也可以通過`src`屬性指向外部腳本文件。JavaScript 通常用于圖像操作、表單驗證以及動態內容更改。 ```html <script> document.write("Hello World!") </script> ``` 5. `<style>` 標簽定義 HTML 文檔的樣式信息。在 `<style>` 元素中，您可以規定在瀏覽器中如何呈現 HTML 文檔。每個 HTML 文檔能包含多個 `<style>` 標簽。 ## 作業 * 制作一個CODING COFFEE咖啡館的首頁，需要展示一張首頁大圖，以及咖啡館的一些介紹。