当前位置： 首页 > news >正文

Web前端开发-HTML、CSS

news 2025/7/7 9:10:56

文章目录

  • 是什么？
  • 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中无论输入多少个空格，只会显示一个。可以使用空格占位符：&nbsp; -->
</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>

在这里插入图片描述

表格标签

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

表单标签

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

表单标签-表单项

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

http://www.dtcms.com/a/268110.html

相关文章：

  • 【从0-1的CSS】第3篇：盒子模型与弹性布局
  • Application的onLowMemory从Android API 34开始系统不再触发，从API 35开始废弃
  • 网安系列【7】之文件上传漏洞
  • 云服务器环境配置——安装Tomcat
  • Redis集群部署指南：高可用与分布式实践
  • 网关多次读取流问题
  • 老树新花语新颜，汉字筑渠话情流——与ai助手闲聊成诗（智普清言）
  • 程序员在线接单
  • Python设计小游戏方法简介
  • SpringBoot基于Mysql的商业辅助决策系统设计与实现
  • Web前端开发-Vue
  • 【网络安全基础】第九章---IP安全
  • unix环境编程试题
  • 平台设备总线相关概念（RK3588）
  • 多模态大模型推理技术突破：从 CoT 数据到 RL 优化，AI 推理如何征服复杂任务？
  • 开源！RAG竞技场（2）：标准RAG算法
  • 编程语言艺术:C语言中的属性attribute笔记总结
  • RPC/gRPC入门学习
  • GM DC Monitor和WGCLOUD，能比吗？
  • 深入理解原子类与CAS无锁编程：原理、实战与优化
  • 【大模型LLM】 Megatron-LM 大模型训练框架吞吐率计算吞吐率优化策略
  • Rust实战：中医丹方智能管理系统
  • ipmitool 使用简介（ipmitool sel list ipmitool sensor list）
  • WebRTC 的 ICE candidate 协商
  • 【卫星语音】基于神经网络的低码率语音编解码（ULBC）方案架构分析：以SoundStream为例
  • 开关电源抄板学习
  • linux chrome浏览器打不开了
  • 线程——基础全解
  • 第一个Flink 程序：词频统计 WordCount（流处理）
  • Peek-Ubuntu上Gif录制工具-24.04LTS可装