choose standard html elements for structure of css

个人觉得一个高质量网页的前提是由符合web标准的HTML元素构成，再是CSS的使用。如果应该使用P的而去使用div,span，那些这种结构很明显是混乱的。每一个HTML元素都有

 

 

Heading

 

h1

---

the <h1> tag is the most important introduction to a page’s content. 并且每一个页面只能有一个标题。

 

H2

---

several sections,just use h2 to explain【每一个部分的标题】

 

 

H3

---

每一个部分区域的子标题

 

 

 

 

 

Block Elements

 

p

---

<p> tag for paragraphs of text(just for paragraph or  show block element)

 

 

blockquote --- Quotations(用户评论，引用名人名言)

---

“Misquotations are the only quotations that are never misquoted.”
—Hesketh Pearson

standard HTML:

  1: <blockquote>
  2: <p>Misquotations are the only quotations that are never misquoted.</p>
  3: <p>&mdash; Hesketh Pearson </p>
  4: </blockquote>

 

 

 

UL

---

Use numbered lists to indicate steps in a process or define the order of a set of items. 比如说: 菜单导航等

 

 

 

DL,DT

---

主要应用于还有标题的项目编号(dt来作为标题).

 

 

 

code

---

<code> for computer code

 

 

address

---

the <address> tag to identify and supply contact information for the author of a page.

  1: <address>
  2: Written by W3Schools.com<br />
  3: <a href="mailto:us@example.org">Email us</a><br />
  4: Address: Box 564, Disneyland<br />
  5: Phone: +12 34 56 78
  6: </address>

 

 

 

 

 

 

Inline Elements

span

---

words or phrases that appear inside of a larger paragraph or heading. Treat it just like other inline HTML tags such as the <a> tag. –--->it should emphasize.

用途： 它的父元素基本上是块记元素【p,div, a display: block】

 

  1: <div id="footer">
  2: <p>Copyright 2006, <span class="bizName">CosmoFarmer.com</span></p>
  3: <p>Call customer service at 555-555-5501 for more information</p>
  4: </div>

 

 

abbr

---

<abbr> for abbreviations

 

 

cite

---

for referencing a book title

 

 

 

 

 

FORM

---

form表单元素的构成最好是以HTML5的形式出现，虽然IE8以下的版本不支持，但是它仍然会将不能识别的元素视为一个文本框

1. 一个表单集合，最好使用dl或者是p的形式来进行组织
2. 使用label标签以及相应的属性来表示文本
3. 使用fieldset标签来进行表单的说明

HTML5 form

  1: <form action="formdemo.php" method="post"> 
  2:     <label for="name">Name:</label> 
  3:     <input type="text" name="name" required placeholder="Name" />
  4:     
  5:     <label for="email">Email:</label> 
  6:     <input type="email" name="email" required placeholder="email@example.com" />
  7: 
  8:     <label for="website">Website:</label> 
  9:     <input type="url" name="website" required placeholder="http://www.example.com" />
 10: 
 11:     <label for="number">Number:</label> 
 12:     <input type="number" name="number" min="0" max="10" step="2" required placeholder="Even num < 10" 10">
 13: 
 14:     <label for="range">Range:</label> 
 15:     <input type="range" name="range" min="0" max="10" step="2" />
 16: 
 17:     <label for="message">Message:</label> 
 18:     <textarea name="message" required></textarea>
 19:   
 20:     <input type="submit" value="Send Message" />
 21: </form>

 

 

 

HTML元素的细节以及注意点

 

<strong> and <em> better than <b> and <i>

---

   strong 标签来替换 b标, em   来替换 i标签.   原因：1.expression is precise. 2.it’s good for SEO.

 

Don’t abuse the <br> tag.

---

Browsers automatically—and sometimes infuriatingly—insert a bit of space between paragraphs, including between headers and <p> tags.

 

Don’t overuse <div> tags.

---

 

 

Remember to close tags.

---

 

A,img 等行内元素，请添加上title 属性,特别是a 标签