1-2-8【HTML5】HTML5介绍

作者: Liyager | 来源:发表于2020-11-03 11:28 被阅读0次

HTML5基本介绍
1-2-8【HTML5】HTML5介绍
HTML5视频与音频
HTML5学习笔记之表格标签
HTML5学习笔记之表单标签
HTML5学习笔记之基础标签
PHP从入门到精通，034第三章HTML5+CSS3——HTML
HTML5学习笔记之音视频标签
html属性速查笔记
iOS-html

题外话：加油！胜利就在眼前！

文章内容输出来源：拉勾教育大前端就业集训营

1.HTML发展进程

说明：通过本图片，大致了解一下XHTML和HTML之间的关系即可。

2.HTML5简介

简介：它是万维网的核心语言、超文本标记语言(HTML)的第五次重大修改。用于取代HTML4与XHTML的新一代标准版本，叫HTML5。
新变化：
- HTML5的设计目的是为了在移动设备上支持多媒体。
- 增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3特性。
- 废弃一些元素和属性比如 font 、center 等...
优势：
- 提高可用性和改进用户的友好体验；
- 更好的语义化标签；
- 可以给站点带来更多的多媒体元素(视频和音频)；
- 可以很好的替代FLASH和Silverlight；
- 当涉及到网站的抓取和索引的时候，对于SEO很友好;
- 将被大量应用于移动应用程序和游戏；
- 可移植性好。
劣势：
- 该标准并未能很好的被PC端浏览器所支持；
- IE9以下的浏览器几乎都不兼容。
狭义的HTML5：指的是HTML语言的第5个版本。
广义的HTML5：是指HTML5本身+CSS3+JavaScript技术的综合。

3.新增语义化标签

概述：以前制作网页布局，我们基本用div来做。div就是一个普通的块级标签，对于搜索引擎来说是没有语义的。所以H5新增了一些语义化标签，对于SEO比较友好。
新增语义化标签：

说明：新增的标签仅提供语义，不提供任何样式。
这一点在之前的文章中已经提醒过很多次了，HTML负责搭建框架，CSS负责美化网页。

注意事项：
- 这种语义化标签，主要针对搜索引擎的；
- 这些新标签，在页面中是可以使用多次的；
- 在IE9中，需要把这些元素转换为块级元素；
- 其实，我们在移动端中更喜欢使用这些标签。

4.新增多媒体标签

音频标签<audio>

概述：HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的。
音频格式：不同的浏览器支持的音频格式也不同。

说明：因为不同的浏览器支持不同的音频格式，所以总会有几个格式无法播放，所以此时需要进行兼容。

兼容写法：

    <audio controls>
        <source src="Love.mp3" type="audio/mpeg">
        <source src="Love.ogg" type="audio/ogg">
    </audio>

说明：查看格式兼容表发现，只要凑齐ogg和mp3两种格式的音频，所有的主流浏览器都会兼容，所以我们需要准备两份不同格式的资源。

常见属性：

属性	属性值	描述
autoplay	autoplay	音频在就绪后会马上播放
controls	controls	向用户展示音频播放控件
loop	loop	音频播放完毕后重新开始播放
preload	preload	音频在页面加载时加载
src	url	指定要播放的音频地址

拓展：之前的文章中提到过，如果属性和属性值完全相同，则只需要写属性名即可，不用再写属性值了~
谷歌浏览器对于autoplay属性比较特殊，为保证用户体验，就算设置了autoplay属性，也不会自动播放。

视频标签<video>

概述：HTML5在不使用插件的情况下也可以原生的支持视频格式文件的播放，当然支持格式也是有限的。
视频格式：不同的浏览器支持的视频格式也不同。

说明：因为不同的浏览器支持不同的视频格式，所以总会有几个格式无法播放，所以此时需要进行兼容。

兼容写法：

    <video controls>
        <source src="Bird.mp4" type="video/mp4">
        <source src="Bird.ogg" type="video/ogg">
    </video>

说明：查看格式兼容表发现，只要凑齐ogg和mp4两种格式的视频，所有的主流浏览器都会兼容，所以我们需要准备两份不同格式的资源。

常见属性：

属性	属性值	描述
autoplay	autoplay	视频就绪则自动播放
controls	controls	向用户展示视频播放控件
loop	loop	视频播放完毕后重新开始播放
preload	auto(预加载)/none(不预加载)	视频在页面加载时加载
src	url	要播放的视频地址
width	px	设置播放器的宽度
height	px	设置播放器的高度
poster	url	加载等待的画面图片（就是卡顿时显示的图片）
muted	muted	是否静音播放

拓展：谷歌浏览器对于视频，同样不支持自动播放。但只要设置muted属性，则autoplay属性即可生效。

5.新增表单标签

<input>表单类型

概述：在前面的文章中，我已经为大家介绍了一些input控件，例如单选框、多选框、下拉菜单、文本框等。下面为大家介绍一些H5新增的input控件。
新增控件

属性值	描述
type="email"	单行文本框，限制用户必须输入Email类型文本
type="url"	单行文本框，限制用户必须输入URL类型文本
type="date"	单行文本框，限制用户必须输入日期类型文本
type="time"	单行文本框，限制用户必须输入时间类型文本
type="month"	单行文本框，限制用户必须输入月类型文本
type="week"	单行文本框，限制用户必须输入周类型文本
type="number"	单行文本框，限制用户必须输入数字类型文本
type="range"	滑动条，可设置最大最小值和步长
type="tel"	手机号码
type="search"	搜索框
type="color"	生成一个颜色选择器

说明：这里就不一个一个介绍了，只为大家介绍两个比较特殊的控件。

数字选择控件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <!-- 最大值100；最小值0；一次增减5；默认值50 -->
        年龄：<input type="number" max="100" min="0" step="5" value="50"> 
    </form>
</body>
</html>

说明：如图所示的数字选择框，若点击上下箭头，则只能按照规则增减；若用户自行输入，可任意输入符合规则的数字。

滑动条控件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <!-- 最大值100；最小值0；一次增减5；默认值50 -->
        年龄：<input type="range" max="100" min="0" step="5" value="50">
    </form>
</body>
</html>

说明：如图所示的滑动条控件，用户可拖动滑动按钮，选择数值，也可以直接点击滑动条的某一部分选择数值。
后面学到JavaScript后，即可查看滑动条选择的数值是多少了。

<datalist>标签

概述：该标签规定了<input>元素可能的选项列表，这些预定义的可选值由<option>元素来表示，在<input>元素输入过程中，会自动响应<option>元素的值。
注意事项：与本标签绑定的<input>标签必须设置list属性，属性值等于本标签的id属性值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" list="myList">
    <datalist id="myList">
        <option value="为什么我这么帅">a</option>
        <option value="长得太帅怎么办"></option>
        <option value="有时候太帅也是个烦恼"></option>
    </datalist>
</body>
</html>

说明：如图所示，在文本框中输入一定的内容，即可根据内容与option元素中的内容进行比对，若某option元素中内容包含输入内容，则出现提示。

6.新增表单属性

属性	属性值	描述
required	required	表单控件拥有该属性，则表示其内容不能为空
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on	当用户在字段开始键入时，浏览器基于之前键入过的值，自动补全缺失内容
multiple	multiple	可以多选文件进行提交