HTML element/attribute 速查手册

Element


  
    

#range from 1 to 6, from the biggest to the smallest

#paragraph #link(href: hypertext reference) #src:source, alt: alternative
#horizontal rule: used to separate content in a HTML page

#line break(start a new line) without starting a new paragraph
 #define preformatted text
    
 
  

  • HTML formatting element
 - Bold text
 - Important text
 - Italic text
 - Emphasized text
 - Marked text
 - Small text
 - Deleted text
 - Inserted text
 - Subscript text
 - Superscript text
  • HTML quotation element
 -short quotation
-block quotation(the whole paragraph will be indented) -abbreviation
  • HTML links
# Links are defined with the  tag

# Use images as links 

  HTML tutorial

#HTML titles
Visit our HTML Tutorial
#HTML bookmarks

Chapter 4

jump to chapter 4
  • HTML tables
#table caption #table row #table head #table data #add a border table, th, td { border: 1px solid black; border-collapse: collapse; } #cell padding th, td { padding: 15px; } #text align th { text-align: left; } # combine two cells Telephone Telephone: # add an id attribute to table for style definition
table#t01 { width: 100%; background-color: #f1f1c1; } table#t01 tr:nth-child(even) { background-color: #eee; } table#t01 tr:nth-child(odd) { background-color: #fff; } table#t01 th { color: white; background-color: black; }
Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
  • HTML list
# unordered list
#ordered list
  1. Coffee
  2. Tea
  3. Milk
#description list
#description tag
#description data
  • HTML block-level elements :always starts on a new line and takes up the full width available

    HTML inline elements: does not start a new line but occupies as much width as necessary

and are both used as containers(grouping tags)

Attribute

href = "..." #hyperlink reference
src= "..." #source
width=...  height= #pixel
alt="..." #the alternative text to be displayed if the expected element couldn't be loaded.
style= "[color/font/size:...]"
lang= "..."
title= "..." #The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph:
  • HTML style
style = 
"background-color: powderblue;
 color: blue;
 font-family: verdana;
 font-size: 300%;
 text-align: center;"

HTML colors(color=""/ background-color=""/border="2px solid Tomato")

  1. use predefined color names
  2. use values

...

...

...

...

...

CSS(Cascading Style Sheets)

  1. inline
  2. internal: use a
    • HTML class attributes
      with CSS
    
    
    

    London

    London is the capital of England.

    Paris

    Paris is the capital of France.

    Tokyo

    Tokyo is the capital of Japan.

    with JS

    
    
    • Difference between ID and class
      ID can only be applied to a specific element while class could be applied to multiple ones.
    
    
    

    My Cities

    London

    London is the capital of England.

    Paris

    Paris is the capital of France.

    Tokyo

    Tokyo is the capital of Japan.

你可能感兴趣的:(HTML element/attribute 速查手册)