HTML5初识
2015-12-24 10:10
627 查看
近一个月时间需要用HTML5开发两个手机端功能。
对于html5还是比较陌生的,html5能做什么,开发工具是什么,如果打包编译发布?一系列问题还等着去熟悉了解。
通过学习了解到:支持浏览器有IE9+,chrome,firefox等。因此很多基于html5以上的浏览器都需要这些浏览器才能支持。
移动设备开发HTML5只有两种方法:1是全部使用HTML5,另一种仅依靠JS引擎。
2)、有几个新的标签,这将有助于开发人员定义重要的内容;
3)、可以给站点带来更多的多媒体元素(视频和音频);
4)、可以很好的替代FLASH和Silverlight;
5)、当涉及到网站的抓取和索引的时候,对于SEO很友好;
6)、将被大量应用于移动应用程序和游戏;
7)、可移植性好。
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
5、按字母顺序排列的标签列表
6、事件属性:
HTML 5 元素可拥有事件属性,这些属性在浏览器中触发行为,比如当用户单击一个HTML 5元素时启动一段 JavaScript。下面列出的事件属性,可以把它们插入 HTML 标签来定义事件行为。
对于html5还是比较陌生的,html5能做什么,开发工具是什么,如果打包编译发布?一系列问题还等着去熟悉了解。
通过学习了解到:支持浏览器有IE9+,chrome,firefox等。因此很多基于html5以上的浏览器都需要这些浏览器才能支持。
移动设备开发HTML5只有两种方法:1是全部使用HTML5,另一种仅依靠JS引擎。
1、HTML5的设计目的:
为了在移动设备上支持多媒体。2、优点:
1)、提高可用性和改进用户的友好体验;2)、有几个新的标签,这将有助于开发人员定义重要的内容;
3)、可以给站点带来更多的多媒体元素(视频和音频);
4)、可以很好的替代FLASH和Silverlight;
5)、当涉及到网站的抓取和索引的时候,对于SEO很友好;
6)、将被大量应用于移动应用程序和游戏;
7)、可移植性好。
3、缺点:
该标准并未能很好的被浏览器所支持。因新标签的引入,各浏览器之间将缺少一种统一的数据描述格式,造成用户体验不佳。4、特殊标签:
canvas
标签 | 描述 |
---|---|
<canvas> | 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API |
多媒体
标签 | 描述 |
---|---|
<audio> | 定义音频内容 |
<video> | 定义视频(video 或者 movie) |
<source> | 定义多媒体资源 <video> 和 <audio> |
<embed> | 定义嵌入的内容,比如插件。 |
<track> | 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。 |
表单
标签 | 描述 |
---|---|
<datalist> | 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。 |
<keygen> | 规定用于表单的密钥对生成器字段。 |
<output> | 定义不同类型的输出,比如脚本的输出。 |
语义和结构
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> | 规定在文本中的何处适合添加换行符。 |
已移除元素
以下的 HTML 4.01 元素在HTML5中已经被删除:<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
5、按字母顺序排列的标签列表
标签 | 描述 | ||
---|---|---|---|
<!--...--> | 定义注释 | 4 | 5 |
<!DOCTYPE> | 定义文档类型 | 4 | 5 |
<a> | 定义超链接 | 4 | 5 |
<abbr> | 定义缩写 | 4 | 5 |
<acronym> | HTML 5 中不支持 | 4 | |
<address> | 定义地址元素 | 4 | 5 |
<applet> | 定义 applet(HTML 5 中不支持) | 4 | |
<area> | 定义图像映射中的区域 | 4 | 5 |
<article> | 定义 article | 5 | |
<aside> | 定义页面内容之外的内容 | 5 | |
<audio> | 定义声音内容 | 5 | |
<b> | 定义粗体文本 | 4 | 5 |
<base> | 定义页面中所有链接的基准URL | 4 | 5 |
<basefont> | HTML 5 中不支持,请使用CSS 代替 | 4 | |
<bdo> | 定义文本显示的方向 | 4 | 5 |
<big> | 定义大号文本(HTML 5 中不支持) | 4 | |
<blockquote> | 定义长的引用 | 4 | 5 |
<body> | 定义 body 元素 | 4 | 5 |
<br> | 插入换行符 | 4 | 5 |
<button> | 定义按钮 | 4 | 5 |
<canvas> | 定义图形 | 5 | |
<caption> | 定义表格标题 | 4 | 5 |
<center> | 定义居中的文本(HTML 5 中不支持) | 4 | |
<cite> | 定义引用 | 4 | 5 |
<code> | 定义计算机代码文本 | 4 | 5 |
<col> | 定义表格列的属性 | 4 | 5 |
<colgroup> | 定义表格列的分组 | 4 | 5 |
<command> | 定义命令按钮 | 5 | |
<datalist> | 定义下拉列表 | 5 | |
<dd> | 定义定义的描述 | 4 | 5 |
<del> | 定义删除文本 | 4 | 5 |
<details> | 定义元素的细节 | 5 | |
<dfn> | 定义定义项目 | 4 | 5 |
<dir> | 定义目录列表(HTML 5 中不支持) | 4 | |
<div> | 定义文档中的一个部分 | 4 | 5 |
<dl> | 定义定义列表 | 4 | 5 |
<dt> | 定义定义的项目 | 4 | 5 |
<em> | 定义强调文本 | 4 | 5 |
<embed> | 定义外部交互内容或插件 | 5 | |
<fieldset> | 定义 fieldset | 4 | 5 |
<figcaption> | 定义 figure 元素的标题 | 5 | |
<figure> | 定义媒介内容的分组,以及它们的标题 | 5 | |
<font> | HTML 5 中不支持 | 4 | |
<footer> | 定义 section 或 page 的页脚 | 5 | |
<form> | 定义表单 | 4 | 5 |
<frame> | 定义子窗口(框架)(HTML 5 中不支持) | 4 | |
<frameset> | 定义框架的集(HTML 5 中不支持) | 4 | |
<h1> to <h6> | 定义标题1 到标题6 | 4 | 5 |
<head> | 定义关于文档的信息 | 4 | 5 |
<header> | 定义 section 或 page 的页眉 | 5 | |
<hgroup> | 定义有关文档中的 section 的信息 | 4 | 5 |
<html> | 定义 html 文档 | 4 | 5 |
<i> | 定义斜体文本 | 4 | 5 |
<iframe> | 定义行内的子窗口(框架) | 4 | 5 |
<img> | 定义图像 | 4 | 5 |
<input> | 定义输入域 | 4 | 5 |
<ins> | 定义插入文本 | 4 | 5 |
<keygen> | 定义生成密钥 | 5 | |
<isindex> | 定义单行的输入域(HTML 5 中不支持) | 4 | |
<kbd> | 定义键盘文本 | 4 | 5 |
<label> | 定义表单控件的标注 | 4 | 5 |
<legend> | 定义 fieldset 中的标题 | 4 | 5 |
<li> | 定义列表的项目 | 4 | 5 |
<link> | 定义资源引用 | 4 | 5 |
<map> | 定义图像映射 | 4 | 5 |
<mark> | 定义有记号的文本 | 4 | 5 |
<menu> | 定义菜单列表 | 4 | 5 |
<meta> | 定义元信息 | 4 | 5 |
<meter> | 定义预定义范围内的度量 | 5 | |
<nav> | 定义导航链接 | 5 | |
<noframes> | 定义 noframe 部分(HTML 5 中不支持) | 4 | |
<noscript> | 定义 noscript 部分 | 4 | 5 |
<object> | 定义嵌入对象 | 4 | 5 |
<ol> | 定义有序列表 | 4 | 5 |
<optgroup> | 定义选项组 | 4 | 5 |
<option> | 定义下拉列表中的选项 | 4 | 5 |
<output> | 定义输出的一些类型 | 5 | |
<p> | 定义段落 | 4 | 5 |
<param> | 为对象定义参数 | 4 | 5 |
<pre> | 定义预格式化文本 | 4 | 5 |
<progress> | 定义任何类型的任务的进度 | 5 | |
<q> | 定义短的引用 | 4 | 5 |
<rp> | 定义若浏览器不支持 ruby 元素显示的内容 | 5 | |
<rt> | 定义 ruby 注释的解释 | 5 | |
<ruby> | 定义 ruby 注释 | 5 | |
<s> | 定义加删除线的文本(HTML 5 中不支持) | 4 | |
<samp> | 定义样本计算机代码 | 4 | 5 |
<script> | 定义脚本 | 4 | 5 |
<section> | 定义 section | 4 | 5 |
<select> | 定义可选列表 | 4 | 5 |
<small> | 定义小号文本 | 4 | 5 |
<source> | 定义媒介源 | 4 | 5 |
<span> | 定义文档中的 section | 4 | 5 |
<strike> | 定义加删除线的文本(HTML 5 中不支持) | 4 | |
<strong> | 定义强调文本 | 4 | 5 |
<style> | 定义样式定义 | 4 | 5 |
<sub> | 定义下标文本 | 4 | 5 |
<summary> | 定义 details 元素的标题 | 5 | |
<sup> | 定义上标文本 | 4 | 5 |
标签 | 描述 | 4: 指在HTML 4.01 中定义了该元素 5: 指在HTML 5 中定义了该元素 | |
---|---|---|---|
<table> | 定义表格 | 4 | 5 |
<tbody> | 定义表格的主体 | 4 | 5 |
<td> | 定义表格单元 | 4 | 5 |
<textarea> | 定义 textarea | 4 | 5 |
<tfoot> | 定义表格的脚注 | 4 | 5 |
<th> | 定义表头 | 4 | 5 |
<thead> | 定义表头 | 4 | 5 |
<time> | 定义日期/时间 | 5 | |
<title> | 定义文档的标题 | 4 | 5 |
<tr> | 定义表格行 | 4 | 5 |
<tt> | 定义打字机文本 | 4 | 5 |
<u> | 定义下划线文本(HTML 5 中不支持) | 4 | |
<ul> | 定义无序列表 | 4 | 5 |
<var> | 定义变量 | 4 | 5 |
<video> | 定义视频 | 5 | |
<xmp> | 定义预格式文本(HTML 5 中不支持) | 4 |
6、事件属性:
HTML 5 元素可拥有事件属性,这些属性在浏览器中触发行为,比如当用户单击一个HTML 5元素时启动一段 JavaScript。下面列出的事件属性,可以把它们插入 HTML 标签来定义事件行为。属性 | 值 | 描述 | 4 | 5 |
---|---|---|---|---|
onabort | script | 发生 abort 事件时运行脚本。 | 5 | |
onbeforeonload | script | 在元素加载前运行脚本。 | 5 | |
onblur | script | 当元素失去焦点时运行脚本。 | 4 | 5 |
onchange | script | 当元素改变时运行脚本。 | 4 | 5 |
onclick | script | 在鼠标点击时运行脚本。 | 4 | 5 |
oncontextmenu | script | 当菜单被触发时运行脚本。 | 5 | |
ondblclick | script | 当鼠标双击时运行脚本。 | 4 | 5 |
ondrag | script | 只要脚本在被拖动就运行脚本。 | 5 | |
ondragend | script | 在拖动操作结束时运行脚本。 | 5 | |
ondragenter | script | 当元素被拖动到一个合法的放置目标时,执行脚本。 | 5 | |
ondragleave | script | 当元素离开合法的放置目标时。 | 5 | |
ondragover | script | 只要元素正在合法的放置目标上拖动时,就执行脚本。 | 5 | |
ondragstart | script | 在拖动操作开始时执行脚本。 | 5 | |
ondrop | script | 当元素正在被拖动时执行脚本。 | 5 | |
onerror | script | 当元素加载的过程中出现错误时执行脚本。 | 5 | |
onfocus | script | 当元素获得焦点时执行脚本。 | 4 | 5 |
onkeydown | script | 当按钮按下时执行脚本。 | 4 | 5 |
onkeypress | script | 当按键被按下时执行脚本。 | 4 | 5 |
onkeyup | script | 当按钮松开时执行脚本。 | 4 | 5 |
onload | script | 当文档加载时执行脚本。 | 4 | 5 |
onmessage | script | 当 message 事件触发时执行脚本。 | 5 | |
onmousedown | script | 当鼠标按钮按下时执行脚本。 | 4 | 5 |
onmousemove | script | 当鼠标指针移动时执行脚本。 | 4 | 5 |
onmouseover | script | 当鼠标指针移动到一个元素上时执行脚本。 | 4 | 5 |
onmouseout | script | 当鼠标指针移出元素时执行脚本。 | 4 | 5 |
onmouseup | script | 当鼠标按钮松开时执行脚本。 | 4 | 5 |
onmousewheel | script | 当鼠标滚轮滚动时执行脚本。 | 5 | |
onreset | script | 当表单重置时执行脚本。不支持。 | 4 | |
onresize | script | 当元素调整大小时运行脚本。 | 5 | |
onscroll | script | 当元素滚动条被滚动时执行脚本。 | 5 | |
onselect | script | 当元素被选中时执行脚本。 | 4 | 5 |
onsubmit | script | 当表单提交时运行脚本。 | 4 | 5 |
onunload | script | 当文档卸载时运行脚本。 | 5 |
7、标签属性
html5标签拥有属性。在每个标签的参考页中可以找到相应的特殊属性。这里列出的属性是通用于每个标签的核心属性和语言属性(有个别例外)属性 | 值 | 描述 | 4 | 5 |
---|---|---|---|---|
acceskey | a character | 设置访问一个元素的键盘快捷键。不支持。 | 4 | |
class | class_ruleorstyle_rule | 元素的类名。 | 4 | 5 |
contenteditable | true false | 设置是否允许用户编辑元素。 | 5 | |
contentextmenu | id of a menu element | 给元素设置一个上下文菜单。 | 5 | |
dir | ltr rtl | 设置文本方向。 | 4 | 5 |
draggable | true false auto | 设置是否允许用户拖动元素。 | 5 | |
id | id_name | 元素的唯一 id。 | 4 | 5 |
irrelevant | true false | 设置元素是否相关。不显示非相关的元素。 | 5 | |
lang | language_code | 设置语言码。 | 4 | 5 |
ref | urlorelementID | 引用另一个文档或文档上另一个位置。仅在 template 属性设置时使用。 | 5 | |
registrationmark | registration mark | 为元素设置拍照。可规定于任何 <rule> 元素的后代元素, 除了 <nest> 元素。 | 5 | |
style | style_definition | 行内的样式定义。 | 4 | 5 |
tabindex | number | 设置元素的 tab 顺序。 | 4 | 5 |
template | urlorelementID | 引用应该应用到该元素的另一个文档或本文档上另一个位置。 | 5 | |
title | tooltip_text | 显示在工具提示中的文本。 | 4 | 5 |
相关文章推荐
- HTML5之离线应用缓存
- HTML5-12月23日笔记
- HTML5音频audio播放与暂停
- 如何去设计一个自适应的网页设计或HTMl5
- html5中拨打电话代码
- 微场景H5(物理设备和渲染像素)
- XHTML5 与 HTML 4.01的差异
- HTML5本地存储 -sessionStorage localStorage 总结
- h5案例分享:绿源电动车-与美国队长之间的约定
- html5学习_MySecondPage_文本排版
- html5代码,获取地理位置
- html5中localStorage存储
- html5学习_MyFirstWebPage_语法的概念与框架
- HTML5入门十一---Canvas画布实现画图(二)
- HTML5入门十---Canvas画布实现画图(一)
- 今天一天解决了一个 ph56w-opcache问题 (yum 命令方式)
- HTML5产品360度旋转展示特效
- 关于HTML5标签不兼容(IE6~8)
- 使用余弦定理制作磁盘形状h5音乐播放器
- Input标签新增的属性&Range调背景色