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標籤:段落標籤 :空格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佈局