天天看點

HTML入門(轉義字元、行内樣式和塊級元素、定位、錨點、跑馬燈标簽、圖檔标簽、表格标簽的講解)

一、轉義字元

由特殊字元包裹的文本 會當做标簽去解析

 對應不換行空格

 對應全角空格 em是字型排印學的計量機關,相當于目前指定的點數。其占據的寬度正好是1個中文寬度,而且基本上不受字型影響。

&lt;對應<

&gt;對應>

二、行内元素和塊級元素

1.塊級标簽

預設情況下,每一個塊級元素都是獨占一行的即元素的前後都會換行 都有 align 屬性,例如:

  p标簽    段落标簽

  h1~6标簽   标題标簽

  hr标簽     水準分割線标簽

  div标簽    塊級元素

2.行内标簽

不會換行可以和其他的标簽或文本在一行内顯示,例如下列标簽:

  strong标簽或者b标簽都表示加粗标簽

  em标簽或者i标簽都表示傾斜标簽

  s标簽或者del标簽都表示删除标簽

  sup表示上标标簽

  sub表示下标标簽

  span被用來組合文檔中的行内元素。

注意事項(程式設計規則)

p标記不能嵌套塊級元素 w3c的規範

一個段落裡面不能放另外一個文章

三、web浏覽器

谷歌 GOOgle Chrome

火狐 fireFox

IE

歐朋 Opera

蘋果 Safari

四、超連結标簽

<a href = "http://www.baidu.com" target=""></a>

URL 統一資源定位符

三種表現:絕對路徑

     解釋:從檔案所在的最進階目錄下開始的完整路徑

        1.1通路網際網路上的資源

        1.2通路本機的資源

     相對路徑

     解釋:檔案所在的位置開始查找 資源檔案所在的位置經過的路徑

        2.1目前檔案和資源文在同目錄下 直接可以用名稱引用

        2.2資源檔案在目前目錄的子目錄中 先進入,再引用

        2.3 資源檔案在目前檔案的父目錄中 先傳回 再引用 ../ 傳回上一級,多層傳回上一級以此類推,例如:../../../../../

     根相對路徑

     在伺服器上面使用的,隻有伺服器端才能用得到

     表現/作為開始

     例如/img/ben.jpg 在項目中先找到一個img的檔案夾 再找ben的圖檔

錨點:

作用: 在網頁中的任意位置添加記号 可由任意位置跳轉到該記号

使用:1.定義錨點

    a标簽的 一個屬性 name

    其他标簽裡面用 id 屬性

   2.在另外一個地方跳轉

   <a href="#記号的名稱"></a>

五、跑馬燈标簽

作用:将文本在頁面上流動顯示(滾動播放)

用法: <marquee>内容</marquee>

屬性:滾動速度 scrollamount,值越大,滾動速度越快 一般5-10比較适宜消息觀看

   滾動方式 behavior,3個值 scroll-循環滾動 slide-隻滾動一次 alternate-來復原動 預設循環滾動

   滾動方向 direction,滾動方向 direction 4個值 up down left right 預設從右向左

   滾動循環 loop,預設值-1或infinite 表示無限循環滾動 loop="數值" 表示滾動相應的次數

   滾動背景顔色 bgcolor

   滾動空間 hspace-水準邊距 vspace-垂直邊距

   滾動延遲 scrolldelay,值越大,滾動速度越慢,通常不設定

六、圖檔标簽

作用:在頁面上 添加一張圖檔

用法: <img src="提取圖檔的位址" width="寬度" height ="高度" align="相對于左右文字的位置">

圖檔的格式: jpg有損壓縮 png無損壓縮的圖檔支援透明度 gif動圖

七、表格

1、表格的作用

按照一定的格式擺放資料

表格是由一些被稱為單元格的矩形框組成

按照從左到右,從上到下的順序排列到一起組成的。

2、建立表格

1.定義表格 table(定義一個完整表格範圍)

2.建立行 tr(行)

3.建立單元格td(單元格)

3、表格屬性

table屬性

    border:邊框

    cellpadding:單元格的内邊距(單元格邊框與内容之間的距離)

    cellspacing:單元格的外邊距(單元格之間的距離)

    width:寬度

    height:高度

    align:對齊方式(整個表格)

    bgcolor 背景顔色(純色填充)

    bordercolor 邊框顔色

    background: 背景圖檔

tr屬性(行)

    tr是沒有寬高屬性的

    align:水準對齊方式(内容)

    valign:垂直對齊方式

td屬性(單元格)

    width :每個單元格的寬度

    height:每個單元格的高度

    align:水準(單個單元格的内容)

    valign:垂直

不規則表格的建立

  1.跨行 rowspan屬性 縱向向下 包含自己

  2.跨列 colspan屬性 橫向向右 包含自己

表格标題

文法:<caption></caption>

注意:表格标題必須跟在 table後面 而且最多隻能有一個。