第1章 HTML基礎課件_第1頁
第1章 HTML基礎課件_第2頁
第1章 HTML基礎課件_第3頁
第1章 HTML基礎課件_第4頁
第1章 HTML基礎課件_第5頁
已閱讀5頁，還剩54頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第1章

HTML基礎

第1章HTML基礎第1章

HTML基礎1HTML文檔結構2HTML基本標記的使用3超鏈接標記4HTML表格5HTML表單第1章HTML基礎1HTML文檔結構

在互聯(lián)網中傳送的文檔，絕大部分使用超文本標記語言編寫，這些文檔稱為HTML文檔。在基本HTML文檔中，只允許兩種元素存在：一種是HTML標記，另一種則是普通文本。第1章HTML基礎1HTML文檔結構HTML文檔的組成結構如下：第1章HTML基礎1HTML文檔結構一個完整的HTML文檔通常由以下三部分組成：1．HTML標記格式：<html>…</html>2．頭部信息格式：<head>…</head>3．文本主體格式：<body>…</body>第1章HTML基礎1HTML文檔結構1．HTML標記

<html>…</html>

這是定義HTML文檔開始與結束的標記，也是HTML文檔中最先出現(xiàn)的標識，表明這個文件的內容是用HTML語言來實現(xiàn)的。它必須成對出現(xiàn)，分別表示HTML文件的起始和結束。在<html>容器標記中又包括以下<head>和<body>兩個部分。第1章HTML基礎1HTML文檔結構2．頭部信息<head>…</head>

這一部分用來說明文檔標題以及該頁面的其他信息，它構成HTML文檔的開頭部分，在此標記對之間可以使用<meta>、<title>等標記，這些標記都是描述HTML文檔相關信息的標志，標志對之間的內容是不會在瀏覽器的框內顯示出來的，但是其內容應該盡量簡短。第1章HTML基礎1HTML文檔結構3．文本主體<body>…</body>

這部分說明HTML文件的主體內容，在瀏覽器的客戶區(qū)中顯示，這是頁面開發(fā)者的編寫HTML文檔的主要部分。第1章HTML基礎1HTML文檔結構

對于HTML標記的約定：超文本標記是用一對尖括號“<>”括起來的文本串，例如第一行的<html>。超文本標記一般成對出現(xiàn)，用帶“/”的標記結束，如</html>。成對出現(xiàn)的超文本標記也稱容器元素。有些標記只有起始標記而沒有結束標記稱空元素，如<br/>。超文本標記可以忽略字母的大小寫。構成容器元素的一對標記可以寫在不同行，標記屬性的相對位置不受限制，但屬性必須出現(xiàn)在起始標記里。<標記名屬性1=“值1”

屬性2=“值2”

…

屬性n=“值n”>

…

…</標記名>第1章HTML基礎編寫HTML文檔的方法:HTML文檔是一個純文本文件，可以使用任何文本編輯器編寫保存。例：新建一個html文件第1章HTML基礎2HTML基本標記的使用2.1head容器的標記2.2body容器的標記第1章HTML基礎2.1head容器的標記<head>標記主要用來提供網頁文件的整體信息。包括標題欄名稱、文件的網址、所采用的文檔編碼等。<head>標記用來告知瀏覽器這是文件標題的開頭，最后使用</head>標記告知瀏覽器這是文件標題的結束點。第1章HTML基礎2.1head容器的標記HTML文檔的head是一個容器元素，在head容器元素中允許出現(xiàn)以下元素：1．title元素2．link元素3．meta元素4．base元素5．script元素第1章HTML基礎2.1head容器的標記1.title元素格式：<title>標題文字</title>

title元素包含文檔的標題。它不顯示在瀏覽器窗口中，只顯示在瀏覽器標題欄中。在起始標志（<title>）和結束標志(</title>)間，可以放入簡述文檔內容的標題。如果沒有title元素，瀏覽器的標題欄將顯示網頁的文件名。第1章HTML基礎2.1head容器的標記2．link元素格式：<linkhref="URL"rel="text"type="MIME_type“/>

link元素在當前文檔和另一文檔之間建立鏈接關系。href屬性指向相關的文檔;rel屬性描述了當前文檔與被連接文檔的關系;type屬性描述被連接文檔的類型。表示鏈接一個外部CSS文件default.css如下:<linkhref="default.css"rel="stylesheet"type="text/css“/>

第1章HTML基礎2.1head容器的標記3．meta元素格式：<metaname="text"http-equiv="text"content="text“/>

meta元素用來描述當前網頁的元信息。通常用來為搜索引擎robots定義頁面主題，或者是定義用戶瀏覽器上的cookie；它可以用于鑒別作者，設定頁面格式，標注內容提要和關鍵字；還可以設置頁面的自動刷新時間間隔（秒）等。第1章HTML基礎一些有關metal元素的例子1.設置搜索引擎關鍵字<metaname=“keywords”

content=“關鍵詞”

/>2.設置網頁編碼<metahttp-equiv=“content-type”content=“text/html;charset=GB2312”/>3.刷新頁面<metahttp-equiv=“refresh”content=“second;URL=targetURL”/>第1章HTML基礎2.1head容器的標記4．base元素格式：<basehref="URL"target="text"/>base元素指定一個顯式URL用于解析對于外部源的鏈接和引用，如圖像和樣式表。當用戶使用相對URL請求文檔時，超鏈接也會正確地執(zhí)行。Target指定文檔中所有鏈接的默認窗口，該屬性主要用在使用框架結構的網頁中，使用框架結構，同一瀏覽器窗口中可以容納多個網頁，同時在若干不同的框架窗口中顯示。第1章HTML基礎2.1head容器的標記5．script元素格式：<scripttype=“text/javascript”>腳本語言代碼段</script>script元素在文檔中放置一個腳本。這個元素可以在HTML文檔的head或body中出現(xiàn)。腳本可以在script元素中或外部文件中被定義。第1章HTML基礎2.2body容器的標記<body>標記是HTML文件最重要的部分，它是一個容器元素，包含在其中的內容將顯示在瀏覽器的主窗口中。第1章HTML基礎<body>容器元素中可以包含下表中的常用元素:<hn>text</hn>定義標題,其中:n=1,…,6。<h1>定義了最大字號的標題,<h6>定義了最小字號的標題<p>text</p>段落標記，文檔主體中兩個段落之間插入換行<imgsrc=“URL”/>把圖像插入到文檔中，其中src屬性給出圖像地址<ahref=URL>text</a>定義超文本鏈接屬性，并將結果返回給用戶瀏覽器<hr/>放置一個橫穿瀏覽器窗口的水平線<br/>在文本中強制換行<!--text--><!--注釋開始,-->注釋結束。注釋中不能包含注釋<div>…<div>區(qū)塊容器元素，可容納段落、標題、表格、圖片等各種HTML元素第1章HTML基礎2.2body容器的標記在HTML中，需要使用<body>元素的屬性對頁面進行一個整體的規(guī)劃和設置，例如頁面的背景顏色、背景圖案、頁面留白以及大部分文字的顏色等等。例如在百度搜索引擎的主頁中，其<body>元素的定義如下：<bodytext=“#000000”vLink=“#0000cc”aLink=“#ff6600”link=“#0000cc”bgColor=“#ffffff”>第1章HTML基礎body元素本身的屬性可以分為3類，如下表所示:

背景屬性bgColor背景色background背景圖案文字屬性text正文文字顏色link鏈接文字顏色alink活動鏈接文字顏色vlink已訪問鏈接文字顏色邊距屬性leftmargin頁面左側的左邊距topmargin頁面頂部的上邊距第1章HTML基礎<html><!--程序2-2.html，我的第一個html程序--><head><title>2-2.html</title></head><body><divalign="center"width="250"height="50">這是我的第一個html程序，我很高興哦。<hrsize="2"color="blue"width="250"/></div><div>這個程序簡單了點．學習嘛，要一步一步地來，不著急。</div></body></html>第1章HTML基礎3超鏈接標記HTML用<a>來表示超鏈接，英文叫anchor，一個鏈接的基本格式如下：<ahref="URL">鏈接文字</a><a>表示一個鏈接的開始;</a>表示鏈接的結束；<a>可指向任何一個文件源：網頁、圖片、影視文件等;href屬性則表示這個鏈接文件的路徑；鏈接分為本地鏈接、URL鏈接和目錄鏈接。第1章HTML基礎3超鏈接標記超鏈接標記的幾個常用屬性：1．target屬性：

<ahref=“”target=“_blank”>網易首頁</a>2．title屬性：

<ahref=“”title=“網易中文網”>網易首頁</a>3．name屬性：

<aname=“c1”>第一章</a> <aname=“c2”>第二章</a>4．鏈接到email地址：

<ahref=“mailto:inf”>聯(lián)系網易</a>第1章HTML基礎3.1本地鏈接對同一臺機器上的不同文件進行的連接稱為本地鏈接，它使用UNIX或DOS系統(tǒng)中文件路徑的表示方法，采用絕對路徑或相對路徑來指示一個文件。（1）以絕對路徑表示：<ahref="/c:\study\HTML教程\link01.htm">文件的鏈接</a>（2）以相對路徑表示：<ahref="link01.htm">文件的鏈接</a（3）鏈接上一目錄中的文件：<ahref="../../Internet/IP地址">IP地址</a>

第1章HTML基礎3.2URL鏈接URL是英文UniformResourceLocators（統(tǒng)一資源定位器）的縮寫，是專為標識Internet網上資源位置而設的一種編址方式，通過它可以以多種通訊協(xié)議與外界溝通來存取信息。URL地址一般由三部分組成，例如：協(xié)議名主機名路徑及文件名

第1章HTML基礎Internet上的通訊協(xié)議通常包括以下幾種：

協(xié)議名功能說明file本地系統(tǒng)文件httpWWW服務器ftpftp服務器telnet基于TELNET的協(xié)議mailto電子郵件newsUsenet新聞組第1章HTML基礎3.3目錄鏈接目錄鏈接可以直接指到某一個文件的上部、下部或中央部分。其制作方法是：在各種鏈接的各個要素中，首先把某段落設置為鏈接位置，使用name屬性，它可以跳轉到一個文件的指定位置。格式1：<aname="鏈接位置名稱"></a>然后，設定一個href指向此鏈接部分的文件；格式2：<ahref="文件名＃鏈接位置名稱">

鏈接文字</a>第1章HTML基礎<HTML><HEAD><TITLE>使用本地鏈接</TITLE></HEAD><BODY>

<AHREF=“#Internet”>互聯(lián)網</A><BR/><BR/><AHREF=“#HTML”>HTML簡介</A><BR/><BR/><AHREF=“#Consistency”>多樣化和統(tǒng)一性</A><BR/><BR/>

<Aname=“Internet”>互聯(lián)網</A><BR/><P>互聯(lián)網是網絡的網絡。也就是說，計算機網絡可以跨越國家甚至全球的范圍連接到其他網絡。世界上所有的計算機都可以通過TCP/IP傳輸協(xié)議綁定在一起。</P>

<Aname=“HTML”>HTML簡介</A><BR/><P>超文本標記語言是Web用來創(chuàng)建和識別文檔的標準語言。雖然它不是標準通用標記語言(SGML)的子集，但與它有著某種程度上的關聯(lián)。SGML是一種文檔格式語言表示方法。</P>

<Aname=“Consistency”>多樣性和統(tǒng)一性</A><BR/><P>萬事萬物都離不開多樣性和統(tǒng)一性這樣一條基本準則。也就是說，所有的事物都可以融合成一個整體，同時，又保持自己獨特的與眾不同的一面。站點的獨特性恰恰來源于它的一致性。顏色、字體、分欄布局以及其他設計元素應在站點的每個部分都保持一致。</P>

<AHREF="">關于我們</A><Ahref="mailto:xxx@.cn">聯(lián)系我們</A><BR/></BODY></HTML>第1章HTML基礎4HTML表格表格中所有行和列及單元格中的內容必須被包含在一對<table>和</table>標記中，其基本結構如下：<table> <!--定義表格開始-->

<caption>...</caption> <!--定義表格標題-->

<tr> <!--定義表的行開始-->

...

<td>...</td> <!--定義單元格數(shù)據-->...</tr> <!--定義表的行結束-->...</table> <!--定義表格結束-->第1章HTML基礎<tableborder="1"> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row2,cell1</td> <td>row2,cell2</td> </tr></table>第1章HTML基礎4.1表格定義標記1．表格的標題表格標題的位置，可由align屬性來設置，其位置分別由表格上方和表格下方。設置標題位于表格上方：<captionalign=“top”>...</caption>設置標題位于表格下方：<captionalign=“bottom”>...</caption>

第1章HTML基礎4.1表格定義標記2．<tr>元素<tr>元素表示表格中的行標記，表格中的每一行都必須包含在一對<tr></tr>標記中。行標記的一般形式是：<tralign="?"bgcolor="?">...</tr>在<tr>標記中有兩個屬性：align指定該行中單元格的對齊方式，如左對齊，居中以及右對齊；bgcolor指定該行的背景顏色第1章HTML基礎4.1表格定義標記3.<td>元素單元格是表格的基本組成元素，一個td元素表示表格中的一個單元格，包含在<tr>元素內的多個<td>元素構成表格的一行。單元格的一般形式是：<tdwidth="?"heigh="?"align="?"valign="?"bgcolor="?"background="?"rowspan="?"colspan="?">...</td>第1章HTML基礎4.1表格定義標記3.<td>元素在<td>標記中的屬性如下：width指定單元格的寬度；height指定單元格的高度；align指定單元格水平對齊方式；valign指定單元格垂直對齊方式；bgcolor指定單元格的背景顏色background指定單元格的背景圖案rowspan指定單元格的行跨度colspan指定單元格的列跨度第1章HTML基礎4.2表格屬性的設置1．表格的大小一般情況下，表格的總長度和總寬度是根據各行和各列的總和自動調整的，如果我們要直接固定表格的大小，可以使用下列方式：<tablewidth=“n1”height=“n2”>width和height屬性分別指定表格一個固定的寬度和長度，n1和n2可以用像素或百分比來表示。例如定義一個長為200像素，寬為100像素的表格：<tablewidth="200"height="100">第1章HTML基礎4.2表格屬性的設置2．表格的邊框邊框是用border屬性來設定的，它表示表格的邊框風格。將border設成不同的值，有不同的效果。在作為布局使用時往往取默認值“0”，即不顯示表格的邊框，在=1時，表格邊框顯示成三維的狀態(tài)。書寫格式為：<tableborder=“n”>第1章HTML基礎4.2表格屬性的設置3．單元格間距單元格與單元格之間的線為格間線，它的寬度可以使用<table>中的cellspacing屬性加以調節(jié)。格式為：

<tablecellspacing=“#”>#表示要取用的像素值還可以在<table>中設置cellpadding屬性，用來規(guī)定內容與格線之間的寬度。格式為：

<tablecellpadding=“#”>#表示要取用的像素值第1章HTML基礎4.2表格屬性的設置4．表格內文字的對齊方式表格中數(shù)據的排列方式有左右排列和上下排列兩種。左右排列由align屬性來設置，上下排列則由valign屬性來設置。格式參照<tr><td>標記：<tralign=“#”>#為left、center、right之一<tdvalign=“#”>#為top、middle、bottom之一第1章HTML基礎4.2表格屬性的設置5．單元格的合并利用td的rowspan和colspan屬性可以把單元格合并rowspan=“n”：合并其下面n-1個單元格colspan=“n”：合并其右測n-1個單元格第1章HTML基礎第1章HTML基礎5HTML表單5.1表單標記結構5.2單行文本框和多行文本框5.3命令按鈕5.4單選按鈕5.5復選框5.6下拉列表框5.7隱藏域第1章HTML基礎5.1表單標記結構HTML表單(Form)是HTML的一個重要部分，主要用于采集和提交用戶輸入的信息。表單在Web網頁中用來給訪問者填寫信息，從而能獲得用戶信息，使網頁具有交互的功能。HTML表單標記的基本結構如下：

<formaction="URL"method=“[get|post]”>

表單主體

<!--一般用于定義表單的常用控件--></form>第1章HTML基礎5.2單行文本框和多行文本框單行文本框允許用戶輸入一些簡短的單行信息，比如用戶姓名、密碼等。格式如下：<inputtype="text"name="文本框名">第1章HTML基礎<formaction=""method="get">請輸入你的姓名：<inputtype="text"name="yourname"><inputtype="submit"value="提交"></form>第1章HTML基礎5.2單行文本框和多行文本框多行文本框主要用于輸入較長的多行文本信息。格式如下：<textareaname="文本框名"cols="寬度"rows="行數(shù)"></textarea>第1章HTML基礎<formaction=""method="get">請?zhí)釋氋F意見：<br/><textareaname="suggest"cols="40"rols="3"></textarea><br/><inputtype="submit"value="提交"></form>第1章HTML基礎5.3命令按鈕命令按鈕通常用于完成一定的操作，這由按鈕的type屬性值而確定。格式如下：<inputtype=“按鈕類型”value=“按鈕表面文字">type屬性指定按鈕的類型，其值有三種：值為“Submit”，表示將表單的信息提交給表單的action所指向的文件來處理；值為“Reset”，表示清除表單的數(shù)據；值為“Button”，為一般按鈕，不產生任何操作。value屬性值是顯示在按鈕上的文字。第1章HTML基礎<formaction="login.php"method="post">

用戶名:<inputname="user"type="text"/>

密碼:<inputname="pw"type="password"/><inputtype=“submit”name=“Submit”value=“登錄"/></form>第1章HTML基礎5.4單選按鈕使用單選按鈕，讓用戶在一組選項里只能選擇一個。格式如下：<inputtype="radio"name="按鈕名">第1章HTML基礎<formaction=""method="post"><inputtype="radio"name="fruit“value="Apple">蘋果<br/><inputtype="radio"name="fruit"

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論