表格；表单；图片；音频；简单CSS样式：
学习为主，丑得很，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>角色注册</title>
<link rel="stylesheet" href="./mine.css"><!-- 引入外部样式表 -->
<!-- 内部样式类选择器,用来设置css样式 -->
<style>
body{display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh; /* 设置最小高度为视口高度，以确保内容垂直居中 */
margin: 0; /* 去除body的默认边距 */
background:black url(./images/宇宙.jpg) no-repeat center top/100% fixed;}
.red{color: red;}
.size1{font-size: 18px;}
.box-green{width: 50px;height: 200px;background-color: aquamarine;}
#brown{color: brown;}
h1{text-align: center;font-weight: 800;font-family: 微软雅黑;color: rgba(0, 0, 0, 1);}
p {text-indent: 2em;font-size: 16px;line-height: 1.5;color:rgb(0, 0, 0);}
div1{text-decoration: underline;font:italic 500 20px/1.5 楷体;color:rgb(207, 24, 24);}
a{text-decoration: none;}
a:visited{color:yellowgreen;} a:hover{color:red}
</style>
<!-- id选择器#，配合js使用 --><!-- 同一个id在一个页面只能使用一次 --><!-- 伪选择器，任何标签名或类：hover鼠标悬停状态。link访问前，visited访问后，active激活 -->
<!-- 选择器优先级，范围越大优先级越低,继承的权重最低：通配符<标签<类<id<行内<！important -->
</head>
<body>
<h1>奥特曼角色注册</h1>
<hr>
<audio controls autoplay loop><source src="./musics/ウルトラの奇跡 (奥特奇迹) - Project DMM.mp3" type="audio/mpeg"></audio>
<h2>每个<a href="https://zhuanlan.zhihu.com/p/458733175"><strong class="box-green">奥特曼</strong> </a> 都会骑行和踢球哦！</h2>
<p>大约137亿年前，宇宙诞生。 <!-- 空格字符实体 -->
大约45.5亿年前，地球诞生。<<!-- 大于号字符实体 -->
2亿年前，海底原人拉贡统治地球><!-- 小于号字符实体 -->
1亿5千万年前，地球上古代恐龙哥莫拉龙繁盛一时。6千5百万年前，地球上绝大多数恐龙灭绝。40万年前，M78星云诞生出优秀的文明，因为没有再发生任何的犯罪事件，M78星云自此废止了警察组织，建立起真正的理想国度 “光之国”。
30万年以前，皮克 (也就是后来的奥特之王) 出生，出身地未知。(奥特之王是奥特一族传说中的超人，是宇宙守护者，30万岁以上的年龄让他见证了光之国诞生以来的所有历史，深受光之国爱戴，是<div1>光之国</div1> 的精神领袖。)
</p>
<!-- Emmet缩写:p.box .box p#box div+p div>p;;; div{w500+h200+bgc} -->
<table border="1">
<tr>
<th class="red size1">梦比优斯</th>
<th><img src="./images/梦比优斯.gif" alt="梦比优斯图片" title="梦比优斯" height="500"></th>
</tr>
<tr>
<th id="brown" class="size1">雷欧</th>
<th><img src="./images/雷欧.jpg" alt="雷欧图片" title="雷欧" height="500"></th>
</tr>
</table>
<form action=""><!-- form表单区域：action是发送数据的地址 -->
<!-- 增大点击范围，提升用户体验：lable -->
<div style="color: tomato;font-size: 22px;">性别：</div><!-- 配合js引入样式表 -->
<input type="radio" name="gender" id="male"><label for="male">英雄</label>
<!-- <input type="radio" name="gender" id="female"><label for="female">女神</label>下行为暴力写法二者皆可 -->
<label><input type="radio" name="gender" checked>女神</label><hr><!-- 加同样的name属性可以实现单选 -->
<!-- 按钮：button：submit reset button -->
<label>用户名：</label><input type="text" placeholder="一行用span,独占用div"><br>
<label>密码：</label><input type="password"><br>
<label>确认密码：</label><input type="password"><br>
<label>喜欢的奥特曼：</label><input type="checkbox"> 泰罗<input type="checkbox" checked> 梦比优斯<input type="checkbox" checked> 雷欧<br>
<label>确认你的角色</label><select><option>梦比优斯</option><option>雷欧</option></select><br>
<input type="checkbox"><label>已阅读并同意以下协议</label>
<ol><li><a href="#">《用户服务协议》</a></li><li><a href="#">隐私政策</a></li></ol><!-- 未确定的url填# --><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
<!-- ul无序列表 -->
<h2>奥特资讯</h2>
<ul>
<li><img src="https://pic1.zhimg.com/80/v2-ba8050e3f3d7b8fe8805958dfa07df60_720w.webp" alt="奥特之王"><h3>奥特之王</h3></li>
<li><img src="https://pic2.zhimg.com/80/v2-cb04669510bece7605d38f17fde00599_720w.webp" alt="大战怪兽"><h3>大战怪兽</h3></li>
</ul>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
