2018-06-26 HTML base revise

All contents based on: MDN 1. tutorials

Background: I started learning Front end courses two weeks ago, this is a revise blog about HTML basic knowledge.

Concept

HTML (HyperText Markup Language) is a descriptive language that specifies webpage structure.

Concept and syntax

image.png

Nesting elements

def: put elements in other elments.

My cat is very grumpy.

note: The elements have to open and close correctly, no wrong overlap!

Block versus inline elements

• block element nest in inline element forbidden, but nest in block element allowed; if we check the block elements, they occupy the whole line, in another words, a block element will create a new line.
  More information about block elements:https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
• An inline element does not start on a new line and only takes up as much width as necessary.
  More information about inline elements: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

About Attributes

Attributes contain extra information about the element which you don't want to appear in the actual content. In this case, the class attribute allows you to give the element an identifying name that can be later used to target the element with style information and other things.
An attribute should have:

• A space between it and the element name (or the previous attribute, if the element already has one or more attributes.)
• The attribute name, followed by an equals sign.
• An attribute value, with opening and closing quote marks wrapped around it.

A HTML page should include

  
    
    
  
  
    
This is my page
  

1. something like that I claim this is a HTML5 document.
2. This element wraps all the content on the entire page, and is sometimes known as the root element.
3. : This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more. You'll learn more about this in the next article in the series.
   Here, we find two elements in head: : sets the character set your document should use to UTF-8
   : this sets the title of your page, which is the title that appears in the browser tab the page is loaded in, and is used to describe the page when you bookmark/favorite it.
   Contents in head part will not be displayed in the page. More info about head we can find here :https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
4. : The element. This contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.

Whitespace in HTML

No matter how much whitespace you use (which can include space characters, but also line breaks), the HTML parser reduces each one down to a single space when rendering the code. we can use

element to create more whitespaces in the page.

image.png

Including special characters in HTML

In HTML, the characters <, >,",' and & are special characters. we also can use

elements to resolve this question.

image.png