7.文档元素

文档元素的主要作用是划分各个不同的内容，让整个页面布局清晰明快，让整个布局具有语义，进一步替代div。
基本上没有什么实际作用效果，主要目的是在页面布局时区分各个主题和概念。

h1~h6 表示标题
header 表示标题
footer 表示尾部
nav 表示有意集中在一起的导航元素
section 表示重要概念或主题
article 表示一段独立的内容 一般博客里博文都用
address 表示文档或article的联系信息
aside 表示与周边内容少有牵涉的内容
hgroup 将一组标题组织在一起
details 生产一个区域，用户将其展开可以获得更多细节
summary 用在details元素中，表示该元素内容的标题或说明

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="utf-8"

     <title>文档元素</title>

 </head>

 <body>

 <header>

     <hgroup>

         <h1>这是主标题</h1>

         <h4>这是副标题</h4>

     </hgroup>

 </header>

 <aside>这是侧边栏内容</aside>

 <section>

     <nav>这是导航</nav>

     <details>生成一个区域</details>

 </section>

 <article>

     这是对立的内容

 </article>

 <footer>

     <h4>这是副标题</h4>

     <address>这是联系信息</address>

 </footer>

 </body>

 </html>

8.嵌入元素
img 嵌入图片
属性：
    src 嵌入图像的URL
    alt 当图片不加载时显示的备用内容
    width 定义图片宽度（像素）
    height 定义图片高度（像素）
    ismap 创建服务器端分区响应图
    usemap 关联<map>元素
map 定义客户端分区响应图
area 表示一个用户端分区响应图的区域

iframe 嵌入一个HTML文档
embed 用插件在HTML中嵌入内容 flash

meter 嵌入数值在许可值范围背景中的图形表示 value在10和100之间 min最小是10 max是100 IE不支持
progress 嵌入目标进展或任务完成情况的图形表示 IE9以下不支持

object 在HTML文档中嵌入内容 html4标准
param 表示将通过object元素传递给插件的参数

audio 表示一个音频资源
video 表示一个视频资源
canvas 生成一个动态的图形画布

source 表示媒体资源
svg 表示结构话矢量内容
track 表示媒体的附加轨道（例如字幕）

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="utf-8">

     <title>嵌入元素</title>

 </head>

 <body>

 <a href="index8.html"><img ismap="" src="img.jpg" alt="图片" width="320" height="443"  usemap="#Map"></a>

 <map name="Map">

     <area shape="rect" coords="31,28,112,100" href="http://www.baidu.com" target="_blank" alt="方形"></area>

     <area shape="circle" coords="187,142,47" href="http://www.ibm.com" target="_blank" alt="圆形"></area>

 </map>

 <br>

 <a href="http://www.haosou.com" target="in">好搜</a>

 <br>

 <iframe src="http://www.baidu.com" width="400" height="300" name="in"></iframe>

 <br>

 <embed src="http://images.cnblogs.com/cnblogs_com/chaowei119/23694/o_cwlogo.gif"></embed>

 <br>

 <progress value="30" max="100"></progress>

 <br>

 <meter value="30" min="10" max="100"></meter>

 </body>

 </html

9.音频和视频
a.视频容器（container）
音频文件或视频文件，都只是一个容器文件，视频文件包含了音频轨道，视频轨道和其他一些元素。视频播放时，音频轨道和视频轨道是绑定在一起的，元数据包含了视频的封面，标题，子标题，字幕等相关信息。主流视频容器支持的格式为：avi,flv,mp4,mkv,ogg,webm
b.编解码器（codec）
音频和视频编码/解码是一组算法，用来对一段特定音频或视频进行解码和编码，以便音频和视频能够播放，原始的媒体文件体积非常巨大，如果不对其进行编码，那么数据量是非常惊人的，在互联网上播放则要耗费无法忍受的时间，如果不对其进行解码，就无法将编码后的数据重组为原始的媒体数据。主流的音频编解码器：AAC,MPEG-3,Ogg Voribs 视频编解码器：H.264，VP8，Ogg Theora
c.浏览器支持情况
大部分支持MP4，OGG webM是发展主流方向，免费，高清
d.video视频
以往的视频播放，需要借助flash插件才能实现，但flash插件的不稳定性经常让浏览器崩溃。
属性：
    src 视频资源的URL
    width 视频宽度
    heigth 视频高度
    controls 设置后，表示显示播放控件
    autoplay 设置后，bioassay立刻开始播放视频
    loop 设置后，表示反复播放视频
    muted 设置后，表示视频处于静音状态
    poster 指定视频数据载入时显示的图片
    preload 设置后，表示预先载入视频 有三个属性（none，metadata，auto）
e.audio音频
和视频一个道理，只有src，controls autoplay loop属性

 <audio controls>

     <source src="test.mp3">

 </audio>

 <br>

 <video src="test.webm" controls autoplay loop muted></video>

 <video src="test.webm" controls poster="img.jpg"></video>

 <video src="test.webm" controls proload="none"></video>

 <video src="test.webm" controls>

     <source src="test.webm">

     <source src="test.mp4">

     <object>实现flash插件的播放，如果屏蔽IE9以下的浏览器则不需要</object>>

 </video>

HTML5学习笔记3的更多相关文章

  1. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  2. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  4. HTML5学习笔记（一）：HTML简介

    Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...

  5. CSS3秘笈第三版涵盖HTML5学习笔记6~8章

    第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...

  6. CSS3秘笈第三版涵盖HTML5学习笔记1~5章

    第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...

  7. HTML5 学习笔记（一）——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  8. Html5学习笔记(1)

    1.figure\figcaption||detail\summary||mark学习笔记 效果图 代码为: <!DOCTYPE html> <html> <head&g ...

  9. HTML5 学习笔记--------》HTML5概要与新增标签！

      一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...

  10. [html5] 学习笔记-表单新增的元素与属性（续）

    本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...

随机推荐

  1. python基础--logging模块

    很多程序都有记录日志的需求,并且日志中包含的信息即有正常的程序访问日志,还可能有错误.警告等信息输出,python的logging模块提供了标准的日志接口,你可以通过它存储各种格式的日志,loggin ...

  2. ROS数据可视化工具Rviz和三维物理引擎机器人仿真工具V-rep Morse Gazebo Webots USARSimRos等概述

    ROS数据可视化工具Rviz和三维物理引擎机器人仿真工具V-rep Morse Gazebo Webots USARSimRos等概述 Rviz Rviz是ROS数据可视化工具,可以将类似字符串文本等 ...

  3. Filebeat入门

    一.安装filebeat 简介 Beats 是安装在服务器上的数据中转代理. Beats 可以将数据直接传输到 Elasticsearch 或传输到 Logstash . Beats 有多种类型,可以 ...

  4. Python学习笔记：startswith & endswith 判断开头结尾是否为指定字符串

    作用: 判断字符串是否以指定字符或子字符串结尾,常用于判断文件类型. 如果以指定后缀结尾返回True,否则返回False. 可选参数"start"与"end"为 ...

  5. C#socket编程序（一）

    在讲socket编程之前,我们先看一下最常用的一些类和方法,相信这些能让你事半功倍. 一.IP地址操作类 1.IPaddress类 a.在该类中有一个 parse()方法,能够把点分十进制IP地址 转 ...

  6. Rookey.Frame之实体表单验证

    昨天给大家介绍了实体FluentValidation验证,今天继续给大家介绍表单验证,在Rookey.Frame框架中,表单验证有PrimaryKeyFields字段验证.唯一验证.必填验证.常用验证 ...

  7. Action(8):Error-26608:HTTP Status-Code=504(Gateway Time-out)

    Action(8):Error-26608:HTTP Status-Code=504(Gateway Time-out) 若出现如下图问题, 1.在Vuser Generator中的Tools---& ...

  8. 因为修改linux selinux修改错误产生的问题及解决办法

    会出现这个错误: not syncing attempted to kill init 解决办法是: 开机后一直按e 然后按这个修改: https://www.deep-silver.com/kern ...

  9. 同一个IP不同端口号使用session失效

    背景 我有两个工程projectA.projectB,projectA放在TomcatA中,projectB放在TomcatB中,TomcatA.TomcatB在一台server上. 工程都映射的根路 ...

  10. Python学习笔记之爬虫

    爬虫调度端:启动爬虫,停止爬虫,监视爬虫运行情况 URL管理器:对将要爬取的和已经爬取过的URL进行管理:可取出带爬取的URL,将其传送给“网页下载器”网页下载器:将URL指定的网页下载,存储成一个字 ...