HTML5入门
myzbx 2024-12-11 15:59 33 浏览
什么是HTML5
官方概念：HTML5草案的前身名为Web Applications 1.0，是作为下一代互联网标准,用于取代html4与xhtml1 的新一代标准版本,所以叫html5。它增加了新的标签和属性，加强了网页的标准、语义化与web表现性能，同时还增加了本地数据库等 Web 应用的功能。
广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，它包括：HTML5，CSS3，Javascript，API在内的一套技术组合
HTML 5发展时间表
由上面图可知：现在的HTML5还不是一个最终统一的版本，所以说HTML5用在手机端的开发。
目前支持HTML5的浏览器
不同的浏览器显示的效果可能不一样。因为HTML5没有一个统一的标准。（现在处在一个推广阶段），但是大部分是一样的。
HTML5的特点
更简单
标签语义化
语法更宽松
多设备跨平台
自适应网页设计
从头说起——文档的声明
Xhtml1.0的页面架构
Html5的页面架构
HTML5标签的语义化
在以前的html中，盒子用div或span。
在html5中，标签的最大变化是标签都有了语义，以前的div和span都没有语义，仅仅表示一个盒子。
<header> 头标签
<nav> 导航标签
<aside> 侧边栏标签
<article> 文章标签
<footer> 页脚
<section> 章节，页眉，栏目
HTML5新增的表单三个属性
1、required：必填属性
2、placeholder：默认显示内容
3、autofocus：自动获取焦点
Html5中新增input标记的type属性
| 属性 | 描述 |
| 邮件 | |
| date | 日期 |
| url | 网址格式 |
| number | 数字 |
| range | 范围 |
| color | 颜色 |
完整代码
<form>
邮件：<input type="email" name="email"><br>
日期：<input type="date" name="mydate"><br>
网址：<input type="url"><br>
手机号：<input type="number"><br>
亮度：<input type="range" min="0" max="255"><br>
颜色：<input type="color"><br>
地址：
<select>
<optgroup label="北京">
<option>西城区</option>
<option>东城区</option>
</optgroup>
<optgroup label="天津">
<option>河西区</option>
<option>河东区</option>
</optgroup>
</select><br>
搜索车型：<input type="text" list="car">
<datalist id="car">
<option>奥迪</option>
<option>奥拓</option>
<option>大众</option>
</datalist>
<input type="submit" value="提交">
</form>
Range调背景色
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//当页面准备完毕的时候
$(document).ready(function(e) {
$('input').change(function(e) {
var red=$('#red').val(); //得到红色的值
var green=$('#green').val(); //得到绿色的值
var blue=$('#blue').val(); //得到蓝色的值
var value=$(this).val(); //当前修改的值
$(this).next().html(value); //将值付给当前修改元素后面的span
$('body').css('background-color','rgb('+red+','+green+','+blue+')');
});
});
</script>
</head>
<body>
红色：<input type="range" id="red" min="0" max="255" value="255"><span>255</span><br>
绿色：<input type="range" id="green" min="0" max="255" value="255"><span>255</span><br>
蓝色：<input type="range" id="blue" min="0" max="255" value="255"><span>255</span>
</body>
</html>
音频播放
第一种写法
如果声音的格式html5不支持，就显示标记之间的提示信息
第二种写法：
视频播放
使用video标记来插入视频 autoplay表示自动播放，controls表示显示控制面板。
360音乐导航
完整代码如下:
<style type="text/css">
#nav{
list-style-type:none; /*去掉无序列表前面的点*/
margin:50px auto 0px; /*上边界50px,左右居中，下边界为0*/
width:960px; /*整个导航的宽度*/
height:38px;
color:#333;
font-size:14px;
padding:0px; /*填充清0*/
overflow:hidden; /*超出尺寸的部分不显示*/
}
#nav li{
width:105px;
height:36px;
float:left; /*所有的li从左到右排列*/
text-align:center; /*文字居中对齐*/
line-height:38px; /*设置行高，目的是让文字垂直居中*/
border-top:#C9CBCE solid 1px;
border-left:#C9CBCE solid 1px;
border-bottom:#C9CBCE solid 1px;
cursor:pointer; /*光标移动到li上变成手形*/
}
#nav li:last-child{ /*#nav下的最后一个li*/
border-right:#C9CBCE solid 1px;
}
#nav .liclick{
border-top:#54B82A solid 2px;
border-bottom:none;
}
#nav span{
width:100%;
height:38px;
display:block; /*只有块显示标记才能设置宽度和高度*/
position:relative; /*相对定位，目的为了span可以移动*/
z-index:-1; /*设置span上下层的顺序，让它在文字的下面*/
}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
//点击li
$('#nav li').click(function(e) {
$('.liclick').removeClass('liclick');
$(this).addClass('liclick');
});
//每个li下面添加一个底色
var color=['#B9D329','#C0EBF7','#B9D329','#69BCF3','#79D9F3','#FA5F94','#ACD180','#FAB4CC','#FFAE5B'];
$('#nav li').append('<span>');
$('#nav span').each(function(index, element) {
$(this).css('background-color',color[index]);
});
//移动到li上的时候颜色色块升起
$('#nav li').hover(function(){
$(this).children('span').animate({'top':-38},200);
//获得当前li的索引编号
var index=$(this).index();
$('audio').get(index).play(); //播放第index个音乐
},function(){
$(this).children('span').animate({'top':0},200);
});
});
</script>
</head>
<body>
<ul id="nav">
<li>我的主页</li>
<li>新闻头条</li>
<li>电 视 剧</li>
<li>最新电影</li>
<li>小 游 戏</li>
<li>小说大全</li>
<li>旅游度假</li>
<li>今日团购</li>
<li>品牌特卖</li>
</ul>
<audio src="360music/m1.mp3"></audio>
<audio src="360music/m2.mp3"></audio>
<audio src="360music/m3.mp3"></audio>
<audio src="360music/m4.mp3"></audio>
<audio src="360music/m5.mp3"></audio>
<audio src="360music/m6.mp3"></audio>
<audio src="360music/m7.mp3"></audio>
<audio src="360music/m8.mp3"></audio>
<audio src="360music/m9.mp3"></audio>
</body>
相关例题：http://pan.baidu.com/s/1hsDGA8k 密码：55ic
- 上一篇：web前端tips:HTML5部分新特性介绍
- 下一篇：HTML5新特性
相关推荐
- 砌体植筋拉拔试验检验值到底是6.0KN，还是10.2KN，如何计算确定
-
砌体拉结筋植筋养护完成后，需对所植钢筋进行拉拔试验，以检验植筋的锚固强度是否满足设计要求。检测时，按照一定的抽样比例进行拉拔试验。根据《混凝土结构后锚固技术规程》JGJ145-2013，以同品种、同...
- 柴油机功率如何计算?计算柴油机功率需要哪些参数?
-
在汽车领域，对于柴油机功率的计算是一项重要的工作，它有助于我们更好地了解柴油机的性能和适用场景。下面我们就来详细探讨一下柴油机功率的计算方法以及所需的参数。首先，我们要了解计算柴油机功率常用的公式。在...
- 变压器短路阻抗的作用和计算方法（变压器短路阻抗的作用和计算方法是什么）
-
变压器短路阻抗的作用和计算方法短路阻抗是在负载试验中测量的一项数据，它是二次侧短接并流过额定电流时，一次侧施加的电压与额定电压的的百分数。那么测量变压器的短路阻抗有什么意义呢？其实变压器的阻抗电压乃是...
- 9.35m层高高支模支撑架计算书（支模架多高属于高支模）
-
某工厂新扩建的建筑面积为1989.2m^2，建筑物总体分为2层，但局部为4层。建筑物檐高19.4m，建筑物总高23m。建筑物呈长方形设置，长度为48.20m，宽度为23.88m，结构形式为框架结构...
- 吊篮(悬挂装置前梁加长)安全复核计算书
-
吊篮（悬挂装置前梁加长）安全复核计算书一种超常规搭设的高处作业吊篮，因使用要求将吊篮悬挂装置前梁加长设置，本计算书针对这种工况的校核，以作参考。计算依据：1、《高处作业吊篮》GB/T19155-...
- 电功率计算公式精编汇总（电功率计算视频讲解）
-
一、电功率计算公式：1在纯直流电路中：P=UIP=I2RP=U2/R式中：P---电功率（W），U---电压（V），I----电流（A），R---电阻（Ω)。2在单相交流电路中：P=UIcosφ...
- 灌注桩承载力检测方法及步骤（灌注桩承载力不够怎么办）
-
检测灌注桩的承载力是确保基础工程安全可靠的关键环节，检测结果的精细能准确为我们提供可靠的数据，让我们能准确判断桩基础的承载力，方便后续施工安排，同样也能让我们根据数据分辨出有问题桩基，采取可靠有效的措...
- 很哇塞的体积计算方法:向量叉乘 很哇塞的体积计算方法
-
高中数学必看：向量叉乘，体积的神。大家都知道a、b的向量是什么意思，但是a、b的向量又是什么？很多同学都不知道，向量的向量在高中阶段非常有用，虽然它是大学的知识，在高中阶段可以干两件事。·第一件事，表...
- 施工升降机基础(设置在地库顶板回顶)计算书
-
施工升降机基础（设置在地库顶板回顶）计算书计算依据：1、《施工现场设施安全设计计算手册》谢建民编著2、《建筑地基基础设计规范》GB50007-20113、《混凝土结构设计标准》GB/T50010-2...
- 剪力墙水平钢筋根数如何计算?（剪力墙水平钢筋绑扎搭接规范）
-
剪力墙水平钢筋根数的计算需综合考虑墙高、起步距离、间距及构造要求等因素，具体步骤如下及依据：1.基本计算公式水平钢筋根数计算公式为：根数=（墙高-起步距离）/间距（墙高-起步距离）/间距...
- 直流电路常用计算公式（直流电路常用计算公式有哪些）
-
1、电阻导体阻碍电流通过的能力叫做电阻，用字母R表示，单位欧(Ω)。R=ρl/s式中R-导体的电阻，欧(Ω)；ρ-导体的电阻率，欧·米(Ω·m)；l-导体的长度，米(m)；s-导体的截面积，平方米(m...
- 电气主电路图的绘制特点（电气原理图主电路）
-
1、电气主电路图中的电气设备、元件，如电源进线、变压器、隔离开关、断路器、熔断器、避雷器等都垂直绘制，而母线则水平绘制。电气主电路图除特殊情况外，几乎无一例外地画成单线图，并以母线为核心将各个项目(如...
- 中考总复习:物理专题 功和机械能 (功的计算、功率、动能、势能)
-
中考物理专题：功与机械能解析一、力学中的功——能量转化的桥梁功是力对物体能量变化的量度，需满足两要素：作用在物体上的力、物体沿力方向移动距离。例如推箱子时，若箱子未移动，推力不做功；若箱子滑动，推力做...
- 40亿QQ号，不超过1G内存，如何去重?
-
分享一道网上很火的面试题：40亿QQ号，不超过1G的内存，如何去重？这是一个非常经典的海量数据去重问题，并且做了内存限制，最多只能1GB，本文跟大家探讨一下~~一、常规思路我们日常开发中,如果谈到去重...
- 填充墙体拉结筋植筋深度、孔径、拉拔试验承载力计算!
-
今天分享下植筋间距及保护层要求：根据JGJ145-2013混凝土后锚固技术规程要求植筋与混凝土结构边缘不应小于5mm，植筋为两根及以上时水平间距为不应小于5d（d为钢筋直径）。根据混凝土结构后锚固技...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)