html"/>
学习开发记1：贼丑的html
表格；表单；图片；音频；简单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=""><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=".webp" alt="奥特之王"><h3>奥特之王</h3></li><li><img src=".webp" alt="大战怪兽"><h3>大战怪兽</h3></li></ul>
</body>
</html>更多推荐
学习开发记1：贼丑的html
发布评论