當前位置:編程學習大全網 - 編程語言 - 如何制作html格式的在線測試頁面

如何制作html格式的在線測試頁面

HTML介紹:(1):<html>

<head>

<title>Title of page</title>

</head>

<body>

This is my first homepage.

<b>This text is bold</b>

</body>

</html> 將此文件保存為“mypage.htm”。啟動瀏覽器。在文件菜單中選擇“打開”(或者“打開頁面”),這時將出現壹個對話框。選擇“瀏覽”(或者“選擇文件”),定位到妳剛才創建的HTML文件——“mypage.htm”,選擇它,單擊“打開”。然後在對話框中,妳將看到這個文件的地址,比如說:“C:\MyDocuments\mypage.htm”。單擊“確定”,瀏覽器將顯示此頁面。

--------------------------------------------------------------------------------例子解釋HTML文檔中,第壹個標簽是<html>。這個標簽告訴瀏覽器這是HTML文檔的開始。HTML文檔的最後壹個標簽是</html>,這個標簽告訴瀏覽器這是HTML文檔的終止。在<head>和</head>標簽之間文本的是頭信息。在瀏覽器窗口中,頭信息是不被顯示的。在<title>和</title>標簽之間的文本是文檔標題,它被顯示在瀏覽器窗口的標題欄。在<body>和</body>標簽之間的文本是正文,會被顯示在瀏覽器中。在<b>和</b>標簽之間的文本會以加粗字體顯示。

---常見問題問:我編寫完了HTML文件,但是不能在瀏覽器中看見結果,為什麽?

答:請確認妳保存了文件,並且使用了正確的文件名和擴展名,例如:“c:\mypage.htm”,並且確認妳用瀏覽器打開時使用同樣的文件名。問:我編輯了HTML文件,但是修改結果並沒有在瀏覽器中顯示,為什麽?

答:瀏覽器緩存了妳的頁面,所以它不需要兩次讀取同樣的頁面。妳修改了這個頁面,瀏覽器並不知道。請使用“刷新/重載”按鈕來強迫瀏覽器讀取編輯過的頁面。

-----------------------------------------------------------------------------

HTML基本標簽:(2):HTML中最重要的標簽是定義標題元素,段落和換行的標簽。

標題元素標題元素由標簽<h1>到<h6>定義。<h1>定義了最大的標題元素,<h6>定義了最小的。

<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3>

<h4>This is a heading</h4>

<h5>This is a heading</h5>

<h6>This is a heading</h6>

HTML自動在壹個標題元素前後各添加壹個空行。

(3):段落段落是用<p>標簽定義的。

<p>This is another paragraph</p> HTML自動在壹個段落前後各添加壹個空行。

--------------------------------------------------------------------------------換行當需要結束壹行,並且不想開始新段落時,使用<br>標簽。<br>標簽不管放在什麽位置,都能夠強制換行。

<p>This <br> is a para<br>graph with line breaks</p> <br>標簽是壹個空標簽,它沒有結束標記。

基本註意點——有用的技巧當妳寫下HTML文本的時候,妳不能確知在另外壹個瀏覽器中,這些文本將被如何顯示。有人用著大的顯示器,有的人用的小壹些。每次用戶調整窗口大小的時候,文本都將被重新格式化。不要想在編輯器中寫壹些空行和空格來協助排版。HTML將截掉妳文本中的多余空格。不管多少個空格,處理起來只當壹個。壹點附加信息:在HTML裏面,壹個空行也只被當作壹個空格來處理。使用空段落<p>來插入空白行是壹個壞習慣,請使用<br>標簽來替代。(但是不要用<br>標簽來創建列表,我們後面會專門學習HTML列表的。)妳也許註意到了段落可以不寫結束標記</p>。別依賴它,HTML的下壹個版本將不準妳漏掉任何壹個結束標簽。HTML自動在某些元素前後增加額外的空行,就像在段落和標題元素的前後壹樣。我們使用了水平線(<hr>標簽)來分隔我們教程的章節。

更多示例:a:多個段落:

<html>

<body>

<p>

This paragraph

contains a lot of lines

in the source code,

but the browser

ignores it.

</p>

<p>

This paragraph

contains a lot of spaces

in the source code,

but the browser

ignores it.

</p>

<p>

The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change.

</p>

</body>

</html>

(這個例子說明了段落的壹些默認行為。)b:換行:

<html>

<body>

<p>

To break<br>lines<br>in a<br>paragraph,<br>use the br tag.

</p>

</body>

</html>

(這個例子說明了在HTML文檔中換行的使用。)

c:詩歌的問題: <html>

<body>

<p>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</p>

<p>Note that your browser simply ignores your formatting!</p>

</body>

</html>

(這個例子說明了HTML顯示格式的壹些問題。)d:標題元素: <html>

<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>Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.</p>

</body>

</html>

(這個例子說明了在HTML中顯示標題元素的標簽。)e:居中的標題元素:<html>

<body>

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

<p>The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.</p>

</body>

</html>

(這個例子顯示了壹個居中的標題元素。)f:水平線:<html>

<body>

<p>The hr tag defines a horizontal rule:</p>

<hr>

<p>This is a paragraph</p>

<hr>

<p>This is a paragraph</p>

<hr>

<p>This is a paragraph</p>

</body>

</html>

(這個例子說明了如何插入水平線。)

g:隱藏的註釋:<html>

<body>

<!--This comment will not be displayed-->

<p>This is a regular paragraph</p>

</body>

</html>

(這個例子說明了在HTML文檔中如何插入隱藏的註釋。)h:背景色:<html>

<body bgcolor="yellow">

<h2>Look: Colored Background!</h2>

</body>

</html>

(這個例子說明了如何給頁面設置背景色。)

  • 上一篇:我去三星的面試經歷以及在三星的工作經歷
  • 下一篇:雲計算給汽車帶來了哪些改變?
  • copyright 2024編程學習大全網