HTML basic knowledge - lishiying410/HTML-Notes GitHub Wiki

HTML(Hyper Text Markup Language) is a markup language for describing web documents.

The basic structure of HTML code, only the content in body tag will be showed by browser. Head part provides information about the documents, is the container of metadata,metadata typically defines document title,style,link, script and other meta information. For example: <title> element in head defines the title of browser tab. Other tag like <script>, <style>, <link>

<!DOCTYPE html> <html> <head> <title>Page Title</title> </head>

``<body>``
  ``<h1>My first heading</h1>``
  ``<p>My first paragraph</p>``
``</body>``

</html>

HTML attributes,examples:

  a)link, defines in `<a></a>`, example:` <a href="www.google.com">refer google </a>`

  b)alt, defines alternative text for an image.

  c)src, defines the source of an image.

  d)style, defines style attributes in HTML, format is style="property:value", property is CSS property,value is CSS value.

HTML elements, examples:

  a) `<br>`, is an empty elements which has no ending tag used for breaking a line.

  b) formatting elements, to defines text format like bold text, emphasized text, marked text, etc. The format is  
 `<p><b>bold text</b></p>`, formatting elements defined in` <p>`.

  c) quote sentence goes in `<q></q>` 

  d) `<pre>`, element defines preformatted text, text is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks
  e) Image map, is an image with click-able areas, the idea is user should be able to perform different actions depending on where the image you click,like define a zoo map image, user can click different animals in the image to go to wiki page to get better understanding of the animals.

HTML comments, 

CSS style in HTML has 3 different ways, refer http://www.w3schools.com/html/html_css.asp

  a) Inline, use style attributes in HTML elements（which has highest priority comparing to other two ways）.
  b) Internal, use <style> element in HTML <head> section.
  c) External, use one/more external CSS files.  

class attributes in HTML elements, to define a style for a special type of elements.

HTML links, <a href="www.google.com" target="_blank"> open google</a>, the target attribute defines where to open the linked documents. _blank means open the linked document in a new tab or window, can also be "_self" which is the default one

HTML list, HTML has two different type of list, one is unordered list and one is ordered list.

 a) unordered list `<ul>`, the list item in it are marked using bullets.

 b) ordered list `<ol>`, the list item in it are marked using numbers/letters.

HTML table,the example code of HTML table:

<table>

<tr> <th>name</th> <th>species</th> </tr>

<tr> <td>tracy</td> <td>poodle</td> </tr>

<tr> <td>foxy</td> <td>husky</td> </tr>

<tr> <td>simba</td> <td>fixed</td> </tr> </table>

name	species
tracy	poodle
foxy	husky
simba	fixed

different attributes in HTML table:

border attribute, defines border of a table;

border-collapse attribute, collapse th,td and table border into one border；

padding attribute, defines the space of each cell elements and its border；

colspan attribute, make one cell span more than one column;

rowspan attribute,make one cell span more than one row

HTML block level elements, starts with new line, takes up full width as available, stretch out from left to right as far as it can:

`<div>`， used as a container for other HTML elements

`<h1>-<h6>`

`<p>`

`<form>`

HTML inline level element, doesn't start with a new line, and only take up as much width as possible:

 `<span>`, used as a container for some text(compare it with `<div>`)

 `<a>`

 `<img>`

HTML iframe, is used to display a web page inside a web page. The format is:

<iframe src="http://www.w3schools.com/" width="200" height="200"></iframe>

Javascript in HTML, defined in <script></script> , the <script> can either contains js statement or points to an external JS file.

The <noscript> tag in HTML, is displayed only when script is not supported or disabled in user browser,<noscript> can contains all elements in HTML <body> element.

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones):

HTML entities, reserved character in HTML must be replaced with entity characters.

a) non-breaking space, should be replaced by Non-breaking space is the space that will not break into a new line.

b) >, greater than, should be replaced by >

c) <, less than, should be replaced by <

URL，uniform resource locator, web browser requests pages from server using URL.The format of URL is:

scheme://prefix.domain:port/path/filename

scheme: scheme is the type of internet service（most common is http）

prefix: defines the domain prefix(default for http is www)

domain: defines the internet domain name(ex: w3school.com)

port: defines the port number of the host(default host for http is 80)

path: defines a path at the servers(if omitted, is the root directory of the site)

common url schemes:

http, hyper text transfer protocol, not encrypted

https: secure hyper text transfer protocol, encrypted

ftp: file transfer protocol,downloading/uploading files

<input> is the most important element in HTML form, the sample code for HTML form is an below:

<form action="result.php" method="get">

First Name: <br>

<input type="text" name="firstname"><br>

Last Name: <br>

<input type="text" name="lastname"><br>

<input type="submit" name="submit">

</form>

Action attribute in form defines the action to be performed when the form is submitted.

Method attribute defines the HTTP GET/POST request when submitting form to server. Get is the default method.

Name attribute is a required attribute for form input element,each input field must have name field, if not specified, the field will not be submitted be server.

GET VS POST? Use GET when the sending data is without sensitive data, when using GET, the data will be displayed in page address.

Use POST when the sending data is sensitive, the sending data will not be displayed in page address which offers better security.

HTML basic knowledge - lishiying410/HTML-Notes GitHub Wiki

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️