1. 程式人生 > >HTML 入門第一課

HTML 入門第一課

amp 查看 獲得 激活 組成 lan 順序 全面 lang

HTML 簡單認識

HTML(HyperText Markup Language)即超文本標記語言,是一種用來制作超文本文檔的簡單標記語言,也是制作網頁的最基本的語言,它可以直接由瀏覽器執行。

1.HTML 是用來描述網頁的一種語言。

2.HTML 指的是超文本標記語言: HyperText Markup Language

3.HTML 不是一種編程語言,而是一種標記語言

4.標記語言是一套標記標簽 (markup tag)

5.HTML 使用標記標簽來描述網頁

6.HTML 文檔包含了HTML 標簽及文本內容

7.HTML文檔也叫做 web 頁面

由 HTML 組成的網頁的基本結構

技術分享

文檔類型聲明 <!DOCTYPE html> --這是html5的聲明方法

頭部標記(<head>….</head>)

包含文檔的標題信息,頭部標記都不可或缺!

主體標記(<body>…..</body>)

包含了文檔的內容

中文編碼聲明(<meta charset = “utf-8”>)

HTML常用標簽

<p>…</p> 定義一個段的塊級標記 | <br /> 換行標記 | <h1> …<h6> 標題標記

<ul> </ ul> 無序列表標記,表示列表所包含的項是沒有先後順序的!列表項使用<li>表示。

<ol> </ ol> 有序列表標記,表示列表所包含的項是有先後順序的!列表項使用<li>表示。

<dl> </ dl> 定義列表,定義列表至少包含一條術語(dt)或一條說明(dd)

<dt> </ dt> 標明一個術語要說明的對象

<dd> </dd> 列表項說明

<b> </b> 或 <strong> </strong> 文本加粗

<i> </i> 或 <em> </em> 文本傾斜

<div> </div> 塊級元素 | <span> </ span> 行內元素 | <hr /> 分隔線 | <del> <del /> 刪除線

< img > 圖像的行內標記

<img src = “lianhua.jpg ” alt = “蓮花之美”>

src 是圖片的路徑參數;

網頁設計中的所有文件,原則上都必須放置在一起,即在同一個文件夾下(這個文件夾是網頁的“根”文件夾)

相對路徑:參照自身的位置,而定義的路徑,叫做相對路徑

相對路徑有三種表示方法:

1.Html文檔和圖片在同一個目錄下,直接寫圖片名稱

2.Html文檔和圖片所在的文件夾在同一個目錄下,先寫文件夾名稱,再寫圖片名稱

3.Html文檔所在文件夾和圖片所在文件夾在同一個目錄下,則需要先用”../ ”找到根目錄,

再寫圖片所在文件夾的名稱,最後寫圖片名稱

-> 圖片大小 <img width = “ ” height = “ “ />

網頁中長度單位多使用 px ,即像素。

-> 圖標替代文體 <img alt = “圖片替代的文本內容” />

在網絡較慢的環境中,如果沒有出現圖片,將以文本替代圖片顯示

-> 圖片提示 <img title = “提示文本” />

在鼠標放置圖片上時提示的文本。多數標簽都有此屬性,但瀏覽器的支持不全面!

HTML 文字排版標記

1.<big></big> 定義大字體的文字 不符合標準網頁設計的理念,不贊成使用.

2.<small></small> 定義小字體的文字

3.<sup></sup> 上標

4.<sub></sub> 下標

HTML 特殊符號

“&lt;” 和 &gt;” “<” 和 “>” | &laquo; &raquo; << >>

&lsaquo; &rsaquo; < > | &copy; 版權 &amp &

超鏈接

<a> </a> 通過使用屬性href來指定要鏈接的url,標簽的內容可以為文本也可為其他標簽

①<a href="2.html">點擊進入2網頁</a>,點擊文字進入2.html

②<a href="2.html"><img src="two.jpg" /></a>,點擊圖片進入2.html

① a:link:未訪問鏈接 ,如 a:link {color:blue}
② a:visited:已訪問鏈接 ,如 a:visited{color:blue}
③ a:active:激活時(鏈接獲得焦點時)鏈接的顏色 ,如a:active{color:blue}
④ a:hover:鼠標移到鏈接上時 ,如 a:hover {color:blue}

錨點的使用

1.定義錨點<a id=“zj”>第三章</a>

2.定義指向該錨地的鏈接<a href=“#zj”>點擊查看第三章</a>

下載鏈接的使用

如果url指向的不是一個html文件,那麽點擊時將下載該文件

表格的基本結構

1)<table> </ table> 定義表格的基本框架

2)<tr> </tr> 定義表格的行

3)<td> </td> 定義表格行內單元格

4)<th> </th> 定義表格行內單元格(標題),自動將文本加粗,居中對齊

表單

表單的組成:一個表單有三個基本組成部分:

1)表單標簽:這裏面包含了處理表單數據所用程序的url,以及數據提交到數據服務器的方法。

2)表單域:包含了文本框,密碼框,隱藏域,多行文本框,復選框,下拉框和文件上傳框等。

HTML 入門第一課