HTML5标签变化1 学习打卡

课程概述

  1. 标签变化 – DTD、新增的标签、删除标签、重定义的标签
  2. 页面布局 – 新的页面布局、区别和意义
  3. 属性变化 – Input、表单属性、链接属性、其他属性

DOCTYPE声明

定义和用法 –

  • 必须是HTML文档的第一行
  • html:5按下tab键 / !+ctrl+e —> 生成html5的标准形式
  • 不是HTML标签

DTD – 文档类型定义

  • DTD:可定义合法的XML文档构建模块,它使用一系列的合法的元素定义文档的结构
  • 在HTML中:DTD规定了标记语言的规则,这样浏览器才能正确呈现其内容
  • HTML5:不再基于SGML,所以不需要再次引用DTD
    (xml:扩展标记语言)
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

新增的标签

  1. 结构标签
  2. 多媒体标签
  3. web应用标签
  4. 其他标签

结构标签(块状元素) – 有意义的DIV

  1. article – 标记定义一篇文章
  2. header – 标记定义一个页面或者一个区域的头部
  3. nav – 标记定义导航链接
  4. section – 标记定义一个区域 – 用处比较大,因为网页中到处都是一个一个的区域
  5. aside – 标记定义页面内容的侧边栏
  6. hgroup – 标记定义一个文件中的一个区块的相关信息
  7. figure – 标记定义一组媒体内容以及他们的标题 – 包裹视频、音频表示一种语义
  8. figcaption – 标签定义figure元素的标题
  9. footer – 标记定义一个页面或者一个区域的底部
  10. dialog – 标记定义一个对话框(会话框)类似微信
结构标签补充
  1. header/section/aside/article/footer这五个大标签不要嵌套里面,他们作为大标签存在于外面的
  2. header/section/footer – 这三个级别最大 aside/article/figure/hgroup/nav相对于前面的三个标签作为内层
  3. 以上前面三个和后面的五个不能相互嵌套
  4. 紧接着 div/figcaption这两个是一个级别的

对媒体标签 – 三类

  • video – 标记定义一个视频
  • audio – 标记定义一个音频内容
  • source – 标记定义媒体资源
audio – 标记定义一个音频内容

音频格式:mp3、ogg、wav…
音频属性:

  • Autoplay 自动播放
  • Controls 控件播放
  • Loop -1 loop 无限循环
  • Src 资源路径
video – 标记定义一个视频

视频属性:

  • Autoplay 自动播放
  • Controls 显示控件
  • Height 设置播放器的高度
  • Weight 设置播放器的宽度
  • Loop 循环播放 值:-1 loop
  • Src 资源路径
  • Preload 预备播放 但是如果出现了autoplay 自动忽略

Canvas标签

绘制图像 JavaScript – 标记定义图片使用

embed

在html4中是存在的,但是备用标签,几乎不使用而且不被w3c认可,但是在html5中转正了

  1. 标记定义外部可交互的内容或者插件,比如flash动画,定义一个容器,用来嵌入外部的应用
  2. 是html5中新标签
  3. 可以插入flash动画也可以插入image图片

标签意义

多媒体标签的出现意味着多媒体的发展以及支持 不使用插件的情况下即可随机操作多媒体,极大的提高了用户体验。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值