耽美漫画

1.概述

什么是html5?

提到html5大家可能首先会想到的是移动端页面,但这只是html5的运用范围之⼀。

其实html5是最新的html规范,也是一系列用来制作现代web内容的相关技术的总称。

当然其中最重要的就是html5,css和js了。

html发展到如今,只经历了了短短的十多年。它是在1993年首次发布,作为一种网上信息浏览传输的规范。

之后的几年又迅速发布了2.0版,再到3.2版和4.0版。直到1999年的4.01版成为一个标志性的版本。

在这高速发展的⼏年⾥,W3C组织逐渐掌握了html规范的控制权。

当时在快速发布了这几个版本之后,业界普遍认为html已经穷途末路了,甚至想要开发其他新的语言来替代它。

因为这个时候的html如果想要支持更新的web应用,克服现有的缺点,那就迫切需要添加新的功能,指定新的规范。

2006年W3C重新接入其中,于2008年发布了html5的草案,提出了解决问题的办法和标准。

于是各大浏览器厂商按耐不住开始升级浏览器以支持html5,html重新焕发出无穷无尽的生命力并在互联网的舞台上大放光彩。

可以说,html5的出现和设计就是为了解决问题,它不是一个颠覆性的概念。

相反,它的核心理念是保持一切新特性平滑过渡,以保证兼容性所以可以放心使用。

同时它的更新非常具有实用性,它在所有可能的地方都努力进行了分离:

让表现和内容分离,使得访问下更佳,降低了不必要的复杂度

让代码更具有可读性,同时让文件不会过大导致页面加载变慢

还化繁为简,有了新的简化的doctype,新的简化的字符集声明,简单而强大的html5API

还以浏览器原生功能替代了部分js代码,开发体验使用体验大大增强。

2.新增元素

说到html的元素的使用其实非常简单,但知道如何使用这些元素和理解它们的含义,是同等重要的。

在html5中有一个很大变化是讲语义与元素所表现的结果分开。

之所以要这样做,是因为这样更合适:

html元素负责文档的内容结构

内容的表现形式则有css来控制

相互之间互不不影响,让代码清晰易读,便于团队维护开发。

搜索引擎也可以根据标签的语义确定上下文等问题。

因此写页面的时候少用那种有呈现样式作用的元素,比如strong,small之类。

尽量做到以内容类型为依据,使用最具体的元素,不不要误用元素。

2.1 新的doctype和新的字符集写法

浏览器会根据doctype来识别应该⽤什么模式来显示页⾯,用什么规则来验证⻚面。

在过去的版本中,需要加入⼀⻓串规则l地址,比如:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN””” style=”font-family: “Microsoft YaHei”, 微软雅黑; font-size: 15px; caret-color: red;” _href=”http://www.w3.org/TR/html4/loose.dtd”>”>http://www.w3.org/TR/html4/loose.dtd”>

而在html5中已经没有这个必要了:

<!DOCTYPE html>

html的字符集可以告诉浏览器以什么内码什么语⾔来显示⽹页。

在过去的版本中设置这项会⽐比较复杂很难记忆:

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

⽽在html5中就要简单许多

<meta charset=”UTF-8″>

2.2 新增语义元素——结构类

article 表示一篇任何形式的文章,可以独立的内容区块

aside 表示独立于周围内容的一个完整的内容块

figure 表示一副插画

figcaption 放在figure中标注插画标题的,目的是反应图片与标题之间是有关联的

header 表示增强的标题,可以包含标题或其他内容

footer 表示页面底部的页脚

hgroup 表示增强型的标题,目的是把标题和副标题联系到一起

nav 表示页面中重要的一组链接

section 表示文档中的一个区块,或一组文档。这是一个通用型的容器

基本规则就是必须开始于一个标题,然后应该在其他语义元素不适用的情况下再选用section

2.3 新增语义元素——文本类

time 标注日期和时间

output 标注js的返回值

mark 标注突显文本

3 Form表单

表单,是指从网站访问者手里收集信息的地方

比如可以填写文本的文本框,可以选中或者取消的多选框,只能多选一的单选框,下拉列表框等等。

表单的用途非常广,可以说只要上网就会遇到它。

html中的form表单和html语言几乎是同时出现的,多年来都没有丝毫改进。

一直到html5的出现,它在原来的表单基础上进行修订,增强了了许多功能,让交互变得更加容易起来。

3.1 新增的表单元素

html中的input是个神奇的存在,只需要修改它的type类型,就能实现许多不同类型的输入控件。

如果浏览器器不认识这些类型,就会把它们当做一个普通的text类型的文本框来处理,因此下面这些控件都能在不同浏览器放心使用。

在更现代的浏览器中使用这些类型的控件会显得更加方便:

可以提供便于编辑的辅助;

限制可能出现的错误;

以及执⾏行行验证。

tel 电话号码控件,在移动浏览器中会呼出特别的键盘:只包含数字没有字母

email 电子邮件控件,验证规则是这个字符串中必须含有@符号和一个点号,而且两者之间至少要间隔一个字符,点号后面至少要有两个字符,这差不多就是邮件的验证规则

url 网址类型控件

search 搜索框控件,用于执行某种搜索,它有其特定语义,便于浏览器或辅助上网软件知道这里是干嘛用的

range 滑动条控件

color 颜色控件,可以让用户从下拉式色盘中选取一个颜色

number 常规数值类型控件,浏览器自动忽略⾮数字类型字符。并且可以配合min和max属性使用

date 日期控件,提供一个方便的下拉式日历,避免输入者对日期格式的困惑,也能避免输入不存在的日期。格式为YYYY-MM-DD

time 时间控件,格式为HH:mm:ss.ss

3.2 新增的表单特性和函数

placeholder 占位

autocomplete 规定表单是否应该启用自动完成填充功能

autofocus 为表单挑选正确的起点焦点

list+datalist 显示输入建议

min+max 最小值和最大值,在多种表示数值的控件中可用

step 规定数字的间隔,可以与min和max配合使用,创建合法值范围

required 规定是否必填

4 音频和视频

最开始的网页中如果需要插入一段多媒体的音频和视频,通常都是使用<embed>元素硬塞

然后浏览器用系统的视频播放器创建一个视频窗口放在页面中。

这样做的问题在于一切都是听天由命,无法控制播放器,也不能提前缓冲,更不能知道用户到底有过哪些操作。

而用浏览器插件比如flash,解决了浏览器支持的问题。

但要把它放到网页中,必须用<object><embed>元素编写一大堆乱七⼋八糟的标记,必须适当地编码文件。

更糟糕的是苹果的移动设备上根本就不支持flash。

因此在html5中直接就对这些进行了支持,支持的思路非常简单,就是使用和img这种元素差不多的方式为网页添加视频音频。

所以html5就增加了audio和video这俩元素来添加音频视频。

4.1 音频

基本写法很简单:

<audio src=”xxx.mp3″ controls></audio>

其中src是多媒体的链接,controls属性是告诉浏览器要包含基本的播放控件。

除此之外还有一些常用属性:

preload 告诉浏览器如何下载⾳音频。

有三种值,auto让浏览器后台下载整个文件

metadata告诉浏览器先获取音频文件开头的数据块确定基本信息

none表示不必预下载

autoplay 告诉浏览器在加载完成一篇之后立即播放

loop 表示循环播放

4.2 视频

视频video和audio几乎是一样的用法,只是比起audio来要多出3个属性:

height,width和poster。

height和width不必多说都能明白,这是用于设置视频可视窗口的高和宽的。

而poster用于设置替换视频的图片,使用这个图片的情况一般有三种:

1、视频第一帧还未加载完毕的情况;

2、preload属性设置为none时;

3、没有找到指定视频文件时。

 

4.3 媒体格式支持

由于html5标准并没有要求浏览器支持哪种多媒体格式,也不太可能规定死这个格式

因此各家浏览器开发商可以自由选择想要支持的格式,然后我们就发现不同浏览器支持的格式根本就不一样了。。。

现在常用的音频视频格式可以见下表:

MP3 世界上最流行的音频格式 .mp3 audio/mp3

Ogg Vorbis 免费开放的标准,能够提供高质量的压缩音频,可以和mp3媲美 .ogg audio/ogg

WAV 未加工数字音频的初始格式,体积奇大,一般不不适合web .wav audio/wav

H.264 视频压缩的行业标准,特别适合高清晰度视频 .mp4 video/mp4

Ogg Theora 免费开放的视频标准,品质和性能不及H.264但可以满⾜足大多数人的需要.ogv video/ogg

WebM 最新的视频格式,谷歌买下VP8之后,将其改为免费标准 .webm video/webm

4.4 如何支持不同浏览器

由于不同浏览器器支持的多媒体格式不一样,因此一般说来有两种方案以支持每一款浏览器器:

第一种是首选flash,以html5为后备

第二种是首选html5,以flash为后备

按现在的趋势来讲,flash江河⽇日下,html5才是未来的强者

因此一般说来可以使用第二种方案。

利用了一个原理,就是有史以来的浏览器都会自动忽略掉它不认识的元素,因此可以这么做:

首先加入html5方式的音频标签,这里source标签的作用是在拥有多份源文件的时候,浏览器自行选择它所支持的文件

<audio controls>

<source src=”xx.mp3″ type=”audio/mp3″>

<source src=”xx.ogg” type=”audio/ogg”>

</audio>

然后在里面加入flash

如果浏览器无法识别这些元素,那么会自动读到flash部分。

这样就能在任意浏览器中完美加载多媒体文件了。

<audio controls>

<source src=”xx.mp3″ type=”audio/mp3″>

<source src=”xx.ogg” type=”audio/ogg”>

<object id=”player” width=”” height=”” data=”flowplayer-3.2.7swf” type=”application/x-shockwave-

flash”>

<param name=”movie” value=”flowplayer-3.2.7swf”>

<param name=”flashvars” value=’config={“clip”: “xxx.mp4”}’>

</object>

</audio>