前端学习之HTML5

一、HTML5介绍
二、HTML5修改和新增的内容
- html声明
- html指定字符编码
- html5新增的标签
- - 1.结构语义化标签
  - 2.表单控制标签
  - 3.其他标签的应用（多媒体、web应用标签）
  - - 多媒体标签
    - 多媒体标签属性
    - web应用标签
    - HTML5在web应用方面的其他优势
    - - 客户端数据存储
      - 离线缓存技术
    - 注释标签
    - ol有序列表中的新增属性
    - 连接属性中的新增属性

一、HTML5介绍

HTML5几乎代表了新一代的HTML和CSS和JavaScript的总和。HTML5拥有很好的跨平台特性，可以同时在PC端和移动端、Windows和Linux、安卓与ios中使用，这样子也可以很好地节约成本。
        HTML5还对多媒体有很好的支持，在HTML5之前我们想要在浏览器浏览视频等，有时候会需要安装一些插件如flash等等，而HTML5提供了免插件的视频、图像、动画等等。
        基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些都得益于HTML5应用程序缓存以及本地存储功能，它不受数据大小限制，有更好的弹性和框架，可以将数据写入到本机的ROM当中，还可以在关闭浏览器，再次打开浏览器时回复数据以减少网络流量。
        HTML5还可以使得页面更加的炫酷，HTML5的画图标签可以使得我们做更多的互动和动画。
        HTML5将结构标签标准规范化，更有利于搜索引擎衡量网页上的内容和相关性，甚至分配权重的流向。当涉及网站的抓取和索引的时候，对SEO很友好。（SEO是搜索引擎优化）

二、HTML5修改和新增的内容

html声明

html4.01是基于SGML，需要引用DTD文件，而html5不基于SGML，不需要引用DTD文件，声明只需要写成：

<!DOCTYPE html>

html指定字符编码

相比于html4.01：

<meta http-equiv="Content-Type" content="text/html:charset=UTF-8">

html5表示字符编码的方式更加简洁：

<meta charset="UTF-8">

html5新增的标签

1.结构语义化标签

<header>：文档的头部区域，通常放置导航、标题等头部信息。
<nav>：页面的导航链接部分，通常放的就是导航链接。
<main>：页面的主要内容部分，有且只有一个。
<article>：定义正文内容。
<section>：定义一块区域，比如章节、页眉、页脚或页面其他部分。

2.表单控制标签

html5中新增了一些的表单控制标签，如：
input类型：
email、url、tel、number、range、Date pickers、search、color等等，这些类型都会对输入的内容进行判断，判断是否符合格式。
email：判断输入的内容是否符合邮箱格式。
url：判断输入的内容是否符合路径格式。
tel：判断输入的内容是否符合电话格式。
number：判断输入的内容是否是数字，注意，字母的话只有e可以，代表的是一个无限不循环小数，值大约是2.71828.
range：允许用户输入一段范围内的数值，样式为滑动条（也可以设置min、max、step等属性）：

Date pickers：日期选择器，包含了date、month、week、time、datetime（UTC时间）、datetime-local（本地时间）等类型。如date：

<form action=""><input type="date">
</form>

结果：

search：搜索框，框的后面会有一个打叉的小图标，点击可以重置内容：

color：颜色选择框：

input属性：
list、autocomplete、autofocus、min、max、step、multiple、pattern、placeholder、required等等。
min、max、step：这几个属性用于为包含数字或日期的input类型规定限定。min和max规定的是允许的最小值和最大值，step规定的是合法的数字间隔。

3.其他标签的应用（多媒体、web应用标签）

多媒体标签

<video>：定义视频，比如电影片段或其他视频流，支持三种视频格式：MP4、WebM、Ogg。
<audio>：定义音频，比如电影片段或其他视频流，支持三种音频格式：MP3、Wav、Ogg。
<source>：为媒介元素（比如<video>和<audio>）定义媒介资源，定义多种格式的多媒体文件，浏览器会选择它所支持的格式播放，若不支持会出现文字提示。
<embed>：标记定义外部的可交互的内容或插件，比如flash。写法：

<embed src="../media/搁浅.mp3" width="800" height="500" wmode="transparent">

<canvas>：用于绘制图像（通过脚本，一般是js），它本身没有绘制能力，只作为图形的容器，我们必须使用脚本绘制图形。

多媒体标签属性

src：定义媒体资源路径。
autoplay：资源一加载就马上播放（自动播放）。
controls：向用户显示空间，比如播放按钮。
loop：重复播放。
muted：静音。
poster：用户点击播放（视频）之前显示的封面图像。
preload：视频加载，并预备播放。同时存在autoplay，则忽略该属性。
例子（音频播放）：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title>
</head>
<body><header></header><main><video src="../media/搁浅.mp3" controls></video></main>
</body>
</html>

loop、muted、autoplay等属性的设置也和controls一样，但是autoplay会出现自动播放失效的问题，这是因为部分高版本浏览器以及手机端，会禁止视频和音频的自动播放，因为可能涉嫌诱导用户行为。即便采用javascript也不能自动播放，但是可以由用户的行为导致播放，比如用户点击页面后进行播放。
上面有提到source标签，是用来定义多种格式的多媒体文件，浏览器会选择它所支持的格式播放，例如：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title>
</head>
<body><header></header><main><video width="800" controls><source src="../media/搁浅.mp3"></source><source src="../media/搁浅.wav"></source><source src="../media/搁浅.ogg"></source></video></main>
</body>
</html>

web应用标签

meter标签
       定义度量衡。实时状态显示。涉及属性有：
              high：规定被界定为高的值的范围。
              low：规定被界定为低的值的范围。
              max：规定范围的最大值。
              min：规定范围的最小值。
              optimum：规定度量的最优值。
              value：规定度量的当前值。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title>
</head>
<body><header></header><main><div><meter min="0" max="100" low="10" high="80" optimum="40" value="90"></meter></div></main>
</body>
</html>

这里设置的value值超过了high，显示的颜色是黄色：

如果将value改成50，则会变成绿色：

progress标签
       定义运行中的任务进度（进度条）。涉及属性有：
              max：规定需要完成的值。
              value：规定进程的当前值。
示例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title>
</head>
<body><header></header><main><div><progress value="40" max="100"></progress><progress max="100"></progress></div></main>
</body>
</html>

这里第一个进度条显示的就是40的位置，而第二条的话是动态的：

HTML5在web应用方面的其他优势

客户端数据存储

localStorage：没有时间限制的数据存储。
sessionStorage：针对一个session的数据存储。
（这里的存储都需要通过js实现）

特性	Cookie	localStorage	sessionStorage
数据的生命期	可设置失效时间，默认是关闭浏览器后生效	除非被清楚，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据的大小	4K左右	一般为5MB	一般为5MB

离线缓存技术

优点：
       离线浏览-用户可在应用离线时使用它们。
       速度-已缓存资源加载得更快。
       减少服务器负载-浏览器将只从服务器下载更新过或更改过的资源。
       HTML5实现离线缓存技术主要是通过manifest文件，manifest文件的后缀名必须为.appcache，并且和引入该manifest的页面同源。
manifest的重要组成部分：
       CACHE MANIFEST：首次下载后需要缓存的文件，经常是放一些比较大的，不常改动的文件。
       NETWORK：需要与服务器的连接，且不会被缓存的文件。
       FALLBACK：在此标题下列出的文件规定当页面无法访问时的回退页面，如404页面。

注释标签

<ruby>：定义注释或音标；
<rt>：定义对ruby的注释内容文本；
<rp>：当浏览器不支持ruby元素时显示的内容。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title>
</head>
<body><p>冷僻字：<ruby>饕<rp>(</rp><rt>tao</rt><rp>)</rp>餮<rp>(</rp><rt>tie</rt><rp>)</rp></ruby>——古代的一种凶兽</p><p></p>
</body>
</html>

结果：

<mark>：标签定义带有记号的文本，突出文本。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title>
</head>
<body><p>冷僻字：<ruby>饕<rp>(</rp><rt>tao</rt><rp>)</rp>餮<rp>(</rp><rt>tie</rt><rp>)</rp></ruby>——<mark>古代的一种凶兽</mark></p><p></p>
</body>
</html>

结果：
<output>：标签表示计算或用户操作的结果。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title>
</head>
<body><form oninput="b.value=parseInt(a.value)">取值（0-100）：<input type="range" id="a" value="50"><br>当前取值：<output name="b" for="a"></output></form>
</body>
</html>

可以用来表示滑动条当前的值输出：

ol有序列表中的新增属性

start：有序列表中首个列表项起始值。
reversed：倒叙排列。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title>
</head>
<body><p>默认</p><ol><li>苹果</li><li>香蕉</li><li>芒果</li><li>葡萄</li></ol><p>设置start</p><ol start="10"><li>苹果</li><li>香蕉</li><li>芒果</li><li>葡萄</li></ol><p>设置reversed</p><ol reversed><li>苹果</li><li>香蕉</li><li>芒果</li><li>葡萄</li></ol>
</body>
</html>

结果：

连接属性中的新增属性

html5在a标签中也增加了一些属性：
hreflang：用于指定被连接文档的语言，只有设置了href属性才能起作用。例如：

<a href="http://www.baidu.com" href="en"></a><!--en表示英文-->

media：规定url是什么类型的媒介/设备进行优化的，可接受多个值，只能在href属性存在时使用。具体如下：

值	Value
all	默认，适合所有设备
aural	语音合成器
braille	盲文反馈装置
handheld	手持设备（小屏幕、有限的带宽）
projection	投影机
print	打印预览模式/打印页面
screen	计算机屏幕
tty	电传打字机以及使用带宽字符网格的类似媒介
tv	电视类型设备（低分辨率、有限的分页能力）

这一部分到这里就结束啦，有不足的地方还望大家指正啦，蟹蟹！

前端学习（HTML5）相关推荐

前端学习—HTML5
前端HTML5基础学习基本语法网页基本标签基本标签的学习图片标签链接标签页面间链接锚链接功能性链接行内元素和块内元素列表表格标签媒体元素页面结构 iframe内联框架表单语 ...
前端学习-HTML5
一.Web开发 1.1 概念全称World Wide Web,缩写:www 全球广域网,又称万维网. World Wide Web Consortium,缩写:W3C,万维网联盟.其负责制定和维护W ...
前端学习 HTML5和CSS3新特性高级技巧 JavaScript基础语法
HTML5和CSS3提高 HTML5的新特性 HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签,新的表单和新的表单属性等: 这些新特性都有兼容性问题,基本是IE9+以上的版本浏览器才支持 ...
前端学习——HTML5
新增语义化标签新增布局标签 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charse ...
html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解
原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...
js怎么在一个div中嵌入另一网站_好程序员web前端学习路线分享HTML5常见面试题集锦一...
好程序员web前端学习路线分享HTML5常见面试题集锦,接下来将会持续为大家分享几篇HTML5常见面试题. 1.布局左边20% 中间自适应右边200px 不能用定位答案:圣杯布局/双飞翼布局或者 ...
前端H5怎么切换语言_「自学系列一」HTML5大前端学习路线+视频教程完整版
全新Java.HTML5前端.大数据.Python爬虫.全链UI设计.软件测试.Unity 3D.Go语言等多个技术方向的全套视频. 面对这么多的知识点,有的盆友就麻爪了-- 我是谁? 我该从哪里开始 ...
零基础自学html5要多久？Web前端学习路线的6点建议
学习html5的同学很多都在考虑.没有计算机基础能不能学会呢?在html5开发领域中没有特别的专业区分,能不能学会?跟有没有计算机专业知识也没有太大的关系,只能说有计算机专业,上手会快一点,并不能代表 ...
IT入门？推荐首选学习HTML5大前端
随着当下IT技术的蓬勃发展,越来越多的人想入行或转行至"程序员"梯队.对于零基础的小伙伴来说,综合各方面原因考量,. HTML5到底是什么?HTML5是指第5代HTML(超文本标记 ...
前端学习笔记 HTML5 保姆级教程
HTML5 保姆级教程前端学习路线: HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→Vue.js→webpack→Node.js 除了掌握这些技术,后期我还需要 ...

前端学习（HTML5）