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

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

第1章

HTML基礎(chǔ)

第1章HTML基礎(chǔ)第1章

HTML基礎(chǔ)1HTML文檔結(jié)構(gòu)2HTML基本標(biāo)記的使用3超鏈接標(biāo)記4HTML表格5HTML表單第1章HTML基礎(chǔ)1HTML文檔結(jié)構(gòu)

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

<html>…</html>

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

這一部分用來說明文檔標(biāo)題以及該頁面的其他信息，它構(gòu)成HTML文檔的開頭部分，在此標(biāo)記對之間可以使用<meta>、<title>等標(biāo)記，這些標(biāo)記都是描述HTML文檔相關(guān)信息的標(biāo)志，標(biāo)志對之間的內(nèi)容是不會(huì)在瀏覽器的框內(nèi)顯示出來的，但是其內(nèi)容應(yīng)該盡量簡短。第1章HTML基礎(chǔ)1HTML文檔結(jié)構(gòu)3．文本主體<body>…</body>

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

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

屬性2=“值2”

…

屬性n=“值n”>

…

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

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

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

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

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

content=“關(guān)鍵詞”

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<caption>...</caption> <!--定義表格標(biāo)題-->

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

...

<td>...</td> <!--定義單元格數(shù)據(jù)-->...</tr> <!--定義表的行結(jié)束-->...</table> <!--定義表格結(jié)束-->第1章HTML基礎(chǔ)<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基礎(chǔ)4.1表格定義標(biāo)記1．表格的標(biāo)題表格標(biāo)題的位置，可由align屬性來設(shè)置，其位置分別由表格上方和表格下方。設(shè)置標(biāo)題位于表格上方：<captionalign=“top”>...</caption>設(shè)置標(biāo)題位于表格下方：<captionalign=“bottom”>...</caption>

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

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

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

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

表單主體

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

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

密碼:<inputname="pw"type="password"/><inputtype=“submit”name=“Submit”value=“登錄"/></form>第1章HTML基礎(chǔ)5.4單選按鈕使用單選按鈕，讓用戶在一組選項(xiàng)里只能選擇一個(gè)。格式如下：<inputtype="radio"name="按鈕名">第1章HTML基礎(chǔ)<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)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論