HTML 基礎學習筆記

時間 2019-12-10

標籤 html 基礎學習筆記欄目 HTML 简体版

原文原文鏈接

https://www.w3.org/MarkUp/Guide/

1.增長一個標題

<title>My first HTML document</title>

這個時候用瀏覽器打開文件其實只是一片空白。

2.添加頭部和文件

HTML中有6個級別的頭字體。H1是最重要的，H2次之，一直到H6

每個片斷都應該有<p>的標籤.

<h1>An important heading</h1>

<h2>A slightly less important heading</h2>

<p>This is the first paragraph.</p>

<p>This is the second paragraph.</p>

3.增長一些強調

This is a really <em>interesting</em> topic!

可是在這我也不加上<p>的標籤，也仍是會展現，因此我猜應該是默認的吧？

4.增長圖片到你的頁面中

<p><img src="text.png" width="200" height="150" alt="My friend Peter"></p>

圖片能夠指定長寬的像素大小， 也能夠增長替換表達，當這個圖像不存在的時候（alt）。

longdesc 幾乎全部的網頁都不支持這個標籤了。

5.增長到其餘頁面的連接

This is a link to <a href="peter.html">Peter's page</a>

連接到其餘的網頁：

This is a link to <a href="http://www.w3.org/">W3C</a>.

你也能夠將一個圖片連接到一個地址：

<a href="peter.html"><img src="text.png" alt="My friend Peter"></a>

6.三種列表

Html支持三種列表

（1）無序列表 ul

<ul>

<li>the first list item</li>

<li>the second list item</li>

<li>the third list item</li>

</ul>

（2）有序列表 ol

<ol>

<li>the first list item</li>

<li>the second list item</li>

<li>the third list item</li>

</ol>

上面這兩種都是</ol>是必須的而</li>是可選的。

（3）第三個是定義列表，這個列表容許你增長定義。dt 表示每一項，而dd表示定義。

<dl>

<dt>the first term</dt>

<dd>its definition</dd>

<dt>the second term</dt>

<dd>its definition</dd>

<dt>the third term</dt>

<dd>its definition</dd>

</dl>

同時這些列表都是能夠嵌套的。

7.HTML有一個頭部和身體部

若是你使用瀏覽器的預覽頁面源代碼的功能，可看到HTML頁面。這個文件一般是又一個申明什麼版本的HTML被使用而開始的。而後是<html><head>的標籤，而後就是在最後面</html>。<html></html> 如同一個容器同樣。 <head> ... </head> 包含了標籤。<body> ... </body> 包含了標記以及可見的內容。

8.整理你的標記

一個自動休整標記錯誤的工具是：

HTML TIDY https://www.w3.org/People/Raggett/tidy/

以上，而後這個都是介紹的HTML4.0來着，若是有詳細須要仍是看

： http://www.w3school.com.cn 吧。。。

ps一個本身寫的html做爲結束：

<html>
<head>
<title>My first HTML document</title>
</head>
<body>
<h1>An important heading</h1>
<h2>A slightly less important heading</h2>
<p>This is the first paragraph.</p>

This is the second paragraph.
This is a really <em>interesting</em> topic!
 <p><img src="text.png" width="200" height="150" alt="My friend Peter"></p>
 This is a link to <a href="peter.html">Peter's page</a>

 This is a link to <a href="http://www.w3.org/">W3C</a>.
<a href="peter.html"><img src="text.png" alt="My friend Peter"></a>

<ul>
  <li>the first list item</li>
  <li>the second list item</li>
  <li>the third list item</li>
</ul>

<ol>
  <li>the first list item</li>
  <li>the second list item</li>
  <li>the third list item</li>
</ol>

<dl>
  <dt>the first term</dt>
  <dd>its definition</dd>
  <dt>the second term</dt>
  <dd>its definition</dd>
  <dt>the third term</dt>
  <dd>its definition</dd>
</dl>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。