HTML5 学习笔记（1）——新语法规范、语义化标签、表单、多媒体

最新推荐文章于 2024-02-01 20:08:34 发布

想成为大佬的鸭子

最新推荐文章于 2024-02-01 20:08:34 发布

阅读量240

点赞数

分类专栏： HTML 文章标签： HTML5

本文链接：https://blog.csdn.net/weixin_41309331/article/details/96357652

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

从今天开始，我也将在博客记录下我学习前端的一些笔记。一来是希望可以借此对自己学习过的知识进行整理与巩固，形成清晰的知识点；二来是可以将此博客作为我的复习笔记，毕竟我也不是什么天选之人，还是需要温故而知新的（特别是笔试面试前哈哈）；三来是因为我发现，当我试着想要去发布博客的时候，我就又多了一个学习的动力，就像是现在，当我敲完这篇博客之后，我可能就会迫不及待地投入下一阶段的学习了。当然了，如果我记录下的笔记能对现在正在查看我博客的IT同志有所帮助，或者是能得到前端前辈的一些指点，那我就真的很荣幸了。

学习前端已经有一段时间，在之前的学习中，我针对性地学习了HTML+CSS+JavaScript基础的知识，以及JQuery的一些入门的知识，并仿照小米商城官网做了一个静态+JS交互的页面。遗憾的是在这之前并没有想到要通过博客记录下来，现在重新翻回去记录的话是很耗时间的，因此关于这部分的知识，我可能等到以后再试着去整理，毕竟也还算比较基础。

根据我事先制定好的学习路线，我现在只完成了第一阶段。现阶段我将开始HTML5+CSS3的学习，而这篇博客将记录学习HTML5的部分笔记。当然了，我的学习笔记肯定是不全面的，毕竟实话说十分全面的学习一门技术的知识对于现在的我来讲，还是非常困难的。这不仅是因为这门技术本身非常强大，内容非常多，也是因为很多知识还是要联系其他方面的知识才能更快掌握和理解的。其次，我的笔记肯定是很乱七八糟的，毕竟是也算是第一次记录在博客中。

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

HTML5新语法规范

1. DOCTYPE 声明：告诉浏览器使用哪个版本的解析器来处理html

相比于HTML4或者XHTML，HTML5的DOCTYPE声明十分简单。如：（关于strict和transitional等的解释我之后再写一篇博客进行记录）

HTML 4.01 Strict：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0 Strict：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5：

<!DOCTYPE html>

2. meta：

<meta charset="UTF-8">

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

HTML5语义化标签

HTML5新增了许多语义化标签，常用的有：

<header></header>	页眉，代替了<div class="header"></div>
<nav></nav>	导航
<footer></footer>	页脚
<section></section>	区块，很多情况下可以代替<div>
<acticle></article>	文章
<aside></aside>	侧边栏（主体内容之外）
<progress></progress>	进度条，如<progress min="0" max="100" value="80"></progress>，min表示开始，max表示上限，value表示进度条初始值

兼容性处理

HTML5中引进的新标签并不被旧版本的IE浏览器识别，例如若我们将含<header>标签的html文件用IE8浏览器打开，<header>中的内容是不会实现的。因此我们需要对其进行兼容性处理，我目前已知的有以下两种方法：

（1）通过script创建自定义标签,style设置display：（不常用）

<script>
	document.createElement("header");
</script>
<style type="text/css">
	header{
		display:block;
	}
</style>

（2）通过引入html5shiv.min.js文件：（实用）

<!--[if lte IE 8]>
	<script src="html5shiv.min.js"></script>
<![endif]-->

这里的

<!--[if lte IE 8]>

<![endif]-->

是对当前浏览器版本进行判断，若满足条件则执行里面的代码。其中lte表示的是浏览器版本小于等于 IE8（lt代表less than，gt代表great than，e代表equal)。之所以要这么写是为了避免IE9+或其他支持HTML5新标签的浏览器不分青红皂白地调用html5shiv.min.js。

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

表单

1. 新input类型

<input type="email">	邮箱格式，输入必须包含@符号
<input type="tel">	电话格式，本质目的是实现在移动端中自动弹出数字键盘
<input type="url">	网址格式，输入必须包含http://
<input type="number" step="4" min="8" max="40" value="16">	数字格式，只能输入数字，包含小数点，step表示数字增长步长，min表示最小值，max表示最大值，value表示初始值
<input type="search">	提供更人性化的输入体验，如提供删除全部内容的“X”；体现语义化
<input type="range" min="0" max="100" value="80">	自由拖动滑块，value表示初始位置，默认为中间
<input type="color">	颜色选择
<input type=time"">	选取小时和分钟
<input type="date">	选取日、月、年
<input type="week">	选取周、年
<input type="month">	选取月、年
<input type="datetime">	选取时间、日、月、年（UTC 时间）
<input type="datetime-local">	选取时间、日、月、年（本地时间）

2. 新表单控件

2.1 <datalist>

<input type="text" name="" list="abc" />
<datalist id="abc"><!-- id关联input的list属性值 -->
	<option value ="php" label="php1">php</option><!-- label是辅助值 -->
	<option value ="python">python</option>
	<option value ="java">java</option>
</datalist>

（1）datalist类似于select，提供一个下拉选择的列表，但与select不同的是，datalist不仅可以通过选择确定输入信息，也可以手动输入；

（2）datalist需要通过自身id与一个input元素的list属性关联；

（3）datalist中option的value值需要和input中type属性要求的一致，如：

	<input type="email" name="" id="abc"/>
	<datalist id="abc">
		<option value ="http://baidu.com" label="php1">百度官网</option>
		<option value ="a@qq.com">QQ邮箱</option>
		<option value ="java">java</option>
	</datalist>

选择百度官网时将会提示错误，因为与当前datalist关联的input的type为email，因此value值需要保证邮箱的格式。同样的，若type值为url，则value值需要保证网址格式，即必须添加http://。

（4）datalist的兼容性并不好。

2.2 <keygen>（了解）：生成加密字符串

keygen是密钥对生成器，能够使用户验证更为可靠。用户提交表单时会生成两个键：一个私钥，一个公钥。私钥会被存储在客户端，而公钥则会发送给服务器。公钥可以用于之后验证用户的客户端证书。

2.3 <output>：

用于在浏览器中显示计算结果或脚本输出。如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body onload="multi()">
		<form action="testform.asp" method="get" name="form">
			两数的乘积为：
			<output name="result"></output>
		</form>
	</body>
	<script>
		function multi(){
			a=parseInt(prompt("请输入第一个数字",0));
			b=parseInt(prompt("请输入第二个数字",0));
			document.forms["form"]["result"].value=a*b;
		}
	</script>
</html>

3. 新表单属性

placeholder	<input type="text" name="" placeholder="提示内容" value="默认内容" />	placeholder代表提示内容，光标聚焦后不会消失，输入内容后消失。
autofocus	<input type="text" name="" autofocus />	自动获取焦点
multiple	<input type="file" name="" multiple />	支持多文件上传，在type="email"中还支持多个邮箱同时提交，需要用逗号隔开
required	<input type="text" name="" required />	必填项
autocomplete	<input type="text" name="abc" autocomplete="on" /> <input type="text" name="abc" autocomplete="off" /> <form action="" autocomplete="off"></form>	on代表开启自动完成内容输入功能，off则是关闭此功能。默认为on。 autocomplete也可以用于form元素，控制整个表单。
pattern	<input type="text" pattern="^(\+86)?1\d{10}$" />	pattern为正则表达式验证，值为正则表达式。例子为(+86)手机11位长号的输入。
form="form_id"	<form action="" id="form_id"></form> <input type="text" name="abc" form="form_id" />	form关联，即把form表单外的input与form关联，如此便不必把input放入<form></form>之间。
novalidate	<form action="" novalidate><form>	用于关闭整个表单的验证，例如type="url"不必加http://也可以上传。

4. 新表单事件

oninput:监听当前指定元素内容的改变，只要内容改变（添加、删除），就会触发该事件。区别于以下的onkeyup。

onkeyup：键盘弹起时出发，每个键弹起都会触发一次，因此当用鼠标复制粘贴内容的时候不会触发，而用ctrl+v粘贴的时候会触发两次。

oninvalid：当验证不通过时触发。（但不是改变默认的报错提示信息，设置默认的提示信息需要用到setCustomValidity()方法）

多媒体

音乐：

<audio src="abc.mp3" controls autoplay loop="3"></audio>

src：路径；

controls：音频播放器的控制面板；

autoplay：自动播放；

loop：循环次数；

视频：

<video src="abc.mp4" width="400" height="" controls autoplay loop="3" poster="aaa.jpg"><video>

src、controls、autoplay、loop与音频相同；

width/height：视频中还可以指定宽高，但是一般来说只会设置宽或者高，让其自动等比例缩放；

poster：当视频还没有完全下载，或者用户还未点击播放前，默认显示的封面，可以自行设置，默认情况下显示视频第一帧的画面。

兼容处理

source：由于不同浏览器支持的视频文件格式不同，所以我们要准备多个格式的视频文件，让其自动选择。如在音频中：

<audio controls>
    <source src="abc.mp3">
    <source src="abc.wav">
    <source src="abc.ogg">
    当前浏览器不支持HTML5音频播放
</audio>

想成为大佬的鸭子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5 学习笔记（1）——新语法规范、语义化标签、表单、多媒体

从今天开始，我也将在博客记录下我学习前端的一些笔记。一来是希望可以借此对自己学习过的知识进行整理与巩固，形成清晰的知识点；二来是可以将此博客作为我的复习笔记，毕竟我也不是什么天选之人，还是需要温故而知新的（特别是笔试面试前哈哈）；三来是因为我发现，当我试着想要去发布博客的时候，我就又多了一个学习的动力，就像是现在，当我敲完这篇博客之后，我可能就会迫不及待地投入下一阶段的学习了。当然了，如果我记录下...
复制链接

扫一扫

专栏目录