深入理解HTML5-创新互联

1.accesskey,tabindex

郓城ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！ <a href="http://www.google.com/" accesskey="g">Google</a>

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

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

    按tab键一次访问

2.title

 <p title="this is sheet">asdfasdf</p>

3.hidden

 <p title="this is sheet" hidden>asdfasdf</p>

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

    js:element.hidden = true;

4.dir

<p dir="rtl">Write this text right-to-left!</p>

    文档流从右向左排

5.manifest

  离线缓存！！

6.base

<base href="" /> <a href="b"></a>

  a指向http://a/b

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

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

7.table 语义标签

       <table>             <thead>                 <tr></tr>             </thead>             <tfoot>                 <tr></tr>             </tfoot>             <tbody>                 <tr></tr>             </tbody>        </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相同

           <h2>1111111111111</h2>          <section> <h2>222222222222222</h2> <h2>222222222222222</h2> <section> <h2>33333333333333</h2> </section> </section>

body

10.<hgroup>

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

<hgroup>     <h3>222</h3>     <h2>111</h2> </hgroup>

11.<a>

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

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

12.用于文本的语义标签

   <em>    <strong>    <i>    <b>    <small>    <s>    <mark>    <q>    <dfn>    <abbr>    <sub><sup>    <time>    <br><war>    <cite>    <ins><del>    <code><var>    <bdo>    <ruby>

13.<input>新type

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

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

  <input type='search' name='sdf' required/>

    form“嵌套”

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

    <form id='form1'>         。。。     </form>      <form id='form2'>          <input type='text' form='form1 form2'>         。。。     </form>

    placeholder(search,email,tel,url)

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

    只读

  readonly

    datalist

 <input type='search' list="aaa" name='sdf'/>  <datalist id="aaa">      <option value="度娘">      <option value="刘东">      <option value="刘冬">   </datalist>

    optgroup

<select>       <optgroup label="Swedish Cars">         <option value ="volvo">Volvo</option>         <option value ="saab">Saab</option>       </optgroup>     <optgroup label="German Cars">         <option value ="mercedes">Mercedes</option>         <option value ="audi">Audi</option>       </optgroup> </select>

    textarea

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

    进度条

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

    

   度量

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

 fieldset form中用

<form>   <fieldset>     <legend>健康信息</legend>     身高：<input type="text" />     体重：<input type="text" />   </fieldset> </form>

    label

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

<label for="test">标签</label> <input name="input" type="text" id="test" /> <label>标签 <input name="input" type="text" /></label>

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文题目：深入理解HTML5-创新互联
地址分享：https://www.cdcxhl.com/article32/dohcsc.html

成都网站建设公司_创新互联，为您提供服务器托管、网站策划、品牌网站设计、Google、响应式网站、网站设计

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联