HTML5新特性

augenstern416

已于 2024-12-12 16:23:29 修改

阅读量1.9k

点赞数 40

分类专栏： HTMl 文章标签： html 前端

于 2024-12-11 21:29:40 首次发布

本文链接：https://blog.youkuaiyun.com/augenstern416/article/details/144409624

版权

HTMl 专栏收录该内容

6 篇文章

订阅专栏

1.声明方式修改

html5：

<!DOCTYPE html>

2.更多的语义化标签

header （网页头部）
footer （网页尾部）
aside （侧边栏）

section （内容区域块）

<!--header:网页的头部，作为一个网页内容快的标题-->
<header></header>
<!--nav:导航栏部分，定于整个页面的主要导航部分-->
<nav></nav>
<!--section：网页的一个内容区块-->
<section></section>
<!--aside：侧边栏，可以是相关链接或者资料-->
<aside></aside>
<!--artical：区块内的一个独立区域，定义自成一体独立的内容-->
<artical></artical>
<!--footer:网页的尾部，可以是作者，版权信息，附录等等-->
<footer></footer>

3.新的input表单输入类型与属性

类型

邮箱

        <input type="email">
        <input type="submit">

数值输入

        <input type="number" min="9" max="12">
        <!--限制输入的数值范围在9-12之间，包括9和12-->
        <input type="submit">

文件导入

上传本地文件，需js代码配合。如果需要上传多个文件，给表单添加mulitiple属性。如果上传图片，给表单添加enctype属性。

        <input type="file" id="myFile" >

<body>
    <form enctype="multipart/form-data">
        <input type="file" id="myFile" multiple>
        <input type="submit">
    </form>
    <img src="" id="myPhoto" alt="photo">
</body>
<!--js代码展示-->
<script>
	const myFile = document.getElementById('myFile')
	const myPhoto = document.getElementById('myPhoto')
	myFile.onchange = ()=>{
		console.log(myFile.files)
		const file = myFile.files[0]
		const read = new FileReader()
		//转译文件地址
		read.readAsDataURL(file)
		//文件加载完成就显示出来
		read.onload = ()=>{
			myPhoto.src = read.result
		}
	}
</script>

图片按钮

<input type="image" src="路径" width=750 alt="myGimdong">

颜色选择，日期展示，搜索框，手机号码输入框，网址输入框等

属性

placeholder

这个属性是文本的占位符，相当于一种提示信息，显示在输入域，描述期待user输入的值

<input type="text" placeholder="请输入文字">

required

这个属性的值为Bool，默认为true，意思是在输入域不能为空

<input type="text" required>

autofocus

auto是自动的意思，focus是聚焦的意思，这个属性描述的就是自动聚焦到需要填写的textarea。

<input type="text" autofocus>

autocomplete

这个属性有两个值，一个是on，另一个是off。默认是on，与email相反，email默认是off。功能是提示写过的信息。

attention：这个属性一定要和name一起使用，不然是不合法不生效的。

<input type="text" name="username" autocomplete>

minlength和maxlength

这个属性限定输入的最少字数和最多字数，以字符个数计数。

<input type="text" min="9" max="15">

4.视频和音频

video：

video的方法，属性，事件可以使用js来控制。

方法：play(),pause(),load(),分别是播放，停止，加载方法。

属性：width,height,controls。width和height属性值为像素或者百分比，功能是设置播放窗口的宽度和高度。controls属性值为boolean，功能是控制播放条。

   <video src="xxx.ogg"></video>

audio:

audio可以实现与flash相同的功能，比如回放，跳转缓冲等等。与video用法相似。

属性：autoplay：自动播放，值的类型为bool，默认为true。

controls：进度条控制，值的类型为bool。

loop：循环播放，值的类型为bool。

muted：静音播放，值的类型为bool。

poster：预加载图片在播放视频之前，值为图片路径URL。就是我们通常理解的视频封面

   <audio controls>
       <source src="xxx.mp3">
       <source src="xxx.Wav">
   </audio>

5.canvas绘图与SVG绘图

6.地理位置APi

7.拖放APi

8.Web Worker

web worker 是运行在后台的 JavaScript。
Q1：JS是怎么执行的？
A1：JS是单线程执行模式。

Q2：什么是单线程模式？
A2：所有任务只能在一个线程上执行，一次只做一件事情。前面的没有执行完，后面的只能等待。

Q3：有什么不好的地方吗？
A3：1 现在的CPU大多数是多核的，计算能力牛逼到不行。单线程无法发挥出CPU计算的价值。
2 页面上JS在执行的时候会阻塞浏览器的响应，影响用户体验。毕竟页面是为用户服务的。

Q4：Web Worker解决了什么问题？
A4：为js创建多线程环境。js在主线程执行，new一个子线程在后台执行。worker完成计算的任务返回给主线程，UI交互流畅，不会被阻塞。主线程中的代码执行会导致浏览器响应阻塞，而子线程代码执行不会。主线程和子线程两者互补干扰，独立执行。