1基本結構
<!DOCTYPE html>
<html><head><title>this is a good website</title></head><body><h1>hello!</h1></body>
</html>運行效果如下
（編輯器提示waings:"缺少所需的 'lang' 特性"是因為沒有指定語言，以簡體中文為例，把<html>改成<html lang="zh-CN">即可）
字符編碼：<meta charset="UFT-8">
雙標簽：有開始標簽和結束標簽，內容寫在開始標簽和結束標簽之間
單標簽：只有開始標簽沒有結束標簽
屬性：格式：<標簽名 屬性名1=“屬性值1” 屬性名2=“屬性值2”...>
? ? ? ? ? ?屬性定義在開始標簽或者單標簽之中，通過屬性設置標簽效果
<!DOCTYPE html><!--文檔聲明 --><html><!--根標簽 -->內容
</html><head>，<!--頭部標簽，放在<html>..</html>中 -->內容
</head><body><!--主體標簽，在<html>..</html>之中 -->內容
</body><title>你的網頁的名字</title><!--網頁標題,放在<head>..</head>之中 --><h1></h1> ... <h6></h6> <!-- 標題（h1最大，h6最小） -->
<p></p> <!-- 段落 -->
<strong></strong> <!-- 加粗（語義化強調） -->
<em></em> <!-- 斜體（語義化強調） -->
<span></span> <!-- 行內容器（無默認樣式） -->
<a href="URL" target="_blank">....</a> <!-- 創建超鏈接，href指定連接目標地址，target設置鏈接打開方式，_blank表示在新窗口打開，_self表示在當前窗口打開 -->
<div></div> <!-- 塊級容器 -->
<audio></audio> <!-- 音頻 -->
<video></video> <!-- 視頻 --><img src="image.jpg" width="160" height="160" alt="描述"> <!-- 插入圖片，src指定路徑，alt為圖像添加替代文本 -->
<br> <!-- 換行 -->
<hr> <!-- 水平分割線 -->
<input type="text"> <!-- 輸入框（類型可選：text/password/checkbox等） -->
<meta charset="UTF-8"> <!-- 文檔元數據（如字符編碼） -->
<link rel="stylesheet" href="style.css"> <!-- 引入CSS --><!--一些通用的屬性
屬性 作用 示例
id 唯一標識 <div id="header">
class 類名 （CSS/JS 鉤子） <p class="text-red">
style 內聯樣式 <span style="color: red;">
title 懸停提示文本 <a title="點擊查看">
data-* 自定義數據屬性 <div data-user-id="123">
hidden 隱藏元素 <p hidden>隱藏內容</p>
-->2頁面美化
方法1：在<head>中添加<style>標簽，統一管理樣式
方法2：編寫css文件，把樣式單獨存為.css文件，然后在html中引入
color: #333; /* 文字顏色（十六進制/RGB/顏色名） */
font-family: "Arial", sans-serif; /* 字體棧（優先使用Arial，無則用系統無襯線字體） */
font-size: 16px; /* 字體大小（px/rem/em） */
font-weight: bold; /* 字重（normal/bold/100-900） */
text-align: center; /* 對齊（left/center/right/justify） */
line-height: 1.5; /* 行高（無單位表示字體倍率） */
text-decoration: none; /* 去除鏈接下劃線 */background-color: #f8f8f8; /* 背景顏色 */
background-image: url("bg.jpg"); /* 背景圖片 */
background-size: cover; /* 背景圖覆蓋方式（cover/contain） */
border: 1px solid #ddd; /* 邊框（粗細 樣式 顏色） */
border-radius: 8px; /* 圓角（可單獨設置top-left等） */
box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 盒子陰影（X偏移 Y偏移 模糊 顏色） */width: 100%; /* 寬度（%/px/vw等） */
height: 200px; /* 高度 */
padding: 10px 20px; /* 內邊距（上右下左/縮寫） */
margin: 0 auto; /* 外邊距（auto可居中塊級元素） */
box-sizing: border-box; /* 盒模型計算方式（推薦） */卡片效果
.card {background: white;border-radius: 10px;box-shadow: 0 3px 10px rgba(0,0,0,0.1);padding: 20px;transition: transform 0.3s;
}
.card:hover {transform: translateY(-5px); /* 懸停上浮 */
}按鈕
.btn {display: inline-block;background: #3498db;color: white;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;
}
.btn:hover {background: #2980b9;
}導航欄
.navbar {display: flex;justify-content: space-between;background: #2c3e50;padding: 15px;
}
.nav-link {color: white;text-decoration: none;margin: 0 10px;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head><style>body{color:black;background-color:pink;font-weight: bold;text-align:center;}.card{background:white;width:40%;margin:auto;border-radius:8px;box-shadow:0 3px 10px rgba(0,0,0,0.1);padding:20px;transition: transform 0.3s;}.card:hover{transform:translateY(-5px);}.btn {display: inline-block;background: #3498db;color: white;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;}.btn:hover {background: #2980b9;}.button-group-h {justify-content: center;display: flex;gap:88px;}</style><title>this is a good website</title>
</head><body><h1>hello!</h1><h1>歡迎使用本網頁！</h1><div class="card"><div class="button-group-h"><button class="btn">登錄</button><button class="btn">注冊</button></div></div></body>
</html>
運行結果
