Java Web_05从入门到精通

2019/7/23 15:01:22 人评论 次浏览 分类:学习教程

HTML5

1.HTML5历史
HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。
HTML5的设计目的是为了在移动设备上支持多媒体。
HTML5 简单易学。
HTML5 是下一代 HTML 标准。
HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。 xhtml+
HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。
HTML5 是 W3C 与 WHATWG 合作的结果,
WHATWG 指 Web Hypertext Application Technology Working Group。
W3C 指 World Wide Web Consortium,万维网联盟。
WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。

为 HTML5 建立的一些规则:
新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求(比如 Flash) flex
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明
HTML5 的改进
新元素(标签)
新属性
完全支持 CSS3
Video(视频) 和 Audio(音频)
2D/3D 制图

HTML5 的改进
新元素
新属性
完全支持 CSS3
Video 和 Audio
2D/3D 制图
本地存储
本地 SQL 数据
Web 应用
HTML5 多媒体
使用 HTML5 你可以简单的在网页中播放 视频(video)与音频 (audio) 。
HTML5
HTML5
HTML5 应用

HTML5 图形
使用 HTML5 你可以简单的绘制图形:
使用 元素。
使用内联 SVG。
使用 CSS3 2D 转换、CSS3 3D 转换。
HTML5 使用 CSS3
新选择器
新属性
动画
2D/3D 转换
圆角
阴影效果
可下载的字体
HTML5 表单(重点)
新表单元素, 新属性,新输入类型,自动验证。

 浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
一、HTML5的常用元素与属性
HTML5规范并不是一种革命式的发展,因为HTML5并未完全放弃前面HTML版本的规范,实际上,HTML5规范保持了对现有HTML规范的最大兼容,这样可保证互联网上现有网页的正常运行。
HTML5保留了原有HTML规范的绝大部分元素和属性,删除了少量元素和属性——主要删除了各种文档样式相关的元素和属性,比如,width属性等,HTML5规范推荐使用CSS样式来控制HTML文档样式。HTML5新增了contentEditable,designMode、hidden、spellcheck通用属性。
HTML5新增的拖放API则可以让HTML页面的任意元素都变成可拖动的,通过拖放,通过使用拖放机制可以开发更友好的人机交互界面。

1.1HTML5保留常用元素 (HTML 4的标签)
1.2HTML5 增强的iframe 元素
HTML不在推荐使用frameset ,HTML5保留了iframe元素,该元素可以在普通的HTML页面中使用,该元素在普通HTML页面中生成一个行内框架。
属性如下:
src:该属性指定该iframe装载那个页面
name:iframe的名字
longdesc:该属性也是指定一个页面的URL,该页面包含了关于该iframe的长描述
scrolling:设置是否在iframe中显式滚动条
height/width:高度和宽度

srcdoc属性:html5的新属性 规定在 中显示的页面的 HTML 内容。
seamless属性:规定 看上去像是包含文档的一部分。
sandbox:是一个安全性方面的属性,用于对框架中的网页增加一系列额外限制,该属性有如下属性值:
“”:限制全部
all-forms:允许框架内的表单进行提交
allow-same-origin:允许 iframe 内容被视为与包含文档有相同的来源。
对于不同源的网页(两个页面对应URL的域名或端口不同,即认为这个两个页面是不同的)该页面将被禁止使用AJAX与服务器交互
禁止加载来自服务器的内容,同时禁止该页面从cookie和webstorage中读取内容。(同源策略)尤其在做前后端项目分离 跨域
allow-top-navigation 允许 iframe 内容从包含文档导航(加载)内容。
allow-scripts 允许脚本执行。

<iframe src="left.html" name="myiframe" scrolling="no" frameborder="0"></iframe>
<a href="index.html" target="myiframe">我的连接</a>
<iframe src="top.html" name="myiframe" scrolling="yes" frameborder="0" width="500" height="500"  sandbox="allow-top-navigation">
</iframe>

1.3 HTML 5保留的通用属性
id,style,class 属性
id属性用于为HTML元素指定唯一标识,当程序使用JavaScript编程时即可通过该属性来获取该HTML元素
style用于为HTML元素指定CSS样式
class属性则用于匹配CSS样式的class选择器

<div style="width:200px;height:300px;background: red;"></div>
<div class="red"></div>
dir属性
dir 属性规定元素内容的文本方向。
ltr	默认。从左向右的文本方向。
rtl	从右向左的文本方向。
<p dir="rtl">Write this text right-to-left</p>
<p dir="ltr">Write this text right-to-left</p>

title属性
title属性用于为HTML元素指定额外信息。

<a href="" title="我的连接">链接</a>
	<table>
		<tr>
			<td title="我的单元格">单元格内容</td>
		</tr>
	</table>

lang属性
通过设置lang属性来告诉浏览器和搜索引擎:网页或网页中的元素的内容所使用的语言。该属性的属性值应该是符合标准的语言代码,比如zh代表中文、en代表英语、fr代表法语、ja代表日文等。

accesskey属性
当HTML页面中有多个元素时,可以通过accesskey属性指定激活该元素的快捷键。
用户名:
密码:
我的链接
注意:火狐不支持
tabindex属性
当用户浏览网页时,可通过按键盘上的Tab键不断切换窗口或页面中HTML元素来获得焦点,tabIndex属性用来控制窗口、HTML元素获取焦点的顺序。

<a href="" tabindex="2">第一</a>
  <a href="" tabindex="1">第二</a>
  <a href="" tabindex="3">第三</a>

HTML5新增属性
contentEditable属性
HTML5为大部分HTML元素增加了contentEditable属性,如果将该属性设置为true,浏览器就会允许修改HTML元素里的内容。

 <div contenteditable="true" style="width:500px;height:300px;border:1px solid black"></div>
<table  ondblclick="this.contentEditable=true" border="1" cellpadding="0" cellspacing="0">
   	<tr>
   		<td>疯狂java讲义</td>
   		<td>疯狂android讲义</td>
   	</tr>
   </table>
 <p contenteditable="true">这是一个P标签</p>

designMode属性
designMode属性相当于一个全局的contentEditable属性,如果把整个页面的designMode属性设为on,该页面上所有可支持contentEditable属性的元素都变成可编辑状态。默认是Off

hidden属性 HTML5为所有元素提供了一个hidden属性,这个属性支持true,false两个属性值,一旦把某个HTML元素的hidden设为true,就意味着通知浏览器不显示该组件,浏览器也不会保留组件所占用的空间。
 <div id="target" hidden="true" style="height:80px">文字内容</div>
   <button onclick="display();">显示/隐藏</button>
<script type="text/javascript">
  	  function display(){
  	  	var target = document.getElementById("target");
  	  	target.hidden = !target.hidden;  }
</script>

spellcheck属性
HTML5为等元素增加了spellcheck属性,该属性是一个支持boolean值的属性,如果设置了spellcheck属性,浏览器就会负责对用户输入的文本内容执行输入检查。

contextmenu 属性
contextmenu 属性为元素规定上下文菜单。这个菜单会在用户右键点击元素时出现。
contextmenu 属性的值是需要打开的

元素的 id。

HTML5新增的结构元素
article 与section元素
article 该元素用于代表页面上独立、完整的一篇 “文章”,该元素表示的内容可以是一个帖子,一篇blog文章,一篇短文、一条完整的回复。总之,只要是一个独立的文档内容,就应该使用

元素来表示。
article内部可以使用 header来定义文章 “标题”内容
使用footer来定义文章“脚注”部分
使用section来把文章分成几个段落
article内部可以有多个 article来作为它的附属文章
section用来对文章内容进行分块 section元素也通常由标题(h1~h6)和内容组成。
section侧重对文章分块。表达一个完整的内容时,应该使用
如果把一个内容分成几个部分用section
div元素是一个通用组件,而section元素则是一个负责分块的html组件。
使用article,section只是为了让爬虫,搜索引擎,浏览器等工具解析该文档结构。
https://gsnedders.html5.org/outliner/分析网页 可以看到网页清晰的文档结构。

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->