HTML基礎——基礎標籤

1、HTML概述

  • htyper text markup language  即超文本標記語言。
  • 超文本: 就是指頁面內能夠包含圖片、連接,甚至音樂、程序等非文字元素。
  • 標記語言: 標記(標籤)構成的語言。

一、網頁的組成

一個網頁通常由兩部分組成即:javascript

  • HTML(Hypertext Markup Language)
  • 和CSS(Cascade Style Sheets)

HTML負責描述網頁的結構和內容(如標題,導航欄等) CSS則負責網頁的表現(外觀)(如背景顏色,字體樣式等)。css

二、HTML文檔的基本格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5的基本格式</title>
</head>
<body>

</body>
</html>

(1).<!doctype>標記

位於文檔最前面,用於向瀏覽器說明當前文檔使用的HTML標準。html

(2).<html>標記

也稱爲根標記,用於告知瀏覽器其自身是一個HTML文檔,<html>標記標誌着HTML文檔的開始,</html>標記着HTML文檔的結束。java

(3).<head>標記

用於定義HTML文檔的頭部信息,稱爲頭部標記。主要用來封裝其餘位於文檔頭部的標記。編程

①.<title>:設置頁面標題標記瀏覽器

用於定義HTML頁面的標題,即給網頁取一個名字。服務器

 

<title>我的簡介網</title>

 

②.<meta/>:定義頁面元信息標記佈局

用於定義頁面的元信息,可重複出如今<head>頭部標記中,是一個單標記。學習

常見的幾種設置,例:頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞字體

#1.<meta charset="UTF-8"/>   

定義編碼格式爲utf-8

 

#2.<meta name="名稱" content="值"/>

能夠爲搜索引擎提供信息。

  • name="keywords":設置網頁關鍵字,如我的簡介網頁關鍵字的設置。

 

<meta name="keywords" content="我的簡介,日記,秀出自我"/>

 

  • name="description":設置網頁描述,如我的簡介網頁描述信息的設置。

 

<meta name="description" content="這是一個我的簡介網站,你能夠經過本網站來秀出真正的本身。"/>

 

  • name="author":設置網頁做者。

 

<meat name="author" content="劉瑛奇"/>

 

#3.<meta http-equiv="名稱" content="值"/>

設置服務器發送給瀏覽器的http頭部信息,爲劉安琪顯示頁面提供相關的參數。

  • 設置字符集。
<meta http-equiv="Content-Type" content-"text/html"; charset="utf-8"/>
  • 設置頁面自動刷新與跳轉。
<meta http-equaiv="refresh" content="10;url=http://www.baidu.com"/>

③.<link>:引用外部文件標記

經常使用屬性:

屬性名   經常使用屬性值                 描述
 href      URL 指定引用外部文檔的地址
  rel  stylesheet 指定當前文檔與引用外部文檔的關係,該屬性值一般爲stylesheet,表示定義一個外部樣式表
 type   text/css 引用外部文檔的類型爲CSS樣式表
text/javascript 引用外部文檔的類型爲JavaScript腳本

 

 

 

 

 

 

例如:使用<link>標記引用外部CSS樣式表:

 

<link rel="stylesheet" type="text/css" href="style.css"/>

 

④.<style>:內嵌樣式標記

用於爲HTML文檔定義樣式信息,在HTML中使用style標記時,經常定義其屬性爲type,相應屬性值爲text/css。

例如:

<!doctype html>
<html>
    <head>
          <meta charset="utf-8"/>
          <title>style標記的使用</title>
          <style type="text/css">
          h2{color:blue;}
          p{color:yellow;}     
          </style>
    </head>

    <body>
    <h2>個人我的簡介</h2>
    <p>我是一名來自河南洛陽的男孩,今年20歲!</p>
    </body>
</html>

(4).<body>標記

用於定義HTML文檔索要顯示的內容,也稱爲主體標記。<body>標記中的信息纔是最終要顯示在網頁上的。

body裏面分爲兩類標籤:塊級標籤和內聯標籤。

  塊級標籤:<p><h1><table><ol><ul><form><div>

  內聯標籤:<a><input><img><sub><sup><textarea><span>

塊級標籤元素的特色
  ① 老是在新行上開始;
  ② 高度,行高以及外邊距和內邊距均可控制;
  ③ 寬度缺省是它的容器的100%,除非設定一個寬度。
  ④ 它能夠容納內聯元素和其餘塊元素

內聯標籤元素的特色
  ① 和其餘元素都在一行上;
  ② 高,行高及外邊距和內邊距不可改變;
  ③ 寬度就是它的文字或圖片的寬度,不可改變
  ④ 內聯元素只能容納文本或者其餘內聯元素

對行內元素,須要注意以下 
  ① 設置寬度width 無效。
  ② 設置高度height 無效,能夠經過line-height來設置。
  ③ 設置margin 只有左右margin有效,上下無效。
  ④ 設置padding 只有左右padding有效,上下則無效。注意元素範圍是增大了,可是對元素周圍的內容是沒影響的。

#1.基本標記:

①.標題標記:<h1>~<h6>

一般用來設置標題,從<h1>~<h6>重要性遞減。

基本語法格式爲:

<hn align="對齊方式">標題文本</hn>

align爲可選屬性,用於指定標題的對齊方式。

屬性值有:

  left:設置標題文字左對齊(默認值)

  center:設置標題文字居中對齊

  right:設置標題文字右對齊

注:一個頁面中只能使用一個<h1>標記,一般用於LOGO部分。

代碼示例:

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>標題標記的使用</title>
</head>

<body>
     <h1 align="center">一級標題 居中對齊</h1>
     <h2>二級標題</h2>
     <h3>三級標題</h3>
     <h4>四級標題</h4>
     <h5>五級標題</h5>
     <h6>六級標題</h6>
</body>
</html>

 

②.段落標記:<p>

用於定義一個獨立的段落,每一個段落獨佔一行,而且段落之間回有必定的間隙。

語法格式爲:

<p align="對齊方式">段落文本</p>

代碼示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>段落標記的用法</title>
</head>

<body>
     <p align="center">這是個人我的簡介</p>
     <p>我叫劉瑛奇,是一個大二學生,學的是計算機專業,是一個開朗熱愛學習的男孩。</p>
     <p align="right">劉瑛奇  2019.12.1</p>
</body>
</html>

③.功能標記

  <b> <strong>: 加粗標籤.

  <strike>: 爲文字加上一條中線.

  <i> <em>: 文字變成斜體.

  <sup>和<sub>: 上角標 和 下角表.

  <br>:換行.

  <hr>:水平線

代碼示例:

<html>
<head>
    <meta charset="UTF-8">
    <title>功能標記的使用</title>
</head>

<body>
    <b>使用p標記前加粗文字</b>
    <br>
    <strong>使用strong標記加粗文字</strong>
    <hr>
    <p>原價:<strike>299 </strike> 現價:9.9</p>
    <p><em>這是一段斜體字</em></p>
    <p> 2<sup>n</sup> 2的n次方</p>
    <p>h<sub>2</sub>o 水的分子表達式</p>
 
<p>&lt; 小於號</p> <p>&gt; 大於號</p> <p>&copy; </p> <p>&reg;</p> </body> </html>

 #2.圖像標記:

目前網頁上經常使用的圖像格式主要有GIFJPGPNG三種,具體區別以下。

●GIF格式

特色:

  支持動畫,是一種無損的圖像格式。

  支持透明,只能處理256中顏色。

  經常使用於LOGO、小圖標及其它色彩相對單一的圖像。

●PNG格式

特色:

  體積更小,支持alpha透明。

  不支持動畫

●JPG格式

 特色:

  能夠保存超過256種顏色的圖像。
  是一種有損壓縮的圖像格式。

  經常使用於較大的圖片的保存。

一、圖像標記<img />

  src: 要顯示圖片的路徑.

  alt: 圖片沒有加載成功時的提示.

  title: 鼠標懸浮時的提示信息.

  width: 圖片的寬

  height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

  vspace:圖像頂部和底部的空白(垂直邊距)

  border:圖像邊框的寬度

  hspace:圖像左側和右側的空白(水平邊距)

  align:設置對齊方式

    left:將圖像對齊到左邊

    right:將圖像對齊到右邊

    top:將圖像的頂端和文本的第一行文本對齊,其餘文字居圖像下方

    middle:將圖像的水平中線和文本的第一行文字對齊,其餘文字居圖像下方

    bottom:將圖像的底部和文本的第一行文字對齊,其餘文字居圖像下方

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>圖像標記的使用</title>
</head>

<body>
    <img src="my.gif" alt="一張個人自拍照" border="2" />
    <img src="my.gif" alt="一張個人自拍照" width="100" height="100" />
    <img src="my.gif" alt="一張個人自拍照" hspace="50" vspace="20" align="left" />
</body>
</html>

注意:

(1)、HTML不同意圖像標記使用border、vspace、hspace及align屬性。

(2)、網頁製做中、裝飾性的圖像都不要直接插入<img/>標記,而是經過CSS設置背景圖像來實現。

相對路徑和絕對路徑

①.絕對路徑

就是網頁上的文件或目錄咋硬盤上的真正路徑。如:"D:\HTML5+CSS3\images\logo.gif"。

注:網頁中不推薦使用絕對路徑。

②.相對路徑

就是相對於當前文件的路徑。

分爲三種:

 ●圖像文件和html文件位於同一文件夾:只需輸入圖像文件的名稱便可,如"<img src="logo.gif" />"

 ●圖像文件位於html文件的下一級文件夾:輸入文件夾名和文件名,之間用"/"間隔,如<img src="images/logo.gif" />

 ●圖像文件位於html文件的上一級文件夾:在文件名以前加入"./",若是是上兩級使用"../../"以此類推。如<img src="../logo.gif" />

#3.超連接標籤(錨標籤)<a>:

  href:要鏈接的資源路徑 格式以下: href="http://www.baidu.com" 

  target:用於指定連接頁面的打開方式。

    _self:默認值,在原窗口中打開。

    _blank:在新窗口中打開。

  name: 定義一個頁面的書籤.

  用於跳轉 href : #書籤名稱.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>超連接標記的使用</title>
</head>

<body>
    <a href="http://www.itcast.cn/" target="_slef">傳智播客</a>
    target="_self"原窗口中打開<br/>
    <a href="http://www.baidu.com/" target="_blank">百度</a>
    taget="_blank"新窗口打開
</body>
</html>

錨點連接:

經過建立錨點連接,用戶可以快速定位到目標的內容。

建立步驟:

  ①.使用"<a href="#id名">連接文本</a>"建立連接文本。

  ②.使用相應的id名稱注跳轉目標的位置。

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>錨點連接的使用</title>
</head>

<body>
    課程介紹:
    <ul>
        <li><a href="#one">平面廣告設計</a></li>
        <li><a href="#two">網頁設計與製做</a></li>
        <li><a href="#three">Flash互動廣告動畫設計</a></li>
        <li><a href="#four">用戶界面設計</a></li>
    <ul>
    <h3 id="one">平面廣告設計</h3>
    <p>課程涵蓋Photoshop圖像處理、I1lustrator圖形設計、平面廣告創意設計、字體設計與標誌設計。</p>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <h3 id="two">網頁世界與製做</h3>
    <p>課程涵蓋DIV+CSS實現Web標準佈局、Dreamweaver快速網站建設、網頁版式構圖與設計技巧、網頁配色理論與技巧。</p>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <h3 id="three">Flash互動廣告動畫設計</h3>
    <p>課程涵蓋Flash動畫基礎。Flash高級動畫、Flash互動廣告設計、Flash商業網站設計。</p>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <h3 id="four">用戶界面設計</h3>
    <p>課程涵蓋JavaScript編程基礎、JavaScript網頁特效製做、JQuery編程基礎、JQuery網頁特效製做。</p>
</body>
</html>
相關文章
相關標籤/搜索