accesskey 属性 （快捷键）
Name : <input type="text" name="name" accesskey="n" />
在windows系统上同时按下Alt键和accesskey属性值对应的键，键盘焦点会转移到Name对应的input元素。
contenteditable 属性 （编辑修改）
<p contenteditable="true" > I miss you . </p>
把contenteditable属性用在一个p元素身上，该属性值设置为true时，用户可以编辑元素的内容，设置为false时则禁止编辑。
dir属性:文字的方向；ltr（从左到右），rtl（从右到左）
<p dir="rtl" > This is right-to-left </p>
<p dir="ltr" > This is left-to-right </p>
<a id="w3clink" href="http://w3c.org" > W3C Web Site </a>
Id属性还可以用来导航到文档值的特定位置。倘若有个名为example.html的文档中包含一个id属性值为myelement的元素，那么使用example.html#myelement这个URL即可直接导航至该元素。
spellcheck属性（拼写检查）
<textarea spellcheck="true" > This is some misspelled text. </textarea>
Spellcheck属性可以接受的值有两个：true(启用拼写检查)和false(禁用拼写检查)，目前大多数流行浏览器中的拼写检查会忽略lang属性，它们的拼写检查基于用户所用操作系统中的语言设置或浏览器的语言设置。
tabindex属性 （可改变Tab键的转移顺序）
<label> Name: <input type="text" name="name" tabindex="1" /></label>
<label> City: <input type="text" name="city" tabindex="-1" /></label>
<label> Country: <input type="text" name="country" tabindex="2" /></label>
Tabindex值为1的元素会第一个被选中。用户按一下Tab键后，tabindex值为2的那个元素会被选中，依次类推。Tabindex设置为-1的元素不会在用户按下Tab键后被选中。
null 和 undefined 值的相等和等同比较
var firstVal = null;
var secondVal;
var equality = firstVal == secondVal ; → true
var indentify = firstVal === secondVal ; → false
base元素可用来设置一个基准URL，让HTML文档中的相对链接在此基础上进行解析。
<head>
<title> Example </title>
<base href="http://titan/listings/" />
</head>
<body>
<a href="page2.html" > Page 2 </a>
</body>
用户点击这个超链接时，浏览器就会把基准URL和相对URL拼接成完整的URL：http://titian/listings/page2,html
如果不用base元素，或不用其href属性设置一个基准URL，那么浏览器会将当前文档的URL认定为所有相对URL的解析基准。例如，假设浏览器从http://myserver.com/app/mypage.html这个URL载入了一个文档，该文档中有一个超链接使用了myotherpage.html这个相对URL，那么点击这个超链接时浏览器将尝试从http://myserver.com/app/myotherpage.html这个绝对URL加载第二个文档。
<style media="screen AND (max-width:500px)" type="text/css">
a{ color:blue; }
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a{ color:red; }
</style>
添加网站标志
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
如果网站标志文件位于/favicon.ico（即Web服务器的根目录），那就不必用到link元素。大多数浏览器在载入页面时都会自动请求这个文件，就算没有link元素也是如此。
使用带defer属性的script元素
<head>
<script defer src="simple.js" > </script>
</head>
浏览器在遇到带有defer属性的script元素时，会将脚本的加载和执行推迟到HTML文档中所有元素都已得到解析之后。所得结果与将script元素移到页面末尾那个办法的结果相同。
defer属性只能用于外部脚本文件，它对文档内嵌脚本不起作用。
noscript元素，可以用来向禁用了JavaScript或浏览器不支持JavaScript的用户显示一些内容。
<head>
<noscript>
<h1> JavaScript is required! </h1>
<p> You cannot use this page without JavaScript. </p>
</noscript>
</head>
注意：此例中页面其余部分的处理一切正常，内容元素依然会显示出来。
<p> You can see other fruits I like <a href="#fruits">here</a>
<p id="fruits">
I also like bananas, mangoes,cherries,apricots,plums,peaches and grapes.
</p>
用户点击这个链接时，浏览器将会在文档中查找一个id属性值为fruits的元素。如果该元素不在视野之中，那么浏览器会将文档滚动到能看见它的位置。如果浏览器找不到具有指定id属性值的元素，那么它会再进行一次查找，试图找到一个name属性值与其匹配的元素。
abbr元素表示缩写，其title属性元素表示的是该缩写代表的完整词语。
The <abbr title="Florida Department of Citrus"> FDOC </abbr> regulates the Florida citrus industry.
使用ruby, rt和rp元素，支持注音符号
<ruby>魑Â?<rp>(</rp><rt>chi</rt><rp>)</rp></ruby>
<ruby>魅¨¨<rp>(</rp><rt>mei</rt><rp>)</rp></ruby>
bdo元素加上dir属性（rtl, ltr）指定其内容中文字的方向。
<p>
This is left-to-right: <bdo dir="ltr"> I like oranges</bdo>
</p>
<p>
This is right-to-left: <bdo dir="rtl"> I like oranges</bdo>
</p>
details元素在文档中生成一个区域，用户可以展开它以了解关于某主题的更多详情。
details元素通常包含一个summary元素，后者的作用是为该详情区域生成一个说明标签或标题。details元素折拢时，只有其summary元素的内容可见。要让页面一显示details元素就呈展开状态，需要使用它的open属性。
<article>
<header>
<hgroup>
<h1>Activities I like</h1>
<h2>It hurts, but I keep doing it.</h2>
</hgroup>
</header>
<section>
<p>I like to swim, cycle and run.</p>
<details>
<summary>Kinds of Triathlon</summary>
There are different kinds triathlon - sprint, Olympic and so on.
<ol>
<li>1.5km swim</li>
<li>40km cycle</li>
<li>10km run</li>
</ol>
</details>
</section>
</article>
fieldset元素对表单元素编组
legend元素为fieldset元素提供相关说明，legend元素必须是fieldset元素的第一个子元素
<form method="post" action="http://titan:8080/form">
<fieldset>
<legend>Enter Your Details</legend>
<p><label for="name">Name: <input id="name" name="name" /></label></p>
<p><label for="city">City: <input id="city" name="city" /></label></p>
</fieldset>
<fieldset>
<legend>Vote Your Three Favorite Fruits</legend>
<p><label for="fave1">fave1: <input id="fave1" name="fave1" /></label></p>
<p><label for="fave2">fave2: <input id="fave2" name="fave2" /></label></p>
<p><label for="fave3">fave3: <input id="fave3" name="fave2" /></label></p>
</fieldset>
</form>
datalist元素
可以将input元素的list属性设置为一个datalist元素的id属性值，这样用户在文本框中输入数据时只需从后一元素提供的一批选项中进行选择就行了。
<p>
<label for="fave">
Fruits:<input list="fruitlist" id="fave" name="fave" />
</label>
</p>
<datalist id="fruitlist">
<option value="Apples" label="Lovely Apples" />
<option value="Oranges">Refreshing Oranges</option>
<option value="Cherries" />
</datalist>
<p>
<label for="color">
colors:<input id="color" type="color" />
</label>
</p>
<p>
<label for="search">
colors:<input id="search" type="search" name="search" />
</label>
</p>
<input type="image" name="submit" src="newsImages/0.png" />
点击图像按钮会导致浏览器提交表单。在发送的数据中包括来自那个image型input元素的两个数据项，它们分别代表用户点击位置相对于图像左上角的x坐标和y坐标。
<p>
<label for="faves" style=" vertical-align:top;">
Favorite Fruit:
<select id="faves" name="faves">
<optgroup label="Top Choices">
<option value="apples" label="Apples">Apples</option>
<option value="oranges" label="Oranges">Oranges</option>
</optgroup>
<optgroup label="Others">
<option value="cherries" label="Cherries">Cherries</option>
<option value="pears" label="Pears">Pears</option>
</optgroup>
</select>
</label>
</p>
iframe元素
<header>
<h3>Things I like </h3>
<nav>
<ul>
<li>
<a href="fruits.html" target="frame">Fruits I like</a>
</li>
<li>
<a href="activities.html" target="frame">Activities I like</a>
</li>
</ul>
</nav>
</header>
<iframe name="myframe" width="300" height="100"></iframe>
在这个例子里，创建了一个name属性为myframe的iframe。这样就创建了一个名为myframe的浏览上下文，与其他元素的target属性结合使用。用a元素创建了一对超链接，它们会把href属性中指定的URL载入iframe。
HTML5引入了两个新的iframe元素属性。第一个是seamless，它指示浏览器把iframe的内容显示得像主HTML文档的一个整体组成部分。从图中可以看出，默认情况下会有一个边框，如果内容比width和height属性所指定的尺寸要大，还会出现一个滚动条。
第二个属性是sandbox，它对HTML文档进行限制。应用这个属性时如果不附带任何值，如：
<iframe sandbox name="myframe" width="300" height="100"></iframe>
以下元素就会被禁用：脚本，表单，插件，指向其他浏览上下文的链接
另外，iframe的内容被视为与HTML文档的其余部分来源不同，这样会引发额外的安全措施。可以通过定义sandbox属性的值来独立启用各种功能，如下：
<iframe sandbox="allow-forms" name="myframe" width="300" height="100"></iframe>
<head>
<title>Example</title>
<style type="text/css">
a:before
{
content:"Click here to"
}
a:after
{
content:"!"
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
clear：阻止浮动元素堆叠
<head>
<title>Example</title>
<style type="text/css">
p.toggle
{
float:left;
border:medium double black;
width:35%;
margin:2px;
padding:2px;
}
p.cleared
{
clear:left;
}
</style>
</head>
<body>
<p class="toggle">JavaScript is required!You cannot use this page without JavaScript.</p>
<p class="toggle cleared">You can see other fruits I like here.I also like bananas, mangoes,cherries,apricots,plums,peaches and grapes.</p>
</body>
如果设置了多个浮动元素，默认情况下，它们会一个挨着一个地堆叠在一起。使用clear属性可以阻止出现这种情况。clear属性可以指定浮动元素的一个边界或者两个边界不能挨着另一个浮动元素。
上例中，为第二个p元素清除了左边界的浮动元素，即第二个p元素的左边界不允许挨着另一个浮动元素，因此浏览器将这个元素移到了页面下方。
创建反向过渡：
过渡只有在应用与其关联的样式时才会生效。示例中使用了:hover选择器，这意味着只有用户将鼠标悬停在span元素上才会应用样式。用户一旦将鼠标从span元素上移开，只剩下#banana样式，默认情况下，元素的外观会立刻回到初始状态。
因为这个原因，大多数过渡成对出现：暂时状态的过渡和方向相反的反向过渡。
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
p
{
border:medium double black;
padding:5px;
background-color:lightgray;
font-family:Sans-Serif;
}
#banana
{
font-size:large;
border:medium solid black;
-webkit-transition-delay:10ms;
-webkit-transition-duration:250ms;
}
#banana:hover
{
font-size:x-large;
border:medium solid white;
background-color:green;
color:White;
padding:4px;
-webkit-transition-delay:100ms;
-webkit-transition-duration:500ms;
-webkit-transition-property:background-color,color,padding,font-size,border;
-webkit-transition-timing-funcion:linear;
}
</style>
</head>
<body>
<p>You can see other fruits I like here.
I also like <span id="banana">bananas</span>, mangoes,cherries,
apricots,plums,peaches and grapes.</p>
</body>
扫一扫
1092
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
