OneYoung

Appearance

HTML5中的区块和段落元素 ​

  • <section>元素表示包含在HTML文档中的独立部分。一般来说会包含一个标题。

  • <article>元素表示文档。可能包含一个或多个<section>

  • <nav>元素可用来表示导航栏。

  • <header>元素即表示头部。

  • <footer>元素表示底部。

  • <aside>元素表示侧边栏。

  • <hgroup>元素表示标题组。它通常可将多个h1至h6的子元素组装到一起。

使用HTML5的音频和视频 ​

<audio>和<video>元素嵌入和允许操作新的多媒体内容。关于<audio>和<video>的介绍可见多媒体。

表单的改进 ​

1.<input>元素拥有了更多的type值 ​

  • search搜索框。换行符会自动从输入中移除。

  • tel电话号码输入框。换行符会自动从输入中移除。

  • url地址输入框。换行符与首尾的空格将会被自动去除。

  • email邮件输入框。换行符会被自动去除。

  • datetime

  • date

  • month

  • week

  • time

  • number

  • range

  • color

2.元素新增特性 ​

  • placeholder 提示用户此域内能够输入什么内容。
  • autofocus 自动获取焦点，一个文档内只有一个表单能够拥有 autofocus 特性。
  • required 必须提供该元素的值。
  • min 最小值。
  • max 最大值。
  • maxlength 输入字符的最大长度。

3.新增了FormData对象 ​

form 表单的 post 方式默认的 enctype 是以 application/x-www-urlencoded 这种方式提交。当上传 file 文件时，则需要将 enctype 改为 multipart/form-data。

随着业务的发展，HTMLFormElement 元素的本身上传行为，不再能满足需要。我们希望原生的 javascript 也能通过 ajax 发送 file 对象。于是便有了 FormData。

js
const xhr = new XMLHttpRequest()
xhr.onload = function () {
  // 成功通信
  if (xhr.readyState === 4) {
    // 成功响应
    if (xhr.status === 200) {
      console.log(xhr.response)
    }
  }
}
xhr.open('post', 'http://www.baidu.com')
const formData = new FormData()
// 这里的fileData是表单里的<input type="file">获取到的file对象
formData.append('file', fileData)
xhr.send(formData)

更加具体的例子可见jsfiddle。虽然该例的ajax会有跨域的限制，但核心代码已经完备。

新的语义元素 ​

  • <mark> 会有黄色标记。

    这是一个mark标签

  • <figure>与<figcaption> 表示更加细节的解释。即使删除，不影响读者对文章的整体理解。

    这是我的测试图片

    二者通常结合使用。看下这篇文章来深入了解。

  • <data> 将一个指定内容和机器可读的翻译联系在一起。但是，如果内容是与时间或者日期相关的，则一定要使用 <time>。

    • apple
    • chrome

    WARNING

    按理说，鼠标移动到上面的文字上方，应该有标记。但是这里竟然不显示。MDN

  • <time> 以机器可读的格式用来表示24小时制时间或者公历日期，若表示日期则也可包含时间和时区。标准不成熟，不推荐使用，<span>它不香么？

    I am borned at

  • <output>

  • <progress>

    70 %

  • <meter>

  • <main>

<iframe>的改进 ​

关于iframe的改进，无非是更加细节的控制iframe，这里先不赘述。这里想简单介绍下iframe。

iframe元素可以在页面中嵌套另一个网址的页面。如嵌套一个豆瓣的页面：

html
<iframe width="375" height="667" src="https://m.douban.com/home_guide"/>

如果想要操作iframe的内嵌页面的DOM的话，可以使用：

js
document.querySelector('#iframe').contentWindow.document

HTMLIframeElement的contentWindow会指向内嵌页面的全局window属性。但是要注意的是利用该方法访问内嵌页面会受到跨域限制。会产生这样错误：

错误

我之前使用iframe的一个场景是：后端将pdf以流的形式传输给我，我接收到后，将其转化为blobUrl。然后使用iframe内嵌这个blobUrl，从而实现在当前页面直接预览pdf。