web前端與移動開發---html標簽的學習及特殊符號


  在學習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當,由專門來表示空格的東西&nbsp;。接下來,我們就來學習其他的特殊字符用html來表示。

特殊字符 描述 字符的代碼
  空格 &nbsp;
< 小於號 &lt;
> 大於號 &gt;
& 和號 &amp;
¥ 人民幣 &yen;
© 版權 &copy;
® 注冊商標 &reg;
° 攝氏度 &deg;
± 正負號 &plusmn;
× 乘號 &times;
÷ 除號 &divide;
² 平方2(上標2) &sup2;
³ 立方3(上標3) &sup3;

  如何設置背景圖片這個屬性呢?,所謂的背景圖片屬性,其實它就是標簽的一個屬性,可以放在任意的標簽中。background-imgage:url(圖片的路徑);。大家可以根據以上的學習做一個帶有背景圖片的標題、段落等都有的頁面。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM