html5 内容

一、html5概述

1.1 概述
HTML5 是 HTML 标准的最新演进版本。 这个术语代表了两个不同的概念:
① 它是一个新的 HTML 语言版本包含了新的元素,属性和行为
② 同时包含了一系列可以被用来让 Web 站点和应用更加多样化,功能更强大的技术

html5的改变:
● 语义:能够让你更恰当地描述你的内容是什么。
● 连通性:能够让你和服务器之间通过创新的新技术方法进行通信。
● 离线 & 存储:能够让网页在客户端本地存储数据以及更高效地离线运行。
● 多媒体:使 video 和 audio 成为了在所有 Web 中的一等公民。
● 2D/3D 绘图 & 效果:提供了一个更加分化范围的呈现选择。
● 性能 & 集成:提供了非常显著的性能优化和更有效的计算机硬件使用。
● 设备访问 Device Access:能够处理各种输入和输出设备。
● 样式设计: 让作者们来创作更加复杂的主题吧!
HTML5的改变,涵盖了CSS3和JS的一些新特性,这些东西统称HTML5技术。
我们之前学习的是HTML4.01(XHTML1.0)。2014年10月29日,万维网联盟泪流满面地宣布,经过几乎8年的艰辛努力,HTML5标准规范终于最终制定完成了,并已公开发布。

1.2 兼容性

官方HTML5浏览器性能评分:http://html5test.com/
满分555分,1个特性就是1分,一共555个新特性。

http://caniuse.com/
可以检索任何一个HTML5新特性,在各个浏览器里面的兼容情况。

二、html5新的骨架和语义化标签

2.1 html5骨架
DTD:书写骨架第一步就是书写DTD,

1	<!DOCTYPE html>

这种DTD书写不要加5,因为表示书写网页对于不支持html5新特性的浏览器采用标准模式解析。就是对于不认识的属性或者标签,直接静默处理不报错,对于支持的html5新特性直接显示。

还需要设置字符集

1	<meta charset=”UTF-8”>

HTML5骨架:

1	<!DOCTYPE html>
2	<html lang="en">
3		<head>
4			<title>网页标题</title>
5			<meta charset="UTF-8">
6		</head>
7		<body>
8			网页主体部分
9		</body>
10	</html>

2.2 新的特性
 自封闭标签(单标签)不写关闭符号也是合法的。(可以使用)

1	<img src="images/0.jpg" alt="">

 所有的type属性不写也是合法的。必须要(可以使用)

1	<style></style>
2	<link href=””>
3	<script></script>

 属性值不写双引号也是合法的。(别使用)

1	<img src=images/12.jpg alt=图片加载失败>

 标签大小写都合法。(别使用)

1	<div class="box">文字</div>
2	<!-- 标签可以书写大写字母,不许同学们用 -->
3	<Div>文字</Div>
4	<DIV>文字</DIV>

2.3 新的语义化标签
HTML就是负责页面语义的,HTML4.01中,div负责的任务太多,具体的语义没有拆分。
HTML5中,就是把div拆分为了更多的标签:

  <header>头部
  <nav>导航
  <section>区域
  <aside>侧边栏
  <article>文章
  <footer>底部

这些标签都和div一样,是容器级标签,可以互相嵌套,放什么都行,放自己也行。都是block-level,标准流中是块级元素。

其他的语义化标签:
一组:figure和figcaption。一般用于图片的文字介绍。

4	<figure>
5		<figcaption>这是标题</figcaption>
6		<img src="images/c1.jpg" alt="">
7	</figure>

time标签,时间语义化标签。是行内元素。

1	<p>我们上午课上时间是从<time>9点</time>开始</p>

mark,有强调的语义。有背景色,为黄色。

4	同学们早点到校<mark>学习</mark>

. 同学们早点到校学习

一组:details和summary。有总结含义的标签可展开。

1	<details>
2		<summary>我们每一阶段有考试</summary>
3		<p>html考试</p>
4		<p>js基础考试</p>
5		<p>js进阶考试</p>
6	</details>

在这里插入图片描述

三、表单

3.1 表单元素可以不书写在form标签内部

1	<form action="" id="biaodan"></form>
2	<input type="text" value="用户名" form="biaodan">

3.2 label标签改变

1	<label>
2		请输入用户名:<input type="text">
3	</label>

3.3 datalist
自动感应标签,输入匹配。

1	<p>
2		你学会技能:<input type="text" list="ganying">
3		<datalist id="ganying">
4			<option value="html">网页制作</option>
5			<option value="css">样式设置</option>
6			<option value="javascript">用户交互</option>
7		</datalist>
8	</p>

在这里插入图片描述
3.4 placeholder属性
占位符

用户名:`<input type="text" placeholder="请输入用户名">输入时默认清除

3.5 autofocus
自动获取焦点属性

用户名:<input type="text" placeholder="请输入用户名" autofocus>

3.6 required
必填项属性,提交时表单验证,没填则提交不了。


用户名:<input type="text" placeholder="请输入用户名" required>

3.7输入控件
input标签更改type属性值表示不同的表单元素
电子邮箱:email
电话:tel
搜索框:search
网址:url
数字:number min:最小值 max:最大值

数字:<input type="number" min="1" max="50" value="25">

3.8其他控件
拖拽条:range min:最小值 max:最大值

拖拽条:<input type="range" min="100" max="200" value="150">

在这里插入图片描述
日期:date

日期:<input type="date">

颜色:color

颜色:<input type="color">

四、html5插入视频和音频

4.1 html4视频
之前借助flash,链接外部视频地址

1	<embed src="//player.video.iqiyi.com/a147354accc0191887458cfddaf5ceac/0/0/v_19rqvdm9eo.swf-albumId=2133665100-tvId=2133665100-isPurchase=0-cnId=undefined" allowFullScreen="true" quality="high" width="480" height="350" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

4.2 html5插入视频
不需要借助flash插件 直接使用标签video
video具有属性
src:插入视频路径
controls:控制条
autoplay:自动播放
loop:循环播放

还可以通过source标签引入路径

方式一:
<!-- controls控制条 autoplay:自动播放  loop循环-->
	<!-- <video src="video/1.mp4" controls autoplay loop></video> -->

方式二:
	<!-- 还可以通过source引入视频-->
	<video controls>
		<source src="video/2.mp4">
	</video>

4.3 html5插入音频
audio标签具有属性
src:路径
controls:控制条
autoplay:自动播放
loop:循环播放
同样可以使用source引入路径

	<!-- 如果不设置controls类似于背景音乐 -->
	<audio src="audio/a0.ogg" autoplay loop></audio>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值