题外话
:加油!胜利就在眼前!
文章内容输出来源
:拉勾教育大前端就业集训营
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
|
可以多选文件进行提交
|
说明
:这些新增的属性,感兴趣的小伙伴们可以自行敲代码试一试,这里就不过多介绍了~
前端文章汇总目录
https://www.jianshu.com/p/6d80dd616ff4
结束语
:一花一世界,一木一浮生,愿与诸君共勉~