在學習html標簽之前,我們先來回顧一下瀏覽器在請求服務器的過程:
1.在瀏覽器的地址欄里面輸入URL
2.瀏覽器發送一條請求到服務器,服務器接收請求並處理
3.服務器將數據傳回瀏覽器
4.瀏覽器解析數據,並且顯示在頁面上
下面開始html標簽的學習
1.p標簽:
p標簽是一個雙標簽,用來存放段落內容,使其與其他內容上下保持一定的間隙。
<p>段落內容</p>
2.h系列標簽,從h1到h6字體大小逐漸減小,用來存放標題,使其內容字體加粗變大,獨成一行。
<h1>標題1</h1> <h2>標題2</h2> <h3>標題3</h3> <h4>標題4</h4> <h5>標題5</h5> <h6>標題6</h6>
3.img圖片標簽,用來顯示圖片。
<img src="圖片路徑" title="" alt="" />
路徑分為絕對路徑和相對路徑,其中絕對路徑是指一個文件存放在電腦的物理路徑,即帶有盤符的路徑。相對路徑是指相對於當前文件的路徑。寫相對路徑的時候會遇到查找上一級路徑的問題,此時我們用“../返回上一層目錄“來查找到上一級路徑。(路徑問題經常會遇到,希望大家多加練習)
4.a超級連接。
<a href="跳轉的路徑">超鏈接</a>
5.還有一些其他的標簽。
<hr/>水平標簽 <br/>換行標簽 <font>文本標簽</font>
s del : 刪除標簽
i em : 傾斜 標簽
u ins: 下划線
深度解析a標簽:
1.使用a標簽實現頁面跳轉
<html> <head> <title></title> <base target="_blank"/> </head> <body> <a href="http://www.baidu.com">百度</a> </body> </html>
| 屬性 | 作用 |
| target | _self 在當前頁面直接打開(默認值) _blank 在一個新的頁面打開 |
| base標簽(放在title標簽的下面) | 作用 |
| target | 用來設置當前頁面上所有超鏈接的跳轉方式 |
2.在當前頁面定位到目標位置
<a href="#mubiao">目標位置</a> <p>這是一段文字</p> <p>這是一段文字</p> <p>這是一段文字</p> <p>這是一段文字</p> <p>這是一段文字</p> <p>這是一段文字</p> <p>這是一段文字</p> <p>這是一段文字</p> <p>這是一段文字</p> <p>這是一段文字</p> <p>這是一段文字</p> <p>這是一段文字</p> <p id="mubiao">這是一段文字</p> <p>這是一段文字</p> <p>這是一段文字</p>
3.跨轉到另一頁面的目標位置
第一個頁面的代碼
<a href="#mubiao">跨頁面定位</a>
第二個頁面的代碼
<p>這是第一個段落</p> <p>這是第一個段落</p> <p>這是第一個段落</p> <p>這是第一個段落</p> <p>這是第一個段落</p> <p>這是第一個段落</p> <p>這是第一個段落</p> <p>這是第一個段落</p> <p>這是第一個段落</p> ************************ <p>這是第二個段落</p> <p>這是第二個段落</p> <p>這是第二個段落</p> <p>這是第二個段落</p> <p>這是第二個段落</p> <p>這是第二個段落</p> <p>這是第二個段落</p> <p>這是第二個段落</p> <p>這是第二個段落</p> <p id="mubiao">這是第二個段落</p> <p>這是第二個段落</p> <p>這是第二個段落</p>
經過這兩天的學習很多人是否發現,在html中再多的空格,再多的換行,再多的tab,在瀏覽器上顯示的時候,都會變成一個空格。因為在html當,由專門來表示空格的東西 。接下來,我們就來學習其他的特殊字符用html來表示。
| 特殊字符 | 描述 | 字符的代碼 |
| 空格 | | |
| < | 小於號 | < |
| > | 大於號 | > |
| & | 和號 | & |
| ¥ | 人民幣 | ¥ |
| © | 版權 | © |
| ® | 注冊商標 | ® |
| ° | 攝氏度 | ° |
| ± | 正負號 | ± |
| × | 乘號 | × |
| ÷ | 除號 | ÷ |
| ² | 平方2(上標2) | ² |
| ³ | 立方3(上標3) | ³ |
如何設置背景圖片這個屬性呢?,所謂的背景圖片屬性,其實它就是標簽的一個屬性,可以放在任意的標簽中。background-imgage:url(圖片的路徑);。大家可以根據以上的學習做一個帶有背景圖片的標題、段落等都有的頁面。
