博客介绍了HTML5的相关新增特性，包括语义化标签、新增表单元素与属性、新增API、自定义属性，还提及音频、视频功能，以及伸缩布局和flex属性等信息技术领域内容。
语义化标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
header{
width: 200px;
height: 200px;
background-color: pink;
}
fieldset{
width: 200px;
}
</style>
<!--小于IE9的版本才会读取此行代码-->
<!--[if lt IE 9]-->
<script src="js/html5shiv.min.js"></script>
<!--[endif]-->
</head>
<body>
<div></div>
<header>头部标签</header>
<nav>导航标签</nav>
<section>块级标签</section>
<footer>页脚标签</footer>
<input type="text" placeholder="占位信息" list="week">
<datalist id="week">
<option value="星期一">星期一</option>
<option value="星期二">星期二</option>
<option value="星期三">星期三</option>
<option value="星期四">星期四</option>
<option value="星期五">星期五</option>
<option value="星期六">星期六</option>
<option value="星期天">星期天</option>
</datalist>
<fieldset>
<legend>注册信息</legend>
用户名: <input type="text"><br/>
密码: <input type="password">
</fieldset>
</body>
</html>
新增的表单元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
margin: 0 auto;
border:1px solid #ccc;
}
.box dl{
magin:15px 0px;
overflow: hidden;
}
.box dl dt, .box dl dd{
float: left;
}
.box dl dt{
width: 100px;
}
.box dl dd{
width: 240px;
}
</style>
</head>
<body>
<form action="#">
<div class="box">
<dl>
<dt> 邮箱: </dt>
<dd> <input type="email"></dd>
<dd>注册后不能更改</dd>
</dl>
<dl>
<dt>手机号码: </dt>
<dd><input type="tel"></dd>
<dd>注册后不能更改</dd>
</dl>
<dl>
<dt>网址: </dt>
<dd><input type="url"></dd>
<dd>注册后不能更改</dd>
</dl>
<dl>
<dt>邮政编码: </dt>
<dd><input type="number"></dd>
<dd>注册后不能更改</dd>
</dl>
<dl>
<dt>搜索: </dt>
<dd><input type="search"></dd>
<dd>注册后不能更改</dd>
</dl>
<dl>
<dt>拖动滑块: </dt>
<dd><input type="range"></dd>
<dd>注册后不能更改</dd>
</dl>
<dl>
<dt>小时分钟: </dt>
<dd><input type="time"></dd>
<dd>注册后不能更改</dd>
</dl>
<dl>
<dt>日期: </dt>
<dd><input type="date"></dd>
<dd>注册后不能更改</dd>
</dl>
<dl>
<dt>时间: </dt>
<dd><input type="datetime-local"></dd>
<dd>注册后不能更改</dd>
</dl>
<dl>
<dt>月年: </dt>
<dd><input type="month"></dd>
<dd>注册后不能更改</dd>
</dl>
<dl>
<dt>星期年: </dt>
<dd><input type="week"></dd>
<dd>注册后不能更改</dd>
</dl>
<dl>
<dt></dt>
<dd><input type="submit"></dd>
</dl>
</div>
</form>
</body>
</html>
表单新增属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--属性名如果和属性值一样,给属性值bool类型,或者直接不写
autofocus:自动获取焦点
multiple:多行选择
required:必填项,不能为空
accesskey="s":使用alt+s,获取焦点的快捷方式
pattern:正则规定输入的内容,严格意义
-->
<form action="">
请输入用户信息: <input type="text" placeholder="请输入用户名" autofocus="autofocus" autocomplete="on" required ><br>
上传图片: <input type="file" multiple><br>
<input type="text" accesskey="s"><br>
<input type="number" maxlength="1111"><br>
<input type="text" pattern="[a-z]{3}">
<input type="submit">
</form>
</body>
</html>
h5新增API
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cls{
width: 200px;
height: 200px;
background-color: pink;
}
.fonts{
font-size: 50px;
}
</style>
</head>
<body>
<!--
h5新增的api依赖于脚本语言,一般都在script标签中完成
1.js获取元素的方式:documen.getElementById() byclassname document.querySelector('选择器') querySelectorAll()
2.jquery操作类:addClass() removeClass() toggleClass() hasClass()
h5新增的操作类:基于classList的属性,dom对象.className.add() remove() toggle() contains()
-->
<button>显示效果</button>
<div class="fonts">哈哈哈</div>
<script>
//点击按钮,设置div的样式
var box=document.querySelector('div')
console.log(box.classList);
document.querySelector('button').onclick=function () {
// if (box.classList.contains('cls')) {
// box.classList.remove('cls')
// }else{
// box.classList.add('cls')
// }
box.classList.toggle('cls');
}
</script>
</body>
</html>
自定义属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="cls" data-name="hh" data-age="18" data-user-name="哈哈">
燃烧你的卡路里
</div>
<script>
/**
* 自定义属性名:data-[属性名字]
* 获取属性值:jquery的方式获取: 对象.data('自定义属性名')
* h5:对象.dataset 获取属性的集合
* 自定义属性的命名:data-名字 data-user-name
*/
var box=document.querySelector('.cls');
//获取自定义属性
console.log(box.dataset);
console.log(box.dataset.age);
console.log(box.dataset['age']);
console.log(box.dataset.userName);
//设置单个属性
box.dataset.age=16;
console.log(box.dataset.age);
console.log($('.cls').attr('data-user-name'));
console.log($('.cls').data('userName'));
</script>
</body>
</html>
音频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="cls" data-name="hh" data-age="18" data-user-name="哈哈">
燃烧你的卡路里
</div>
<script>
/**
* 自定义属性名:data-[属性名字]
* 获取属性值:jquery的方式获取: 对象.data('自定义属性名')
* h5:对象.dataset 获取属性的集合
* 自定义属性的命名:data-名字 data-user-name
*/
var box=document.querySelector('.cls');
//获取自定义属性
console.log(box.dataset);
console.log(box.dataset.age);
console.log(box.dataset['age']);
console.log(box.dataset.userName);
//设置单个属性
box.dataset.age=16;
console.log(box.dataset.age);
console.log($('.cls').attr('data-user-name'));
console.log($('.cls').data('userName'));
</script>
</body>
</html>
视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<video src="video/mp4.mp4" controls width="600"></video><br>
<button>播放</button>
<button>暂停</button>
<button>快进</button>
<button>快退</button>
<button>总时长:duration</button>
<button>2倍速播放</button>
<button>0.5倍速播放</button>
<button>加大声音</button>
<button>减小声音</button>
<button>静音</button>
<button>全屏</button>
<div style="width: 200px;height: 200px;background: pink;"></div>
<script>
var btns= document.querySelectorAll('button');
var vedeos=document.querySelector('video');
btns[0].onclick=function () {
if (vedeos.paused) {
vedeos.play();
}
}
btns[1].onclick=function () {
vedeos.pause();
}
btns[2].onclick=function () {
vedeos.currentTime+=10;
}
btns[3].onclick=function () {
vedeos.currentTime-=10;
}
//总时长
btns[4].onclick=function () {
console.log(vedeos.duration);
}
//倍速播放
btns[5].onclick=function () {
vedeos.playbackRate=2;
}
btns[6].onclick=function () {
vedeos.playbackRate=0.5;
}
//加大声音
btns[7].onclick=function () {
if(vedeos.volume>=1){
vedeos.volume=1;
}else{
vedeos.volume=(vedeos.volume*10+1)/10;
}
}
btns[8].onclick=function () {
var volume=vedeos.volume;
volume-=0.1;
if(vedeos.volume<=0){
vedeos.volume=0;
}else{
vedeos.volume=volume;
}
}
btns[9].onclick=function () {
console.log(vedeos.muted)
if(vedeos.muted){
vedeos.muted=false;
this.innerText='静音';
}else{
vedeos.muted=true;
this.innerText='取消静音';
}
}
btns[10].onclick=function () {
vedeos.webkitRequestFullScreen()
}
document.querySelector('div').onclick=function () {
this.webkitRequestFullScreen();
}
</script>
</body>
</html>
伸缩布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
section{
width: 80%;
height: 300px;
margin: 50px auto;
background-color: pink;
/*对父元素使用伸缩布局---子元素默认占父元素的100%*/
display: flex;
min-width: 400px;
}
div{
/*width: 33.33%;*/
/*给子元素确定分数*/
/*flex: 1;*/
background: lightgreen;
margin: 0 10px;
}
div:first-child{
width: 200px;
background-color: #FF6600;
}
div:nth-child(2){
flex: 1;
}
div:last-child{
flex: 2;
background-color: lightblue;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>
flex属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.fa{
width: 80%;
height: 200px;
margin: 0 auto;
/*使用伸缩布局*/
display: flex;
/*子元素的 分布情况:横向,纵向*/
flex-direction: column;
}
.fa div{
flex: 1;
}
.fa div:first-child{
background: lightgreen;
}
.fa div:last-child{
background: pink;
}
</style>
</head>
<body>
<div class="fa">
<div>1</div>
<div>2</div>
</div>
</body>
</html>
扫一扫
645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
