2026.1.4 html简单制作
HTML：
常用属性：id（唯一标识）、class（批量样式）、src（资源地址）、href（跳转地址
标准 HTML 文档有固定结构：<!DOCTYPE html> + <html> + <head> + <body>
核心组成是双标签（闭合）和单标签（自闭合），属性用于扩展标签功能
HTML 是网页结构标记语言，非编程语言，负责定义 “页面有什么”
常用标签：
文本排版标签：
- 标题：
<h1>（最大）~<h6>（最小），自带加粗和上下间距 - 段落：
<p>，自带上下间距，自动换行 - 换行：
<br />（单标签），强制换行 - 加粗：
<strong>（语义化，推荐）、<b>（仅样式加粗） - 斜体：
<em>（语义化，推荐）、<i>（仅样式斜体）
容器标签：
<div>：块级元素（独占一行，可设置宽高），最常用布局容器<span>：行内元素（不独占一行，随内容自适应），用于行内内容分组
链接与媒体标签：
- 超链接：
<a href="跳转地址" target="_blank">链接文字</a>（target="_blank"表示新窗口打开） - 图片：
<img src="图片地址" alt="替代文本" />
列表标签：
- 有序列表：
<ol>包裹<li>，默认前面显示数字，示例：
<ol> <li>第一步</li> <li>第二步</li> </ol>无序列表：<ul> 包裹 <li>，默认前面显示圆点，示例：
<ul> <li>列表项1</li> <li>列表项2</li> </ul> 简单网页制作
基本格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>网页</title>
</head>
<body>
</body>
head里面添加
<link rel="shortcut icon" href="../imag/2.jfif"> <style> body{ background-image: url("../imag/纯色.jpeg"); /*设置背景图片*/ background-attachment: fixed; /*延展*/ background-size: 100%; /*图片铺满*/ } h1{ color: green; float: center; } h3{ color: red; } ol{ list-style-position:inside; /* 序号跟随*/ } </style>body里面添加
<h1>跳转页面</h1> <p></p> <p> 这是一个简易的网页链接跳转网页，创建该网页的目的是为了方便我们日常的使用，</br> 它可以实现网址，视频，音乐，动画，游戏，新闻的播放与跳转，以下是可以跳转的链接，可根据个人需要点击。 </p> <h2> 快速跳转中心 </h2> <ol> <h3> <li> <a href="https://www.baidu.com" title="这是一个百度链接网址" ><strong>网址跳转</strong></a></li> <li> <a href="../video/爱你没差.MP3" title="爱你没差"> 点击播放音乐</a></li> <li> <a href="../video/下雨动画/index.html" title="下雨动画">点击播放动画</a></li> <li> <a href="https://v2.cri.cn/M00/02/C3/rBABDmblg6eADAXKBZHO91F1HZ0889.mp4" title="新闻">点击播放新闻</a></li> <li> <a href="https://v.douyin.com/Pzfz1bpabYY/" title="抖音视频">点击查看抖音视频</a></li> <li> <a href="../games/切水果/index.html" title="这是一个切水果游戏">点击开始玩切水果游戏</a></li> <li> <a href="https://pcpackagebssdlbigretryapk.cosama.cn/202601040949/9bce06a20877ff583be797afa6dd7787/web/kugou_release_20090.exe" title="酷狗音乐下载下载链接">点击下载酷狗音乐</a> </li> <li> <a href="https://baike.baidu.com/link?url=DkavdKz-WCTjjSbqzDZSgLQgzHIfWUNneQOgE1-OzfBOQxTfmoFVZTOmnHChDxWqOZJxGMS1daOGmtLtnf_ohZLqz-xZt0vp0w9T9XJJ70O " alt="田曦薇" title="点击跳转到田曦薇个人介绍" > <img src="../imag/2.jfif"></a> </li> </h3> </ol> <h2> <a href="#top" >点击跳转到顶部</a> </h2><a href=" https://www.baidu.com" > // 这是超链接格式，点击即可跳转到百度页面，图中title即提示，后面的网址跳转四个字则为自定义显示的内容
效果图
