文章目录
是什么？
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>
表格标签
表单标签
表单标签-表单项
