HTML Basic
Outline:
- Basic
- HTML Attributes
- Head Elements
- Block and Inline Elements
- Other Elements
- CSS
Basic
<!DOCTYPE>
The <!DOCTYPE>
declaration represents the document type, and helps browsers to display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE>
declaration is not case sensitive.
The <!DOCTYPE>
declaration for HTML5 is:
<!DOCTYPE html> # HTML Elements
An HTML element is defined by a start tag, some content, and an end tag:
1 | <tagname> Content goes here... </tagname> |
tag及其包括的content构成了HTML元素
- HTML tag不是大小写敏感的
<P>
means the same as<p>
- HTML元素可以嵌套
- 某些HTML元素没有内容部分(比如
<br>
元素),称为空元素。 空元素不能有end tag
基本标签
- The
<!DOCTYPE html>
declaration defines that this document is an HTML5 document - The
<html>
element is the root element of an HTML page - The
<head>
element contains meta information about the HTML page - The
<title>
element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) - The
<body>
element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. - The
<h1>
element defines a large heading - The
<p>
element defines a paragraph
Usage
- All HTML documents must start with a document type declaration:
<!DOCTYPE html>
. - The HTML document itself begins with
<html>
and ends with</html>
. - The visible part of the HTML document is between
<body>
and</body>
.
<nav>
1 | <nav> |
<aside>
The <aside>
element defines some content aside from the content it is placed in (like a sidebar).
The <aside>
content should be indirectly related to the surrounding content.
HTML Attributes
HTML attributes provide additional information about HTML elements.
- All HTML elements can have attributes
- Attributes are always specified in the start tag
- Attributes usually come in name/value pairs like: name="value"
基本属性
The <a>
tag defines a hyperlink. The href
attribute specifies the URL of the page the link goes to:
1 | <a href="https://www.w3schools.com">Visit W3Schools</a> |
Class
The class
attribute can be used on any HTML element.
Note: The class name is case sensitive!
HTML elements can belong to more than one class.
HTML Head Elements
The <head>
element is a container for metadata (data about data) and is placed between the <html>
tag and the <body>
tag.
HTML metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, scripts, and other meta information.
You can have several <header>
elements in one HTML document. However, <header>
cannot be placed within a <footer>
, <address>
or another <header>
element.
<title>
The title must be text-only
defines a title in the browser toolbar
displays a title for the page in search engine-results
<style>
1 | <style> |
<meta>
Define the character set used:
1 | <meta charset="UTF-8"> |
Define keywords for search engines:
1 | <meta name="keywords" content="HTML, CSS, JavaScript"> |
Define a description of your web page:
1 | <meta name="description" content="Free Web tutorials"> |
Define the author of a page:
1 | <meta name="author" content="John Doe"> |
Refresh document every 30 seconds:
1 | <meta http-equiv="refresh" content="30"> |
Setting the viewport to make your website look good on all devices:
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
<link>
The <link>
tag is most often used to link to external style sheets:
1 | <link rel="stylesheet" href="mystyle.css"> |
<script>
1 | <script> |
<base>
The <base>
element specifies the base URL and/or target for all relative URLs in a page.
The <base>
tag must have either an href or a target attribute present, or both.
There can only be one single <base>
element in a document!
1 | <head> |
Block and Inline Elements
- The
<div>
element is a block-level and is often used as a container for other HTML elements - The
<span>
element is an inline container used to mark up a part of a text, or a part of a document
Block
A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.
A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
Two commonly used block elements are: <p>
and <div>
.
The <p>
element defines a paragraph in an HTML document.
The <div>
element defines a division or a section in an HTML document.
Inline
An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
Note: An inline element cannot contain a block-level element!
1 | <span>Hello World</span> |
Other Elements
<label>
The for
attribute of <label>
must be equal to the id attribute of the related element to bind them together. A label can also be bound to an element by placing the element inside the <label>
element.
1 | <form action="/action_page.php"> |
CSS
Using CSS
CSS can be added to HTML documents in 3 ways:
- Inline - by using the
style
attribute inside HTML elements - Internal - by using a
<style>
element in the<head>
section - External - by using a
<link>
element to link to an external CSS file
Inline
1 | <h1 style="color:blue;">A Blue Heading</h1> |
Internal
1 | <!DOCTYPE html> |
External
1 | <!DOCTYPE html> |
Class
To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces {}:
1 | <!DOCTYPE html> |