文章目錄
- 是什么？
- HTML快速入門
- VS Code開發工具
- 基礎標簽&樣式
- 新浪新聞-標題
- 標題排版
- 標題樣式
- 標題樣式-1
- 標題樣式-2
- 超鏈接
- 新浪新聞-正文
- 新浪新聞-正文排版
- 新浪新聞-頁面布局
- 表格標簽
- 表單標簽
- 表單標簽-表單項
是什么？
HTML快速入門
VS Code開發工具
基礎標簽&樣式
新浪新聞-標題
標題排版
Alt + B ：在Vs Code 可以直接在瀏覽器打開當前頁面
<!-- 文檔類型為HTML -->
<!DOCTYPE html>
<html lang="en">
<head><!-- 字符集為UTF-8 --><meta charset="UTF-8"><!-- 設置瀏覽器兼容性 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小型文件管理系統</title>
</head>
<body><!-- img標簽；src：圖片資源路徑width：寬度(px，像素;%，相對于父元素的百分比)height：高度(px，像素;%，相對于父元素的百分比)路徑書寫方式：絕對路徑：1.絕對磁盤路徑：C:\Users\20316\Desktop\2751e74b8652543e97276d3943c581f0.webp<img src="C:\Users\20316\Desktop\2751e74b8652543e97276d3943c581f0.webp">2.絕對網絡路徑：https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">（推薦）相對路徑：./：當前目錄，可以省略../：上一級目錄，不可省略--><img src="./img/453a431b79de0593f8b28e02bdc98a3b_1.jpg"> 小型文件管理系統>首頁 <!-- width = "300px" height = "300px" --><h1>小型文件管理系統</h1><hr>2025-02-22由無雙開發的小型文件管理系統噢~~~<hr>
</body>
</html>
標題樣式
標題樣式-1
<!-- 文檔類型為HTML -->
<!DOCTYPE html>
<html lang="en">
<head><!-- 字符集為UTF-8 --><meta charset="UTF-8"><!-- 設置瀏覽器兼容性 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小型文件管理系統</title>
</head>
<body><img src="img/453a431b79de0593f8b28e02bdc98a3b_1.jpg"> 小型文件管理系統>首頁 <!-- 方式一：行內樣式 --><!-- <h1 style="color: aqua;">小型文件管理系統</h1> --><!-- 方式二：內嵌樣式 (對當前頁面有效)--><style>h1{/* color:hotpink; */color: rgb(0, 0, 225);/* color: #ff0000; */}</style><!-- 方式三：外聯樣式 --><!-- <link rel="stylesheet" href="./CSS/文件資源管理.css"> --><h1>小型文件管理系統</h1><hr>2025-02-22 15:03 無雙<hr>
</body>
</html>
標題樣式-2
<!-- 文檔類型為HTML -->
<!DOCTYPE html>
<html lang="en">
<head><!-- 字符集為UTF-8 --><meta charset="UTF-8"><!-- 設置瀏覽器兼容性 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小型文件管理系統</title>
</head>
<body><img src="./img/453a431b79de0593f8b28e02bdc98a3b_1.jpg" > 小型文件管理系統>首頁 <!-- width = "300px" height = "300px" --><!-- 方式一：行內樣式 --><!-- <h1 style="color: aqua;">小型文件管理系統</h1> --><!-- 方式二：內嵌樣式 --><style>h1{color:hotpink;}/* 元素選擇器span{color:blue;} *//* 類選擇器 *//* .cls {color:blue;} *//* ID選擇器 */#time {color:blue;/*設置字體大小 font-size: 13px; */}</style><h1>小型文件管理系統</h1><hr><span class = "cls" id = "time">2025-02-22 15:03</span> <span class = "cls">無雙</span><hr>
</body>
</html>
超鏈接
<!-- 文檔類型為HTML -->
<!DOCTYPE html>
<html lang="en">
<head><!-- 字符集為UTF-8 --><meta charset="UTF-8"><!-- 設置瀏覽器兼容性 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小型文件管理系統</title>
</head>
<body><img src="./img/453a431b79de0593f8b28e02bdc98a3b_1.jpg" > <a href="file:///C:/Users/20316/Desktop/HTML/04.%E6%96%87%E4%BB%B6%E8%B5%84%E6%BA%90%E7%AE%A1%E7%90%86%E5%99%A8-%E8%B6%85%E9%93%BE%E6%8E%A5.html" target="_self">小型文件管理系統</a> >首頁 <!-- width = "300px" height = "300px" --><style>h1{color:hotpink;}/* ID選擇器 */#time {color:blue;/*設置字體大小 font-size: 13px; */}/* 把超鏈接的字體設置為黑色 并去掉下劃線,設置為默認文本 */a {color: black;text-decoration: none;}</style><h1>小型文件管理系統</h1><hr><span class = "cls" id = "time">2025-02-22 15:03</span> <span>無雙</span><hr>
</body>
</html>
新浪新聞-正文
新浪新聞-正文排版
<!-- 文檔類型為HTML -->
<!DOCTYPE html>
<html lang="en">
<head><!-- 字符集為UTF-8 --><meta charset="UTF-8"><!-- 設置瀏覽器兼容性 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小型文件管理系統</title><style>h1{color:hotpink;}/* ID選擇器 */#time {color:blue;/*設置字體大小 font-size: 13px; */}/* 把超鏈接的字體設置為黑色 并去掉下劃線,設置為默認文本 */a {color: black;text-decoration: none;}p {/* 設置首行縮進 */text-indent: 35px; /* 設置行高 */line-height: 40px;}/* 設置對齊方式 */#plast {text-align: right;}</style>
</head>
<body><img src="./img/453a431b79de0593f8b28e02bdc98a3b_1.jpg" > <a href="file:///C:/Users/20316/Desktop/HTML/04.%E6%96%87%E4%BB%B6%E8%B5%84%E6%BA%90%E7%AE%A1%E7%90%86%E5%99%A8-%E8%B6%85%E9%93%BE%E6%8E%A5.html" target="_self">小型文件管理系統</a> >首頁 <!-- width = "300px" height = "300px" --><h1>小型文件管理系統</h1><hr><span class = "cls" id = "time">2025-02-22 15:03</span> <span>無雙</span><hr><!-- 正文 --><p><!-- 視頻 --><span>以下為此文件資源管理器的<strong>使用說明</strong></span><!-- 換行 --><br><video src="" controls="controls"></video></p><!-- 音頻 --><p><audio src="" controls></audio></p><p id="plast">責任編輯：無雙</p><!-- 在HTML中無論輸入多少個空格，只會顯示一個。可以使用空格占位符： -->
</body>
</html>
新浪新聞-頁面布局
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型</title><style>div {width: 200px;;height: 200px;/* 指定width height為盒子的高寬 */box-sizing: border-box;/* 背景色 */background-color: aqua;/* 內邊距：上 右 下 左 */padding: 20px 20px 20px 20px ;/* 邊框 寬度 線條類型 顏色 */border: 10px solid red;/* 外邊距：上 右 下 左 */margin: 30px;}</style>
</head><body><div>A A A A A A A A A A A A A A A A A A A A A A </div>
</body>
</html>
<!-- 文檔類型為HTML -->
<!DOCTYPE html>
<html lang="en">
<head><!-- 字符集為UTF-8 --><meta charset="UTF-8"><!-- 設置瀏覽器兼容性 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小型文件管理系統</title><style>h1{color:hotpink;}/* ID選擇器 */#time {color:blue;/*設置字體大小 font-size: 13px; */}/* 把超鏈接的字體設置為黑色 并去掉下劃線,設置為默認文本 */a {color: black;text-decoration: none;}p {/* 設置首行縮進 */text-indent: 35px; /* 設置行高 */line-height: 40px;}/* 設置對齊方式 */#plast {text-align: right;}#center {width: 65%;/* margin: 0% 17.5% 0% 17.5%; */margin: 0 auto;}</style></head>
<body><div id ="center"><img src="./img/453a431b79de0593f8b28e02bdc98a3b_1.jpg" > <a href="file:///C:/Users/20316/Desktop/HTML/04.%E6%96%87%E4%BB%B6%E8%B5%84%E6%BA%90%E7%AE%A1%E7%90%86%E5%99%A8-%E8%B6%85%E9%93%BE%E6%8E%A5.html" target="_self">小型文件管理系統</a> >首頁 <!-- width = "300px" height = "300px" --><h1>小型文件管理系統</h1><hr><span class = "cls" id = "time">2025-02-22 15:03</span> <span>無雙</span><hr><!-- 正文 --><p><!-- 視頻 --><span>以下為此文件資源管理器的<strong>使用說明</strong></span><!-- 換行 --><br><video src="" controls="controls"></video></p><!-- 音頻 --><p><audio src="" controls></audio></p><p id="plast">責任編輯：無雙</p></div>
</body>
</html>
表格標簽
表單標簽
表單標簽-表單項
)
