码迷,mamicode.com
首页 > Web开发 > 详细

[HTML5] Level up -- Display

时间:2016-03-06 19:13:02      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:

HTML5 Input type:

技术分享

 

Traditionally presentational tags, the i, b, em, and strong tags have been given new semantic meanings:

    • The i tag represents text in an "alternate voice" or "mood";
    • The b tag represents "stylistically offset" text
<p><i>I hope this works</i>, he thought.</p> alternate vocie or mood
<p><b class="lead">The event take place this upcomming Saturday, and over 3,000 people have already registered.</b></p> stylistically offest
    • The em tag now means "Stress emphasis"
    • The strong tag now means "strong importance"
<p>Make sure to sign up <em>before</em> the day of the event, Septmber 16, 2013</p>
<p>Make sure to sign up <em>before</em> the day of the event, <strong>Septmber 16, 2013</strong></p>

 

main, article, header tag:

<main class="main">
  <article class="post">
    <header>
      <h2><a href="/blog/opening-date-announced">Opening Date Announced</a></h2>
      <p><em>Published on</em>: September 16, 2013</p>
    </header>

    <p><b class="article-lead">The Art Gallery will be opening to an <em>invitation-only</em> group of art enthusiasts across the country on <strong>December 1, 2013</strong>.</b></p>
    <p>The opening of the Art Gallery will coincide with the release of several of Armando Blontio‘s finest art pieces, including, "Crème de la Crème," which has a mounting anticipation for its debut.</p>
    <p>As a frequently misrespresented artist, Armando Blontio has struggled to uphold his image amidst the criticism. "I hope to dispel the illusion of my self-centeredness, as seen by my critics, with the Art Gallery opening," said Mr. Blontio.</p>
  </article>
</main>

 

figure and figcaption

<figure>
  <img src="armando-blontio.jpg" alt="A Famous Armando Blontio Painting" width="640" height="470" />
  <figcaption class="caption">"Crème de la Crème," a famous Armando Blontio painting.</figcaption>
</figure>

 

Time and datetime:

<header>
  <h2><a href="/blog/opening-date-announced">Opening Date Announced</a></h2>
  <p><em>Published on</em>: <time datetime="2013-09-16">September 16, 2013</time></p>
</header>

 

List, datalist:

<input type="text" list="categories"/>
<!-- Add your datalist here -->
<datalist id="categories">
    <option value="reviews">
    <option value="profiles">
    <option value="announcements">
</datalist>

 

placeholder and autofocus:

<input type="search" placeholder="Search..." autofocus/>

 

required:

<input type="email" placeholder="Enter your email..." required/>

 

partten and tel input

<input type="tel" pattern="[0-9]{10}"/>

 

[HTML5] Level up -- Display

标签:

原文地址:http://www.cnblogs.com/Answer1215/p/3893533.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!