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.
<p>My cat is <strong>very</strong> grumpy.</p>
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
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>
- <!DOCTYPE html> something like that I claim this is a HTML5 document.
- <html></html>This element wraps all the content on the entire page, and is sometimes known as the root element.
- <head></head>: 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:<meta charset="utf-8">: sets the character set your document should use to UTF-8
<title>My test page</title>: 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 - <body></body>: The <body> 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 <pre> </pre> 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 <pre> </pre>elements to resolve this question.
image.png
