HTML 表单
这里我放一个之前做的表单，大家改一改就能直接用。
应该包含了表单大部分功能，不足之处还请指正。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
<style>
#a {
width: 350px;
height: 270px;
}
.b {
width: 350px;
height: 270px;
}
div {
width: 350px;
}
#jz {
background-color: lightgrey;
margin: 0 auto;
height: 100%;
width: 380px;
border: 5px solid gray;
}
body {
background-size: cover;
}
h2 {
font-size: 28px;
}
form {
border: 1;
}
#username,
#psw,
#picture,
#homepage,
#email,
#data,
#age,
#phone_number {
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 10px;
}
#submit,
#reset {
border-radius: 5px;
background-color: bisque;
width: 80px;
height: 40px;
}
</style>
<script type="text/javascript">
function change() {
var num = document.getElementById("range");
var location = document.getElementById("show");
location.value = num.value;
}
</script>
</head>
<body background="bg.png">
<div id="jz">
<h2 align=center>注册用户表单的设计</h2>
<form action="#" method="POST" id=bdan>
<fieldset id="a">
<legend>基本信息:</legend>
<label>用户名:</label><input type="text" placeholder="请输入不超过20字符的用户名" maxlength="20" size="30"
name="username" id="username"><br>
<label>密码: </label><input type="password" name="psw" id="psw"><br>
<label>性别:</label><input type="radio" name="sex">男<input type="radio" name="sex" id="sex">女<br>
<label>爱好:</label><input type="checkbox">音乐<input type="checkbox">舞蹈<input type="checkbox" name="hobby"
id="hobby">运动<br>
<label>籍贯:</label><select name="select">
<option>山东</option>
<option>陕西</option>
<option>浙江</option>
</select><br>
<label>上传照片</label><input type="file" name="picture" id="picture"><br>
<label>个人简历</label><textarea rows="5" cols="30" id="jl">请填写你的个人简历</textarea>
</fieldset>
<fieldset class="b">
<legend>高级信息:</legend>
<label>个人主页:</label><input type="url" name="homepage" id="homepage"><br>
<label>电子邮箱:</label><input type="email" name="email" id="email"><br>
<label>毕业日期:</label><input type="date" id="data"><br>
<label>你的年龄:</label><input type="number" min="0" max="100" value="20" name="age" id="age"><br>
<label>你的身高:</label>150cm<input id="range" type="range" min="150" max="200" oninput="change()"
style="width: 100px;">200cm
<input type="number" id="show" style="width: 40px;"><br>
<label>你喜欢的颜色:</label><input type="color" name="color" id="color"><br>
<label>你的手机号码:</label><input type="tel" name="phone_number" id="phone_number"><br>
</fieldset>
<div align=center><input type="submit" id="submit"> <input
type="reset" id="reset"></div>
</form>
</div>
</body>
</html>
HTML 框架
index.html文件内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>框架</title>
<style>
body{
background-size: cover;
}
h2{
font-size: 30px;
}
</style>
</head>
<body background="bg1.jpg">
<div align=center>
<h2>HTML框架</h2>
<a href="https://www.csdn.net/" target="fudong">csdn</a>
<a href="https://www.sina.com.cn/" target="fudong">新浪</a>
<a href="https://www.sogou.com/" target="fudong">搜狗</a>
<a href="https://www.w3school.com.cn/" target="fudong">w3school</a>
<a href="https://www.bilibili.com/" target="fudong">哔哩哔哩</a><br><br><br>
<iframe src="a.html" frameborder="0" name="fudong" width="800" height="400"></iframe>
</div>
</body>
</html>
a.html文件内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body background="bg2.jpg">
</body>
</html>
运行index.html，背景图片你们可以换成自己的
点击链接
HTML 脚本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<script>
document.write("Hello world");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<script>
document.write("Hello world");
</script>
<noscript>抱歉，您的浏览器不支持JavaScript!</noscript>
<p>不支持 JavaScript 的浏览器会使用 <noscript> 元素中定义的内容（文本）来替代。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<h1>JavaScript</h1>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript";
}
</script>
<p id="demo">JavaScript 可以触发事件，就像按钮点击</p>
<button type="button" onclick="myFunction()">点我</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<h1>JavaScript</h1>
<script>
function myFunction() {
x = document.getElementById("demo");
x.style.color = "red";
}
</script>
<p id="demo">JavaScript 能改变 HTML 元素的样式</p>
<button type="button" onclick="myFunction()">点我</button>
</body>
</html>
HTML 字符实体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<p>空格 空格</p>
<p>小于号:<</p>
<p>大于号:></p>
<p>和号:&</p>
<p>引号:"</p>
<p>撇号:'</p>
<p>分:¢</p>
<p>镑:£</p>
<p>人民币/日元:¥</p>
<p>欧元:€</p>
<p>版权:©</p>
<p>注册商标:®</p>
<p>商标:™</p>
</body>
</html>
HTML5 新元素
<canvas> 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
<audio> 定义音频内容
<video> 定义视频（video 或者 movie）
<source> 定义多媒体资源 <video> 和 <audio>
<embed> 定义嵌入的内容，比如插件。
<track> 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。
<datalist> 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen> 规定用于表单的密钥对生成器字段。
<output> 定义不同类型的输出，比如脚本的输出。
<article> 定义页面独立的内容区域。
<aside> 定义页面的侧边栏内容。
<bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command> 定义命令按钮，比如单选按钮、复选框或按钮
<details> 用于描述文档或文档某个部分的细节
<dialog> 定义对话框，比如提示框
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption> 定义 <figure> 元素的标题
<footer> 定义 section 或 document 的页脚。
<header> 定义了文档的头部区域
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<nav> 定义导航链接的部分。
<progress> 定义任何类型的任务的进度。
<ruby> 定义 ruby 注释（中文注音或字符）。
<rt> 定义字符（中文注音或字符）的解释或发音。
<rp> 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section> 定义文档中的节（section、区段）。
<time> 定义日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。
已移除的元素
以下的 HTML 4.01 元素在HTML5中已经被删除:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
HTML5 Canvas
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<canvas width="200" height="100" style="border: 1px solid #000000;">
您的浏览器不支持HTML5 Canvas标签
</canvas>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border: 1px solid #c3c3c3;">
您的浏览器不支持HTML5 Canvas标签
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 100, 50);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border: 1px solid #c3c3c3;">
您的浏览器不支持HTML5 Canvas标签
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border: 1px solid #c3c3c3;">
您的浏览器不支持HTML5 Canvas标签
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border: 1px solid #c3c3c3;">
您的浏览器不支持HTML5 Canvas标签
</canvas>
<canvas id="myCanvas1" width="200" height="100" style="border: 1px solid #c3c3c3;">
您的浏览器不支持HTML5 Canvas标签
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
var c1 = document.getElementById("myCanvas1");
var ctx2 = c1.getContext("2d");
ctx2.font = "30px Arial";
ctx2.strokeText("Hello World", 10, 50);
</script>
</body>
</html>
HTML5 Audio(音频)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<h1>阴天快乐歌曲</h1>
<audio controls>
<source src="阴天快乐.mp3" type="audio/mpeg">
</audio>
</body>
</html>
HTML5 Video(视频)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<div style="text-align: center;">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="makeNormal()">普通</button>
<br>
<video id="video1" width="420">
<source src="game.mp4" type="video/mp4">
</video>
<script>
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
myVideo.width = 560;
}
function makeSmall() {
myVideo.width = 320;
}
function makeNormal() {
myVideo.width = 420;
}
</script>
</div>
</body>
</html>
168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
