本文介绍了HTML5中语义化标签、新增的input type属性值、API以及多媒体处理，特别是<audio>标签的使用，详细讲解了如何通过附加属性控制音频播放。同时，还探讨了伸缩布局的概念，包括flex子项目的缩放比例、主轴方向调整、主轴对齐和侧轴对齐方式。
语义化标签:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--如果浏览器的版本小于ie9， 浏览器会读取以下代码-->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
<style>
header {
width: 200px;
height: 200px;
background-color: pink;
}
fieldset{
width:400px;
}
</style>
</head>
<body>
<div></div>
<!--块级标签-->
<header>头部标签</header>
<nav>导航标签</nav>
<section>块级标签</section>
<footer>
脚部标签
</footer>
<select name="" id="">
<option value="篮球">篮球</option>
<option value="足球">足球</option>
<option value="羽毛球">羽毛球</option>
</select>
<input type="text">
<input type="text" placeholder="占位信息" list="week">
<datalist id="week">
<option value="星期一">星期一</option>
<option value="星期二">星期二</option>
<option value="星期三">星期三</option>
</datalist>
<fieldset>
<legend>注册信息</legend>
用户名：<input type="text"> <br>
密码：<input type="password">
</fieldset>
</body>
</html>新增的input type属性值:
| 类型**** | 使用示例**** | 含义**** |
|---|---|---|
| email**** | <input type="email"> | 输入邮箱格式 |
| tel**** | <input type="tel"> | 输入手机号码格式 |
| url**** | <input type="url"> | 输入url格式 |
| number**** | <input type="number"> | 输入数字格式 |
| search**** | <input type="search"> | 搜索框（体现语义化） |
| range**** | <input type="range"> | 自由拖动滑块 |
| time**** | <input type="time"> | 小时分钟 |
| date**** | <input type="date"> | 年月日 |
| datetime**** | <input type="datetime"> | 时间 |
| month**** | <input type="month"> | 月年 |
| week**** | <input type="week"> | 星期 年 |
<!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 {
margin: 15px 0;
overflow:hidden;
}
.box dl dt, .box dl dd{
float:left;
}
.box dl dt{
width:100px;
text-align:right;
}
.box dl dd{
width:240px;
}
</style>
</head>
<body>
<form action="#">
<div class="box">
<dl>
<dt>普通文本框：</dt>
<dd><input type="text"></dd>
<dd>注册后不能更改</dd>
</dl>
<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='z': 使用alt+ z 获取焦点的快捷方式
pattern:正则规定输入的内容。严格意义
-->
<form action="">
请输入用户信息：<input type="text" placeholder="请输入用户名" autofocus autocomplete="on" required > <br>
上传图片：<input type="file" multiple> <br>
<input type="text" accesskey="z"> <br>
<input type="number" max="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:66px;
}
</style>
</head>
<body>
<!--
h5的api依赖于脚本语言，一般都在script标签中完成
1、js获取元素的方式：document.getElementById() byclassname bytagname byname
h5: document.querySelector('选择器') querySelectorAll()
2、jquery操作类： jquery对象.addClass() removeClass() toggleClass() hasClass()
h5新增的类操作：基于classList的属性， dom对象.className.add() remove() toggle() contains()
好处：不用像jquery导入库，又可以方便的使用类操作dom元素
-->
<button>显示效果</button>
<div class="fonts">你好</div>
<script>
var box=document.querySelector('div');
//获取元素的类名
console.log(box.classList);
//点击按钮，设置div的样式
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="zhangyan" data-age="18" data-user-name="小白">
今天可能要下雨，大家带伞了吗？
</div>
<script>
/*
* 自定义属性：data-[属性名字]
* 获取属性值： jquery的方式获取： 对象.data('自定义属性名') attr() prop() val()
* h5： 对象.dataset 获取属性的集合
*
* 自定义属性的命名： data-名字 data-user-name----通过dataset获取时：dataset.userName---遵循驼峰命名法
*
* */
var box = document.querySelector('.cls');
//获取自定义属性
console.log(box.dataset);//对象
//获取某一个自定义属性值
console.log(box.dataset.age);
console.log(box.dataset['age']);
console.log(box.dataset.userName);
//2. 设置单个属性
box.dataset.age = 16;
console.log(box.dataset.age);
//jquery的方式获取元素
//attr()获取属性值
console.log($('.cls').attr('data-user-name'));
console.log($('.cls').data('userName'));
</script>
</body>
</html>多媒体:
embed:
<audio>标签来解决音频播放的问题。
并且可以通过附加属性可以更友好控制音频的播放，如：
autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放 如果这个属性不写 默认播放一次 loop 或者 loop = “loop” 表示无限循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>-->
<!--<audio src="video/bgsound.mp3" controls></audio>-->
<!--
controls:进度条
autoplay:自动播放,预加载的过程，必须等音频完全加载完成后才会自动播放
loop:循环播放
-->
<!--<audio controls autoplay loop >
<source src="video/bgsound.mp3" >
<source src="video/music.ogg">
您的浏览器不支持，请使用谷歌浏览器
</audio>-->
<video src="video/mp4.mp4" controls autoplay loop width="600"></video>
</body>
</html><audio>标签来解决音频播放的问题。
同样，通过附加属性可以更友好的控制视频的播放
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
width 设置播放窗口宽度
height 设置播放窗口的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<video src="video/mp4.mp4" controls autoplay 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 videos = document.querySelector('video');
//点击播放按钮,播放视频
btns[0].onclick = function () {
// videos.load();
if (videos.paused) {
videos.play();
}
}
//点击暂停按钮,停止播放视频
btns[1].onclick = function () {
videos.pause();
}
//点击快进，视频快进
btns[2].onclick = function () {
//当前时间：currentTime属性
console.log(videos.currentTime);
videos.currentTime += 10;
}
//点击快进，视频快进
btns[3].onclick = function () {
videos.currentTime -= 10;
}
//显示总时长
btns[4].onclick = function () {
console.log(videos.duration);
}
//倍速播放
btns[5].onclick = function () {
videos.playbackRate = 2;
}
btns[6].onclick = function () {
videos.playbackRate = 0.5;
}
//加大声音
btns[7].onclick = function () {
console.log(videos.volume);
var volume = videos.volume;
volume = (volume * 10 + 1) / 10
if (volume >= 1) {
volume = 1;
}
videos.volume = volume;
}
//减小声音
btns[8].onclick = function () {
// videos.volume 取值范围：【0,1】
var volume = videos.volume;
volume -= 0.1;
if (volume <= 0) {
volume = 0;
}
videos.volume = volume;
}
//静音
btns[9].onclick = function () {
// videos.volume = 0;
console.log(videos.muted);
if (videos.muted) {//如果是静音
videos.muted = false;
this.innerText = '静音';
} else {//如果不是静音
videos.muted = true;
this.innerText = '取消静音';
}
}
//全屏操作：每个元素都有全屏操作
btns[10].onclick = function () {
videos.webkitRequestFullScreen();
}
document.querySelector('div').onclick = function () {
this.webkitRequestFullScreen();
}
</script>
</body>
</html>伸缩布局:
2、各属性详解
1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
min-width 最小值 min-width: 280px 最小宽度 不能小于 280
max-width: 1280px 最大宽度 不能大于 1280
2.flex-direction调整主轴方向（默认为水平方向）
flex-direction: column 垂直排列
flex-direction: row 水平排列
http://m.ctrip.com/html5/ 携程网手机端地址
3、justify-content调整主轴对齐（水平对齐）
子盒子如何在父盒子里面水平对齐
| 值 | 描述 | 白话文 |
|---|---|---|
| flex-start | 默认值。项目位于容器的开头。 | 让子元素从父容器的开头开始排序但是盒子顺序不变 |
| flex-end | 项目位于容器的结尾。 | 让子元素从父容器的后面开始排序但是盒子顺序不变 |
| center | 项目位于容器的中心。 | 让子元素在父容器中间显示 |
| space-between | 项目位于各行之间留有空白的容器内。 | 左右的盒子贴近父盒子，中间的平均分布空白间距 |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 | 相当于给每个盒子添加了左右margin外边距 |
4、align-items调整侧轴对齐（垂直对齐）
子盒子如何在父盒子里面垂直对齐（单行）
| 值 | 描述 | 白话文 |
|---|---|---|
| stretch | 默认值。项目被拉伸以适应容器。 | 让子元素的高度拉伸适用父容器（子元素不给高度的前提下) |
| center | 项目位于容器的中心。 | 垂直居中 |
| flex-start | 项目位于容器的开头。 | 垂直对齐开始位置 上对齐 |
| flex-end | 项目位于容器的结尾。 | 垂直对齐结束位置 底对齐 |
例:
<!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;
/*1.对父元素使用伸缩布局----子元素的高度默认占父元素的100%*/
display: flex;
min-width: 400px;
}
div {
/*width: 33.33%;*/
/*2. 给子元素确定份数*/
/*flex: 1;*/
background-color: red;
margin: 0 10px;
}
div:first-child {
width: 200px; /*固定宽度的容器不会随着父容器的宽度的改变而改变*/
background-color: orange;
}
div:nth-child(2) {
flex: 1;
}
div:last-child {
background-color: lightblue;
flex: 2;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>
扫一扫
434
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
