xxxxx标题 | 豆包MarsCode AI刷题

致星
57 阅读3分钟

HTML

1.HTML5新特性及优点：
（1）语义化标签：
<header>：文档头部。
<nav>：导航部分。
<footer>：文档底部。
<article> ：文章内容。
<section>：文档中的节、段。
<aside>：侧边栏。

优点

  （1）在没有css样式的情况下，页面也会呈现很好的结构效果。
  （2）代码结构清晰，易于阅读、开发与后期维护，同时方便其他设备解析渲染网页。
  （3）有利于搜索引擎优化，会根据不同的标签赋予不同的比重。
（2）多媒体支持
<audio>：音频标签
<audio src='' controls autoplay loop='true'></audio>
//属性：controls 控制面板；autoplay 自动播放；loop=‘true’ 循环播放

<video>：视频标签
<video src='' poster='imgs/aa.jpg' controls></video>
//-   poster：指定视频还没有完全下载完毕，或者用户还没有点击播放前显示的封面。默认显示当前视频文件的第一帧画面，当然通过poster也可以自己指定。
//controls 控制面板; width; height

优点

可直接嵌入音频和视频文件，无需依赖外部插件，大大提高了网页的兼容性和性能。

（3）图形和动画
<canvas>：画布

优点

新增 <canvas> 标签，允许开发者使用 JavaScript 绘制2D图形，并支持复杂的图形处理和动画。结合 SVG可以创建动态和交互式的图形元素。

（4）存储

离线和本地存储：

1.localStorage：没有时间限制的数据存储
2.sessionStorage：针对一个 session 的数据存储

优点

用于在客户端存储数据，使得网页应用可以脱离网络访问数据。此外，HTML5 引入了离线缓存（Application Cache），支持用户在没有网络连接的情况下访问网页。

（5）表单增强
新增类型：
    email ：能够验证当前输入的邮箱地址是否合法
    url ： 验证URL
    number ： 只能输入数字，其他输入不了，而且自带上下增大减小箭头，max属性可以设置为最大值，min可以设置为最小值，value为默认值。
    search ： 输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化。
    range ： 可以提供给一个范围，其中可以设置max和min以及value，其中value属性可以设置为默认值
    color ： 提供了一个颜色拾取器
    time ： 时分秒
    date ： 日期选择年月日
    datatime ： 时间和日期(目前只有Safari支持)
    datatime-local ：日期时间控件
    week ：周控件
    month：月控件

优点

减少了对 JavaScript 的依赖，提高了表单处理的效率。

（6）Geolocation API、WebSocket、移动设备优化

优点

  • Geolocation API：HTML5 提供了地理定位 API，允许网页应用获取用户的地理位置信息，增强了基于位置的应用功能。

  • WebSocket：HTML5 引入了 WebSocket，用于在客户端和服务器之间创建全双工通信连接，大大减少了通信延迟，适合需要实时数据更新的应用。

  • 移动设备优化：HTML5 专注于跨平台兼容性，尤其是在移动设备上的表现。其设计考虑了触摸屏设备和移动浏览器的特性，提供了更好的用户体验。

HTML语义化案例分析

某网站结构如下： image.png 根据其语义化标签，可以很清晰地理清该网站结构，分为header、main、footer三部分。搜索引擎也可以根据语义化标签进行判断其层次结构及权重。

但如果仅仅用<div>、<span>等标签，大量使用下会导致页面结构不明晰，搜索引擎无法很好地判断，同时也不利于开发与维护。

avatar
文章
阅读
粉丝