HTML 5--新增的其他属性

1.高亮显示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>介绍青花瓷</title>
</head>

<body>
<p>
    唐代的青花瓷器是处于青花瓷的<mark>滥觞期</mark>。
    
</p>
</body>
</html>

测试结果：

2.<ruby><rt><rt></ruby>

<ruby> 标签定义 ruby 注释（中文注音或字符）。

在东亚使用，显示的是东亚字符的发音。

将 <ruby> 标签与 <rt> 和 <rp> 标签一起使用：
<ruby> 元素由一个或多个需要解释/发音的字符和一个提供该信息的 <rt> 元素组成，还包括可选的 <rp> 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。

代码示例：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>介绍青花瓷</title>
 6 </head>
 7 
 8 <body>
 9 <ruby>中国<rt>zhongguo</rt></ruby>
10 
11 </body>
12 </html>

测试结果：

例二：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>介绍青花瓷</title>
 6 </head>
 7 
 8 <body>
 9 <ruby>中国<rt>zhongguo</rt></ruby>
10 
11 <hr>
12 <hr>
13 
14 <ruby>
15 字 <rp>(</rp><rt>zi</rt><rp>)</rp>
16 </ruby>
17 
18 </body>
19 </html>

测试结果：

3.新增全局属性--可编辑属性

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>介绍青花瓷</title>
 6 </head>
 7 
 8 <body>
 9 <h1>111111111111111111</h1>
10 <hr>
11 <h2 contenteditable="true">222222222222222222</h2>
12 </body>
13 </html>

测试结果：

其中”111111111111111111111111“不可编辑，”222222222222222222222222222“可编辑。但是这样的编辑后的页面不可保存。

示例二：

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>介绍青花瓷</title>
</head>

<body>
<h1>111111111111111111</h1>
<hr>
<h2 contenteditable="true">222222222222222222</h2>
<ol contenteditable="true">
    <li>1.标题一</li>
    <li>2.标题二</li>
    <li>3.标题三</li>
</ol>
</body>
</html>

测试结果：

spellcheck  是否允许进行拼写检查

代码如下：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>介绍青花瓷</title>
 6 </head>
 7 
 8 <body>
 9 <p>下面是允许检查的input</p>
10 <input type="text" spellcheck="true">
11 </body>
12 </html>

测试结果：

示例二：
代码如下：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>介绍青花瓷</title>
 6 </head>
 7 
 8 <body>
 9 <p>下面是允许检查的input</p>
10 <input type="text" spellcheck="true">
11 <hr>
12 <textarea rows="10" cols="30" spellcheck="true">这是一个允许拼写检查的文本框</textarea>
13 <hr>
14 <p contenteditable="true" spellcheck="true">这是一个允许编辑并且允许拼写检查的元素</p>
15 </body>
16 </html>

测试结果：

5.光标焦点的位置：

autofocus

代码如下：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>介绍青花瓷</title>
 6 </head>
 7 
 8 <body>
 9     <form action="images.asp"  method="get"><br>
10     用户名：<input type="text" name="xm" autofocus="autofocus" /><br>
11     性别：<input type="text" name="xb" /><br>
12     <input type="submit" />
13         
14     </form>
15 </body>
16 </html>

测试结果：

光标焦点在用户名位置。

示例二：

将焦点放在递交按钮上：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>介绍青花瓷</title>
 6 </head>
 7 
 8 <body>
 9     <form action="images.asp"  method="get"><br>
10     用户名：<input type="text" name="xm" /><br>
11     性别：<input type="text" name="xb" /><br>
12     <input type="submit" autofocus="autofocus"  />
13         
14     </form>
15 </body>
16 </html>

测试结果：