初步踏入前端，这里简单用一些基础标签做了一些很杂的页面，入门级可以看看，大神勿扰。
</!DOCTYPE html> <!--声明文档为HTML-->
<html>
<head>
<meta charset="utf-8"> <!--声明标准-->
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> <!--页面为设备宽度，尺寸始终为1-->
<title>music</title> <!--标题-->
<style> /*CSS内嵌样式*/
.center /*class选择器*/
{
text-align:center;
}
.class1{
width:500px ;
height: 100px;
border:1px solid red;
padding:20px ;
font-size: 30px;
}
.class2{
font-family: "楷体";
font-size: 25px;
}
.class3{
font-family: "黑体";
font-size: 20px;
color: deeppink;
}
.class4{
text-shadow: 0px 20px 0px #FF0000;
}
h6:hover{ /*伪类选择器*/
width: 200px;
height: 200px;
background-color: #FF0000;
transition-delay: 500ms;
transition-duration: 500ms;
}
</style>
<script> /*内嵌简单javascript*/
function drawpicture(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="cornflowerblue";
ctx.fillRect(20,20,150,100);
}
</script>
</head>
<body>
<!--绘制不同的表单类型：text、button、checkbox等，并尝试一些属性-->
<form class="center" id="form1">
User name:<input type="text" name="fname" id="" value="" placeholder="请输入用户名" />
<input type="submit" name="test" value="提交" /><br />
Password:<input type="date" />
<input type="button" value="测试" /><br />
Identifying code：<input type="range" />
<input type="checkbox" value="记住" /><br />
<input type="number" name="" id="" value="" />
<input type="password" />
</form>
<form class="center">
<input type="text" placeholder="随便你输入，有用算我输" />
<input type="image" src="img/阿狸.gif" />
</form>
<!--绘制表格，可添加各类内容信息-->
<table border="0">
<tr>
<td>User name:</td>
<td><input type="text" name="fname" id="" value="" /></td>
<td><input type="submit" value="提交" /><br /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="date" /></td>
<td><input type="button" value="测试" /></td>
</tr>
<tr>
<td>Identifying code：</td>
<td><input type="a=range" /></td>
<td><input type="checkbox" value="记住" /></td>
</tr>
</table>
<!--添加音频文件，给予控件-->
<audio controls="controls" src="img/吉他甜蜜欢快音效.wav">音频</audio>
<hr />
<!--自定义列表-->
<dl>
<dt>项目1</dt>
<dd>描述1</dd>
<dd>描述1</dd>
<dt>项目2</dt>
<dd>描述2</dd>
</dl>
<h1>我若能陪你</h1>
<img src="img/vongola.jpg" width="100" height="100" title="vongola" />
<a href="http://www.runoob.com/html/html-images.html" target="_blank">
<div style="text-align: center;">
<!--图片属性信息-->
<img src="img/闲云野鹤.jpg" width="100" height="100" alt="闲云野鹤" title="闲云野鹤" usemap="#名称1" >
</div>
</a>
<map name="名称1">
<area href="img/闲云野鹤.jpg" shape="rect" coords="20,20,20,20" target="_blank" title="测试"/>
</map>
<p><b>抚一把 </b><a href="https://music.163.com/#/song?id=444356276" target="_blank"><i>瑶琴</i></a></p>
<div style="color: gold;letter-spacing: 12px;">
遇一场 <a href="https://music.163.com/#/song?id=293407" target="_blank">宿命</a>
</div>
<div style="opacity: 0.5;position: absolute;left: 50px;width: 100px;height: 80px;background-color: darkturquoise;"></div>
<br />
<br />
<br />
<br />
<input type="button" id="动画测试" value="动画测试" />
<br />
<h6>书一纸 <a href="https://music.163.com/#/song?id=504686851" target="_blank">春笺</a></h6>
<ul type="square" class="class2">
<li>演一台<a href="https://music.163.com/#/song?id=30352891" target="_blank">牵丝戏</a></li>
<li>听一曲 <a href="https://music.163.com/#/song?id=538230315" target="_blank">故人叹</a></li>
<li>赋一首 <a href="https://music.163.com/#/song?id=28188428" target="_blank">浮生辞</a></li>
<li>赏一场 <a href="https://music.163.com/#/song?id=29567100" target="_blank">眉间雪</a></li>
<li>过一扇 <a href="https://music.163.com/#/song?id=487628853" target="_blank">赴鸿门</a></li>
</ul>
<ol type="I" class="class3">
<li>逛一遍 <a href="https://music.163.com/#/song?id=459398829" target="_blank" class="class3">黑白小巷</a></li>
<li>做一个<a href="https://music.163.com/#/song?id=27506513" target="_blank"><span style="color: brown;font: '微软雅黑';">菁华浮梦</span></a></li>
<li>闯一回 <a href="https://music.163.com/#/song?id=416388799" target="_blank">明月天涯</a></li>
<li>饮一杯 <a href="https://music.163.com/#/song?id=505197519" target="_blank">敛枝煮酒</a></li>
<li>醉一宿 <a href="https://music.163.com/#/song?id=32174251" target="_blank">风花雪月</a></li>
<li>找一位 <a href="https://music.163.com/#/song?id=533245911" target="_blank">道姑朋友</a></li>
<li>寻一个<a href="https://music.163.com/#/song?id=1310963552" target="_blank">青山故人</a></li>
</ol>
<div style="text-align: center;">
<p >当一次 <a href="https://music.163.com/#/song?id=33987468" target="_blank">舍身薄凉客</a></p>
<p class="class2">这一生 <a href="https://music.163.com/#/song?id=450805522" target="_blank">缘生缘灭</a></p>
<p>后来 <a href="https://music.163.com/#/song?id=528583974" target="_blank">你曾路过我的江湖</a></p>
<p class="class1" >此生无悔入古风<a href="" target="_blank"></a></p>
</div>
<p class="class4">论文防复制</p>
<div style="text-align: center;">
<!--画布是重要标签，这里用简单JS绘制一下图形-->
<canvas id="myCanvas" width="100%" height="200" style="border: 1px solid black;">浏览器不支持canvas画布。</canvas>
<p>点击下方按钮可以在画布绘图</p>
<button onclick="drawpicture()">尝试一下啦</button>
</div>
<canvas style="background-color: aqua;border: 1px;" id="myCanvas2" width="100%" height="auto">哈哈哈</canvas>
<hr /><hr />
<hr />
<div style="text-align: center;">
<!--导入视频，自适应屏幕宽度-->
<video controls="controls" src="img/源氏5杀返场_18-04-15_14-58-38.mp4" width="100%" height="auto"></video>
</div>
<hr />
<hr />
<hr />
<div style="text-align: center;">
<!--添加框架-->
<iframe width="100%" height="400" frameborder="1" name="frame-a"></iframe>
<p><a href="http://www.baidu.com" target="frame-a">链接测试</a></p>
</div>
<div style="text-align: center;">
<video controls="controls" src="img/不会卖萌耶的亮眼表现_18-02-18_21-55-33.mp4" width="100%" height="auto"></video>
</div>
</body>
</html>
1346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
