html

本文介绍了H5新特性,包括canvas元素、video和audio、语意化内容元素、表单控件及客户端数据存储等。还讲解了viewport概念及使用元标签控制布局的方法,探讨了移动端1px渲染问题的处理和屏幕尺寸适配方案,最后阐述了HTML语义化的理解和作用。

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

H5新特性

  1. canvas 元素
  2. 用于媒介回放的 video 和 audio
  3. 语意化更好的内容元素,比如 article、footer、header、nav、section
  4. 表单控件,calendar、date、time、email、url、search
  5. localStorage 长期存储数据,浏览器关闭后数据不丢失;能维持在多个会话范围内
  6. sessionStorage 的数据在浏览器关闭后自动删除。客户端数据存储,只能维持在当前会话范围内。

什么是viewport?

Viewprot是用户网页的可视区域,Viewprot翻译为中文可以叫做“视区”,

浏览器就想一个盒子一样,pc的浏览器和手机浏览器屏幕是不同尺寸大小。同样一套尺寸网页在pc上可以正常浏览,如果没有viewport定义浏览器的尺寸,想pc尺寸一样在手机浏览器上显示,布局可能就乱掉,或者先尺寸比例非常的不协调。

使用viewport元标签控制布局

<mate name='viewport' content='width=device-width;initial-scale=1.0;maximum-scale=1;user-scalable=no'>

Width - 正整数或device-width - 定义视口的宽度,单位为像素

Height - 正整数或device-height - 定义视口的高度,单位为像素,一般不用

Initial-scale - [0.0-10.0] - 定义初始缩放值

Minimum-scale - [0.0-10.0] - 定义缩小最小比例,它必须小于或等于maximum-scale

Maximum-scale - [0.0-10.0] - 定义放大最大比例,它必须大于等于minimum-scale

User-scalable - Yes/no - 定义是否允许手动缩放,默认值yes

  • 延伸提问 - 怎样处理 移动端 1px 被 渲染成 2px问题
    • 局部处理
      mate标签中的 viewport属性 ,initial-scale 设置为 1
      rem按照设计稿标准走,外加利用transfrome 的scale(0.5) 缩小一倍即可;
    • 全局处理
      mate标签中的 viewport属性 ,initial-scale 设置为 0.5
      rem 按照设计稿标准走即可

如何解决移动端屏幕尺寸适配问题

  1. 响应式布局
  2. 百分比布局
  3. rem布局
  4. 媒体查询
  5. vh和vw
  6. viewport

语义化的理解

  • 用正确的标签做正确的事情!
  • HTML语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;
  • 在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的。
  • 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。
  • 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值