推荐

  
  
My page title


<nav class="top-navigation">
  

    

    

    

  


<main class="news-page" role="main">
  
<section class="page-section news">
    
<header>
  <!-- As a page section belongs to the page structure heading elements should be used (in this case h2) -->
  <h2 class="title"&gt;All news articles</h2>
</header>

<!-- If a section / module can be seen as an article (news article,blog entry,products teaser,any other
 re-usable module / section that can occur multiple times on a page) a article element should be used -->
<article class="news-article"&gt;
  <!-- An article can contain a header that contains the summary / introduction information of the article -->
  <header>
    <!-- As a article title does not belong to the overall page structure there should not be any heading tag! -->
    <div class="article-title"&gt;Good article</div>
    <!-- Small can optionally be used to reduce importance -->
    <small class="intro"&gt;Introduction sub-title</small>
  </header>

  <!-- For the main content in a section or article there is no semantic element -->
  <div class="content"&gt;
    <p>This is a good example for HTML semantics</p>
  </div>
  <!-- For content that is represented as side note or less important information in a given context use aside -->
  <aside class="article-side-notes"&gt;
    <p>I think I'm more on the side and should not receive the main credits</p>
  </aside>
  <!-- Articles can also contain footers. If you have footnotes for an article place them into a footer element -->
  <footer class="article-foot-notes"&gt;
    <!-- The time element can be used to annotate a timestamp. Use the datetime attribute to specify ISO time
     while the actual text in the time element can also be more human readable / relative -->
    <p>This article was created by David <time datetime="2014-01-01 00:00" class="time"&gt;1 month ago</time></p>
  </footer>
</article>

<!-- In a section,footnotes or similar information can also go into a footer element -->
<footer class="section-footer"&gt;
  <p>Related sections: Events,Public holidays</p>
</footer>



<footer class="page-footer">

Copyright 2014

多媒体回溯

对页面上的媒体而言，像图片、视频、canvas 动画等，要确保其有可替代的接入接口。图片文件我们可采用有意义的备选文本（alt），视频和音频文件我们可以为其加上说明文字或字幕。

提供可替代内容对可用性来说十分重要。试想，一位盲人用户如何能知晓一张图片是什么，要是没有 @alt 的话。

（图片的 alt 属性是可不填写内容的，纯装饰性的图片就可用这么做：alt=""）。

不推荐

  

  

  I'm a subtitle and I'm bold!
  Dare you center me!
  
  

  
  

  
  

  
  

  
  
  
  

  
<script async src="main.js">

    See the square next to me?

.text-box > .square {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-color: red;
}

/ We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content /

.text-box:before {

content: "";

display: inline-block;

width: 1rem;

height: 1rem;

background-color: red;

}

  See the square next to me?

/ We use a :before pseudo element with a background image to solve the problem /

.text-box:before {

content: "";

display: inline-block;

width: 1rem;

height: 1rem;

background: url(square.svg) no-repeat;

background-size: 100%;

}