前端编码风格规范之 HTML 规范_html/css_WEB-ITnose

<title>Test</title> <article>This is only a test. </article>

 <meta charset="utf-8"> <title>Test</title> <article>This is only a test.</article> 

  <link rel="stylesheet" href="main.css">   <!-- body goes here --> <script src="main.js" async></script>   

  <link rel="stylesheet" href="main.css"> <script src="main.js" async></script>   <!-- body goes here -->   

<b>My page title</b> <div class="top-navigation"> <div class="nav-item"><a href="#home">Home</a></div> <div class="nav-item"><a href="#news">News</a></div> <div class="nav-item"><a href="#about">About</a></div> </div> <div class="news-page"> <div class="page-section news"> <div class="title">All news articles</div> <div class="news-article"> <h2>Bad article</h2> <div class="intro">Introduction sub-title</div> <div class="content">This is a very bad example for HTML semantics</div> <div class="article-side-notes">I think I'm more on the side and should not receive the main credits</div> <div class="article-foot-notes"> This article was created by David <div class="time">2014-01-01 00:00</div> </div> </div> <div class="section-footer"> Related sections: Events, Public holidays </div> </div> </div> <div class="page-footer"> Copyright 2014 </div> 

<!-- The page header should go into a header element --> <header> <!-- As this title belongs to the page structure it's a heading and h1 should be used --> <h1>My page title</h1> </header> <!-- All navigation should go into a nav element --> <nav class="top-navigation"> <!-- A listing of elements should always go to UL (OL for ordered listings) --> <ul> <li class="nav-item"><a href="#home">Home</a></li> <li class="nav-item"><a href="#news">News</a></li> <li class="nav-item"><a href="#about">About</a></li> </ul> </nav> <!-- The main part of the page should go into a main element (also use role="main" for accessibility) --> <main class="news-page" role="main"> <!-- A section of a page should go into a section element. Divide a page into sections with semantic elements. --> <section class="page-section news"> <!-- A section header should go into a section element --> <header> <!-- As a page section belongs to the page structure heading elements should be used (in this case h2) --> <h2 class="title">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"> <!-- 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">Good article</div> <!-- Small can optionally be used to reduce importance --> <small class="intro">Introduction sub-title</small> </header> <!-- For the main content in a section or article there is no semantic element --> <div class="content"> <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"> <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"> <!-- 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">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"> <p>Related sections: Events, Public holidays</p> </footer> </section> </main> <!-- Your page footer should go into a global footer element --> <footer class="page-footer"> Copyright 2014 </footer> 

<img  src="luke-skywalker.jpg" alt="前端编码风格规范之 HTML 规范_html/css_WEB-ITnose" > 

<img src="luke-skywalker.jpg" alt="Luke skywalker riding an alien horse"> 

<img src="huge-spaceship-approaching-earth.jpg" alt="Header image"> 

<img src="huge-spaceship-approaching-earth.jpg" alt="A huge spaceship that is approaching the earth"> 

   <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="grid.css"> <link rel="stylesheet" href="type.css"> <link rel="stylesheet" href="modules/teaser.css">   <h1 style="font-size: 3rem"></h1> <b>I'm a subtitle and I'm bold!</b> <center>Dare you center me!</center> <script> alert('Just dont...'); </script> <div class="red">I'm important!</div>   

   <!-- Concatinate your style sheets into a single one --> <link rel="stylesheet" href="main.css">   <!-- Don't use style attributes but assign sensible classes and apply styles in the stylesheet --> <h1 class="title"></h1> <!-- Don't use presentational elements and assign sensible classes --> <div class="sub-title">I'm a subtitle and I'm bold!</div> <!-- Maybe your comments get centered in your presentation but that decision is up to the stylesheet --> <span class="comment">Dare you center me!</span> <!-- You wanted to make it red because it's important so then also name the class important and decide in the stylesheet  what you want to do with it --> <div class="important">I'm important!</div> <!-- Put all your scripts into files and concatinate them into a single one --> <script async src="main.js"></script>   

<!-- We should not introduce an additional element just to solve a design problem --> <span class="text-box"> <span class="square"></span> See the square next to me? </span> 

.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; } 

<!-- Content images should never be used for design elements! --> <span class="text-box"> <img src="square.svg" alt="Square"> See the square next to me? </span> 

/* 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%; } 

<link rel="stylesheet" href="main.css" type="text/css"> <script src="main.js" type="text/javascript"></script> 

<link rel="stylesheet" href="main.css"> <script src="main.js"></script> 

<div> <h1>Avatar</h1> <span>Director: James Cameron (born August 16, 1954)</span> <span>Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html">Trailer</a> </div> 

<div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <div itemprop="director" itemscope itemtype="http://schema.org/Person"> Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954)</span> </div> <span itemprop="genre">Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a> </div> 

<h3 id="best-practices">Best practices</h3> 

<blockquote> <p><em>Space</em>, the final frontier.</p> </blockquote> 

<p><strong>其他精彩文章</strong></p><h2>jQuery教程(19)-jquery ajax操作之序列化表单</h2><h2>jQuery教程(18)-ajax操作之执行POST请求</h2><h2>jQuery教程(20)-jquery ajax + php 操作之为Ajax请求提供不同...</h2><h2>jQuery教程(21)-jquery ajax 回调函数</h2>          <p class="sycode">              </p><h2>jQuery教程(22)-ajax操作之错误处理</h2>                    <p class="sycode">              </p><h2>jQuery教程(24)-ajax操作之Ajax和事件</h2>          <p></p><p>更多关于android开发文章</p>