HTML5学习笔记

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

&lt; is the same as <
&gt; is the same as >
&#169; 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>为不支持客户端脚本的浏览器定义替代内容。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值