angular-cn/aio/content/marketing/features.html

<header class="marketing-banner">
  <h1 class="banner-headline no-toc no-anchor">Features & Benefits</h1>
</header>

<article class="l-content ">
  <div class="flex-center">
    <div>
      <div class="feature-section">
        <div class="feature-header">
          <div class="text-headline">Cross Platform</div>
          <img src="../assets/images/icons/feature-icon.svg" height="70px">
        </div>
        <div class="feature-row">

          <div class="feature">
            <div class="feature-title">Progressive Web Apps</div>
            <p class="text-body">Use modern web platform capabilities to deliver app-like experiences.
              High performance, offline, and zero-step installation.</p>
          </div>

          <div class="feature">
            <div class="feature-title">Native</div>
            <p class="text-body">Build native mobile apps with strategies from Ionic Framework, NativeScript, and React Native.</p>
          </div>

          <div class="feature">
            <div class="feature-title">Desktop</div>
            <p class="text-body">Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you've learned for the web plus the ability to access native OS APIs.</p>
          </div>
        </div>
      </div>

      <div class="feature-section">
        <div class="feature-header">
          <div class="text-headline">Speed and Performance</div>
          <img src="../assets/images/icons/feature-icon.svg" height="70px">
        </div>
        <div class="feature-row">

          <div class="feature">
            <div class="feature-title">Code Generation</div>
            <p class="text-body">Angular turns your templates into code that's highly optimized for today's JavaScript virtual machines, giving you all the benefits of hand-written code with the productivity of a framework.</p>
          </div>

          <div class="feature">
            <div class="feature-title">Universal</div>
            <p class="text-body">Serve the first view of your application on node.js, .NET, PHP, and other servers for near-instant rendering in just HTML and CSS. Also paves the way for sites that optimize for SEO.</p>
          </div>

          <div class="feature">
            <div class="feature-title">Code Splitting</div>
            <p class="text-body">Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.</p>
          </div>
        </div>
      </div>

      <div class="feature-section">
        <div class="feature-header">
          <div class="text-headline">Productivity</div>
          <img src="../assets/images/icons/feature-icon.svg" height="70px">
        </div>
        <div class="feature-row">

          <div class="feature">
            <div class="feature-title">Templates</div>
            <p class="text-body">Quickly create UI views with simple and powerful template syntax.</p>
          </div>

          <div class="feature">
            <div class="feature-title">Angular CLI</div>
            <p class="text-body">Command line tools: start building fast, add components and tests, then instantly deploy.</p>
          </div>

          <div class="feature">
            <div class="feature-title">IDEs</div>
            <p class="text-body">Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.</p>
          </div>
        </div>
      </div>

      <div class="feature-section">
        <div class="feature-header">
          <div class="text-headline">Full Development Story</div>
          <img src="../assets/images/icons/feature-icon.svg" height="70px">
        </div>
        <div class="feature-row">

          <div class="feature">
            <div class="feature-title">Testing</div>
            <p class="text-body">With Karma for unit tests, you can know if you've broken things every time you save. And Protractor makes your scenario tests run faster and in a stable manner.</p>
          </div>

          <div class="feature">
            <div class="feature-title">Animation</div>
            <p class="text-body">Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.</p>
          </div>

          <div class="feature">
            <div class="feature-title">Accessibility</div>
            <p class="text-body">Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="cta-bar announcement-bar">
    <button class="button">
      <a href="guide/quickstart">Get Started</a>
    </button>
  </div>

</article>