HTML5拾遗

最新推荐文章于 2024-09-07 10:36:26 发布

I1326

最新推荐文章于 2024-09-07 10:36:26 发布

阅读量313

点赞数

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/I1326/article/details/106411894

版权

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

重新梳理一下16年刚开始学习前端内容时做过的有关html5的笔记；因为重点是html5会侧重相关标签，有些东西可能只是马克下名词，以提醒日后展开学习。

HTML5

网站开始是指在因特网上根据一定的规则，使用Html等工具制作的用于展示特定内容相关网页的集合；简单的说，网站是一种沟通工具，人们可以通过网站来发布自己想要的公开的咨询，或者利用网站来提供相关的网络服务，人们可以通过网页浏览器来访问网站，来获取所需的咨询。

网站：域名、空间服务器、DNS域名解析、网站程序、数据库

什么是HTML5

什么是HTML5，其将成为html、xhtml以及HTML DOM的新标准。HTML的上一个版本诞生于1999年，自从那以后Web世界已经经历了巨变，HTML5仍然处于完善之中，然而，大部分现代浏览器已经具备了某些HTML5支持。

版本	年份
HTML	1991
HTML+	1993
HTML2.0	1995
HTML3.2	1997
HTML4.01	1999
XHTML	2001
HTML5	2012

HTML5是如何起步的

HTML5是W3C 与WHATWG合作的结果。W3C指的是World Wide WebConsortium万维网联盟，WHATWG指Web Hypertext Application Technology Working Group在2006年，双方决定合作，来创建一个新版本的HTML
为HTML5建立一些规则：
新特性应该基于HTML、CSS、DOM、以及JavaScript。
减少对外部插件的需求（例如Flash）
更优秀的错误处理
更多取代脚本的标记
HTML5应该独立于设备
开发进程应对公众透明
Html5不等于h5约等于H5
Html5=css3+javascript+html API
新的DOCTYPE//“doctype”中文意思指“文档类型”
HTML5中的一些有趣的新特性：

用于绘画的canvas元素
用于媒介回放的video和audio元素
对本地离线存储的更好的支持
新的特殊内容元素，比如article、footer、header、nav、section
新的表单控件，比如calendar、date、time、email、url、search

让Web再次回归到富客户端地步，而且更加的独立，减少了对第三方插件的依赖。
比如：之前的HTML4的标准中并没有对于视频、音频以及其他的富客户端技术支持非常好，这就使得Flash和SilverLight变得异常成功。而在HTML5新标准中原生的就支持已音频、视频、画布等技术。让我们的WEB程序拥有更多富客户端表现的方式，而且让我们的WEB程序更加独立，更好的适应多种形式的客户端。
对本地离线储存的更好的支持
由于之前想在客户端保存一些数据都是由cookie完成的。但是cookie不是和大量数据的存储，因为他们由每个对服务器的请求来传递，这使得cookie速读很慢而且效率也不高
HTML5提供了两种客户端存储数据的新方法：
Localstorage没有时间限制的数据存储
Seessionstorage针对一个session的数据存储
在HTML5中数据不是由每个服务器请求传递的，而是只有在请求时使用数据，他使在不影响网站性能的情况下存储大量数据成为可能
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据
HTML5使用JavaScript来储存和访问数据，有了本地数据库的支持，让一些简单的离线应用也成为了可能。
新的特殊内容元素，更好的支持SEO现在所有的站点基本上都是Div+Css布局，几乎所有的文章标题、内容、辅助介绍等都用Div容器来承载
搜索引擎在抓取页面内容时，因为没有明确容器的含义只能去猜测这些标签中承载的是文章标题还是文章内容等，HTML5新标准中直接添加了拥有具体含义的HTML标签比如：article、footer、header、nav、section
更加智能的表单标签
之前的表单标签，仅仅是简单的类型的约束，比如文本框、文本域、下拉列表等，而跟业务结合紧密的表单标签数据校验等控制都没有很好的支持，而是用这些技术都基本上都是跟第三方的JS控件进行结合使用，但是这些第三方总会设计到版本控制、浏览器兼容性、非标准等一系列的问题，而在HTML5的标准中直接添加了只能表单，让这一切都变得那么简单，比如calendar、date、time、email、url、search
HTML5即时二维绘图
画布的引入使得：Web端生成动画效果、制作Web游戏、更好的交互体验设计都增加了无限的变数。HTML5的canvas元素使用javascript在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。
Canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

新增标签

主体结构标签

标签	描述
Article	定义页面独立的内容区域
Aside	定义页面的侧边栏内容
Summary	标签包含details元素的标题
Footer	定义section或document的页脚
Header	定义了文档的头部区域
Nav	定义运行中分的进度（进程）
Progress	定义任何类型的任务的进度
Section	定义文档中的节（section、区段）
Time	定义日期或时间

在这里插入图片描述

新增其他标签

标签	描述
Command	定义命令按钮，比如单选按钮、复选框或按钮
Details	用于描述文档或文档某个部分的细节
Dialog	定义对话框，比如提示框
Figure	规定独立的流内容（图像、图表、照片、代码等）
Figcaption	定义figure元素的标题
Mark	定义带有极好的文本
Meter	定义度量衡，仅用于已知最大和最小值的度量
Ruby	定义ruby注释（中文拼音或字符）
Rt	定义字符（中文注音或字符）的解释或发音
Rp	在ruby注释中使用，定义不支持ruby元素的浏览器所显示的内容
Wbr	规定在文本中的任何适合添加换行符。

常用标签详解

Section标签

定义文档中的节比如章节、页眉、页脚或文档中的其他部分。一般用于成节的内容，会在文档流中开始一个新的节。它用来表现普通的文档内容或者应用区块，通常由内容及其他标题组成，但section元素标签并非一个普通的容器元素，他表示一段专题性的内容，一般会带有标题。
当我们描述一件具体事物的时候，通常鼓励使用article来代替section；当我们使用section是，仍然可以受用h1来作为标题，而不用担心她所处的位置。以及其他地方是否用到；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div元素而非section

Article标签

是一个独立的section标签，它比section更具有明确的语义，他代表一个独立的、完整的相关内容块，可独立于页面其他内容使用，例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。一般来说，article会有标题部分(通常包含在header内)，有时也会包含footer。Article可以嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论可以以article的形式嵌入其中

Nav标签

Nav标签代表页面的一个部分，是一个可以作为页面导航的链接组，其中的导航元素链接到其他页面或者当前页面的其他部分，是html代码在语义化方面更加精准，同时对于屏幕阅读器等设备的支持也更好。

Aside标签

Aside标签用来装载非正文的内容，被视为页面里面一个单独的部分，它包含的内容与页面的主要内容是分开的，可以被删除，而不会影响到网页的内容、章节或是页面所要传达的信息。例如广告，组成的链接，侧边栏等等。

Header标签

Header标签定义文档的页眉，通常是一些引导和导航信息，他不局限于写在网页头部，也可以写在网页内容里面，
通常header标签至少包含（但不局限于）一个标签标记（h1-h6），还可以包括hgroup标签，还可以包括表格内容、表示、搜索表单、nav导航等

Footer标签

Footer标签定义section或document的页脚，包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或者日期。作为页面的页脚时，一般包含了版权、相关文件和链接。他和header标签使用基本一样，可以在一个页面中多次使用，如果在一个区段的后面加入footer，那么他就相当于该区段的页脚了。

Figure标签

用于对元素进行组合，多用于图片与图片描述组合。

HTML5表单

新的表单元素
新的input类型
新的form和input的属性
Html5有以下新的表单元素
datalist、keygen、output
注意：不是所有的浏览器都支持html5新的表单元素，但是你可以在使用他们，即时浏览器不支持表单元素，仍然可以显示为常规的表单元素。

datalist

规定输入域的选项列表，列表是通过DAtalist内的option元素创建，如需吧Datalist绑定到输入域，请用输入域的list属性引用datalist的id

<input>元素使用<datalist>预定义值
<input list="browsers">
<datalist id="browsers">
	<option value="ie">
	<option value="firefox">
	<option value="chrome">
</datalist>

kaygen[很少应用]

元素的作用是提供一种验证用户的可靠方法
规定用于表单的密匙对生成器字段。当提交表单时，会生成两个建，一个是私钥，一个是公钥。私钥（private key）储存于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

output

用于不同类型的输出，比如如计算或脚本输出
将计算结果显示在元素

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
	<input type="range" id="a" value="50">100+
	<input type="number" id="b" value="50">=
	<output name="x" for="a b"></output>
</form>

input类型

input类型color在input字段用于选取颜色，如下所示：

<input type="color" name="favcolor">

input类型date允许你从一个日期选择器选择一个日期。

<input type="date" name="bd">

input类型number用于应该包含数值的输入域。能够设定的对所接受的数字的限定：
max规定允许的最大值
min规定允许的最小值
step规定合法的数字间隔（如果step=“3”，则合法的数量是-3，0，3，6等）
value-规定默认值
例:定义一个数值输入域数量1到5之间：

<input type="number" step="2" min="1" max="20" value="0">

input类型：email用于应该包含E-mail地址的输入域。
例:提交表单时，会自动验证e-mail域的值是否合法有效：

<input type="email" name=”email”>
<input type="submit" value="提交" >

Input类型range
用于应该包含一定范围内数字值得输入域。Range类型显示为滑动条。
例:定义一个不需要非常精确地数值（类似于滑块控制）：

<input type=”range” min=”1” max=”10”/>

search搜索该类型用于搜索域，比如站点搜索或google搜索。
例:用于输入搜索内容的输入框

<input type=”search”name=”googlesearch”>

Tel类型定义输入电话号码字段，提交表单时会验证是否是正确的手机号。
例:用于输入电话号码的输入框

<input type=”tel” name=”usrtel”>

Input类型url
url类型用于应该包含url地址的输入域，在提交表单时，会自动验证url域的值。
例:定义输入url字段
添加您的主页

<input type=”url” name=”homepage”>

form/input autocomplete属性

Autocomplete属性规定form或input域应该拥有自动完成功能。
当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。提示：autocomplete属性有可能在form元素中是开启的，而在input元素中是关闭的。注意：autocomplete适用于标签，以及以下类型的标签:text，search，url,telephong,email,password,datepickers,range以及color。

input autofocus属性

autofocus属性autofocus属性是一个boolean属性，autofocus属性规定在页面加载时，域自动地获得焦点。
例:让“first name”input输入域在页面载入时自动聚焦：

first name:<input type=”text” name=”fname” autofocus>

input form属性

form属性form属性规定输入域所属的一个或多个表单。提示：如需引用一个以上的表单，请使用空格分隔的列表。
例:位于form表单外的input字段引用了html form（该input表单仍然属于form表单的一部分）：

	<form action='demo.php' id='form1'>
		first name:<input type='text' name='fname'><br>
		Last name:<input type=”text” form=”form1”>
		<input type=”submit” value=”submit”>
	</form>

input formmethod属性

Formmethod属性定义了表单提交的方式。Formmethod属性覆盖了元素的meethod属性。注意：该属性可以与type=“submit”配合使用。例:从新定义表单提交方式实例：

<form action=”deemo.php” method=”get”>
	First name:<input type=”text” name=”fname”><br>
	Last name:<input type=”text” name=”lname”><br>
	<input type=”submit ”value=”submit”>
	<input type=”submit” formmethod=”post” formaction=”demo-post.php” value=”submit post”>
</form>

input formtarget属性

Formtarget属性指定一个名称或者一个关键字来指明表单提交数据接手后的展示。The formtarget属性覆盖元素的target属性。注意：formtarget属性与type=“submit”配合使用。例：

<form action=”deemo.php” method=”get”>
	First name:<input type=”text” name=”fname”><br>
	Last name:<input type=”text” name=”lname”><br>
	<input type=”submit” value=”submit as normal”>
	<input type=”submit” formtarget=”_blank” value=”submit to a new window”>
</form>

input list属性

List属性规定输入域的datalist。Datalist是输入域的选项列表。
例:在datalist中预定义input值：

<input list=”browseers”>
<datalist id=”browsers”>
	<option value=”internet explorer”>
	<option value=”firefox”>
	<option value=”chrome”>
	<option value=”opera”>
	<option value=”safari”>
</datalist>

input placeholder属性

Placeholder属性提供一种提示，描述输入域所期待的值。简短的提示在用户输入值前会显示在输入域上。注意：placeholder属性适用于以下类型的标签：text,search,url,telephone,email以及password。
例：input字段提示文本

<input type=”text” name=”fname” placeholder=”first name”>

input required属性

Required属性是一个boolean属性，规定属性必须在提交之前填写输入域（不能为空）注意：required属性适用于以下类型的标签：text,search,url,telephone,email,password,date,pickers,number,checkbox,radio以及file。
例：不能为空的input字段：

username：<input type=“text” name=“usrname” required>

Html5 video（视频）

Web站点上的视频直到现在仍然不存在一项旨在网页上显示视频的标准，今天，大多数视频是通过插件（比如flash）来显示的，然而，并非所有浏览器都拥有同样的插件，html5规定了一种通过video元素来包含视频的标准方法。
Control属性供添加播放、暂停和音量控制。包含宽度和高度的属性也是不错的主意，video与/video之间插入的内容是供不支持video元素的浏览器显示的。
例：

<video wideth=”320” height=”240” controls>
		<source src=”movie.mp4” type=”video/mp4”>
		<source src=”movie.ogg” type=”video/ogg”>
		您的浏览器不支持video标签
</video>

Video标签的属性

属性	值	描述
Autoplay	Autoplay	如果出现该属性，则视频在就绪后马上播放。
Controls	Controls	如果出现该属性，则向用户显示控件比如播放按钮
Loop	Loop	如果出现该属性，则当媒介文件完成播放后再次开始播放
Preload	Preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放，如果使用“autoplay”则忽略该属性
Src	url	要播放的视频的url
Width	Pixels	设置视频播放器的宽度
Height	Pixels	设置视频播放器的高度

Html5audio（音频）

Web站点上的音频知道现在，仍然不存在一项旨在网页上播放音频的标准，今天，大多数音频是通过插件比如flash来播放的，然而，并非所有浏览器都拥有同样的插件。Html5规定了在网页上嵌入音频元素的便标准，即使用元素。
音频格式及浏览器支持
目前，元素支持三种音频格式文件：mp3，wav和ogg
例：

<audio controls>
		<source src=”horse.mp3” type=”audio/mpeg”>
		<source src=”horse.ogg” type=”video/ogg”>
		您的浏览器不支持audio标签
</audio>

Html5web存储

什么事html5web存储?使用html5可以在本地存储用户的浏览数据，早些时候，本地存储使用的是cookies。但是web存储需要更加的安全与快速。这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上，他也可以存储大量的数据，而不影响网站的性能。数据以键/值对存在，web网页的数据只允许该网页访问使用。
Localstorage和sessionstorage
Localstorage没有时间限制的数据存储
Sessionstorage针对一个session的数据存储

Html5 web SQL数据库

Web SQL数据库API并不是一个HTML5规范的一部分，但是他是一个独立的规范，引入了一组使用SQL操作客户端数据库的APIs。

Html5 websocket

是html5开始提供的一种在单个TCP链接上进行全双工通讯的协议。
在websocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
浏览器通过javascript向服务器发出建立websocket链接的请求，连接建立以后，客户端和服务器就可以通过TCP链接直接交换数据。

I1326

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5拾遗

HTML5拾遗HTML5什么是HTML5HTML5是如何起步的新增标签主体结构标签新增其他标签常用标签详解Section标签Article标签Nav标签Aside标签Header标签Footer标签Figure标签HTML5表单datalistkaygen[很少应用]outputinput类型form/input autocomplete属性input autofocus属性input form属性input formmethod属性input formtarget属性input list属性input p
复制链接

扫一扫

专栏目录