HTML基礎知識

1
<body>
<p>body 元素的內容會顯示在瀏覽器中。</p>
<p>title 元素的內容會顯示在瀏覽器的標題欄中。</p>
</body>
2
<p>段落元素由 p 標籤定義。</p>
3
<p>
這個段落
在源代碼       中
包含   許多行
但是      瀏覽器
忽略了它們。
</p>
4
<p>
To break<br>lines<br>in a<br>paragraph,<br>use the br tag.
</p>
5
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<p>請僅僅把標題標籤用於標題文本。不要僅僅爲了產生粗體文本而使用它們。請使用其它標籤或 CSS 代替。</p>
6

<h1 align="center">This is heading 1</h1>

<p>上面的標題在頁面中進行了居中排列。上面的標題在頁面中進行了居中排列。上面的標題在頁面中進行了居中排列。</p>
7
<p>hr 標籤定義水平線：</p>
<hr />
<p>這是段落。</p>
<hr />
8

<p>這是常規的段落。</p>
9
<body bgcolor="yellow">
<h2>請看: 改變了顏色的背景。</h2>
10
<body>

<br>

<strong>This text is strong</strong>

<br>

<br>

<em>This text is emphasized</em>

<br>

<i>This text is italic</i>

<br>
11
<pre>
這是
預格式文本。
它保留了空格
和換行。
</pre>

<p>pre 標籤很適合顯示計算機代碼：</p>
12
<p>唐老鴨的地址：</p>
<address>
Donald Duck<br />
BOX 555<br />
Disneyland<br />
USA<br />
</address>

<br />

<p>W3School 的地址：</p>
<address>
<a href="mailto:[email protected]">用戶服務信箱</a><br />
上海贏科投資有限公司<br />
金橋開發區 789 號<br />
</address>
13
<p>
如果您的瀏覽器支持 bi-directional override (bdo)，下一行會從右向左輸出 (rtl)；
</p>

<bdo dir="rtl">
Here is some Hebrew text
</bdo>
14
<p>
一打有
<del>二十</del>
<ins>十二</ins>
件。
</p>

<p>
大多數瀏覽器會改寫爲刪除文本和下劃線文本。
</p>

<p>
一些老式的瀏覽器會把刪除文本和下劃線文本顯示爲普通文本。
</p>
15
<p>
<a href="/index.html">本文本</a> 是一個指向本網站中的一個頁面的鏈接。</p>

<p><a href="http://www.microsoft.com/">本文本</a> 是一個指向**網上的頁面的鏈接。</p>

您也可以使用圖像來作鏈接：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
17
<a href="/example/html/lastpage.html" target="_blank">最後一頁</a>

<p>
如果把鏈接的 target 屬性設置爲 "_blank"，該鏈接會在新窗口中打開。
</p>

18
<p>
<a href="#C4">查看 Chapter 4。</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

查看 Chapter 4。

Chapter 1
This chapter explains ba bla bla

Chapter 2
This chapter explains ba bla bla

Chapter 3
This chapter explains ba bla bla

Chapter 4
19
<p>被鎖在框架中了嗎？</p>

<a href="/index.html"
target="_top">請點擊這裏！</a>
20

<p>
這是郵件鏈接：
<a href="mailto:[email protected]?subject=Hello%20again">發送郵件</a>
</p>

<p>
<b>注意：</b>應該使用 %20 來替換單詞之間的空格，這樣瀏覽器就可以正確地顯示文本了。
</p>
21
<p>
這是郵件鏈接：
<a href="mailto:[email protected]?subject=Hello%20again">發送郵件</a>
</p>

<p>
<b>注意：</b>應該使用 %20 來替換單詞之間的空格，這樣瀏覽器就可以正確地顯示文本了。
</p>
22
<frameset rows="25%,50%,25%">

</frameset>
23
<frameset rows="25%,50%,25%">

</frameset>
24
<frameset rows="50%,50%">

</frameset>

25
<frameset cols="50%,*,25%">
<frame src="/example/html/frame_a.html" noresize="noresize" />
<frame src="/example/html/frame_b.html" />
<frame src="/example/html/frame_c.html" />
</frameset>
26
<frameset cols="120,*">

</frameset>
27
<iframe src="/i/eg_landscape.jpg"></iframe>

<p>一些老的瀏覽器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可見的。</p>
28
<body>

<p>每個表格由 table 標籤開始。</p>
<p>每個表格行由 tr 標籤開始。</p>
<p>每個表格數據由 td 標籤開始。</p>

</body>
</html>
<body>

<p>每個表格由 table 標籤開始。</p>
<p>每個表格行由 tr 標籤開始。</p>
<p>每個表格數據由 td 標籤開始。</p>

29
<h4>帶有普通的邊框：</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
30
<h4>表頭：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>電話</th>
<th>電話</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

31
<h4>橫跨兩列的單元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">電話</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

<h4>橫跨兩行的單元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">電話</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>

32
<table border="1">
<tr>
<td>
   <p>這是一個段落。</p>
   <p>這是另一個段落。</p>
</td>
<td>這個單元包含一個表格：
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
</td>
</tr>
<tr>
<td>這個單元包含一個列表：
   <ul>
    <li>蘋果</li>
    <li>香蕉</li>
    <li>菠蘿</li>
   </ul>
</td>
<td>HELLO</td>
</tr>
</table>
33
<table width="400" border="1">
<tr>
<th align="left">消費項目....</th>
<th align="right">一月</th>
<th align="right">二月</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">化妝品</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">食物</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">總計</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>

34
<h4>一個無序列表：</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
35
<h4>一個有序列表：</h4>
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
36
<h4>Disc 項目符號列表：</h4>
<ul type="disc">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ul>

<h4>Circle 項目符號列表：</h4>
<ul type="circle">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ul>

<h4>Square 項目符號列表：</h4>
<ul type="square">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ul>

37
<h4>數字列表：</h4>
<ol>
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>

<h4>小寫字母列表：</h4>
<ol type="a">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>

<h4>羅馬字母列表：</h4>
<ol type="I">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>

<h4>小寫羅馬字母列表：</h4>
<ol type="i">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>

38
<h4>一個嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
    <ul>
    <li>紅茶</li>
    <li>綠茶</li>
    </ul>
</li>
<li>牛奶</li>
</ul>

39
<form>
名：
<input type="text" name="firstname">
<br>
姓：
<input type="text" name="lastname">
</form>

<form>
用戶：
<input type="text" name="user">
<br>
密碼：
<input type="password" name="password">
</form>
<p>
請注意，當您在密碼域中鍵入字符時，瀏覽器將使用項目符號來代替這些字符。
</p>

<form>
我喜歡自行車：
<input type="checkbox" name="Bike">
<br>
我喜歡汽車：
<input type="checkbox" name="Car">
</form>

<p>當用戶點擊一個單選按鈕時，該按鈕會變爲選中狀態，其他所有按鈕會變爲非選中狀態。</p>

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>

<textarea rows="10" cols="30">
The cat was playing in the garden.

<form action="/example/html/form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>

<p>請單擊確認按鈕，輸入會發送到服務器上名爲 "form_action.asp" 的頁面。</p>

<form name="input" action="/html/html_form_action.asp" method="get">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" checked="checked" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
<br /><br />
<input type="submit" value="Submit" />
</form>

<form name="input" action="/html/html_form_action.asp" method="get">
Male:
<input type="radio" name="Sex" value="Male" checked="checked">
<br>
Female:
<input type="radio" name="Sex" value="Female">
<br>
<input type ="submit" value ="Submit">
</form>

<h3>這個表單會把電子郵件發送到 W3School。</h3>
姓名：<br>
<input type="text" name="name" value="yourname" size="20">
<br>
電郵：<br>
<input type="text" name="mail" value="yourmail" size="20">
<br>
內容：<br>
<input type="text" name="comment" value="yourcomment" size="40">
<br><br>
<input type="submit" value="發送">
<input type="reset" value="重置">

40
<p>
一幅圖像：
<img src="/i/eg_mouse.jpg" width="128" height="128">
</p>
41
<body background="/i/eg_background.jpg">

<p>gif 和 jpg 文件均可用作 HTML 背景。</p>

<p>如果圖像小於頁面，圖像會進行重複。</p>

42
<p>
圖像
<img src="/i/eg_cute.gif" align="bottom">
在文本中
</p>

<p>請注意，bottom 對齊方式是默認的對齊方式。</p>

<p>
<img src ="/i/eg_cute.gif">
圖像在文本前面
</p>

<p>
圖像在文本後面
<img src ="/i/eg_cute.gif">
</p>
43

44
<p>
您也可以把圖像作爲鏈接來使用：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>

<p>gif 和 jpg 文件均可用作 HTML 背景。</p>

<p>如果圖像小於頁面，圖像會進行重複。</p>

46
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>

<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>

47
<a href="/example/html/lastpage.html" style="text-decoration:none">
這是一個鏈接！
</a>
48
<p>
<a href="http://www.w3school.com.cn" target="_blank">這個連接</a> 將在新窗口中加載，因爲 target 屬性被設置爲 "_blank"。
</p>

<p>
<a href="http://www.w3school.com.cn">這個連接</a> 也將在新窗口中加載，即使沒有 target 屬性。
</p>

簡述數組的創建及應用(java)

簡單的通訊錄程序

簡述C、C++、C#、asp.net、asp的聯繫與區別

MyEclipse的常用快捷鍵

DAO程序設計

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結