使用 HTML 骨架
骨架是生物體的支撐結構。
它通常由堅硬的物質構成,以保護身體更脆弱的部分。
Encyclopedia Britannica
每個 Web 開發人員都應該有一個 HTML 骨架。
你應該把它放在口袋裡,並在每項工作中都使用它
示例
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>頁面標題</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="">
<style>
</style>
<script src=""></script>
<body>
<img src="img_la.jpg" alt="LA" style="width:100%">
<div class="">
<h1>這是一個標題</h1>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
</div>
</body>
</html>
點選“在此處試一試”按鈕即可檢視效果!
嘗試將文字“這是一個標題”更改為“這是我的婚禮”。
您做到了嗎?
恭喜!現在你知道如何編輯 HTML 了。
HTML 骨架說明
DOCTYPE 必須存在。它告知瀏覽器這是一個 HTML 文件
<!DOCTYPE html>
html 開始標籤和 html 結束標籤定義了 HTML 文件的開始和結束。
語言是英語
<html lang="en">
</html>
meta charset 標籤定義了字元集(UTF-8)
HTML 頁面缺少 head 標籤。HTML 中不需要 head 標籤。
在 HTML 中,body 標籤之前的所有內容都被視為 head 的一部分。
<meta charset="UTF-8">
HTML 標準要求正確的頁面標題
<title>頁面標題</title>
meta viewport 標籤使頁面在所有螢幕尺寸(筆記型電腦、手機)上都能良好顯示
<meta name="viewport" content="width=device-width,initial-scale=1">
link 標籤連結到樣式表
<link rel="stylesheet" href="name">
開始標籤和結束標籤環繞未來的 CSS 樣式
<style>
</style>
script 標籤連結到指令碼
<script src="name"></script>
開始標籤和結束標籤環繞 HTML 文件的可見部分
<body>
</body>
Image 標籤定義 HTML 圖片
<img src="img_la.jpg" alt="LA" style="width:100%">
養成將 HTML 部分“打包”在 div 元素中的習慣。
準備好為每個部分指定類名
<div class="class name">
</div>
Heading 標籤定義 HTML 標題
<h1>這是一個標題</h1>
Paragraph 標籤定義 HTML 段落
<p>這是一個段落。</p>
<p>這是另一個段落。</p>