1. 新标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<figure>
<img src="img/tan.jpeg" alt="" width="200">
<figcaption>谭松韵</figcaption>
</figure>
<figure>
<img src="img/tan.jpeg" alt="" width="200">
<figcaption>谭松韵</figcaption>
</figure>
<!-- 表单划分区域
与legend 配合使用
-->
<fieldset>
<legend>登录信息</legend>
<form action="">
<p>
用户名:
<input type="text" name="username">
</p>
<p>
密码:
<input type="password" name="pwd" id="">
</p>
<input type="submit" value="提交">
</form>
</fieldset>
<!-- 度量单位 -->
<meter min="0" max="100" value="20" ></meter>
<!-- 进程单位 -->
<progress min="0" max="100" value="20"></progress>
</body>
</html>2.表单属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="">
<p>
用户名:
<!-- placeholder:占位符-提示用户输入预期值 -->
<!-- <input type="text" placeholder="请输入用户名"> -->
<!-- <input type="text" value="请输入用户名"> -->
<!-- 自动完成功能 autocomplete on:默认开启-->
<!-- required:必填项 -->
<!-- 规定激活（使元素获得焦点）元素的快捷键,Alt+S键 -->
<input type="text" name="username" autocomplete="off" required accesskey="s">
</p>
<p>
昵称:
<!-- **autofocus**:自动获取焦点 -->
<input type="text" autofocus name="secname">
</p>
<p>
多文件上传:
<!-- 文件域 multiple:多文件-->
<input type="file" multiple>
</p>
<input type="submit" value="注册">
</form>
</body>
</html>3.tabindex的应用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--按Tab键跳转时按从小到大的顺序跳转-->
<button tabindex="2">按钮1</button>
<!-- -1:不使用tabindex聚焦 -->
<button tabindex="-1">按钮5</button>
<button tabindex="4">按钮2</button>
<button tabindex="3">按钮3</button>
<button tabindex="1">按钮4</button>
</body>
</html>4.input的正则验证-pattern
<body>
<form action="">
<!--pattern 提交表单进行验证,用于验证输入字段的模式 -->
<!-- 适用于以下 <input> 类型：text, search, url, tel, email 以及 password -->
<input type="text" pattern="^[a-zA-Z0-9_]{5,20}$">
<input type="submit" value="登录">
</form>
</body>5.input的控件
<form action="">
<p>
邮箱:
<input type="email" name="email">
</p>
<p>
电话号码:
<input type="tel" name="tel">
</p>
<p>
网址:
<input type="url" name="url">
</p>
<p>
年龄:
<input type="number" name="age">
</p>
<p>
搜索:
<input type="search" name="search">
</p>
<p>
滑块:
<input type="range" name="range">
</p>
<p>
时间:
<input type="time" name="time">
</p>
<p>
日期:
<input type="date" name="date">
</p>
<p>
月:
<input type="month" name="month">
</p>
<p>
周:
<input type="week" name="week">
</p>
<input type="submit" value="提交">
</form>6.引入多媒体
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<iframe height=498 width=510 src='https://player.youku.com/embed/XNTE5NjkwMjk2NA==' frameborder=0 'allowfullscreen'></iframe>
<iframe src="https://mp.weixin.qq.com/cgi-bin/wx" frameborder="0" height=800 width=800></iframe>
<iframe height=498 width=510 src='https://player.youku.com/embed/XMzYyMjAxNzAxNg==' frameborder=0 'allowfullscreen'></iframe>
<embed src="https://player.youku.com/embed/XMzYyMjAxNzAxNg==" height=498 width=510>
<embed height=498 width=510 src='https://player.youku.com/embed/XNTE4NDgxOTQyOA==' frameborder=0 'allowfullscreen'></embed>
</body>
</html>
7.引入本地音乐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- controls:显示播放控件 -->
<!-- autoplay:自动播放 -->
<!-- loop:循环播放 -->
<audio src="img/superjunior.mp3" controls autoplay loop></audio>
<!-- <audio src="images/bgsound.mp3" controls autoplay loop></audio> -->
<!-- 兼容性的写法 -->
<audio controls autoplay loop>
<source src="img/bgsound.mp3">
<source src="img/music.ogg">
</audio>
</body>
</html>8.引入本地视频
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
video {
/* 被替换的内容正好填充元素的内容框。整个对象将完全填充此框。 */
object-fit: fill;
}
</style>
<body>
<!-- controls:显示播放控件
autoplay:自动播放
muted:静音
loop:循环播放
-->
<!-- <video src="images/shenxianjiejie.mp4" controls autoplay loop width="600"></video> -->
<!-- 兼容性的写法 -->
<!-- 静音自动播放 -->
<video controls autoplay loop width="600" muted id="vid">
<source src="img/shenxianjiejie.mp4">
<source src="img/movie04.ogg">
</video>
<button>播放</button>
<button>暂停</button>
<script>
var btns = document.getElementsByTagName('button');
var vid = document.getElementById('vid');
btns[0].onclick = function() {
// console.dir(vid);
// 播放
vid.play();
};
btns[1].onclick = function() {
// 暂停
vid.pause();
};
</script>
</body>
</html>
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
