HTML基础-Know-it-all

HTML_Know-it-all

Elements

Document metadata

1. <base>

specifies the base URL/target for all relative URLs in a document.

<base href="link....." target="_blank">

• href: URL
• target: _blank _parent _self _top

2. <link>

defines a link between a document and an external resource (stlye sheet).

<link rel="stylesheet" type="text/css" href="?.css">

• rel: relationship between the current document and the linked document.
• type: media type of the linked document.
• href: URL

3. <meta>

meta data about the HTML document. It will not be displayed on the page, but can be used by browsers, search engines etc..

<meta charset="UTF-8">
<meta name="description" content="*">
<meta name="keywords" content="*">
<meta name="author" content="*">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="30">

• viewport: gives the browsers instructions on how to control the page’s dimensions and scaling.
• http-equiv: provides an HTTP header for the infomation/value of the content attribute.

4. <style>

contain css script in it.

5. <title>

title of the document.

Content sectioning

1. <address>

defines the contact info.

<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

2. <article>

specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it dependently from the rest of the site.

<article>
  <h1>Google Chrome</h1>
  <p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
</article>

3. <footer>

defines a footer for a document or section. There can be several footer elements in one document.

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>

4. <header>

同上

5. <nav>

a set of navigation links.

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

Text content

1. <dl> <dd> <dt>

defines a description list.

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

2. <figure> <figurecaption>

The figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
Its position is indenpendent of the main flow.

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>xxxxxx</figcaption>
</figure>

3. <hr>

a thematic break in an HTML page.

4. <ol> <ul> <li>

list elements

<ol start="50" type="1" reversed="reversed">
  <li value="0"></li>
  <li></li>
  <li></li>
</ol>
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

• type: 1 A a i I

5. <pre>

defines preformatted text, preserves both spaces and line breaks.

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks
</pre>

6. <p>

Inline text semantics

1. <a>

<a href="www.google.com">visit google</a>

• download
• rel
• target

2. <abbr>

defines an abbreviation.

<abbr title="as soon as possible">ASAP</abbr>

3. <b>

bold text

4. <bdi>

isolates a part of text that might be formatted in a different direction from other text outside it (different languages).

<ul>
  <li>User <bdi>hrefs</bdi>: 60 points</li>
  <li>User <bdi>jdoe</bdi>: 80 points</li>
  <li>User <bdi>إيان</bdi>: 90 points</li>
</ul>

5. <bdo>

override the current text direction

<bdo dir="rtl">
This text will go right-to-left.
</bdo>

• dir: ltr rtl

6. phrase tag

1. <cite>
   define the title of a work (e.g. a book, a song, a movie etc.).
2. <code>
3. <abbr>
4. <dfn>
   represents the defining instance of a term in HTML
5. <em>
6. <kbd>
7. <samp>
   sample output from a computer program
8. <strong>
9. <var>

7. <i>

display text in italic

8. <mark>

highlight text

9. <q>

defines a short quotation. Browser normally insert quotation marks around the quotation.

10. <s> <del>

The <s> tag specifies text that is no longer correct, accurate or relevant. The <s> tag should not be used to define replaced or deleted text, use the <del> tag to define replaced or deleted text.

11. <small>

small text

12. <span>

used to group inline-elements in a document, provides no visual change by itself, a way yo add a hook to a part of a text or document.

13. <sub> <sup>

subscript and superscript

14. <time>

defines a human-readable date/time

<p>We open at <time>10:00</time> every morning.</p>

<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>

15. <u>

add underline to text.

16. <wbr>

Word Break Opportunity tag specifies where in a text it would be ok to add a link-break. Give the browser instructions how to bread the text.

Image and multimedia

1. <img> <map> <area>

add clickable areas to a img.

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

2. <audio>

define sounds

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

• autoplay: autoplay
• controls: controls
• loop: loop
• muted: muted
• preload: auto metadata none
• src: URL

3. <video>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

• poster: URL
• width: pixels
• height: pixels

Embedded content

Scripting

1. <noscript>

defines an alternate content for users that have disabled scripts in their browser or have a browser that doesnt support script.

2. <script>

define a client-side script

<script type="text/javascript" scr="URL"></script>

• async: async specifies that the script is executed asynchronously
• src: URL
• type: text/javascript

Table content

<table>
  <caption>My First Table</caption>
  <colgroup>
    <col span="1" style="background-color:red">
    <col span="2" style="background-color:yellow">
  </colgroup>
  <thead>
    <tr>
      <th>ISBN</th>
      <th>Title</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3476896</td>
      <td>My first HTML</td>
      <td>$53</td>
  </tr>
    <tr>
      <td>5869207</td>
      <td>My first CSS</td>
      <td>$49</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Sum</td>
      <td>$102</td>
    </tr>
  </tfoot>
</table>

• colspan
• rowspan

Form

1. <form>

<form action="/action_page.php" method="get">
  <label for="fname">First Name</label>
  <input type="text" id="fname"><br>
  <label for="lname">Last Name</label>
  <input type="text" id="lname"><br>
  <input type="submit" value="Submit">
</form>

• action: URL where to send the form-data when a form is submitted
• autocomplete: on off
• enctype: specifies how the form-data should be encoded when submitting it to the server
• method: get post the HTTP method(GET is best suited for short, non-sensitive, amounts of data, cuz it has size limitations.)
• name: the name of the form
• target:

method
- submit( )
- reset( )
- checkValidity( )
- reportValidity( )
- requestAutocomplete( )

2. <label>

defines a label for an <input> element.
- for: element_id specifies which form element a label is bound to

3. <input>

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

• type: button text radio(radios in the same set should have the same name attribute) submit etc.
• value: specifies the value of the element
• name: only form elements with a name attribute will have their values passed when submitting a form

4. <button>

inside a <button> element you can put content, like text or image. This is the difference between this element and buttons created with the <input> element. In a HTML form, use <input> to create button.
When using <button>, always specify the type attribute.
- type: button reset submit
- value:
- disabled: disabled

5. <select> <option> <optgroup>

create a drop-down list

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

6. <textarea>

defines a multi-line text input control

<textarea rows="4" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies. 
</textarea>

• cols: number width
• rows: number height

7. <output>

8. <progress>

represents the progress of a task

<progress value="22" max="100"></progress>

• max: number
• value: number

9. <fieldset> <legend>

<fieldset> groups related elements in a form, and draws a box around the related elements.
<legend> defines a caption for the <fieldset> element.

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>