HTML5+CSS3+JS(第二課).HTML5保留的常用元素(二)

html5+css3+jacascript


第二章:


一:HTML5保留的常用元素


  4. 超鏈接和描點


    超鏈接用<a></a>標籤來包括。
    href: 指定超鏈接所關聯的資源。(屬性)
 target: 指定使用框架集 中的哪個框架來裝載另一個資源
 media: 指定URL引用的媒體類型.默認爲all.
 <a>  :標籤主要可以包含文本、圖像、各種文本格式化元素、表單元素等。
 栗子

<html>
<head>
 <title>超鏈接</title>
</head>
<body>
 <!--本窗口打開百度(老外喜歡這麼幹)-->
 <a href="www.baidu.com"><b>度娘思密達</b></a>
 <br>
 <!--在新窗口打開百度(中國人喜歡這麼幹)-->
 <a href="www.baidu.com" target="_blank"><em>度娘思密達</em></a>
 <br>
 <!--用圖片咯-->
 <a href="www.baidu.com"><img src="images/baidulogo.jpg" alt="百度"></a>
 <br>
 <!--打開本地網頁-->
 <a href="second.html">我是本地的</a>
</body>
</html>



 
 在使用href的時候,值可以是相對路徑也可以是絕對路徑。href屬性值爲URL(Unoform Resource Locator, 統一資源定位器),URL可以對網站進行定位,可以對圖片進行定位。用的比較多
 關於URL地址的解釋如下:
 scheme: 指定Net服務的類型。最流行的是HTTP
 domain: 指定域名。比如baidu.com
 host  : 指定域中的主機。如果省略。HTTP默認的是WWW
 port  : 指定主機端口號。如果省略。HTTP默認爲80
 path  : 指定遠程服務器上的路徑。如果省略,定位在跟目錄
 filename: 指定遠程文檔名稱。如果省略。通常會定位到index.html、index.htm等文件,也可以定位別的文件
 栗子:

 <a href="news:yeeku.html">HTML News</a>...打開網頁
 <a href="ftp://www.baidu.com/images/logo.jpg">logo</a>.....會訪問到logo.jpg這張圖片下載.
 <a href="mailto:[email protected]">會給這個郵箱發郵件噢</a>


 
 錨點
 指定本網頁中的一個位置。

 <a name="hello"></a>
 <a href="#hello">然後網頁就會跑到hello所在的位置了</a>



 
  5. 列表相關元素


    <ul>和<li>一般列表用來做目錄欄。
 <ol>和<li>會在前面加序號
 <dl>、<dt>和<dd>一般用來做表格
 來栗子:

<html>
<head>
 <title>列表噢</title>
</head>
<body>
 <!--無序號-->
 <ul>
  <li>首頁</li>
  <li>第二頁</li>
  <li>第三頁</li>
 </ul>
 <!--有序號-->
 <ol>
  <li>2</li>
  <li>4</li>
  <li>3</li>
  <li>1</li>
 <ol>
 <!--表格-->
 <dl>
  <dt>旅遊景點</dt>
  <dd>黃鶴樓</dd>
  <dd>東湖</dd>
  <dd>武大狼</dd>
  <dt>價格<dt>
  <dd>60軟妹幣</dd>
  <dd>免費</dd>
  <dd>10軟妹幣</dd>
 <dl>
</body>
<html>


 

6. 圖像相關元素

    <img>....也就只有這一個了
 屬性:
   src : 圖像原。給個路徑
   alt : 替代文本。當圖像沒有加載完成時,會顯示這段文本
   height: 圖像的高
   width : 圖像的寬
  <map> : 定義圖片映射。
  <area>: 定義圖片映射區域。一個圖片可以有多個映射,每個映射區域可以做不同的事
  屬性:
    shape : 指定內部區域是哪種區域
    coords: 指定多個座標來確定區域
    href  : 區域對於的鏈接
    alt   : 圖片的提示信息
    target:
    media :

還沒完。不想寫了。睡覺。

發佈了31 篇原創文章 · 獲贊 21 · 訪問量 20萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章