【07】进阶html5

HTML5 包含两个部分的更新,分别是文档web api

文档

HTML5 元素表

元素语义化

元素语义化是指每个 HTML 元素都代表着某种含义,在开发中应该根据元素含义选择元素

元素语义化的好处:

  1. 利于 SEO(搜索引擎优化)
  2. 利于无障碍访问
  3. 利于浏览器的插件分析网页

新增元素

多媒体

可以使用audio元素表达一个音频

可以使用video元素表达一个视频

它们均具有以下属性

属性名 含义 类型
src 多媒体的文件路径 普通属性
controls 是否显示播放控件 布尔属性
autoplay 是否自动播放 布尔属性
loop 是否循环播放 布尔属性
muted 静音播放 布尔属性

新版浏览器不允许「带声音的自动播放」,可能将来甚至不允许自动播放

浏览器希望播放行为由用户决定

文章结构

为了让搜索引擎和浏览器更好的理解文档内容,HTML5 新增了多个元素来表达内容的含义。

下面的示例中,使用了 HTML5 的新增元素来表达一篇文章

<!-- article:一篇文章 -->
<article>
  <!-- header:文章头部信息 -->
  <header>
    <h1>文章标题</h1>
    <!-- blockquote:引用信息 -->
    <blockquote>此文章引用的文献:xxxx</blockquote>
  </header>
  <!-- aside: 文章的其他附加信息 -->
  <aside>
    <span>作者:xxxx</span>
    <span>发布日期:xxx</span>
    <span>浏览量:xxx</span>
  </aside>
  <!-- section:章节 -->
  <section>
    <h2>章节1</h2>
    <p>段落1</p>
    <p>段落2

相关推荐

  1. HTML 高级试题——附答案

    2024-03-20 07:12:03       57 阅读
  2. HiveDay05

    2024-03-20 07:12:03       37 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-20 07:12:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-20 07:12:03       101 阅读
  3. 在Django里面运行非项目文件

    2024-03-20 07:12:03       82 阅读
  4. Python语言-面向对象

    2024-03-20 07:12:03       91 阅读

热门阅读

  1. kafka connect

    2024-03-20 07:12:03       35 阅读
  2. C# double类型计算精度问题解决

    2024-03-20 07:12:03       45 阅读
  3. 面试复盘(北京某小公司)

    2024-03-20 07:12:03       43 阅读
  4. Unity构建详解(2)——SBP的初始设置和脚本编译

    2024-03-20 07:12:03       39 阅读
  5. windows搭建Elasticsearch环境

    2024-03-20 07:12:03       41 阅读
  6. Openssh

    2024-03-20 07:12:03       33 阅读
  7. [论文笔记] Open-Sora 4、sora复现训练过程 (新repo)

    2024-03-20 07:12:03       39 阅读
  8. OpenCV 单目相机光平面标定

    2024-03-20 07:12:03       42 阅读
  9. 【ML】深度学习演进与神经网络反向传播推导 2

    2024-03-20 07:12:03       33 阅读