首页 前端知识 HTML5是什么

HTML5是什么

2024-02-25 11:02:11 前端知识 前端哥 366 625 我要收藏

一、HTML5是什么

1.HTML5 的概念与定义

定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML

两个概念:

是一个新版本的 HTML 语言,定义了新的标签、特性和属性

拥有一个强大的技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上的 HTML5

2.HTML5 拓展了哪些内容

  • 语义化标签

  • 本地存储

  • 兼容特性

  • 2D、3D

  • 动画、过渡

  • CSS3 特性

  • 性能与集成

3.HTML5 的现状

绝对多数新的属性,都已经被浏览器所支持,最新版本的浏览器已经开始陆续支持最新的特性,

总的来说:HTML5 已经是大势所趋

4. HTML5舍弃的标签

  1. 标 签说 明
    basefont定义页面文本的默认字体、颜色或尺寸
    big定义大字号文本
    center定义文本居中
    font定义文本的字体样式
    strike定义删除线文本
    s定义删除线文本
    u定义下划线文本
    dir定义目录列表,应该用ul代替
    acronym定义首字母缩写,应该用abbr代替
    applet定义嵌入的applet,应该用object代替
    noframes为那些不支持框架的浏览器显示文本
    frame定义frameset中的一个特定的框架

二、HTML5新增的标签

1.什么是语义化

语义化

优点:

  • 易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
  • 有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
  • 方便其他设备解析,如盲人阅读器根据语义渲染网页
  • 有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。
标签含义
header页眉通常包括网站标志、主导航、全站链接以及搜索框
nav标记导航,仅对文档中重要的链接群使用
main页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能
article定义外部的内容,其中的内容独立于文档的其余部分
section定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分
aside定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等
footer页脚,只有当父级是body时,才是整个页面的页脚
title页面主体内容
hnh1~h6,分级标题,

协调有利于搜索引擎优化

ul无序列表
li有序列表
small呈现小号字体效果,指定细则,输入免责声明、注解、署名、版权
em将其中的文本表示为强调的内容,表现为斜体
strong和 em 标签一样,用于强调文本,但它强调的程度更强一些
mark使用黄色突出显示部分文本
figure规定独立的流内容(图像、图表、照片、代码等等)(默认有40px左右margin
figcaption定义 figure 元素的标题,应该被置于 figure 元素的第一个或最后一个子元素的位置
abbr简称或缩写
address作者、相关人士或组织的联系信息(电子邮件地址、指向联系信息页的链接)

2.新增了那些语义化标签

  • header — 头部标签
  • nav — 导航标签
  • article — 内容标签
  • section — 块级标签
  • aside — 侧边栏标签
  • footer — 尾部标签

3.使用语义化标签的注意

  • 语义化标签主要针对搜索引擎
  • 新标签可以使用一次或者多次
  • IE9 浏览器中,需要把语义化标签都转换为块级元素
  • 语义化标签,在移动端支持比较友好,
  • 另外,HTML5 新增的了很多的语义化标签,随着课程深入,还会学习到其他的

三、H5新特性

  • 新增选择器 document.querySelector、document.querySelectorAll
  • 拖拽释放(Drag and drop) API
  • 媒体播放的 video 和 audio
  • 本地存储 localStorage 和 sessionStorage
  • 离线应用 manifest
  • 桌面通知 Notifications
  • 语意化标签 article、footer、header、nav、section
  • 增强表单控件 calendar、date、time、email、url、search
  • 地理位置 Geolocation
  • 多任务 webworker
  • 全双工通信协议 websocket
  • 历史管理 history
  • 跨域资源共享(CORS) Access-Control-Allow-Origin
  • 页面可见性改变事件 visibilitychange
  • 跨窗口通信 PostMessage
  • Form Data 对象
  • 绘画 canvas

四、新增 input 标签

属性说明
type=“email”限制用户输入必须为email类型
type=“url”限制用户输入必须为url类型
type=“date”限制用户输入必须为日期类型
type=“time”限制用户输入必须为时间类型
type=“month”限制用户输入必须为月类型
type=“week”限制用户输入必须为周类型
type=“number”限制用户输入必须为数字类型
type=“tel”手机号码
type=“search”搜索框
type=“color”生成一个颜色选择表单

五、新增表单属性

属性说明
requiredrequired表单拥有该属性表示器其内容不能为空,必填
placeholder提示文本(占位符)表单的提示信息,存在默认值将不显示
autofocusautofocus自动聚焦属性,页面加载完成自动聚焦到指定表单
multiplemultiple可以多选文件提交

六、多媒体音视频标签

1.video 视频标签

  • 目前支持三种格式

  • <video src="src/video/one.mp4" controls="controls"></video>

2.video 参数

属性描述
autoplayautoplay视频就绪自动播放(chrome浏览器需要添加muted来解决自动播放问题)
controlscontrols向用户展示播放控件
widthpx(像素)设置播放器宽度
heightpx(像素)设置播放器高度
looploop播放完是否继续播放该视频,循环播放
preloadauto,none规定是否预加载视频,若有autoplay则忽略该属性
srcurl视频url地址
posterImgurl加载等待的画图图片
mutedmuted静音播放

3.audio 标签

属性描述
autoplayautoplay视频就绪自动播放(chrome浏览器需要添加muted来解决自动播放问题)
controlscontrols向用户展示播放控件
loopauto,none播放完是否继续播放该视频,循环播放
preload规定是否预加载视频,若有autoplay则忽略该属性
srcurl视频url地址
posterImgurl加载等待的画图图片

4.audio常用的控制函数

属性
load()加载音频、视频软件
play()加载并播放音频、视频文件或重新播放暂停的音频、视频
pause()暂停处于播放状态的音频、视频文件
canPlayType(obj)测试是否支持给定的mini类型的文件

5.多媒体标签总结

  • 音频标签与视频标签使用基本一致

  • 多媒体标签在不同浏览器下情况不同,会存在兼容性问题

  • chrome浏览器把音频和视频标签的自动播放全都禁止了

  • chrome浏览器中视频添加 muted 标签可以自己播放

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2664.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!