HTML全称为Hyper Text Markup Language（超文本标记语言）
HTML的基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BootStrap初识</title>
<!--BootStrap开发版本-->
<link href="/static/plugins/bootstrap-3.4.1/css/bootstrap.css" rel="stylesheet">
<!--生产版本-->
<link href="/static/plugins/bootstrap-3.4.1/css/bootstrap.min.css" rel="stylesheet">
<!--FontAwesome开发版本-->
<link href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">
<!-- FontAwesome生产版本-->
<link href="/static/plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!--FontAwesome在线版本，离线版本有错误暂未排除-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
crossorigin="anonymous" referrerpolicy="no-referrer"/>
<!--Vue框架-->
<!-- <script type="text/javascript" src="/static/plugins/vue-3.4.21/vue.global.js"></script>-->
<style>
.thumbnail {
height: 64px;
width: 64px;
}
h1 {
letter-spacing: 15px;
text-transform: uppercase;
text-align: center;
line-height: 0.7em;
outline: none;
/*取消选择时的外边框*/
-webkit-box-reflect: below 0.2em -webkit-linear-gradient(transparent, #000000);
animation: animate 5s linear infinite;
/*设定动画时间为5s 线性 循环*/
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
/*overflow: hidden;*/
/*overflow用于剪切到溢出到边框（盒模型范围）之外的元素*/
}
.custom-cursor {
cursor: url('/static/img/cursor/cursor-icon-20px.png'), auto;
}
/**{*/
/* cursor:url('/static/img/cursor/cursor-icon-20px.png'),auto;*/
/*}*/
/*星号是通配符，表示对页面内所有标签适用*/
@keyframes animate {
0%, 100% {
color: rgb(246, 242, 233);
}
40%, 60% {
color: rgb(142, 212, 202);
/*text-shadow: 0 0 10px beige,*/
/*0 0 20px rgb(254, 246, 243),*/
/*0 0 40px rgb(197, 232, 251),*/
/*0 0 80px greenyellow;*/
text-shadow: 0 0 10px beige,
0 0 20px rgb(254, 246, 243),
13px 13px 0 rgb(197, 232, 251),
-8px -8px 0 greenyellow;
}
}
.mask {
position: fixed;
height: 100%;
width: 100%;
opacity: 5%;
/*z-index: auto;*/
background-image: url("/static/img/赛马娘全家福背景图.jpeg");
background-size: cover;
transition: background-image 0.5s ease-in-out;;
}
</style>
<!-- <script-->
<!-- type="text/javascript"-->
<!-- src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>-->
</head>
<body style="margin: 0;background-color:whitesmoke;background-size: cover;" class="custom-cursor">
<!--background="/static/img/赛马娘全家福背景图.jpeg"-->
<!--背景图-->
<div class="mask"></div>
<!--<div id='hidden-top' style="top: 0;display: none">placeholder</div>-->
<!--导航栏-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1"
data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://wiki.biligame.com/umamusume/%E9%A6%96%E9%A1%B5">赛马娘</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="###">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">额外信息</a></li>
<li>
<!-- 触发按钮 -->
<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#B1"
style="padding: 15px 15px">
会员登录
</button>
<!-- 模态框 -->
<div class="modal fade" id="B1" tabindex="-1" role="dialog" aria-labelledby="L1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="L1">登 录</h4>
</div>
<div class="modal-body">
<!--登录框-->
<div class="container clearfix" style="height: 240px;width: 400px;border-radius: 18px;
box-shadow: 3px 3px 8px gray;margin-top: 5px">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">用户名</span>
<input type="text" class="form-control" placeholder="Username"
aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control"
placeholder="Recipient's Telephone Number"
aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"></span>
</div>
<div class="input-group">
<span class="input-group-addon">密码</span>
<input type="password" class="form-control"
aria-label="Password">
<!--aria-label属性是只呈现给屏幕阅读器（如听力障碍人士）而不在屏幕上显示效果-->
<span class="input-group-addon"></span>
</div>
<label for="basic-url">入场昵称</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">特雷森学院之</span>
<input type="text" class="form-control" id="basic-url"
aria-describedby="basic-addon3">
</div>
<div class="input-group" style="margin-top: 15px;left: 35%;right: 50%;">
<span></span>
<input type="submit" class="form-control" value="确认提交">
<span></span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">退 出</button>
<!--<button type="button" class="btn btn-primary">保存</button>-->
</div>
</div>
</div>
</div>
</li>
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown"
href="#" role="button">个人列表<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="###">姓名：请先登录</a></li>
<li><a href="###">ID：请先登录</a></li>
<li><a href="###">会员级别：请先登录</a></li>
<li class="divider" role="separator"></li>
<li><a href="###">账号详情：请先登录</a></li>
<li class="divider" role="separator"></li>
<li><a href="###">个人助理：请先登录</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input class="form-control" placeholder="Search" type="text">
</div>
<button class="btn btn-default" type="submit">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="https://www.bilibili.com/video/BV1rT4y1v7uQ/?p=16&spm_i
d_from=333.999.top_right_bar_window_history.content.click&vd_sour
ce=3641acfd00e4e877ec26b9f204b4c38b" target="_blank">学习资料</a>
</li>
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown"
href="###" role="button">下拉列表 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="###">人气马娘</a></li>
<li><a href="###">G1赛事一览</a></li>
<li><a href="###" style="color: gold;font-size: 18px;">荣誉榜</a></li>
<li class="divider" role="separator"></li>
<li>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!--栅格系统-->
<div class="container clearfix">
<div class="col-md-9">
<div id='middle' style="visibility: hidden;width: 10px;height: 10px">placeholder</div>
<!-- <div id='middle' style="width: 10px;height: 10px">placeholder</div>-->
<!--闪烁文字 纯CSS-->
<h1 contenteditable="true">Hello World</h1>
角色一览
<div class="media">
<div class="media-left">
<a href="###">
<img class="media-object thumbnail" src="/static/img/草上飞小图.png" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">草上飞</h4>
美国出生的海归“草上飞”。虽然她谈吐亲切随和，但内心深处潜藏着顽强不屈的坚定意志。
</div>
<div class="media">
<div class="media-left">
<a href="###">
<img class="media-object thumbnail" src="/static/img/米浴小图.png" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">米浴</h4>
做什么事都会起到反效果，将周遭发生的所有不幸都归咎于自己、胆小又怯懦的“米浴”。兴趣是阅读图画书。
</div>
</div>
<div class="media">
<div class="media-left">
<a href="###">
<img class="media-object thumbnail" src="/static/img/目白麦昆小图.png" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">目白麦昆</h4>
出身于名门目白家、举止沉稳且气质优雅的大小姐“目白麦昆”。作为长距离选手有着一流的才能，目标是在“天王奖”上摘得桂冠。
</div>
</div>
<!--翻页功能-->
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="###" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="###">1</a></li>
<li><a href="###">2</a></li>
<li><a href="###">3</a></li>
<li><a href="###">4</a></li>
<li><a href="###">5</a></li>
<li>
<a href="###" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
<!--面板系统-->
<!--随机抽取效果-单击-->
<div>
<button type="button" value=“单击抽取爱马” class="btn-sm btn-default"
onclick="RandTextReturn(lst_uma_name.length,'Random_Click');">
<span style="font-family: 'Tahoma'">
单击抽取爱马 Eclipse First,the Rest Nowhere
</span>
</button>
</div>
<ul id="Random_Click">
</ul>
<!--随机抽取效果-双击-->
<div>
<button type="button" value="双击抽取爱马" class="btn-sm btn-default"
ondblclick="RandTextReturn(lst_uma_name.length,'Random_DBClick');">
双击抽取爱马 Eclipse First,the Rest Nowhere
</button>
</div>
<ul id="Random_DBClick">
</ul>
<!--滑动展示页面-->
<h3 style="text-align: center;font-family: 'Bell MT',serif">小知识</h3>
<div style="position: relative;display:flex;margin: 45px auto 0;" class="img_container">
<img src="/static/img/page/优俊少女.webp" alt="..." style="height: 400px;width: 550px;z-index: 2"
class="center-block"
id="img-center"/>
<div style="position:absolute;right: 80px;margin-top: 30px;opacity: 0.6" class="img_container">
<img src="/static/img/page/背景故事.webp" alt="..." style="height: 360px;width: 330px;z-index: 1"
class="center-block"
id="img-left"/>
</div>
<div style="position:absolute;left: 80px;margin-top: 30px;opacity: 0.6" class="img_container">
<img src="/static/img/page/闪耀之星系列赛.webp" alt="..." style="height: 360px;width: 330px;z-index: 0"
class="center-block"
id="img-right"/>
</div>
</div>
</div>
<div class="col-md-3">
<span style="color: red">---HOT---</span>
<button style="float: right;background-color: rgba(255,255,255,0);width: 30px;height: 30px;"
class="btn btn-sm" onclick="backgroundChange()">
<i class="fa fa-exchange"></i>
</button>
<!--面板系统-->
<div class="panel panel-default">
<div class="panel-heading" style="font-size: 20px">赛马娘爱好者协会
<a href="https://wiki.biligame.com/umamusume/%E9%A6%96%E9%A1%B5" target="_blank">
<i class="fa fa-chain" aria-hidden="true"></i>
</a>
</div>
<div class="panel-body">
<span>
<i class="fa fa-file" aria-hidden="true"></i>
</span>
爱马仕们的集会，不要错过！
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" id="page_turn">
<span>优秀学员：小栗帽</span>
<a href="https://game.bilibili.com/pd/character/detail/?name=5" target="_blank">
<i class="fa fa-chain" aria-hidden="true"></i>
</a>
</div>
<div class="panel-body" id="body">
<span style="margin-left: 100px;margin-right:100px ">
<i class="fa fa-eercast" aria-hidden="true" title="ACE"></i>
</span>
<img src="/static/img/原案小栗帽.png" style="height: 400px;width: 240px;"/>
</div>
</div>
<!--翻页功能-->
<nav aria-label="...">
<ul class="pager">
<li class="previous">
<a href="javascript:void(0)" title="" onclick="pic_page_turning(index_pic+lclick)">
<!-- pointer-events:none 用于禁用鼠标触发-->
<span aria-hidden="true">←</span>
上一页
</a>
</li>
<li class="next">
<a href="javascript:void(0)" onclick="pic_page_turning(index_pic+rclick)">
下一页
<span aria-hidden="true">→</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
<!--返回顶部-->
<div class="clearfix" style="position: fixed;right:0;bottom: 20px;z-index: calc(infinity)">
<button class="btn btn-primary btn-sm" onclick="scrollToElement('#middle')">
返回首页
</button>
</div>
<!--联系我们按钮-->
<!--触发按钮-->
<div class="navbar-fixed-bottom" style="bottom: 20px">
<!--固定在下方-->
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
data-target="#myModal"
style="margin-left: 0">
联系我们
</button>
</div>
<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">欢迎沟通</h4>
</div>
<div class="modal-body">
<p>TEL：xx xxxx xxxxx</p>
<p>办公地址：xx xxx xxx 可参观/体验地址：x xx xxxx</p>
<p>接待点：x x xxxx</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<!--<button type="button" class="btn btn-primary">保存</button>-->
</div>
</div>
</div>
</div>
<script src="/static/js/jquery-3.7.1.min.js"></script>
<script src="/static/plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
function scrollToElement(selector) {
document.querySelector(selector).scrollIntoView({
behavior: 'smooth'
});
console.log("Success")
}
function test() {
$("#test").text("123")
}
test()
// <!--全局通用元素-->
var lst_uma_name = ["Special Week 特别周", "Silence Suzuka 无声铃鹿", "Tokai Teio 东海帝王",
"MaruZensky 丸善斯基", "Fuji Kiseki 富士奇石", "Oguri Cap 小栗帽",
"Gold Ship 黄金船", "Vodka 伏特加", "Daiwa Scarlet 大和赤骥",
"Taiki Shuttle 大树快车", "Grass Wonder 草上飞", "Hishi Amazon 菱亚马逊",]
var index_page = 0
var index_pic = 0
var lclick = -1
var rclick = 1
var background_style = 0
Oguri = {
name: "小栗帽",
url: "https://game.bilibili.com/pd/character/detail/?name=5",
pic: "/static/img/原案小栗帽.png"
}
Shuttle = {
name: "大树快车",
url: "https://game.bilibili.com/pd/character/detail/?name=9",
pic: "/static/img/原案大树快车.png"
}
Grass = {
name: "草上飞",
url: "https://game.bilibili.com/pd/character/detail/?name=10",
pic: '/static/img/原案草上飞.png'
}
lst_info = [Oguri, Shuttle, Grass]
lst_start_page = ["/static/img/page/优俊少女.webp", "/static/img/page/背景故事.webp", "/static/img/page/闪耀之星系列赛.webp"]
lst_background_style = ['url("/static/img/赛马娘全家福背景图.jpeg")', 'url("/static/img/赛马娘背景图2.png.")']
// <!--全局通用元素-->
function appendElement(text, id) {
var newtag = document.createElement('li');
newtag.innerText = text;
var parenttag = document.getElementById(id);
parenttag.appendChild(newtag);
}
function RandomChoice(max) {
return Math.floor(Math.random() * Math.floor(max));
}
// 返回一个[0~max)之间的整数
function RandTextReturn(max, id) {
var index = RandomChoice(max)
var text = lst_uma_name[index]
appendElement(text, id)
}
function judge(member) {
if (member >= 0 && member < lst_info.length) {
// 逻辑表达为
// 逻辑非 ！ 逻辑或 || 逻辑与 &&
res = member;
} else {
if (member < 0) {
res = lst_info.length - 1;
} else {
res = 0;
}
}
return res
}
function page_turning(p_num) {
index_center = judge(p_num)
if (index_center === 0) {
index_left = 1
index_right = 2
} else if (index_center === 1) {
index_left = 2
index_right = 0
} else {
index_left = 0
index_right = 1
}
index_page = index_center
$("#img-center").fadeOut(2500, function () {
$("#img-center").attr("src", lst_start_page[index_center]);
$("#img-center").fadeIn(2500);
});
$("#img-left").fadeOut(2500, function () {
$("#img-left").attr("src", lst_start_page[index_left]);
$("#img-left").fadeIn(2500);
});
$("#img-right").fadeOut(2500, function () {
$("#img-right").attr("src", lst_start_page[index_right]);
$("#img-right").fadeIn(2500);
});
// $("#img-center").attr("src", lst_start_page[index_center])
// $("#img-left").attr("src", lst_start_page[index_left])
// $("#img-right").attr("src", lst_start_page[index_right])
}
function pic_page_turning(p_num) {
index_pic = judge(p_num)
var parament = lst_info[index_pic];
// var head_tag = document.getElementById("page_turn");
// head_tag.innerText = "优秀学员：" + parament.name;
var headNmae = parament.name
var linkValue = parament.url
var imgSite = parament.pic
$("#page_turn span").text("优秀学员:" + headNmae)
$("#page_turn a").attr("href", linkValue)
$("#body img").fadeOut(250, function () {
$("#body img").attr("src", imgSite);
$("#body img").fadeIn(500);
})
}
function backgroundChange() {
background_style -= 1
background_style = Math.abs(background_style)
$(".mask").css("background-image", lst_background_style[background_style]);
}
setInterval(function () {
pic_page_turning(index_pic + rclick);
}, 5000)
setInterval(function () {
page_turning(index_page + rclick);
}, 2500)
</script>
</body>
</html>可以看出，HTML分为三个大的结构：
①<head>
②<body>
③<script>
我们再来拆解这些部分中包含的内容：
HTML的常见标签
由上至下依次：
<!DOCTYPE html>
声明页面使用的HTML5-
<html lang="en">
其内容包含整个页面，视为根目录
采用W3C标准，主要目的是为了兼容大多数浏览器，使其能正确地按目标语言排版，一般默认语言为“en”，若为"zh"即代表中文（取语言编码标准的前两个字母）
<head></head>
头部标签作用域（即闭合标签之间区域）用于存放HTML文档的头部元素
这些元素有<base>、<link>、<meta>、<script>、<style>等
<meta>
原意为在...之后，引申意可理解为在头元素后的补充
用于设置HTML文档的元数据，其不会显示在页面上但可以被机器解析
<link>
用于链接当前文档与外部资源的关系，如样式文件、移动端图标和媒体文件
<base>
用于填写默认链接，如<a>标签中的"href"元素缺省时即使用<base>内容
一般用于具有嵌套的页面（如/.../.../...形式）
<script>
用于<head>标签作用域时，一般是需要预加载的内容，如全局样式
用于<body>标签作用域时，一般是为了提高浏览器响应速率，先显示全局后再处理（如很多动画效果）
<style>
作用于全局的样式，用.xxx{}表示新建一种样式，对于已有标签则无需加.表示，如div{}
在标签内使用style="xxx"则仅作用于该标签
<body></body>
一个HTML有且仅有唯一的<body>标签，用于存放HTML文档的内容(content)元素
<div>
是一个通用性的块级流内容容器，无CSS作用时不对内容或布局产生任何影响
[注] 流是指数据通路，容器则用于接收数据
应当仅在没有语义元素任何其他语义元素时使用，但这不是必须的
[注] 语义元素是指清晰定义其内容的元素，如<header>、<img>这类明确定义其作用的标签
<span>
同<div>一样，是没有任何语义的通用性的行级流内容容器
其和<div>多用于排版布局
[注] 这也是为什么网页中有许多语义元素，就是为了明确功能分区，而不希望一个个去标注
<a>
使用href用URL路径链接到其他内容
[注] 如果希望不跳转其他内容可以使用href="javascript:void(0)
[注] 在<a>标签中加入title即可在鼠标移到标签上时显示title内容，通常作为注释\引导使用，对其他标签同理
使用download通过浏览器下载链接内容
download="filename"决定下载时内容的名称，filename必须满足计算机系统的命名格式
使用target指明在何处显示链接的URL
①_self
当前页面加载（默认）
②_blank
默认在新标签页打开，用户也可以通过配置设置在新窗口打开
③_parent
在父级框架内打开，若没有父级框架则行为等同_self
④_top
在优先级最高的祖先中打开，若没有祖先则行为等同_self
<img>
使用src="/.../..."引入嵌入的图片的路径
使用alt="xxx"引入图片文本描述（非强制性，用于图片未正常显示以及阅读器辅助使用）
使用height和width来设置图像的固定尺寸
使用sizes和srcset设置响应式图像
[注] 响应式图像内容用于在不同设备的不同分辨率之间进行自适应，在后续实例中进行讲解
HTML Web常用图像格式
-
AVIF
-
WebP
-
APNG
-
GIF
-
JPEG
-
PNG
-
SVG
其中AVIF和WebP是综合性能最优秀的
使用loading指定如何加载该图像： eager立即加载该图像（默认）
lazy延迟加载，直至其与视窗（可视视口 Visible viewport）的距离接近设置值（通常由浏览器设定） 其目的是避免需要加载图像之前所需的网络和存储带宽以提升性能
<button>
一共有三种类型：
①默认按钮
<button type="button">xxx</button>
没有绑定行为的默认按钮，可以结合JS内容进行使用
②提交按钮
<button type="submit">xxx</button>
可选
③重置按钮（不推荐使用）
<button type="reset">xxx</button>
使用<button>的目的是使按钮样式不局限于<input>类型的文本形式，令其采用样式更加灵活
<p>
使用<p>时不需要严格闭合(<p></p>)，当检测到另外一个块级元素时会自动闭合显示。
<br>
仅有开始标签 在XHTML中写作 且不能存在结束标签
<input>
用type='xxx'去规定<input>的行为
常见如下：
①文本内容
<input type="text" />
仅适用于单行文本，输入值中的换行会被自动忽视
②密码内容
<input type="password" />
③文件内容
<input type="file" />
④单选框
<input type="radio" />
当存在多个"name"值相同的内容只可选择其一
⑤复选框
<input type="checkbox" />
其状态有选中与未选中两种
⑥默认按钮
<input type="button" />
没有绑定行为的默认按钮，可以结合JS内容进行使用
⑦提交按钮
<input type="submit" />
用于提交表单的按钮
name&value
name属性和value属性是表单类型标签中的重要属性，它们是与后端服务器传输的实质数据
更多的<body>内容我们会在后续逐步讲解！
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
