新的文档类型声明(DTD)
文档类型声明
HTML 5的DTD声明为:
<!doctype html>
<!DOCTYPE html >等也是正确的,因为HTML语法是不区分大小写的。
在编写HTML5文档时,要求指定文档类型,以确保浏览器能在HTML5的标准模式下进行渲染。
新增的HTML5标签-结构标签
结构标签:(块状元素) 有意义的div
<article> 标记定义一篇文章
<header> 标记定义一个页面或一个区域的头部
<nav> 标记定义导航链接
<section> 标记定义一个区域
<aside> 标记定义页面内容部分的侧边栏
<hgroup> 标记定义文件中一个区块的相关信息
<figure> 标记定义一组媒体内容以及它们的标题
<figcaption> 标签定义 figure 元素的标题。
<footer> 标记定义一个页面或一个区域的底部
<dialog> 标记定义一个对话框(会话框)类似微信
新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好
新增的HTML5标签-多媒体标签
多媒体交互标签
<video> 标记定义一个视频
<audio> 标记定义音频内容
<source> 标记定义媒体资源
<canvas> 标记定义图片
<embed> 标记定义外部的可交互的内容或插件 比如flash
HTML5的多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件,极大地提升了用户体验
新增的HTML5标签-Web应用标签
Web应用标签
<menu>命令列表
<menuitem>menu命令列表标签 FF(嵌入系统)
<command> menu标记定义一个命令按钮
<meter>状态标签(实时状态显示:气压、气温)C、O
<progress>状态标签 (任务过程:安装、加载) C、F、O
<datalist> 为input标记定义一个下拉列表,配合option F、O
<details> 标记定义一个元素的详细内容 ,配合dt、dd C
新增的HTML5标签-其他标签
注释标签
<ruby> 标记定义 注释或音标
<rp> 告诉那些不支持 Ruby元素的浏览器如何去显示
<rt> 标记定义对ruby的注释内容文本
其他标签
<keygen> 标记定义表单里一个生成的键值(加密信息传送)O、F
<mark> 标记定义有标记的文本 (黄色选中状态)
<output> 标记定义一些输出类型,计算表单结果配合oninput事件
<time> 标记定义一个日期/时间 目前所有主流浏览器都不支持
删除的HTML标签
纯表现的元素:
basefont,big,center,font, s,strike,tt,u;
对可用性产生负面影响的元素:
frame,frameset,noframes;
产生混淆的元素:
acronym ,applet,isindex,dir。
重新定义的HTML标签
代码:
<!doctype html>
<html>
<head>
<style>
/*
*{border:1px solid red;height:20px}
所有的HTML5结构标签本质上来说就是一个div标签,只不过有意义
*/
/*页面头部 header*/
header{height:150px;background:#ABCDEF}
nav{height:30px;background:#ff9900;margin-top:100px}
nav ul li{width:100px;height:30px;float:left;line-height:30px}
/*页面中间 div */
div{margin-top:10px;height:1000px;}
section{height:1000px;background:#ABCDEF;width:70%;float:left}
article{background:#F90;width:500px;margin:0 auto;text-align:center}
aside{height:1000px;background:#ABCDEF;width:28%;float:right}
/*页面底部 footer*/
footer{height:100px;background:#ABCDEF;clear:both;margin-top:10px}
</style>
</head>
<body>
<header>
<p>这是一个header标签</p>
<nav>
<ul>
<li>首页</li>
<li>起夜</li>
<li>论坛</li>
<li>商城</li>
<li>社区</li>
</ul>
</nav>
</header>
<div>
<section>
<p>这是一个section标签</p>
<article>
<h2>春晓</h2>
<p>
春眠不觉晓,<br />
处处蚊子咬,<br />
打上敌敌畏,<br />
不至死多少。<br />
</p>
</article>
<hr />
<article>
<h2>上学歌</h2>
<p>
太阳当空照,<br />
花儿对我笑,<br />
小鸟说早早早,你为什么背上小书包?<br />
我要炸学校老师不知道,一拉线,赶快跑,<br />
轰的一声,学校炸没了。<br />
</p>
</article>
<hr />
<figure>
<figcaption>UFO</figcaption>
<p>不明飞行物 Unknown Flying Object</p>
</figure>
<figure>
<dt>DDS</dt>
<dd>大屌丝</dd>
</figure>
<hr />
<dialog>
<dt>唐僧:悟空,你又调皮了,观音姐姐的月光宝盒怎么能乱扔呢?</dt>
<dd>悟空:...(看着)</dd>
<dt>唐僧:乱扔是不对的,砸到小朋友怎么办?就算砸不到小朋友,砸到花花草草也是不好的嘛</dt>
<dd>悟空:...(纠结)</dd>
<dt>唐僧:悟空你想要么?想要你就告诉我呀,你不告诉我怎么知道你想要呢?。。。。</dt>
<dd>悟空:我靠!(一棍子抡上去!)</dd>
</dialog>
<hr />
<menu>
<li>点击</li>
<li>右键单击</li>
</menu>
<hr />
<span contextmenu="candan">右键单击我试试</span>
<menu type="context" id="candan">
<menuitem label="菜单一" onclick="alert('我是一个寂寞')" icon="http://www.baidu.com/img/baidu_sylogo1.gif"></menuitem>
</menu>
<hr />
<meter min="0" max="10" value="5" low="3" high="7" ></meter>
<progress max="100" value="0" id="pro"></progress>
<script>
var pro =document.getElementById('pro');
setInterval(function(){
pro.value+=1;
},100);
</script>
<hr />
<details>
<dt>这是一个问题?</dt>
<dd>to be or not to be</dd>
<dt>这是一个问题?</dt>
<dd>to be or not to be</dd>
<dt>这是一个问题?</dt>
<dd>to be or not to be</dd>
</details>
<hr />
<ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>
<hr />
女人<mark>最喜欢做的事情</mark>就是逛街。。。吃零食。。逛街。。吃零食,偶尔还会呜呜的哭,
于是总结了下女人:逛吃逛吃逛吃逛吃。。。呜呜呜~·
</section>
<aside>
<p>这是一个aside标签</p>
<hgroup>
<h3>女生宿舍为何频频被盗</h3>
<h3>两百头母猪为何半夜惨死</h3>
<h3>是人性的扭曲?</h3>
<h3>还是道德的沦丧!</h3>
</hgroup>
</aside>
</div>
<footer>
<p>这是一个footer标签</p>
<hr />
<small>法律条文</small>
<small>联系我们</small>
<small>客户意见</small>
<small>商户合作</small>
</footer>
</body>
</html>
相关推荐
html5+css+jquery通过鼠标拖拽来移动对象位置、改变大小、和旋转的实现 代码简洁、易懂、易改造
HTML 5 可以说是近十年来 Web 标准最巨大的飞跃。...尽管 HTML 5 的实现还有很长的路要走,但 HTML 5 正在改变 Web。为了方便大家学习HTML 5 ,本文与大家分享几份 HTML 5 标签、属性、事件及浏览器兼容性速查表。
js 特效 html 特效 改变链接属性 js 特效 html 特效 改变链接属性
不影响标签属性的简易正则替换html字符串中的文字(原理为使用正则取出html中><之间的内容 然后使用循环从其中匹配对应的内容进行替换)
HTML标签权重分值排列,页面容量的合理化,HTML标签权重分析,页面优化
想通过jquery改变该P标签的内容。 开始时使用val()属性,发现达不到目标。 val()可以用来改变类似于文本框的输入内容。 查了下,使用jQuery HTML 操作完成操作。 函数 描述 $(selector).html(content) 改变被选...
HTML5将重塑Web世界? 2010年上半年的一个焦点事件,引起了很多人的关注,其中有不少人因这一事件第一次了解到HTML5的存在。初次了解HTML5的人可能会非常惊讶,HTML5规范早在6年前就开始制定了,如今尽管HTML5规范...
body元素就是就是html文档的主内容标签。 可设置属性 onafterprint 在打印文档之后运行脚本 onbeforeprint 在文档打印之前运行脚本 onbeforeonload 在文档加载之前运行脚本 onblur 当窗口失去焦点时运行脚本 onerror...
function change(obj){ var arrayli = obj.parentNode.getElementsByTagName("li"); //获取li数组 for(i=0;i;i++) { arrayli[i].className=""; if(obj==arrayli[i]) { obj.className="test";...</script>
很漂亮的HTML5进度条,源代码简单,可以参考参考
首先介绍html常用标签,大部分标签可以运用时候通过CSS控制改变样式达到我们想要的布局效果。
使用html5的canvas标签+JQuery实现的贪吃蛇小游戏
但是这种状况将会随着 HTML5 的发展而改变。就视频而言,HTML5 新增了 video 来实现在线播放视频的功能。 使用 HTML5 的 video 可以很方便的使用 JavaScript 对视频内容进行控制等等,功能十分强大,同时代码比较少...
尽管 HTML 5 的实现还有很长的路要走,但 HTML 5 正在改变 Web。为了方便大家学习HTML 5 ,本文与大家分享几份 HTML 5 标签、属性、事件及浏览器兼容性速查表。 HTML 5 Cheat Sheet 非常完整的一份HTML 5速查表,...
JS鼠标滑过改变标签显示内容.zip
12.1 语法的改变 226 12.1.1 HTML 5的语法变化 226 12.1.2 HTML 5中的标记方法 226 12.1.3 HTML 5语法中的3个要点 227 12.1.4 标签实例 228 12.2 新增的元素和废除的元素 228 12.2.1 新增的结构元素 ...
html事件改变矩形大小 在 HTML 中可以通过 JavaScript 来改变矩形大小。可以在矩形的标签上绑定事件(如 onclick),在事件触发时调用 JavaScript 函数来改变矩形的大小。
主要介绍了transform实现HTML5 video标签视频比例拉伸的相关资料,需要的朋友可以参考下
2.HTML标签结构 1.文档结构: <!doctype html><!--!表示声明的意思。这一行代码意思:下面的文档标签将以html5进行解析--> <html> <!-头部.用来完成一个网页的相关设置-> <head> <meta...
前段页面的国际化,运用jquery-i18next js做国际化处理,i18n实现前端国际化...5、data-i18n-html属性类似于html()方法,可以识别语言文件中含有html标签的字符串; 6、通过存取cookie使得刷新页面不改变当前页面语言;