分享10段实用的HTML5代码（二）

最新推荐文章于 2022-07-01 14:50:59 发布

疯狂紫萧

最新推荐文章于 2022-07-01 14:50:59 发布

阅读量685

点赞数

分类专栏： HTml&Css关

HTml&Css关专栏收录该内容

41 篇文章 0 订阅

订阅专栏

6.HTML5页面结构

 
<!DOCTYPE HTML>
 
<html>
 
<head>
 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
        <title>Your Website</title>
 
</head>
 
<body>
 
        <header>
 
                <nav>
 
                        <ul>
 
                                <li>Your menu</li>
 
                        </ul>
 
                </nav>
 
        </header>
 
        <section>
 
                <article>
 
                        <header>
 
                                <h2>Article title</h2>
 
                                <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
 
                        </header>
 
                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
 
                </article>
 
                <article>
 
                        <header>
 
                                <h2>Article title</h2>
 
                                <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
 
                        </header>
 
                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
 
                </article>
 
        </section>
 
        <aside>
 
                <h2>About section</h2>
 
                <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 
        </aside>
 
        <footer>
 
                <p>Copyright 2009 Your name</p>
 
        </footer>
 
</body>
 
</html>

　　7.上下文菜单

 
<section contextmenu="mymenu">
 
<p>Yes, this section right here</p>
 
</section>
 
<menu type="context" id="mymenu">
 
  <menuitem label="Please do not steal our images" icon="img/forbidden.png"></menuitem>
 
  <menu label="Social Networks">
 
  <menuitem label="Share on Facebook" onclick="window.location.href = 'http://facebook.com/sharer/sharer.php?u=' + window.location.href;">   </menuitem>
 
  </menu>
 
</menu>

　　8.HTML5 Datalist

 
<input name="frameworks" list="frameworks" />
 
<datalist id="frameworks">
 
    <option value="MooTools">
 
    <option value="Moobile">
 
    <option value="Dojo Toolkit">
 
    <option value="jQuery">
 
    <option value="YUI">
 
</datalist>

　　9.从谷歌地图上获取路线

 
<form action="http://maps.google.com/maps" method="get" target="_blank">
 
   <label for="saddr">Enter your location</label>
 
   <input type="text" name="saddr" />
 
   <input type="hidden" name="daddr" value="350 5th Ave New York, NY 10018 (Empire State Building)" />
 
   <input type="submit" value="Get directions" />
 
</form>

　　10.HTML5电子邮件正则表达式验证

 
    1 <input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />

疯狂紫萧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录