HTML5详解：语义化、多媒体、Web存储与WebSocket-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43522998/article/details/122062557

本文深入探讨HTML5，包括DOCTYPE的作用、meta标签的viewport属性、HTML5的新特性如语义化标签、多媒体元素、WebWorker、WebSocket以及WebStorage与Cookie的区别。此外，还讲解了行内元素、块级元素和行内块元素的差异，以及src与href的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.前言

在面试中，虽然JavaScript考察更为深入，但是作为前端三剑客，HTML也是前端的核心之一，所以本系列列举了相关常见题型待大家参考与学习。

2.HTML5

H5代码结构

<!DOCTYPE HTML>                     //声明html页面
<HTML>                              //html开标签
    <head>                          //页面头部
        <meta charst="UTF-8">              //控制页面不出乱码
        <title>DOCUMENT</title>     //title设置网页名称
    </head>
    <body>                          //body内部书写html代码内容
    </body>
</HTML>

DOCTYPE的定义与作用

DOCTYPE 是用来告诉浏览器以一种什么标准来进行文档解析，声明在文档最前面，其实就是用来阻止浏览器进入混杂模式渲染页面。

混杂模式，也成为怪异模式，会兼容 Navigator 4 和 IE 5 的非标准行为。
近标准模式会兼容少数的混杂行为，可以理解为过渡模式。
标准模式只兼容符合标准描述的行为。

为什么只需要写DOCTYPE

因为html5不是基于SGML，所以不需要写DTD，但是需要写DOCTYPE 来告诉浏览器以什么标准进行文档解析

meta标签的作用

meta标签是用来描述html文档的元数据信息，它始终声明在head元素中，它不会显示在页面上，但是对于机器而言它是可读的。可用于

用于浏览器（如何显示内容或重新加载页面）
搜索引擎（关键词）
其他web服务

属性：

charset：编码
http-equiv：用于添加一些额外的http头部内容，如expires、cache-control
name：1.搜索引擎调优：如keywords声明搜索关键字，description页面描述…
2.兼容问题render 3.移动端布局viewport

meta标签中viewport干啥用的

name为viewport表示供移动设备使用. content定义了viewport的属性. width表示移动设设备下显示的宽度为设备宽度(device-width) height表示移动设设备下显示的宽度为设备宽度. user-scalable表示用户缩放能力, no表示不允许. initial-scale表示设备与视口的缩放比率 maximum和minimum分别表示缩放的最大最小值, 要注意的是, maximum必须必minimum大. 上面的meta标签就是告诉浏览器, 不要在移动端显示的时候缩放.

乱码的产生原因

1.文本字符编码过程与解码过程使用了不同的编码方式 如utf-8编码 gbk解码 utf-8中一个汉字用三个字节进行编码 gbk用两个字节进行解码

2.使用了缺少某种字体库的字符集引起的乱码。如使用gb2312 解码繁体字 gb2312不支持繁体字

H5新增特性

新增语义化标签
新增多媒体标签
新增input类型
canvas画布
svg图像
webworker专用线程
websocket双向通信
webstorage本地存储
Geolocation地理定位

语义化标签，为什么要语义化？

如下图可以知道新增的语义化标签

<header>：头部标签
<nav>:导航标签
<article>:内容标签
<section>:定义文档某个区域
<aside>:侧边栏标签
<footer>:尾部标签

那为什么需要语义化呢？

易于用户阅读，样式丢失的时候能让页面呈现清晰的结构
有利于SEO，搜索引擎根据标签来确定上下文各个关键字的权重
方便其他设备解析，如盲人阅读器根据语义渲染网页
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐

多媒体标签

新增的多媒体标签主要包含两个：

音频<audio>
视频<video>

1.音频<audio>
当前<audio>支持三种音频格式：MP3、Wav、Ogg
在这里插入图片描述
3. 视频<video>
当前<video>支持三种视频格式：MP4、WebM、Ogg

新增input类型

在这里插入图片描述

canvas和svg

canvas是html5中新增的元素，而svg存在的历史更为久远，svg不是html5专有的，最初是用xml技术描述二维图像的语言。

canvas：

canvas是通过JavaScript来绘制2D图形
canvas是逐像素进行渲染
在canvas中，一旦图形被绘制完成，他就不会继续得到浏览器的关注，如果他的位置发生改变，那么就需要重新来绘制图形，其中包括任何已经被覆盖的对象。

svg：

svg是使用XML描述的2D图形
svg是基于XML的，也就是说svg DOM中的每个元素都是可用的，可以为每个元素附加JavaScript实践处理器
在svg中，每个被绘制过的图形均为对象，如果svg对象属性发生变化，那么浏览器可以自行重现图形。

两者区别：

Canvas

依赖分辨率
不支持事件处理器
文本渲染力弱
能够以 .png 或 .jpg 的格式保存结果图形
最合适图像密集型的游戏，其中许多的对象会被频繁的重绘

SVG

不依赖分辨率
支持事件处理器
最合适带有大型渲染区域的应用程序（如，百度地图、谷歌地图等等）
不适合游戏的应用
复杂度高会减慢渲染的速度
以单个文件的形式独立存在，后缀名为.svg，可以在html文件中以img标签的src，元素背景，框架等引入或者直接在html文件中引入SVG标签

webworker

Web Worker 的作用：由于JavaScript是单线程运行的，而如果遇到一些计算密集或高延迟的任务，会消耗一定的时间，又JavaScript引擎会阻塞GUI线程的渲染，从而会造成网页渲染缓慢。而web worker可以为JavaScript创造一个多线程的环境，在主线程运行的同时，web worker作为子线程去同步执行，二者互不干扰，这样就可以将部分逻辑运算交给webworker，然后计算完再将结果传回主线程。

注意：web worker一旦创建就会始终运行，不会被主线程上的活动打断，有利于随时响应主线程，但这也造成比较消耗资源，所以不该过度使用，使用完应该关闭

websocket

相对于http这种非持久协议来说，websocket是一个相对持久性协议。websocket是基于http协议的，或者说借用了http协议来完成一部分握手。

半双工通信：http是半双工通信的，也就是客户端向服务器端发送请求信息是单向流动的，也只能由客户端向服务器端发送信息。

全双工通信：websocket最大的特点就是服务器可以向客户端推送信息，客户端也可以主动向服务器发送信息，是双向的平等对话，属于服务器推送数据中的一种

websocket优势：

1.全双工通信，实时性更强

2.更好的二进制支持

3.较少的控制开销(连接创建后，ws客户端、服务端进行数据交换时，协议控制的数据包头部较少)

4.没有同源限制，不跨域

webstorage、cookie的区别

分为localstorage、sessionstorage

二者与cookie之间的区别

1. 生命周期

cookie：可设置失效时间，没有设置的话，默认是关闭浏览器失效
localStorage：除非被手动清除，否则将永久保存
sessionStorage：仅存在当前网页会话下有效，关闭页面或浏览器就会被清除。

2. 存储数据大小

cookie：4kb左右
localStorage、sessionStorage：可以保存5MB的信息

3. 请求

cookie：每次都会携带在HTTP请求头中，如果使用cookie保存过多的数据会带来性能问题
localStorage、sessionStorage：仅在客户端中保存，不参与和服务器的通信

4. 易用性

cookie：需要程序员自己封装，原生的cookie接口不友好
localStorage、sessionStorage：原生接口可以接受，也可再次封装对Object和Array有更好的支持

H5移除的元素

纯表现元素

<basefont>默认字体
<font>字体标签
<center>水平居中
<u>下划线
<big>大字体
<strike>中横线
<tt>文本等宽

对可用性产生负面影响的元素

<frame>
<frameset>
<noframes>

3.行内元素、块级元素、行内块元素

行内元素

特性： 行内元素从左向右水平排列，其宽高是由其内容撑开，不可手动设置宽高。对于其margin、padding属性，只可设置左右方向的才有效，即只能设置margin-left、margin-right、padding-left、padding-right。

标签：

<a>:超链接或者锚点
<b>:z字体加粗
<br>:换行
<i>:斜体
<label>:为input标注
<span>：独立标签
<button>:按钮

块级元素

特性： 块级元素独占一行，从上往下垂直排列，其宽高可以任意设置，其margin、padding也是可以任意设置

标签：

<div>:标签块
<p>:段落
<h1>-<h6>:标题1-6
<ul>:无序列表
<ol>:有序列表
<li>:列表项目
<form>:表单

行内快元素

特性： 行内块元素从左向右水平排列，之间会留有空白缝隙，其宽高、margin、padding可以任意设置

标签：

<img>:图片
<input>:输入框
<textarea>:多行文本框

转换

display：inline:转为行内元素
display：block:转为块级元素
display：inline-block:转为行内块元素

4.iframe优缺点

优点

iframe可以实现无刷新文件上传；
iframe可以跨域通信；
解决了加载缓慢的第三方内容如图标和广告等的加载问题。

缺点

iframe会阻塞主页面的Onload事件;
无法被一些搜索引擎索引到;
页面会增加服务器的http请求;
会产生很多页面，不容易管理。

5.src、href区别

1、请求资源类型不同

href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。
在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script，img 、iframe；

2、作用结果不同

href 用于在当前文档和引用资源之间确立联系；
src 用于替换当前内容；

3、浏览器解析方式不同

若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。
当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。