HTML5
中的一些有趣的新特性
HTML5
中的一些有趣的新特性
HTML 5改进点有以下几个方面:
1、增强HTML表单功能、引入更多灵活的段落标签、新功能标签。
2、用户交互性增强,如details、datagrid、menu、command等属性,相关:网页编程中如何动态的添加删除表格行
3、引入<canvas>标签,并支持直接用脚本绘图。
4、沙盒机制,隔离潜在的威胁。可有效防止访问父页面DOM、读写Cookie、本地存储数据库等。
5、内建3D技术支持,无需插件即可将网页3D化,还规定了一套适合网页使用的3D图形接口界面,支持脚本化运行。
6、引入更多创建Web应用的API,如文件拖放、视频播放、音频播放、离线Web应用等。
HTML5
中的一些有趣的新特性
HTML5
中的一些有趣的新特性
HTML 5改进点有以下几个方面:
1、增强HTML表单功能、引入更多灵活的段落标签、新功能标签。
2、用户交互性增强,如details、datagrid、menu、command等属性,相关:网页编程中如何动态的添加删除表格行
3、引入<canvas>标签,并支持直接用脚本绘图。
4、沙盒机制,隔离潜在的威胁。可有效防止访问父页面DOM、读写Cookie、本地存储数据库等。
5、内建3D技术支持,无需插件即可将网页3D化,还规定了一套适合网页使用的3D图形接口界面,支持脚本化运行。
6、引入更多创建Web应用的API,如文件拖放、视频播放、音频播放、离线Web应用等。
1. HTML <meta> 元素
典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。<meta> 标签始终位于 head 元素中。
<meta name="description"content="Free Web tutorials on HTML, CSS, XML" />
2. label中的文字右对齐
<label style="text-align:right; width:50px;display:block; ">haha</label>
要有display:block;要不然效果展示不出来
3. <span> 标签被用来组合文档中的行内元素。
<p>Category<span style="color:red;font-family:verdana;font-size:200%">*</span></p>
4. html锚点,用来链接文档中的某一块,直接跳到改点,就不用翻来翻去了。网页案例:返回顶部
首先,我们在 HTML 文档中对锚进行命名(创建一个书签):
<a name="tips">基本的注意事项 - 有用的提示</a>
然后,我们在同一个文档中创建指向该锚的链接:
<a href="#tips">有用的提示</a>
您也可以在其他页面中创建指向该锚的链接:
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
5. 框架结构标签(<frameset>)
<frameset cols="25%,75%">
<framesrc="frame_a.htm">
<framesrc="frame_b.htm">
</frameset>
重要提示:不能将<body></body> 标签与<frameset></frameset> 标签同时使用!不过,假如你添加包含一段文本的 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内。
6. 速查手册
1. HTML Basic Document
<html>
<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</html>
2. Text Elements
<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>
3. Logical Styles
<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>
4. Physical Styles
<b>This text is bold</b>
<i>This text is italic</i>
5. Links, Anchors, and Image Elements
<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL"
alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>
6. Unordered list
<ul>
<li>First item</li>
<li>Next item</li>
</ul>
7. Ordered list
<ol>
<li>First item</li>
<li>Next item</li>
</ol>
8. Definition list
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
9. Tables
<table border="1">
<tr>
<th>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>
10. Frames
<frameset cols="25%,75%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
11. Forms
<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname"
value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="60"
cols="20"></textarea>
</form>
12. Entities
< is the same as <
> is the same as >
© is the same as ©
13. Other Elements
<!-- This is a comment -->
<blockquote>
Text quoted from some source.
</blockquote>
<address>
Address 1<br>
Address 2<br>
City<br>
</address>
<script> 定义客户端脚本。
<noscript>为不支持客户端脚本的浏览器定义替代内容。