深入理解HTML5

2025-03-01 技术教程

1.accesskey,tabindex

<ahref="http://www.google.com/"accesskey="g">Google</a>

请使用 Alt +accessKey来访问带有快捷键的元素。

<ahref="http://www.w3school.com.cn/"tabindex="2">W3School</a><br/><ahref="http://www.google.com/"tabindex="1">Google</a><br/><ahref="http://www.microsoft.com/"tabindex="3">Microsoft</a>

按tab键一次访问

2.title

<ptitle="thisissheet">asdfasdf</p>

3.hidden

<ptitle="thisissheet"hidden>asdfasdf</p>

等同于 display:none,省去CSS遍历页面

js:element.hidden = true;

4.dir

<pdir="rtl">Writethistextright-to-left!</p>

文档流从右向左排

5.manifest

离线缓存！！

6.base

<basehref=""/><ahref="b"></a>

a指向http://a/b

7.<script>元素async,defer异步加载

async-HTML属性如我前面提到的，添加async属性非常简单：[html]viewplaincopy<scriptasyncsrc="siteScript.js"onload="myInit()"></script>事实上，如果你的JavaScript以及HTML结构设计的合理，那么90%的情况下你的Script元素可以使用异步加载。defer-HTML属性Safari浏览器额外添加了defer属性[html]viewplaincopy<scriptdefersrc="siteScript.js"onload="myInit()"></script>async与defer的差别WebKit官方博客很好地解释了async与defer的不同------------------------------------正常情况下，当浏览器在解析HTML源文件时如果遇到外部的script，那么解析过程会暂停，并发送请求来下载script文件，只有script完全下载并执行后才会继续执行DOM解析。比如：<scriptsrc="myBlockingScript.js"></script>在下载过程中浏览器是被阻止做其他有用的工作的，包括解析HTML，执行其他脚本，以及展示CSS布局。虽然Webkit预加载扫描程序可以探测性地在下载阶段进行多线程下载，但是某些页面仍然存在很大的网络延迟。当前有很多技术来提升页面显示速度,但都需要额外的代码以及针对特定浏览器的技巧。现在，script可以通过添加async或者defer属性来让脚本不必同步执行，示例如下：[html]viewplaincopy<scriptasyncsrc="myAsyncScript.js"onload="myInit()"></script><scriptdefersrc="myDeferScript.js"onload="myInit()"></script>async和defer标注的script都不会暂停HTML解析就立刻被下载,两者都支持onload事件回调来解决需要该脚本来执行的初始化。两者的区别在于执行时的不同：async脚本在script文件下载完成后会立即执行,并且其执行时间一定在window的load事件触发之前。这意味着多个async脚本很可能不会按其在页面中的出现次序顺序执行。与此相对，浏览器确保多个defer脚本按其在HTML页面中的出现顺序依次执行,且执行时机为DOM解析完成后，document的DOMContentLoaded事件触发之前。

7.table 语义标签

8.<details>,<summary>

<details><summary>sssssss1</summary><p>sdfdsdfsdfsdfsdfsf</p></details>

9.html5区块

html5的分区法则！！

讲网页内容拆解成嵌套的区块(section)，每个区块有一个标题，就像目录一样

根区块是body，第一个标题被当做body的标题

每个区块的第一个标题为该区块的标题

若果只有标题出现，那么区块会被隐含的创建。为了兼容以前的(div+h2-6)方式

三个h2,那么三个并列的区块

1个h2,2个h3,一个h2区块，该区块有2个并列的h3区块

标题：h2,hgroup

区块元素：section,article,aside,nav

迟早不再使用<div>+<h2-h7>表示层次了！！！！！！！！！！

手机百度,手机网易，手机优酷还是用<div>+<p>

html5中使用区块的概念，各个区块嵌套产生层次。

chrome,firefox中h2大小不同，但是safari,opera，IE相同

body

10.<hgroup>

hgroup中可以有多个标题，但是只创建一个区块,以最大标题为准，而不是第一个标题，所以标题位置可以换了。

11.<a>

a标签中可以加入更多内容了

<ahref='http://www.baidu.com'><section><h2>daohang</h2></section></a>

12.用于文本的语义标签

13.<input>新type

<inputtype='color'name='sdf'/><inputtype='date'name=''/><inputtype='time'name='sdf'/><inputtype='date-time'name='sdf'/><inputtype='month'name='sdf'/><inputtype='number'name='sdf'/><inputtype='range'name='sdf'/><inputtype='search'name='sdf'/>

浏览器校验：输入字段必填 required

<inputtype='search'name='sdf'required/>

form“嵌套”

form1表单和form2表单被提交时，该input都会被提交，即他属于form1又属于form2

<formid='form1'>。。。</form><formid='form2'><inputtype='text'form='form1form2'>。。。</form>

placeholder(search,email,tel,url)

文本框为空时，显示placehoder的值

只读

readonly

datalist

<inputtype='search'list="aaa"name='sdf'/><datalistid="aaa"><optionvalue="度娘"><optionvalue="刘东"><optionvalue="刘冬"></datalist>

optgroup

<select><optgrouplabel="SwedishCars"><optionvalue="volvo">Volvo</option><optionvalue="saab">Saab</option></optgroup><optgrouplabel="GermanCars"><optionvalue="mercedes">Mercedes</option><optionvalue="audi">Audi</option></optgroup></select>

textarea

<textarearows="3"cols="30">这里是文本域中的文本............</textarea>

进度条

<progressmax='3'value='1'>aaa</progress>

度量

<metermin='0'low='20'high='80'optimum='90'max='100'value='10'></meter>\<metermin='0'low='20'high='80'optimum='90'max='100'value='100'></meter>

fieldset form中用

label

一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域，例如，单纯的单选框点击区域就鼻屎那么大的地方，经常会点不到位置。因此，label标签的使用对于提高页面的可用性可访问性是很有帮助的。

<labelfor="test">标签</label><inputname="input"type="text"id="test"/><label>标签<inputname="input"type="text"/></label>