2022-09-18HTML00
请注意,本文编写于 574 天前,最后修改于 574 天前,其中某些信息可能已经过时。

HTML

HTML5 的新特性

  1. 语义化标签
    、footer、section、nav、aside、article
  2. 增强型表单:input的多个type(color, date, datetime, email, month, number, range, search, tel, time, url, week)
  3. 新增表单元素:datalist、keygen、output
  4. 新增表单属性:placehoder, required, min和max, step, height 和 width, autofocus, multiple
  5. 音频视频:audio、video
  6. canvas
  7. 地理定位:
  8. 拖拽:drag
  9. 本地存储:localStorage、sessionStorage
  10. 新事件:onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
  11. WebSocket

localStorage,sessionStorage,cookie 的区别

共同点:都是保存在浏览器端。
区别:
(1) cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递
    sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存
(2) 存储大小限制也不同
    cookie数据不能超过4k
    sessionStoragelocalStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大
(3) 数据有效期不同
    sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;
    localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;
    cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭;
(4) 作用域不同
    sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;
    localStorage 在所有同源窗口中都是共享的;
    cookie也是在所有同源窗口中都是共享的

DOCTYPE的作用是什么

(1) <!DOCTYPE>声明一般位于第一行,处于 <html> 标签前。作用:告诉浏览器以什么样的模式来解析文档。DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现。
(2) 一般指定了之后会以标准模式来进行文档解析,否则就以兼容模式进行解析。在标准模式下,浏览器的解析规则都是按照最新的标准进行解析的;在兼容模式下,浏览器会以向后兼容的方式来模拟老式浏览器的行为,以保证一些老的网站的正确访问。

语义化标签的作用

  • 即使在没有CSS样式的条件下,也能很好地呈现出内容结构、代码结构。
  • 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页
  • 语义化标签会使HTML页面的内容结构更加清晰,有利于维护代码和添加样式
  • 有利于SEO
  • 便于团队开发和维护,遵循W3C标准,可以减少差异化

行内元素 块级元素

HTML4中,元素被分成两大类:inline (内联元素)与 block (块级元素)。
1) 格式上,默认情况下,行内元素不会以新行开始,而块级元素会新起一行。
2) 内容上,默认情况下,行内元素只能包含文本和其他行内元素。而块级元素可以包含行内元素和其他块级元素。
3) 行内元素与块级元素属性的不同,主要是盒模型属性上:行内元素设置 width 无效,height 无效(可以设置 line-height),设置 margin 和 padding 的上下不会对其他元素产生影响。
4)常见的行内元素有 a b span img strong sub sup button input label select textarea
5)常见的块级元素有  div p ul ol li dl dt dd h1 h2 h3 h4 h5 h6

canvas与SVG

  • canvas与svg都是可以在浏览器上创建图形
  • HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像、动画的方法
  • canvas绘制位图,绘制出来的每一个图形的元素都是独立的DOM节点,能够方便的绑定事件或用来修改。canvas复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)。canvas输出的是一整幅画布,就像一张图片一样,放大会失真。canvas不适合游戏应用。
  • svg输出的图形是矢量图形,后期可以修改参数来自由放大缩小,SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。svg最适合图像密集型的游戏,其中的许多对象会被频繁重绘

本文作者:前端小毛

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!