Home [HTML] HTML Notes
Post
Cancel

[HTML] HTML Notes

1. HTML

超本文標記語言
在HTML當中存在著大量的標籤,我們用HTML提供的標籤,將要顯示在網頁中的內容包含起來,就構成了我們的網頁。

CSS
控制網頁內容顯示的效果

2. 開始動手寫HTML頁面

1
2
3
1. 或先在桌面上隨便的建一個文件。
2. 將創建的文件的名稱改為`.htm`或`.html`
3. 開始寫基本的框加標籤
1
2
3
4
5
6
7
<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

3. HTML中的標籤

本文

  • p標籤:段落標籤
  • &nbsp:空格
  • h#:標題標籤
  • <!--要註解的內容-->

圖片

  • <img/>:圖片標籤,用來顯示圖片

    <img/>:”斜線”在後面,代表自己開始自己結束
    src:表示要顯示的圖片路徑
    height:圖片的高度px
    width:圖片的寬度px
    alt:當圖片由於某些原因顯示失敗的時候所顯示的文本
    title:當游標移到圖片上的時候所顯示的文本

  • <hr/>:分隔線(水平線)

文字

  • <font></font>:字體標籤 size=1~7:7最大 color:顏色 face:字體系列

超連結

  • a標籤:超連結
    • href表示要連結到的地址
    • target打開新網頁的方式
    • _blank表示打開一個新的網頁進行跳轉
    • _self表示在當前頁面進行跳轉
1
<a href="http://google.com" target="_self">Google</a>

實現頁面內部的跳轉

  • 實現頁面內部的跳轉<a name="bottom" href="#top">

href屬性:#+name的值

1
2
<a name="top" href="#bottom">跳到最上面</a>
<a name="bottom" href="#top">跳到最下面</a>

實現頁面間的跳轉

  • 實現頁面間的跳轉<a name="a.html" href="b.html#bbb">

href屬性:路徑+#+name的值

1
2
<a name="a" href="b.html#b">a網頁 跳到 b網頁</a>
<a name="b" href="a.html#a">b網頁 跳到 a網頁</a>

發送Email

  • 發送Email
1
<a href="mailto:rivalintw@gmail.com">發Mail給Riva</a>

連結到一張圖片

  • 連結到一張圖片 一個圖片標籤,跳到另一個地方顯示圖片(連結指向另一個圖片地址)
1
<a href="1.jpt">我是圖片</a>

想要連結,但不想連到任何地方

href屬性寫#

1
<a href="#"></a>

4. Div+Span

能夠熟練掌握css+div佈局

This post is licensed under CC BY 4.0 by the author.