HTML5 新标签用法总结

  • header: 有两种使用方式,一是标注内容的标题,另一种是标注页面的页眉
    • 标注内容标题时,还可以同时存放内容的作者、发表日期、标签、点击量、内容概要等很多内容
  • nav: 常用来标注导航栏(一组链接)
  • aside: 用来添加附注,即与周围的文本没有密切关系的内容。比如盛放广告、相关内容链接等。也可以用来 标注侧边栏
  • section: 区块元素,在其他语义元素不能满足需要时使用
  • main: 标识页面的主要内容,主要内容就是整篇文章,不包括站点页眉、页脚和侧边栏等信息
  • article: 内容块,可以用来放博客文章、新闻内容等
  • footer: 用来放一些网站版权信息、作品来源、法律限制以及一些链接等简单的信息

  • details: 标注可折叠区块
  • summary: 标注可折叠区块的标题
<details>
    <summary>about me</summary>
    <p>Hi, i'm percy, a sad boy, but not very sad.</p>
</details>
  • figure: 插图(注意它与图片的概念不同)
  • figcaption: 插图标题
<figure>
    <imgsrc="./img/1.jpg"alt="picture">
    <figcaption>picture title</figcaption>
</figure>

标注文本的标签

  • time: 在页面上标注一个有效的日期或时间
    • datatime 特性: 提供计算机能看懂的日期(eg: 2014-03-21)
    • HTMLTimeElement.dateTime
<p>The time is <timedatatime="2017-03-11">2017/3/11</time>,i miss you!</p>
  • output: 标注 JavaScript 返回值(通常要为其指定一个 ID 属性)
<p>Your score is <outputid="result"></output></p>
  • mark: 标注突出显示的文本(浏览器默认为标记的文本添加黄色背景)
<p>I am <mark>percy</mark></p>

构建表单的标签

  • 新的输入控件

    • <input type=”email”> 输入电子邮件
    • <input type=”url”> 输入网址
    • <input type=”search”> 搜索框
    • <input type=”tel”> 输入电话号码
    • <input type=”number” min=”0” max=”255”> 输入数值
    • <input type=”range” min=”0” max=”100”> 滑动条
      • 可为滑动条设置 onchange 监听程序
  • datalist:显示输入建议

    • datalist 必须配合一个标准文本框使用
<label>Choose a browser from this list:
    <inputtype="text"list="browsers"/>
</label>
<datalistid="browsers">
    <optionvalue="Chrome">
    <optionvalue="Firefox">
    <optionvalue="Internet Explorer">
    <optionvalue="Opera">
    <optionvalue="Safari">
    <optionvalue="Microsoft Edge">
</datalist>
  • progress: 进度条
<progressvalue="50"max="200">

音频视频标签

audio 和 video 都是 inline 标签

  • audio: 音频标签
    • src: 音频文件地址
    • controls: 显示基本的控件
    • preload: 预加载媒体文件,默认值为 auto(直接预下载整个文件)
      • metadata: 先下载开头的数据块,点击播放时再下载整个文件
      • none: 只在点击播放后才开始下载整个文件
    • autoplay: 在加载完音频文件后立即播放(可结合JavaScript实现背景音乐)
    • loop: 是否开启循环播放
    • muted: 是否静音
<audiosrc="Indecent.mp3"controlsautoplay></audio>
// 后备措施,支持多种格式

<audiocontrols>
    <sourcesrc="love.mp3"type="audio/mp3">
    <sourcesrc="love.ogg"type="audio/ogg">
</audio>
  • video: 视频标签
    • video 标签具有音频标签 audio 上面的所有特性
    • width、height: 设置视频窗口的大小
    • poster: 设置用于替换视频第一帧的图片
<videosrc="walking_dead.mp4"controlswidth="300"height="200"poster="img/post.jpg"></video>
// 后备措施,支持多种格式

<videocontrols>
    <sourcesrc="dead.mp4"type="video/mp4">
    <sourcesrc="dead.webm"type="video/webm">
</video>

常见浏览器音频视频格式(后缀名+MIME类型)

  • MP3: .mp3audio/mp3 ,最流行的音频格式
  • Ogg Vorbis: .oggaudio/ogg ,免费开放的标准,可以和 mp3 媲美
  • WAV: .wavaudio/wav ,未加工的音频初始格式,体积非常大
  • H.264: .mp4video/mp4 ,视频压缩的行内标准,非常流行,广泛应用于各种视频行业
  • Ogg Theora: .ogvvideo/ogg ,免费开放的标准,品质和性能不如 H.264,但能满足大多数人的需要
  • WebM: .webmvideo/webm ,最新视频格式

MIME 类型,也叫内容类型,表示 Web 资源的内容类型。

暂时就这些了,有新的再补~

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章