note for HTML5权威指南

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>

时间: 2024-10-14 08:20:50

note for HTML5权威指南的相关文章

HTML5权威指南 中文版 高清PDF扫描版?

HTML5权威指南是一本系统学习网页设计的权威参考图书.<HTML5权威指南>分为五部分:第一部分介绍学习本书的预备知识和HTML.CSS和JavaScript的最新进展:第二部分讨论HTML元素,并详细说明了HTML5中新增和修改的元素:第三部分阐述CSS,涵盖了所有控制内容样式的CSS选择器和属性,并辅以大量代码示例和图示:第四部分介绍DOM,剖析如何用JavaScript操纵HTML内容:第五部分讲解Ajax.多媒体和canvas元素等HTML5高级特性. <HTML5权威指南&g

HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是cookie有下面几个问题: a:大小:cookies的大小被限制在4KB b:带宽:cookies随HTTP事务一起被发送,因此会浪费一部分发送的cookies时使用的带宽. c:复杂性:要正确的操纵cookies是很困难的. Web Storage分为两种: <1>sessionStorage 将数

HTML5权威指南读书笔记【第二部分】

1.超链接href支持格式:http https ftp mailto(mailto:[email protected]) 2.超链接#id 将指定id的元素移入视野中,如果没有则查找name匹配 3.b与strong的习惯形式都是加粗但是在html5中b没有表示重要的语义,strong有 4.wbr的使用在浏览器需要换行的时候给予拆分行位置的建议 5.code.var.samp(输出).kbd(用户输入)暴露了HTML的极客属性 6.<ruby>魑<rp>(</rp>

HTML5权威指南 15.获取地理位置信息

1 navigator.geolocation.getCurrentPosition(function(position){ 2 var coords=position.coords; 3 console.log(coords.latitude,coords.longitude,coords.accuracy); 4 }, 5 //捕捉错误信息 6 function(error){ 7 var errorType={ 8 1:'位置服务被拒绝', 9 2:"获取不到位置信息", 10

HTML5权威指南 13.扩展的XMLHttpRequest API

html5权威指南:嵌入另一张HTML文档、通过插件嵌入内容、嵌入数字表现形式

嵌入另一张HTML文档.通过插件嵌入内容.嵌入数字表现形式:http://www.cnblogs.com/yc-755909659/p/5928125.html

HTML5权威指南读书笔记【第一部分】

1.自定义属性:data- 2.accessKey 快捷选中(Win Alt + accessKey) 3.spellcheck拼写检查,编辑区域有问题词汇划线 4.tabindex tab键切换顺序 不想被选中-1 5.css样式层叠 (作者样式)style属性->style标签->link css->用户样式->浏览器样式 6.对于定义为重要的!important的属性,用户样式凌驾于作者样式 7.同级别按照样式的定义顺序后来者居上,而不是属性的指定顺序 8.与元素外观(文字.

html5权威指南:定制input元素

第十三章:定制Inpur元素,http://www.cnblogs.com/polk6/p/5417921.html#Menu3-New input标签最全面的type属性:http://blog.sina.com.cn/s/blog_161005e400102wa2n.html

HTML5权威指南读书笔记【第四部分】

1.compatMode怪异模式 CSS1Compat遵循 BackCompat已触发怪异模式 2.document.location.port 80不返回 3.通过设置document.location.hash实现跳转 4.replace assign document.location.replace会讲当前文档从历史中清除 5.document.readyState loading(浏览器正在加载) interactive(除图片等媒体文件已加载完成) complete(所有资源已加载完