HTML语义化有什么用

三点：无需编写CSS就可以保持良好的文档结构、有助于SEO、有助于Web Accessibility；

前端页面分层

三层：结构层（HTML）、表示层（CSS）、行为层（JS）；

iframe 缺点

三点：不利于SEO、阻塞onload事件、占用最大请求数量（同时间同域名）；

iframe与frame区别

iframe可以独立嵌入到文档中任意位置，frame必须包含在frameset中，且不能嵌入到body元素内；

[注]：frameset及frame已弃用。

iframe与父页面通信

同域：iframe通过parent内置对象访问父页面dom，父页面通过iframe元素的id、name或window.frames数组访问iframe；

跨域（一级域名相同，二级域名不同）：iframe与父页面的document.domain同时设置为相同域名，即可按同域嵌套处理；

跨域（一级域名不同）：片段标识符（location.hash，hashchange事件）、postMessage（postMessage(msg, target)，message事件）；

inline与block元素

block：div，p，ul，ol，li，table，h1-6；

inline：span，a，img，button，input，select；

三点区别：block元素独占一行，inline元素并入一行；block元素可设置width、height、margin、padding，inline元素可设置line-height、margin-left/right、padding-left/right；block元素可嵌套任意元素，inline元素不能嵌套其他元素；

Quirk和Standard的区别

盒模型：quirk模式下宽高指border + padding + content，standard模式下宽高指content；

inline元素：quirk模式下height、width生效，standard模式下不生效；

margin：0 auto：quirk模式下无效，standard模式下水平居中；

HTML5新特性

  • 语义化：article、footer、header、nav、section、strong等；
  • 多媒体：video、audio；
  • 绘画：canvas；
  • 本地存储：sessionStorage、localStorage（setItem、getItem、removeItem）；
  • 多线程：WebWorker（postMessage和message事件）；
  • 长连接：WebSocket（send、message事件）；
  • 丰富的表单控件：input type新增了calendar、date、time、email、url、search等；
  • 矢量图：SVG；
  • 地理定位：navigator.geolocation；
  • 拖放：drag、drop；

图片按区域划分链接

1
2
3
4
5
<img src="./image.jpg" alt="" usemap="#Map" />
　  <map name="Map" id="Map">
    <area alt="" title="" href="#" shape="poly" coords="65,71,98,58,114,90,108,112,79,130,56,116,38,100,41,76,52,53,83,34,110,33,139,46,141,75,145,101,127,115,113,133,85,132,82,131,159,117" />
    <area alt="" title="" href="#" shape="poly" coords="28,22,57,20,36,39,27,61" />
</map>

<a>标签的其他用途

  • 拨号：href="tel:10086"
  • 发短信：href="sms:10086"
  • 锚点