首页 > 其他分享 >【整理】html5知识点1

【整理】html5知识点1

时间:2023-04-03 15:33:15浏览次数:34  
标签:知识点 定义 标签 元素 HTML 文档 html5 整理 HTML5


1、关于html5
HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。
HTML5的设计目的是为了在移动设备上支持多媒体。
HTML5 简单易学。
HTML5 是下一代 HTML 标准。
HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。
HTML5 中的一些有趣的新特性:
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素,比如 article、footer、header、nav、section
新的表单控件,比如 calendar、date、time、email、url、search


2、HTML5 <!DOCTYPE>
<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:
<!DOCTYPE html>


3、最小的HTML5文档
下面是一个简单的HTML5文档:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
注意:对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。


4、HTML5 的改进
新元素
新属性
完全支持 CSS3
Video 和 Audio
2D/3D 制图
本地存储
本地 SQL 数据
Web 应用


5、HTML5 多媒体
使用 HTML5 你可以简单的在网页中播放 视频(video)与音频 (audio) 。
HTML5 <video>
HTML5 <audio>


6、HTML5 应用
使用 HTML5 你可以简单地开发应用
本地数据存储
访问本地文件
本地 SQL 数据
缓存引用
Javascript 工作者
XHTMLHttpRequest 2


7、HTML5 图形
使用 HTML5 你可以简单的绘制图形:
使用 <canvas> 元素
使用内联 SVG
使用 CSS3 2D/3D


8、HTML5 使用 CSS3
新选择器
新属性
动画
2D/3D 转换
圆角
阴影效果
可下载的字体


9、语义元素
HTML5 添加了很多语义元素如下所示:
标签 描述
<article> 定义页面的侧边栏内容
<aside> 定义页面内容之外的内容。
<bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置。
<command> 定义命令按钮,比如单选按钮、复选框或按钮
<details> 用于描述文档或文档某个部分的细节
<dialog> 定义对话框,比如提示框
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容(图像、图表、照片、代码等等)。
<figcaption> 定义 <figure> 元素的标题
<footer> 定义 section 或 document 的页脚。
<header> 定义了文档的头部区域
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<nav> 定义运行中的进度(进程)。
<progress> 定义任何类型的任务的进度。
<ruby> 定义 ruby 注释(中文注音或字符)。
<rt> 定义字符(中文注音或字符)的解释或发音。
<rp> 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
<section> 定义文档中的节(section、区段)。
<time> 定义日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。


10、HTML5 表单
新表单元素, 新属性,新输入类型,自动验证。


11、已移除元素
以下的 HTML 4.01 元素在HTML5中已经被删除:

<acronym>

 <applet>

 <basefont>

 <big>

 <center>

 <dir>

 <font>

 <frame>

 <frameset>

 <noframes>

 <strike>


12、HTML5 浏览器支持
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
IE9 以下版本浏览器兼容HTML5的方法,使用百度静态资源的html5shiv包:

<!--[if lt IE9]> 

 <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>

 <![endif]-->


载入后,初始化新标签的CSS:

/*html5*/

 article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}



完美的 Shiv 解决方案
实例

<!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>渲染 HTML5</title>

   <!--[if lt IE 9]>

   <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>

   <![endif]-->

 </head>





<h1>我的第一篇文章</h1>


<article>
菜鸟教程 —— 学的不仅是技术,更是梦想!!!
</article>


</body>
</html>


13、HTML5 新元素
自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义。
为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者,等。


14、<canvas> 新元素
标签 描述
<canvas> 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API


15、新多媒体元素
标签 描述
<audio> 定义音频内容
<video> 定义视频(video 或者 movie)
<source> 定义多媒体资源 <video> 和 <audio>
<embed> 定义嵌入的内容,比如插件。
<track> 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。


16、新表单元素
标签 描述
<datalist> 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
<keygen> 规定用于表单的密钥对生成器字段。
<output> 定义不同类型的输出,比如脚本的输出。


17、

标签:知识点,定义,标签,元素,HTML,文档,html5,整理,HTML5
From: https://blog.51cto.com/u_13128132/6166547

相关文章

  • 电梯演说选题及整理
    各位用户、合作伙伴:我们的产品“个人记账本”是为了解决中年(45~60岁),老年人(60岁)的痛苦,他们需要更加简单的文字录入方式,但是现有的方案并没有很好地解决这些需求,我们有独特的办法就是ocr图片文字识别,它给用户带来的好处是可以通过拍照的方式识别小票进行个人消费记录,远远超过竞争对......
  • JavaIO流:主要知识点
    JavaIO流:主要知识点File类介绍:java.io.File类:文件和文件目录路径的抽象表示形式,与平台无关。File能新建、删除、重命名文件和目录,但File不能访问文件内容本身。如果需要访问文件内容本身,则需要使用输入/输出流。想要在Java程序中表示一个真实存在的文件或目录,那么必......
  • Android Camera相关知识整理
    View相关原文:SerfaceView与TextureView的区别区别:Sureface有自己的Serface(由屏幕显示内容合成器(screencompositor)所管理的原生缓冲器的句柄)是一个单独的View,会在WMS中创建单独的窗口,有自己的渲染进程,不受UI层的控制,因此不能与其他UI组合在一起,不能进行平移缩放等变换。而Tex......
  • 八股文整理
    项目:1、多路复用技术?select、poll、epoll2、有限状态机?一种理论模型,主状态机解析HTTP报文请求行、请求头、请求体,从状态机读取一行。3、什么是IO多路复用,和多线程模式对比一个线程监听多个socket,处理多个请求。多线程模式是由多个线程来进行处理事务,每新来一个请求,都需要创......
  • 别逛了,送你一份2023年Java核心篇JVM(虚拟机)面试题整理
    Java内存区域说一下JVM的主要组成部分及其作用?JVM包含两个子系统和两个组件,两个子系统为Classloader(类装载)、Executionengine(执行引擎);两个组件为Runtimedataarea(运行时数据区)、NativeInterface(本地接口)。●Classloader(类装载):根据给定的全限定名类名(如:java.......
  • django:数据库的一些进阶知识点与应用
    一,连接池使用第三方程序向数据库发出数据操作请求前,都需要先创建到数据库的连接,这个操作会占用大量资源。所谓的资源消耗,一是对数据库连接数量的消耗;二是对系统内存资源的消耗;三是连接建立过程对时间的消耗,时间消耗角度可以参考这篇博客。django默认会在请求进来的时候创建......
  • 软件构造规约设计知识点总结
    已经开始做软件构造实验二了,但做了几天还是感觉不太对,有种无从下手的感觉,我还是来复习一下本次实验所要用到的知识点吧,至于前面的知识呢,先别急,虽然也用的上,但在本次实验不是重点,之后再进行复习。知识点概要:规约设计测试用例ADT的泛化型ADT的抽象函数(AF)、......
  • DIM中的一些知识点(慢更)
    最大深度互信息模型(DIM)执行图片搜索器MINE方法:之前看下面这句话的时候总是云里雾里,好好推了下公式终于明白啦。利用神经网络计算互信息可以转换为计算两个数据集合的联合分布和边缘分布之间的散度具体推导过程:如图,首先,我们有:I(X;Y)=H(X)-H(X|Y)其中,H(X......
  • QMainWindow知识点记录
    1.新建action toolbaropenFileAction = new QAction(QIcon(":/pic/open"), QString::fromLocal8Bit("打开"), this); openFileAction->setShortcut(tr("Ctrl+O")); openFileAction->setStatusTip(tr("打开一个文件"));-------......
  • playwright 使用日常知识点积累--不定期补充
    简介:Playwright是由微软公司2020年初发布的新一代自动化测试工具,相较于目前最常用的Selenium,它仅用一个API即可自动执行Chromium、Firefox、WebKit等主流浏览器自动化操作,并同时支持以无头模式、有头模式运行。官网地址:Playwright|Playwright.NET一:Playwright安装及介绍Pl......