?
advertisement
網頁傳輸的流程?
http://www.stut.edu.tw/
http (hyper text transfer protocol) request
html (hyper text markup language)
web server
IIS (Internet Information Server)
Apache
Database server
http request
Browser
IE, firefox,
chrome,
safari…
Web server
IIS, Apache
Html file
Client-side language
JavaScript
VBscript…
Server-side language
ASP, PHP…
Html authoring tool
Frontpage
Dreamweaver
…
Html tag
=============================================================
<html>
<head>
<title>Javascript 測試</title>
<script type="text/JavaScript">
<!--此為選單換圖效果
function MM_swapImgRestore()
{
//v3.0
/*
這是註解
*/
var i,x,a=document.MM_sr;
for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
</script>
</head>
<body>
</body>
</html>
Html tags
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<p>This is a paragraph</p>
<a href="http://www.w3schools.com">This is a link</a>
<img src="w3schools.jpg" width="104" height="142" />
DTD: indicates in which HTML 4.01 / XHTML 1.0 DTD the tag is allowed. S=Strict,
T=Transitional, and F=Frameset
Tag
Description
<!--...-->
Defines a comment
<!DOCTYPE> Defines the document type
<a>
Defines an anchor
<b>
Defines bold text
<big>
Defines big text
<blockquote>
Defines a long quotation
<body>
Defines the document's body
<br />
Defines a single line break
<button>
Defines a push button
<caption>
Defines a table caption
<center>
Deprecated. Defines centered text
<cite>
Defines a citation
<code>
Defines computer code text
<col />
Defines attribute values for one or more columns in a table
<colgroup>
Defines a group of columns in a table for formatting
<dd>
Defines a description of a term in a definition list
<del>
Defines deleted text
<dfn>
Defines a definition term
<dir>
Deprecated. Defines a directory list
<div>
Defines a section in a document
<dl>
Defines a definition list
<dt>
Defines a term (an item) in a definition list
<em>
Defines emphasized text
<fieldset>
Defines a border around elements in a form
<font>
Deprecated. Defines font, color, and size for text
<form>
Defines an HTML form for user input
<frame />
Defines a window (a frame) in a frameset
<frameset>
Defines a set of frames
<h1> to <h6>
Defines HTML headings
<head>
Defines information about the document
<hr />
Defines a horizontal line
<html>
Defines an HTML document
<i>
Defines italic text
<iframe>
Defines an inline frame
<img />
Defines an image
<input />
Defines an input control
<ins>
Defines inserted text
<isindex>
Deprecated. Defines a searchable index related to a document
<kbd>
Defines keyboard text
<label>
Defines a label for an input element
<legend>
Defines a caption for a fieldset element
<li>
Defines a list item
<link />
Defines the relationship between a document and an external
resource
<map>
Defines an image-map
<menu>
Deprecated. Defines a menu list
<meta />
Defines metadata about an HTML document
<noframes>
Defines an alternate content for users that do not support
frames
<noscript>
Defines an alternate content for users that do not support
client-side scripts
<object>
Defines an embedded object
<ol>
Defines an ordered list
<optgroup>
Defines a group of related options in a select list
<option>
Defines an option in a select list
<p>
Defines a paragraph
<param />
Defines a parameter for an object
<pre>
Defines preformatted text
<q>
Defines a short quotation
<s>
Deprecated. Defines strikethrough text
<samp>
Defines sample computer code
<script>
Defines a client-side script
<select>
Defines a select list (drop-down list)
<small>
Defines small text
<span>
Defines a section in a document
<strike>
Deprecated. Defines strikethrough text
<strong>
Defines strong text
<style>
Defines style information for a document
<sub>
Defines subscripted text
<sup>
Defines superscripted text
<table>
Defines a table
<tbody>
Groups the body content in a table
<td>
Defines a cell in a table
<textarea>
Defines a multi-line text input control
<tfoot>
Groups the footer content in a table
<th>
Defines a header cell in a table
<thead>
Groups the header content in a table
<title>
Defines the title of a document
<tr>
Defines a row in a table
<tt>
Defines teletype text
<u>
Deprecated. Defines underlined text
<ul>
Defines an unordered list
<var>
Defines a variable part of a text
<xmp>
Deprecated. Defines preformatted text
« W3Schools Home
Next Reference »
Frame 1
Frame 2
Frameset
Frame 3
An ordered list:
1. Coffee
2. Tea
3. Milk
An unordered list:
Coffee
Tea
Milk
A
B
C
D
E
F
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</table>
A
B
C
D
E
F
G
<table width="100%" border="1">
<tr>
<td rowspan="2">A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td colspan="2">D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
<td>G</td>
</tr>
</table>
CSS stands for Cascading Style Sheets
CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:
The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a value.
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
body
{
font-size:75%;
font-family:verdana,arial,'sans serif';
background-color:#FFFFF0;
color:#000080;
margin:10px;
}
h1 {font-size:200%;}
h2 {font-size:140%;}
h3 {font-size:110%;}
th {background-color:#ADD8E6;}
ul {list-style:circle;}
ol {list-style:upper-roman;}
a:link {color:#000080;}
a:hover {color:red;}
Javascript
1. var
2. function
3. loop (for, while, do-while)
4. if~else
5. switch case
6. popup dialog (alert, confirm, prompt)
Javascript Objects
1. String
2. Date
3. Array
4. Math
Html DOM(document object model)之意義?
給定一個 html 文件,畫出 html dom
<html>
<head>
<title>My title</title>
</head>
<body>
<a href=http://....>My link</a>
<h1>My header</h1>
</body>
</html>
Javascript Objects
Window object
Navigator object
History object
Location object
href: http://www.host.com:80/Myweb/query.cgi?name+num+code#mypart3
host: www.host.com:80
hostname: www.host.com
port: 80
protocol: http
hash: #mypart3
search: ?name+num+code
pathname: /Myweb/query.cgi
Document object
