HTML-02

圖像和鏈接

URL

  • 目錄結(jié)構(gòu)
    目錄結(jié)構(gòu)指的是web站點(diǎn)中文件夾的名稱
    web站點(diǎn)的主目錄稱為根目錄
    位于根目錄下的其他文件夾稱為子目錄
    每個(gè)子目錄下都會(huì)包含有具體功能的下一級(jí)子目錄

  • URL
    URL (Uniform Resource Locator)
    統(tǒng)一資源定位器，俗稱路徑，用來標(biāo)識(shí)網(wǎng)絡(luò)中的任何資源:文本，圖片，音視頻文件，段落，或者其他超文本

  • 絕對(duì)路徑
    1.網(wǎng)絡(luò)資源
    http://www.w3.org/TR/CSS2/syndata.html

http:協(xié)議名（用://分隔）
www.w3.org：主機(jī)名
/TR/CSS2/:目錄路徑
syndata.html:要鏈接的文件名

文件從最高級(jí)目錄下開始的完整的路徑

2.本機(jī)資源
文件從最高級(jí)目錄下開始查找
file:///E:xiaoni/ni.jpg

  • 相對(duì)路徑
    指文件的位置相對(duì)于當(dāng)前文件的位置
    例如在同一個(gè)目錄下時(shí)，直接用<img src="tupian01.jpg"/>
    在下一級(jí)目錄時(shí)，先進(jìn)入再引用<img src="image/tupian01.jpg"/>
    在上一級(jí)目錄時(shí)，先返回再引用<img src="../tupian01.jpg"/>

根相對(duì)路徑：永遠(yuǎn)都是從WEB站點(diǎn)的根目錄開始查找
用/作為開始
/img/index/jd.jpg

圖像

  • 圖像格式:jpg、gif、png

  • 圖像元素<img>,可以將圖像添加到頁面
    必須屬性：src(要顯示的圖像路徑，url)
    常用屬性：width height (可以取數(shù)值，以px作為單位，px可以省略不寫;在寬高中，如果有一個(gè)沒寫，則另外一個(gè)會(huì)等比縮放)

<img width="100" src="image/rose.jpg"/>

鏈接

  • 鏈接元素<a>
    鏈接：又稱為超鏈接，用戶點(diǎn)擊時(shí)能夠發(fā)生頁面的跳轉(zhuǎn)等其他操作
<a >百度鏈接</a>
<a href="teacher/teacher.asp" target="_blank">去其他的頁面</a>

href屬性：鏈接URL(只有設(shè)置了href，元素才可以被點(diǎn)擊)
target屬性：目標(biāo)，即打開新網(wǎng)頁的方式，可取值為_blank(在新標(biāo)簽頁中打開),_self(在自身標(biāo)簽頁中打開)等
name屬性：錨點(diǎn)名稱

  • 鏈接的表現(xiàn)形式

目標(biāo)文檔為下載資源<a href="day09.zip">下載</a>
電子郵件鏈接<a href="mailto:xiaoyanger960@qq.com">聯(lián)系我們</a>
(前提是電腦必須安裝了郵件客戶端并綁定賬號(hào))
返回頁面頂部的空鏈接<a href="#">...</a>
鏈接到Javascript<a href="javascript:...">JS功能</a>

  • 錨點(diǎn)

描點(diǎn)是文檔中某行的一個(gè)記號(hào),鏈接到文檔中的某個(gè)部位
使用方式:
1.定義錨點(diǎn) <a name="anchorname1">錨點(diǎn)1</a>
2.鏈接到錨點(diǎn)：在錨點(diǎn)名前加上# <a href="#anchorname1">...</a>
(如果文本和圖像與錨點(diǎn)存在于同一個(gè)頁面)
<a href="URL#anchorname1">...</a>

表格

表格的作用

1.顯示表格數(shù)據(jù)

2.設(shè)置頁面布局

使用表格

  • 創(chuàng)建表格
    定義表格<table></table>
    創(chuàng)建表行：<tr></tr>
    創(chuàng)建單元格<td></td>
    例如：
<table>
 <tr>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
 </tr>
</table>
  • 表格的常用屬性
    <table>元素
    width 表格寬度
    height 表格高度
    align 表格對(duì)齊方式 (left right center)
    border 表格邊框?qū)挾?br> cellspacing 設(shè)置外邊距單元格之間距離
    cellpadding 設(shè)置內(nèi)邊距，單元格與內(nèi)容之間的距離
    bgcolor 設(shè)置表格背景顏色

<tr>元素
align 設(shè)置水平對(duì)齊方式（left right center）
valign 設(shè)置垂直對(duì)齊方式（top bottom middle）
bgcolor 設(shè)置當(dāng)前行的背景顏色

<td>元素
align 設(shè)置水平對(duì)齊方式
valign 設(shè)置垂直對(duì)齊方式
width 設(shè)置寬度
height 設(shè)置高度
colspan 設(shè)置單元格跨列
rowspan 設(shè)置單元格跨行

  • 表格的子元素
    1.表格標(biāo)題<caption>
    一般標(biāo)題將在表格上方居中顯示,<caption>標(biāo)簽必須緊隨在<table>標(biāo)簽后面，且一個(gè)表格只能有一個(gè)標(biāo)題
<table border="1">
  <caption>this is my table</caption>
  <tr>
    <td></td>
  </tr>
</table>

2.行標(biāo)題/列標(biāo)題
顯示效果：水平居中，并加粗顯示文本
<th></th>--><td></td>

表格的復(fù)雜應(yīng)用

  • 行分組
    表格可以分為三個(gè)部分：表頭 表主體 表尾
    表頭的行分組：<thead></thead>
    表主體的行分組：<tbody></tbody>
    表尾的行分組：<tfoot></tfoot>
    包含一個(gè)或者多個(gè)<tr>元素
<table border="1" width="300" >
  <thead align="center">
    <tr>
      <td>姓名</td>
      <td>年齡</td>
    </tr>
  </thead>
  <tbody align="left">
    <tr>
      <td>張三</td>
      <td>14</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>19</td>
    </tr>
  </tbody>
</table>

注意：如果不設(shè)置行分組，那么所有的行被默認(rèn)當(dāng)成是tbody的內(nèi)容。

  • 不規(guī)則表格
    設(shè)置單元格<td>的跨行或者跨列的屬性
    跨行：rowspan,值為正整數(shù)，表示此單元格水平延伸的單元格數(shù)
    跨列：colspan,值為正整數(shù)，表示此單元格垂直延伸的單元格數(shù)

  • 表格的嵌套
    在單元格中再放置另一張表格
    就是在<td>元素再包含<table>元素

結(jié)構(gòu)標(biāo)記

結(jié)構(gòu)標(biāo)記概述

  • 結(jié)構(gòu)標(biāo)記作用
    如果都是用div來進(jìn)行布局，就會(huì)有大量的div元素，元素之間互相嵌套，很亂，難以處理和維護(hù)
    所以html5提供了結(jié)構(gòu)標(biāo)記 方便各個(gè)部分的劃分，也更容易看清結(jié)構(gòu)，代碼易于解讀
<body>
  <header>頁頭</header>
  <section>主體內(nèi)容</section>
  <footer>頁腳</footer>
</body>

結(jié)構(gòu)標(biāo)記

  • <header>元素
    用于定義文檔的頁眉
    通常是一些介紹信息，導(dǎo)航信息，站點(diǎn)標(biāo)題或者logo圖片
    可以在頁面上出現(xiàn)多次，可以作為任何部分的頭部定義
<body>
  <header>
    <img src="image/flower.jpg">
    <h1>welcome to my homepage </h1>
  </header>
</body>
  • <nav>元素
    <nav>元素用來定義頁面的導(dǎo)航鏈接部分(用于包含表示鏈接的其他元素）
<body>
  <header>flowers</header>
  <nav>
     <ul>
           <li><a href="">rose</a></li>
           <li><a href="">daisy</a></li>
           <li><a href="">daffodil</a></li>
      </ul>
  </nav>
</body>
  • <section>元素
    表示文檔中的一個(gè)具體的組成成分
    1.常用于為頁面上的內(nèi)容分塊，比如定義章節(jié)，頁腳，或者文檔中的其他部分
    2.可以使用<header>元素為內(nèi)容添加標(biāo)題
<body>
<header>rose</header>
<section>
     <img src="image/rose.jpg alt="rose"/>
     With sunshine,water,and careful tending,roses will bloom several times in aa saeson.
</section>
</body>
  • <article>元素
    常用于定義獨(dú)立于文檔的其他部分的內(nèi)容（比如論壇的一個(gè)帖子，一篇報(bào)紙文章，某個(gè)博客條目或者用戶評(píng)論）
<body>
   <header>rose</header>
 <section>
    With sunshine,water,and careful tending.roses will bloom several in a season .
 </section>
  <article>
      <h1>internet explorer 9</h1>
      <p>IE9于2001年3月14日發(fā)布</p>
  </article>
</body>
  • <footer>元素
    常用于定義某區(qū)域的腳注信息（常用于定義文檔的頁腳，包含友情鏈接，版權(quán)信息和作者信息等等）
    （一個(gè)頁面中可以包含多個(gè)<footer>元素）
<body>
  <footer>
    <ul>
       <li><a href="'>關(guān)于我們</a></li>
       <li><a href="'>站點(diǎn)地圖</a></li>
       <li><a href="'>幫助</a></li>
    </ul>
  </footer>
</body>
  • <aside>元素
    用于定義頁面的一些額外組成部分（如廣告欄，側(cè)邊欄和相關(guān)引用信息等等）
<body>
  <aside>
    <p>最新留言</p>
    <section>廣告section>
  </aside>
  <footer>
     <ul>
        <li><a href="'>關(guān)于我們</a></li>
       <li><a href="'>站點(diǎn)地圖</a></li>
       <li><a href="'>幫助</a></li>
     </ul>
  </footer>
       <span>&copy;2012 XX官網(wǎng)     京ICP證XXX號(hào)</span>
  </footer>
</body>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1. 超級(jí)鏈接 2. 超鏈接的應(yīng)用對(duì)象：文本、圖片（注意，在IE瀏覽器下設(shè)置了超鏈接的圖片會(huì)有邊框） 3. 常用屬...
    ss555566閱讀 305評(píng)論 0贊 0
  • 第一章 1、使用瀏覽器去訪問的程序，叫網(wǎng)頁 2、web代碼存放在服務(wù)器 代碼分為兩種：① 運(yùn)行在瀏覽器端：前端代...
    fastwe閱讀 3,557評(píng)論 0贊 2
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的，因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 4,952評(píng)論 0贊 0
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽：!DOCTYPE 說明：指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,530評(píng)論 1贊 41
  • 0.B/S結(jié)構(gòu) 瀏覽器服務(wù)器模式,web瀏覽器是客戶端最主要的應(yīng)用軟件.將客戶端使用web進(jìn)行統(tǒng)一,系統(tǒng)功能實(shí)現(xiàn)集...
    liusong007閱讀 1,202評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容