# Introduction
HTML Tag:
- <!DOCTYPE html> 宣告這份文件是 HTML5
- <html></html> HTML 的開始跟結尾
- <head></head> HTML的頭
- <title></title> HTML的標題,放在頭裡面
- <body></body> HTML的身體
- <h1></h1> 一句話的標題,有h1~h6,h1最大
- <p></p> 句子
架構:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML的Tag大小寫都可以!
<!DOCTYPE xxx>
xxx可填HTML的版本,通常填入html代表使用html5,
至於其它的版本就連進去w3schools裡面看吧。
# Basic
超連結 <a href="http://www.w3schools.com">This is a link</a>
圖片 <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
其中 alternative text (alt) 是指當圖片當掉時,會顯示的替代文字
# Attributes
<html lang="en-US"> language
<p title="I'm a tooltip"> title will display as a tooltip
建議: 用小寫、用雙引號
Attribute | Description |
---|---|
alt | Specifies an alternative text for an image, when the image cannot be displayed |
disabled | Specifies that an input element should be disabled |
href | Specifies the URL (web address) for a link |
id | Specifies a unique id for an element |
src | Specifies the URL (web address) for an image |
style | Specifies an inline CSS style for an element |
title | Specifies extra information about an element (displayed as a tool tip) |
# Headings
Use HTML headings for headings only. Don't use headings to make text BIG or bold.
<hr> 分隔線
<head> Metadata typically define the document title, character set, styles, links, scripts, and other meta information.
# Paragraphs
The HTML <br> element defines a line break.
The HTML <pre> element defines preformatted text. 你怎麼打他怎麼顯示
# Styles
<tagname style="property:value;">
<body style="background-color:powderblue;">
The font-family property defines the font to be used for an HTML element:
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
The font-size property defines the text size for an HTML element:
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
The text-align property defines the horizontal text alignment for an HTML element:
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
- Use the style attribute for styling HTML elements
- Use background-color for background color
- Use color for text colors
- Use font-family for text fonts
- Use font-size for text sizes
- Use text-align for text alignment
# Formatting
- <b> - Bold text
- <strong> - Important text
- <i> - Italic text
- <em> - Emphasized text
- <mark> - Marked text highlighted
- <small> - Small text
- <del> - Deleted text
- <ins> - Inserted text 底線
- <sub> - Subscript text 下小字
- <sup> - Superscript text 上小字
Note: Browsers display <strong> as <b>, and <em> as <i>. However, there is a difference in the meaning of these tags: <b> and <i> defines bold and italic text, but <strong> and <em> means that the text is "important".
# Quotations
<q> element defines a short quotation.
<blockquote> element defines a section that is quoted from another source.
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
The HTML <abbr> element defines an abbreviation or an acronym.
Marking abbreviations can give useful information to browsers, translation systems and search-engines.
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> 指著WHO會顯示全名
The HTML <address> element defines contact information (author/owner) of a document or an article.
The HTML <cite> element defines the title of a work. Browsers usually display <cite> elements in italic.
The HTML <bdo> element defines bi-directional override. 倒過來寫
# Computercode
<code> | Defines programming code |
<kbd> | Defines keyboard input |
<samp> | Defines computer output |
<var> | Defines a variable |
<pre> | Defines preformatted text |
# Comments
<!-- Write your comments here -->
Conditional Comments
You might stumble upon conditional comments in HTML:
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->
<!--
或 -->
為標準 HTML 註解的起始或結尾;除此之外,紅色部分即為 IE 能辨識的特殊語法。所以,只有 IE 會依據紅字所表示的條件來判斷呈現與否,而其它瀏覽器依標準一律當成是註解。
# CSS
CSS stands for Cascading Style Sheets.
CSS can be added to HTML elements in 3 ways:
- Inline - by using the style attribute in HTML elements 在每個element中直接加
-
<h1 style="color:blue;">This is a Blue Heading</h1>
- Internal - by using a <style> element in the <head> section 在head中寫好
- <head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head> - External - by using an external CSS file 在另外一個檔案寫
- <head>
<link rel="stylesheet" href="styles.css">
</head>
Here is how the "styles.css" looks:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS Fonts
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
CSS Border
The CSS border property defines a border around an HTML element: 外框
CSS Padding
The CSS padding property defines a padding (space) between the text and the border: 距外框多遠
CSS Margin
The CSS margin property defines a margin (space) outside the border: 距網頁外緣多遠
The id Attribute
To define a specific style for one special element, add an id attribute to the element:
<p id="p01">I am different</p>
#p01 {
color: blue;
}
The class Attribute
To define a style for a special type of elements, add a class attribute to the element:
<p class="error">I am different</p>
p.error {
color: red;
}
# Links
<a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a>
Local Links
The example above used an absolute URL (A full web address).
A local link (link to the same web site) is specified with a relative URL (without http://www....).
Example
<a href="html_images.asp">HTML Images</a>
HTML Links - Colors
When you move the mouse over a link, two things will normally happen:
- The mouse arrow will turn into a little hand
- The color of the link element will change
By default, a link will appear like this (in all browsers):
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
You can change the default colors, by using styles:
Example
<style>
a:link {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover {color:red; background-color:transparent; text-decoration:underline}
a:active {color:yellow; background-color:transparent; text-decoration:underline}
</style>
HTML Links - The target Attribute
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
- _blank - Opens the linked document in a new window or tab
- _self - Opens the linked document in the same window/tab as it was clicked (this is default)
- _parent - Opens the linked document in the parent frame
- _top - Opens the linked document in the full body of the window
- framename - Opens the linked document in a named frame
This example will open the linked document in a new browser window/tab:
Example
<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
HTML Links - Image as Link
It is common to use images as links:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
HTML Links - Create a Bookmark
HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
Bookmarks can be useful if your webpage is very long.
To make a bookmark, you must first create the bookmark, and then add a link to it.
When the link is clicked, the page will scroll to the location with the bookmark.
Example
First, create a bookmark with the id attribute:
<h2 id="tips">Useful Tips Section</h2>
Then, add a link to the bookmark ("Useful Tips Section"), from within the same page:
<a href="#tips">Visit the Useful Tips Section</a>
Or, add a link to the bookmark ("Useful Tips Section"), from another page:
Example
<a href="html_tips.html#tips">Visit the Useful Tips Section</a>
# Images
HTML Images Syntax
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image:
<img src="url" alt="some_text" style="width:width;height:height;">
Image Size - Width and Height
You can use the style attribute to specify the width and height of an image.
The values are specified in pixels (use px after the value):
Example
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Alternatively, you can use the width and height attributes. Here, the values are specified in pixels by default:
Example
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
Width and Height, or Style?
Both the width, height, and style attributes are valid in HTML5.
However, we suggest using the style attribute. It prevents internal or external styles sheets from changing the original size of images:
Images in Another Folder
If not specified, the browser expects to find the image in the same folder as the web page.
However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute:
Example
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Images on Another Server
Some web sites store their images on image servers.
Actually, you can access images from any web address in the world:
Example
<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Image Floating
Use the CSS float property to let the image float to the right or to the left of a text:
Example
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
Image Maps
Use the <map> tag to define an image-map. An image-map is an image with clickable areas.
The name attribute of the <map> tag is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.
The <map> tag contains a number of <area> tags, that defines the clickable areas in the image-map:
Example
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<area> | Defines a clickable area inside an image-map |
# Tables
Defining an HTML Table
An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.
Example
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
HTML Table - Adding a Border
If you do not specify a border for the table, it will be displayed without borders.
A border is set using the CSS border property:
Example
table, th, td {
border: 1px solid black;
}
HTML Table - Collapsed Borders
If you want the borders to collapse into one border, add the CSS border-collapse property:
Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
HTML Table - Adding Cell Padding
Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property:
Example
th, td {
padding: 15px;
}
HTML Table - Left-align Headings
By default, table headings are bold and centered.
To left-align the table headings, use the CSS text-align property:
Example
th {
text-align: left;
}
HTML Table - Adding Border Spacing
Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-spacing property:
Example
table {
border-spacing: 5px;
}
HTML Table - Cells that Span Many Columns
To make a cell span more than one column, use the colspan attribute:
Example
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
HTML Table - Cells that Span Many Rows
To make a cell span more than one row, use the rowspan attribute:
Example
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
HTML Table - Adding a Caption
To add a caption to a table, use the <caption> tag:
Example
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
A Special Style for One Table
To define a special style for a special table, add an id attribute to the table:
Example
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Now you can define a special style for this table:
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
And add more styles:
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;
}
<thead> | Groups the header content in a table |
<tbody> | Groups the body content in a table |
<tfoot> | Groups the footer content in a table /td> |
# Lists
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Unordered HTML List - Choose List Item Marker
The CSS list-style-type property is used to define the style of the list item marker:
Value | Description |
---|---|
disc | Sets the list item marker to a bullet (default) |
circle | Sets the list item marker to a circle |
square | Sets the list item marker to a square |
none | The list items will not be marked |
Example - Disc
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines the type of the list item marker:
Type | Description |
---|---|
type="1" | The list items will be numbered with numbers (default) |
type="A" | The list items will be numbered with uppercase letters |
type="a" | The list items will be numbered with lowercase letters |
type="I" | The list items will be numbered with uppercase roman numbers |
type="i" | The list items will be numbered with lowercase roman numbers |
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Nested HTML Lists
Horizontal Lists
HTML lists can be styled in many different ways with CSS.
One popular way is to style a list horizontally, to create a menu:
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left; /// important
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
HTML List Tags
Tag | Description |
---|---|
<ul> | Defines an unordered list |
<ol> | Defines an ordered list |
<li> | Defines a list item |
<dl> | Defines a description list |
<dt> | Defines the term in a description list |
<dd> | Defines the description in a description list |
# Blocks
Block-level Elements
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
The <div> element is a block-level element.
Examples of block-level elements:
- <div>
- <h1> - <h6>
- <p>
- <form>
The <div> Element
The <div> element is often used as a container for other HTML elements.
The <div> element has no required attributes, but both style and class are common.
When used together with CSS, the <div> element can be used to style blocks of content:
Example
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
Inline Elements
An inline element does not start on a new line and only takes up as much width as necessary.
This is an inline <span> element inside a paragraph.
Examples of inline elements:
- <span>
- <a>
- <img>
The <span> Element
The <span> element is often used as a container for some text.
The <span> element has no required attributes, but both style and class are common.
When used together with CSS, the <span> element can be used to style parts of the text:
Example
<h1>My <span style="color:red">Important</span> Heading</h1>
# Classes
Using The class Attribute
The HTML class attribute makes it possible to define equal styles for elements with the same class name.
Here we have three <div> elements that points to the same class name:
Example
<!DOCTYPE html>
<html>
<head>
<style>
div.cities {
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>
Inline <span> Elements is ok as well
# Iframes
An iframe is used to display a web page within a web page.
Iframe Syntax
An HTML iframe is defined with the <iframe> tag:
<iframe src="URL"></iframe>
The src attribute specifies the URL (web address) of the inline frame page.
Iframe - Set Height and Width
Use the height and width attributes to specify the size of the iframe.
The attribute values are specified in pixels by default, but they can also be in percent (like "80%").
Example
<iframe src="demo_iframe.htm" height="200" width="300"></iframe>
Iframe - Remove the Border
By default, an iframe has a border around it.
To remove the border, add the style attribute and use the CSS border property:
Example
<iframe src="demo_iframe.htm" style="border:none;"></iframe>
With CSS, you can also change the size, style and color of the iframe's border:
Example
<iframe src="demo_iframe.htm" style="border:2px solid grey;"></iframe>
Iframe - Target for a Link
An iframe can be used as the target frame for a link.
The target attribute of the link must refer to the name attribute of the iframe:
Example
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
# JavaScript
The HTML <script> Tag
The <script> tag is used to define a client-side script (JavaScript).
The <script> element either contains scripting statements, or it points to an external script file through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
This JavaScript example writes "Hello JavaScript!" into an HTML element with id="demo":
Example
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
# Head
The HTML <style> Element
The <style> element is used to define style information for a single HTML page:
Example
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
The HTML <link> Element
The <link> element is used to link to external style sheets:
Example
<link rel="stylesheet" href="mystyle.css">
The HTML <meta> Element
The <meta> element is used to specify which character set is used, page description, keywords, author, and other metadata.
Metadata is used by browsers (how to display content), by search engines (keywords), and other web services.
Define the character set used:
<meta charset="UTF-8">
Define a description of your web page:
<meta name="description" content="Free Web tutorials">
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
Define the author of a page:
<meta name="author" content="Hege Refsnes">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
The HTML <script> Element
The <script> element is used to define client-side JavaScripts.
This JavaScript writes "Hello JavaScript!" into an HTML element with id="demo":
Example
<script>
function myFunction {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
The HTML <base> Element
The <base> element specifies the base URL and base target for all relative URLs in a page:
Example
<base href="http://www.w3schools.com/images/" target="_blank">
# CSS# CSS# CSS# CSS# CSS# CSS# CSS# CSS# CSS# CSS# CSS