HTML学习随笔

如何理解HTML语义化

历史:以前的html都是一堆没有语义的冷冰冰的标签。最泛滥的就是div+css,以前的页面,一打开就是一堆div+css,为了改变这种这种状况,开发者们和官方提出了让HTML结构语义化的概念,并且官方w3c,也在HTML5给出了几个新的语义化的标签。

使用语义化后有什么好处:

  • 正确的标签做正确的事情
  • 页面内容结构化
  • 无CSS样子时也容易阅读,便于阅读维护和理解
  • 便于浏览器、搜索引擎解析

举例:header元素代表“网页“和”section”的页眉,footer元素代表“网页”或“section”的页脚,nav元素代表页面的导航链接区域,h1,p。

meta viewport是做什么用,怎么写


width表示移动设设备下显示的宽度为设备宽度(device-width)
initial-scale表示设备与视口的缩放比率
maximumminimum分别表示缩放的最大最小值, 要注意的是, maximum必须比minimum大.
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许.

刚开始 web 页面仅仅是在 PC 端进行查看的,但是后来随着移动互联网的发展,越来越多的 web 访问是通过移动端进行的,但是因为 PC 的 viewport 要比移动端大,所以为了快速修复这个问题,移动端的浏览器默认只是把整个页面等比例缩小到移动端的 viewport 大小。
这样做的后果就是,用户看到的是一个缩小版的整个页面,字体、图标和内容等等都非常小,想要点击或者查看都需要去放大页面进行操作,放大页面之后就会出现横向滚动条,这对用户体验来说是非常不好的。

用过哪些HTML5标签

canvas 提供了一个通过js和html的元素来绘制图形的方式

/* HTML*/

/* JS */
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'green'; //填充颜色
ctx.fillRect(10, 10, 150, 100); //位置和宽高

video 用于在HTML或者XHTML文档中嵌入媒体播放器,用于支持文档内的视频播放


audio 元素用于在文档中表示音频内容




什么是H5

搜知乎吧

你可能感兴趣的:(HTML学习随笔)