閆HTMLHTML語言和常用HTML元素_第1頁
閆HTMLHTML語言和常用HTML元素_第2頁
閆HTMLHTML語言和常用HTML元素_第3頁
閆HTMLHTML語言和常用HTML元素_第4頁
閆HTMLHTML語言和常用HTML元素_第5頁
已閱讀5頁，還剩60頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

HTMLHtml標(biāo)記HTML（一）本篇內(nèi)容HTML語言概述HTML語言細(xì)節(jié)I一、HTML語言概述HTML簡介HTML歷史HTML文件結(jié)構(gòu)HTML標(biāo)記、元素、屬性1.1HTML簡介HTML（HyperTextMarkupLanguage）超文本標(biāo)記語言超文本（文字+圖片+音視頻+鏈接等）標(biāo)記語言（瀏覽器根據(jù)標(biāo)記顯示內(nèi)容）是為瀏覽器設(shè)計(jì)的語言用于在Web上傳遞信息1.2HTML歷史HTML版本的演變HTML1.0-2.0——HTML3——HTML4——HTML4.01——HTML5從HTML4始由W3C組織統(tǒng)一制定規(guī)范W3C：世界萬維網(wǎng)聯(lián)盟（WorldWideWebConsortium

）XHTML1.0符合XML標(biāo)準(zhǔn)的HTML1.3HTML文件結(jié)構(gòu)簡單案例示例<html><head>

<title>

簡單的html案例</title>

</head>

<body>

<h1>你好，歡迎!</h1>

請單擊<ahref="ex2-1_1.html">HelloWorld！</a>

</body></html>HTML文件的結(jié)構(gòu)<html><head>

<title>

頁面標(biāo)題</title>

</head>

<body>

頁面文檔部分

</body></html>HTML文檔文件頭文件體文件體<body>之間是瀏覽器主體窗口顯示的內(nèi)容HTML文檔開始標(biāo)記HTML文檔結(jié)束標(biāo)記文檔頭部開始標(biāo)記文檔頭部結(jié)束標(biāo)記標(biāo)題標(biāo)記文檔內(nèi)容開始標(biāo)記文檔內(nèi)容結(jié)束標(biāo)記1.4HTML標(biāo)記、元素、屬性1.4.1

HTML標(biāo)記、元素的概念HTML文件的控制語句成為標(biāo)記（也叫“標(biāo)簽”），標(biāo)記在一對尖括號之間，格式：<標(biāo)記名稱>內(nèi)容</標(biāo)記名稱><h1></h1>你好，HelloWorldh1開始標(biāo)記，由標(biāo)記名及環(huán)繞標(biāo)記名稱的一對“<>”構(gòu)成h1結(jié)束標(biāo)記：/一對閉合的匹配標(biāo)記標(biāo)記控制的“內(nèi)容”HTML元素：開始標(biāo)記+內(nèi)容+結(jié)束標(biāo)記有時(shí)，“HTML標(biāo)記”和“HTML元素”可以互相指代HTML由各種各樣的標(biāo)記構(gòu)成，每一種標(biāo)記代表不同的含義，瀏覽器解析標(biāo)記并進(jìn)行顯示<h1></h1>你好，HelloWorld瀏覽器將<h1>標(biāo)記之間的內(nèi)容顯示成一級標(biāo)題示例1.4.2屬性HTML標(biāo)記可以有（0-多個(gè)）屬性，位于尖括號內(nèi)<標(biāo)記名稱屬性名1=“屬性值”屬性名2=“屬性值”>內(nèi)容</標(biāo)記名稱>屬性為標(biāo)記增加附加的功能，包括屬性名和屬性值屬性值包括在一對單引號或雙引號之間<h1align=“center”>你好，HelloWorld</h1>控制內(nèi)容居中顯示屬性名：align，屬性值：center示例1.4.3標(biāo)記（元素）與屬性的說明空元素嵌套規(guī)范寫法HTML注釋標(biāo)記說明1——空元素沒有內(nèi)容的HTML元素稱為空元素空元素結(jié)束標(biāo)記的兩種寫法<imgsrc=“圖片所在位置”></img><imgsrc=“圖片所在位置”></img><imgsrc=“圖片所在位置”/><font>說明2——嵌套HTML標(biāo)記可以嵌套，但要按順序正確閉合<fontcolor=“red”>

<h1>你好，HelloWorld</font></h1>

<fontcolor=“red”>

<h1>你好，HelloWorld</h1>

</font>

<font>

<h1>

<h1><html><head>

<title>html嵌套</title>

</head>

<body>

<font

color=“red”

>

<h1>HelloWorld!</h1>

</font>

</body></html>嵌套樹htmlheadbodytitlefonth1嵌套樹htmlheadbodytitlefonth1<html><body><font><h1><h1>完全嵌套于<font>中，<font>嵌套于<body>中，<body>嵌套于<html>說明3——規(guī)范寫法HTML標(biāo)記和屬性不嚴(yán)格區(qū)分大小寫，但推薦全部采用小寫，符合XHTML規(guī)范屬性值可以不加一對單引號或雙引號，但推薦全部加上單或雙引號，符合XHTML規(guī)范有的HTML開始標(biāo)記可以不加結(jié)束標(biāo)記，但推薦全部加上結(jié)束標(biāo)記，符合XHTML規(guī)范采用規(guī)范的寫法，可以保證在絕大多數(shù)瀏覽器上正常的顯示寫法舉例<h1align=“center”>你好，HelloHTML</h1><H1ALIGN=“CENTER”>你好，HelloHTML</H1><h1align=center>你好，HelloHTML</h1><h1align=“center”>你好，HelloHTML示例推薦寫法！寫法說明以下寫法都可以<h1>你好，HelloHTML</h1><h1>

你好，HelloHTML</h1>示例說明4——HTML注釋標(biāo)記<!--

注釋內(nèi)容

-->注釋內(nèi)容不在瀏覽器顯示示例HTML標(biāo)記小結(jié)瀏覽器的基本功能就是根據(jù)HTML標(biāo)記的含義，用特殊的效果顯示和控制標(biāo)記之間所引用的內(nèi)容HTML標(biāo)記的組合就是HTML語言學(xué)習(xí)HTML語言就是學(xué)習(xí)各種HTML標(biāo)記的用法HTML語言學(xué)習(xí)方法學(xué)習(xí)方法：不要死記硬背掌握常用HTML標(biāo)記和屬性的用法更多陌生的HTML標(biāo)記和屬性，用到時(shí)查閱看懂自主學(xué)習(xí)：查看優(yōu)秀網(wǎng)頁的源文件二、HTML語言細(xì)節(jié)I——常用標(biāo)記學(xué)習(xí)HTML頁面結(jié)構(gòu)標(biāo)記HTML頁面修飾標(biāo)記超鏈接標(biāo)記多媒體標(biāo)記列表標(biāo)記表格標(biāo)記2.1HTML頁面結(jié)構(gòu)標(biāo)記文件標(biāo)記<html></html>在HTML文檔最外層，表示HTML文件的開始與結(jié)束文件頭標(biāo)記<head></head>：對文件的綜合信息進(jìn)行說明，包含標(biāo)題標(biāo)記<title></title>：在瀏覽器窗口顯示標(biāo)題基地址標(biāo)記<basehref=“URL”/><link>標(biāo)記<style>標(biāo)記<meta>標(biāo)記新浪首頁示例文件主體標(biāo)記<body></body>標(biāo)明文檔的主體部分主要屬性：bgcolor：設(shè)置頁面背景顏色顏色取值：預(yù)定義名字，或十六進(jìn)數(shù)（P67表4-1）預(yù)定義名字：red,blue,green….十六進(jìn)制數(shù)字：#0000ffbackground：設(shè)置背景圖案或圖像文件的URL（相對或絕對路徑）2.2HTML頁面修飾標(biāo)記頁面修飾標(biāo)記用于控制頁面的段落，顯示字符的大小、顏色、字體和屬性等標(biāo)題文字標(biāo)記<hn

align=“l(fā)eft|center|right”>標(biāo)題文字

</hn>HTML定義了六級標(biāo)題，n的范圍1~6align屬性控制標(biāo)題文字的對齊方式，默認(rèn)left示例2.2.1標(biāo)題標(biāo)記<hn>文字樣式標(biāo)記控制文字的字體、大小和顏色——通過屬性控制格式：<font

face=“”size=“”color=“”>文字</font>face屬性定義字體，若定義字體不存在，采用系統(tǒng)默認(rèn)字體size定義大?。?234567實(shí)際對應(yīng)8101214182436（pixels）color定義顏色，顏色值可以用預(yù)定義名字，也可以用十六進(jìn)制數(shù)字（P67表4-1）示例2.2.2文字樣式標(biāo)記<font>顏色的十六進(jìn)制表示：

#0000ffRGB示例2.2.3特殊文字樣式標(biāo)記特定文字樣式標(biāo)記文本樣式描述標(biāo)記粗體<b></b>斜體<i></i>下劃線<u></u>刪除劃線<s></s>上標(biāo)<sup></sup>下標(biāo)<sub></sub>示例段落標(biāo)記<p><p>段落內(nèi)容</p>段落前后自動加空行分隔分層標(biāo)記<div><div>層內(nèi)容</div>作用：劃分區(qū)域塊元素和內(nèi)聯(lián)元素具備自動換行功能的HTML標(biāo)記（元素）稱為塊元素不具備自動換行功能的HTML標(biāo)記（元素)稱為內(nèi)聯(lián)元素示例示例2.2.4段落等標(biāo)記示例換行標(biāo)記<br/>(<br></br>)<br>是空元素?fù)Q行：瀏覽器遇到<br>標(biāo)記會另起一行瀏覽器不把文檔中的“回車換行符”當(dāng)成換行水平線標(biāo)記<hr/>(<hr></hr>)瀏覽器遇到<hr>，在頁面上畫出一條水平線屬性見表4-4預(yù)格式化標(biāo)記<pre>預(yù)格式化標(biāo)記<pre>使HTML文檔中的空格、Tab符、回車換行符起作用示例示例2.2.5HTML特殊字符HTML中的TAB鍵、回車換行、空格，無論有多少，一律只當(dāng)成一個(gè)空格，表示空格采用特殊字符<<>>&& 空格©copyright"“示例2.2.6HTML寫法說明<html><head>

<title>

簡單的html案例</title>

</head>

<body>

<h1>你好，歡迎!</h1>

請單擊<ahref="ex2-1_1.html">HelloWorld！</a>

</body></html>HTML文檔代碼中的空格、制表符和回車換行符的主要作用：文檔清晰、方便閱讀瀏覽器遇到具備自動換行功能的塊元素以及<br/>才顯示換行2.3超鏈接標(biāo)記<a>標(biāo)記創(chuàng)建跳轉(zhuǎn)到另一頁面的超鏈接<a

href=“url”>文字</a>href屬性指定鏈接的目標(biāo)頁面標(biāo)記之間的內(nèi)容（即“文字”）在瀏覽器中顯示為帶下劃線的鏈接標(biāo)簽，點(diǎn)擊后跳轉(zhuǎn)到href屬性指定的url頁面，轉(zhuǎn)向的頁面默認(rèn)在當(dāng)前窗口打開示例<a>標(biāo)記創(chuàng)建跳轉(zhuǎn)到另一頁面的超鏈接<a

href=“url”>文字</a>target屬性:指定target=“_blank”，表明在新窗口打開轉(zhuǎn)向的頁面<ahref=“url”target=“_blank”>文字</a>示例href所指向url的路徑問題：絕對路徑相對路徑：相對當(dāng)前url地址（通俗理解：相對當(dāng)前目錄）

<a

href=“/news/1.html”>查看</a>

<a

href=“1.html”>查看</a>

相對路徑說明myApp1.htmlhttp://localhost:8080/myApp/1.html1.html頁面中的<ahref=“2.html”>轉(zhuǎn)向</a>http://localhost:8080/myApp/2.html2.html轉(zhuǎn)向當(dāng)前目錄下的2.html相對路徑說明myApp1.htmlhttp://localhost:8080/myApp/1.html1.html頁面中的<ahref=“a/2.html”>轉(zhuǎn)向</a>http://localhost:8080/myApp/a/2.html2.htmla相對路徑說明..（兩個(gè)點(diǎn)）代表上一級目錄myApp1.html2.html頁面中<ahref=“url”>轉(zhuǎn)向1.html</a>url如何寫http://localhost:8080/myApp/a/2.html2.htmla<ahref=“../1.html”>轉(zhuǎn)向1.html</a>思考題myApp1.html2.html頁面中<ahref=“url”>轉(zhuǎn)向3.html</a>url如何寫2.htmla3.htmlb思考題答案myApp1.htmlhttp://localhost:8080/myApp/b/3.html2.htmla<ahref=“../b/3.html

”>轉(zhuǎn)向3.html</a>3.htmlb基地址用法文件頭標(biāo)記<head>之間可以包含基地址標(biāo)記<basehref=“URL”></base>用來指定本頁面中所有超鏈接的基路徑，也叫基準(zhǔn)路徑頁面超鏈接中的url在解析時(shí)，會自動加到基準(zhǔn)路徑之后

<base

href=“/”>

</base>

<a

href=“1.html”>

</a>

/1.html示例基地址的用法所有頁面加上基地址標(biāo)記，設(shè)置基準(zhǔn)路徑為當(dāng)前應(yīng)用根路徑如http://localhost:8080/myApp/頁面中超鏈接地址的寫法將自動加在基準(zhǔn)路徑

“http://localhost:8080/myApp/”之后即只需記住相對當(dāng)前應(yīng)用根目錄的路徑即可myApp1.html2.html頁面中<ahref=“url”>轉(zhuǎn)向1.html</a>url如何寫http://localhost:8080/myApp/a/2.html2.htmla<ahref=“1.html”>轉(zhuǎn)向1.html</a>頁面加上<basehref=“http://localhost:8080/myApp/”></base>地址的寫法相對路徑基地址！掌握超鏈接標(biāo)記的其它用法鏈接郵箱鏈接文件鏈接頁面內(nèi)錨點(diǎn)示例2.4頁面多媒體標(biāo)記圖像標(biāo)記<img>格式：<imgsrc=“url”/>（<imgsrc=“url”></img>）src屬性指定圖像文件的URL（絕對路徑或相對路徑）（可選）alt屬性：提示文字（可選）width,height屬性：制定圖像寬度和高度<img>標(biāo)記可以作為<a>元素的內(nèi)容<ahref=“url”><imgsrc=“url”/></a>示例2示例1頁面多媒體標(biāo)記頁面嵌入多媒體（音樂、視頻等）標(biāo)記<embed>格式：<embedsrc=“url”width=“”height=“”/>跑馬燈標(biāo)記<marquee><marqueedirection=“l(fā)eft”>移動內(nèi)容</marquee>示例示例示例2.5列表標(biāo)記無序列表標(biāo)記<ul></ul>列表項(xiàng)標(biāo)記<li></li><ul>需要與<li>一起使用<ul> <li>第一項(xiàng)</li> <li>第二項(xiàng)</li></ul>示例有序列表標(biāo)記<ol></ol>列表項(xiàng)標(biāo)記<li></li><ol>需要與<li>一起使用<ol> <li>第一項(xiàng)</li> <li>第二項(xiàng)</li></ol>示例2.6表格標(biāo)記HTML中使用<table>標(biāo)記建立表格，使用格式：<table></table>表示一個(gè)表格<table>標(biāo)記內(nèi)嵌套多對<tr>

</tr>，每一對<tr></tr>表示一行每一對<tr></tr>內(nèi)嵌套多對<td></td>，每一對<td></td>表示一個(gè)單元格<th></th>是一對特殊的<td></td>，可以用以定義表頭元素，居中顯示為黑體<table>與<tr>、<td>(或<th>)需要一起工作！重要節(jié)次星期一星期二星期三星期四星期五1,2英語高數(shù)網(wǎng)絡(luò)英語數(shù)據(jù)庫3,4Java數(shù)據(jù)庫實(shí)驗(yàn)實(shí)驗(yàn)Java5,6網(wǎng)絡(luò)實(shí)驗(yàn)實(shí)驗(yàn)實(shí)驗(yàn)實(shí)驗(yàn)<table><tr></tr><td>數(shù)據(jù)庫</td></table>示例示例thborder屬性：表格外框的寬度（單位px），默認(rèn)為0（沒外框）align屬性：表格相對頁面的對齊方式（left,center,right)width屬性：表格寬度絕對像素值，比如：500px;占上一層元素寬度百分比，比如：90%height屬性：表格高度絕對像素值占上一層元素高度百分比示例<table>標(biāo)記常用屬性cellpadding屬性：單元格邊框與單元格內(nèi)容的距離（單位px）cellspacing屬性：單元格之間的間距（單位px）bgcolor屬性:表格背景色示例<table>標(biāo)記常用屬性單元格內(nèi)容單元格內(nèi)容<tr>標(biāo)記常用屬性align屬性：控制行內(nèi)文字水平對齊（left,center,right）valign屬性：控制行內(nèi)文字垂直對齊(top,middle,bottom)b

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(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)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論