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