HTML5教程技巧Word文件下载.docx

HTML5教程技巧Word文件下载.docx

《HTML5教程技巧Word文件下载.docx》由会员分享，可在线阅读，更多相关《HTML5教程技巧Word文件下载.docx（11页珍藏版）》请在冰豆网上搜索。

考虑用下面的代码来标记图片？

mg 

src=”path/to/image” 

alt=”About 

image” 

/>

2.<

p>

Image 

of 

Mars. 

<

/p>

很不幸，它不能用简单、富有语义关联的方式与图形的标题关联，因为它仅仅是用段落标记以及图片元素包裹着，而HTML5通过引进<

figure>

元素，改进了这一点。

当结合<

figcaption>

元素使用时，我们就可以将图形标题与图形配对起来。

代码如下：

img 

3.<

4.<

This 

is 

an 

image 

something 

interesting. 

5.<

/figcaption>

6.<

/figure>

3.重新定义<

small>

原来你可以利用<

元素来创建与logo密切相关的副标题。

不过，现在HTML5修改了这个用法，<

元素被重新定义了，或者更恰当地说，它现在用来代表小字或其他边注（如，网站底部的版权声明）。

4.不再需要脚本、链接类型

很可能你仍然像下面的代码一样给你的链接和脚本标签添加类型的属性。

link 

rel=”stylesheet” 

href=”path/to/stylesheet.css” 

type=”text/css” 

script 

type=”text/javascript” 

src=”path/to/script.js”>

/script>

在HTML5中，这已经不再需要了。

意味着说这两个标签分别代表着样式和脚本。

因此，我们可以将它们的类型属性都删除掉。

5.使用还是不使用引号

记住，HTML5与XHTML不同，如果你不喜欢的话你不必用引号将属性包裹起来。

不过，要是你觉得用引号会让你觉得更加舒服的话，当然也不会有任何问题。

p 

class=myClass 

id=someId>

Start 

the 

reactor. 

6.使你的内容可编辑

HTML5其中一个非常强大的功能就是“contenteditable”，顾名思义它将允许用户编辑元素（包括他的子元素）内包含的任何文本内容。

它的用途非常广，如，简单的任务清单或是基于wiki的站点也非常实用，此外，它还有一个优势就是利用了本地的存储。

lang=”en”>

head>

meta 

charset=”utf-8″>

title>

untitled<

/title>

/head>

7.<

body>

8.<

h2>

To-Do 

List 

/h2>

9.<

ul 

contenteditable=”true”>

10.<

li>

Break 

mechanical 

cab 

driver. 

/li>

11.<

Drive 

to 

abandoned 

factory 

12.<

Watch 

video 

self 

13.<

/ul>

14.<

/body>

15.<

/html>

或者，按照第五条技巧所说的，你也可以将第九行的代码写成这样（不用引号）：

contenteditable=true>

7.电子邮件输入

如果我们应用“电子邮件”类型来指定输入的形式，我们可以命令浏览器只允许符合有效电子邮件地址结构的字符串输入。

虽然说内置的表单验证很快就会到来，但是我们也不能完全依靠这个。

比较旧的浏览器不理解这种“电子邮件”类型，它们只会简单地返回到普通的文本框。

form 

action=”"

method=”get”>

label 

for=”email”>

Email:

/label>

input 

id=”email” 

name=”email” 

type=”email” 

button 

type=”submit”>

Submit 

Form 

/button>

/form>

在说到浏览器所支持和不支持的元素以及属性时，你必需知道当前所有浏览器都不是那么可靠。

例如，Opera只有在你指定name属性时才支持电子邮件验证。

不过，它不支持占位符属性（下面即将要讲到的）。

最后，虽然你可以使用这种形式的验证，不过不要过分依赖它。

8.占位符

此前，我们需要使用JavaScript来创建文本框的占位符。

你可以初步设定值属性来看是否合适，但是只要用户删除了该文本，输入的内容就会再次变成空的。

占位符属性有效地弥补了这一点。

placeholder=”doug@” 

9.本地存储

多亏了HTML5的localstorage，我们可以让高级浏览器“记住”我们输入的内容，就算后来浏览器关闭或者重新刷新也不受影响。

尽管不是所有的浏览器都支持，但是最关键的InternetExplorer8,Safari4,Firefox3.5.都支持。

10.语义性的Header和Footer

div 

id=”header”>

2.… 

/div>

id=”footer”>

5.… 

上面的代码一去不复返。

Divs从根本上来说并没有任何语义结构，即使应用上了ID还是如此。

而在HTML5中，我们可以使用<

header>

和<

footer>

元素，上面的代码就可以替换为：

/header>

/footer>

不过注意不要将这两个元素与网站的头部和脚部混淆起来。

它们只是代表它们的容器。

11.IE和HTML5

IE理解新的HTML5元素需要费一定的神，为了确保新的HTML5元素能够以块级元素正确显示，有必要将它们用下面的代码定义风格：

1.header, 

footer, 

article, 

section, 

nav, 

menu, 

hgroup 

{ 

2.display:

block;

3.} 

就算如此，IE还是不知道这些元素究竟是什么，因而会无视这些格式，还需要用到下面的代码来解决这个问题：

1.document.createElement（“article”）;

2.document.createElement（“footer”）;

3.document.createElement（“header”）;

4.document.createElement（“hgroup”）;

5.document.createElement（“nav”）;

6.document.createElement（“menu”）;

12.群组标题（hgroup）

假设一个网站有名称、副标题分别用<

h1>

、<

标签来标记，在HTML4中还没有一种能够将两者之间的关系用很好的语义关系来描述的方法，此外，当使用h2在页面中显示其它标题时，在层级方面问题就更多。

而使用群组标题hgroup元素，我们可以将这些标题聚集在一起，而不影响文档的整个纲要。

hgroup>

Recall 

Fan 

Page 

/h1>

Only 

for 

people 

who 

want 

memory 

a 

lifetime. 

/hgroup>

13.必要（Required）属性

表单允许新的必要属性，规定是否某个特定的输入是必要的。

你可以依据自己写代码的偏好，用下面两种不同方式来声明这个属性：

type=”text” 

name=”someInput” 

required>

或者，更严谨：

required=”required”>

上面两行代码都行得通。

用了这行代码之后，并且浏览器支持required属性的话，输入空白的表单就不会被提交。

下面是一个简单的例子，同时我们也添加了占位符属性：

method=”post” 

>

for=”someInput”>

Your 

Name:

id=”someInput” 

placeholder=”Douglas 

Quaid” 

Go<

如果输入是空的，表单将无法提交，突出显示文本框。

14.自动对焦（Autofocus）属性

同样地，有了HTML5就不再需要用JavaScript方案来解决自动对焦的问题。

如果某个输入应该被”选择“或被聚焦，我们现在可以使用HTML的自动对焦autofocus属性。

required 

autofocus>

15.音频支持