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

下載本文檔

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

文檔簡介

HTMLHtml標記HTML（一）本篇內(nèi)容HTML語言概述HTML語言細節(jié)I一、HTML語言概述HTML簡介HTML歷史HTML文件結(jié)構(gòu)HTML標記、元素、屬性1.1HTML簡介HTML（HyperTextMarkupLanguage）超文本標記語言超文本（文字+圖片+音視頻+鏈接等）標記語言（瀏覽器根據(jù)標記顯示內(nèi)容）是為瀏覽器設(shè)計的語言用于在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標準的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>

頁面標題</title>

</head>

<body>

頁面文檔部分

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

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

注釋內(nèi)容

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

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

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

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

#0000ffRGB示例2.2.3特殊文字樣式標記特定文字樣式標記文本樣式描述標記粗體<b></b>斜體<i></i>下劃線<u></u>刪除劃線<s></s>上標<sup></sup>下標<sub></sub>示例段落標記<p><p>段落內(nèi)容</p>段落前后自動加空行分隔分層標記<div><div>層內(nèi)容</div>作用：劃分區(qū)域塊元素和內(nèi)聯(lián)元素具備自動換行功能的HTML標記（元素）稱為塊元素不具備自動換行功能的HTML標記（元素)稱為內(nèi)聯(lián)元素示例示例2.2.4段落等標記示例換行標記<br/>(<br></br>)<br>是空元素換行：瀏覽器遇到<br>標記會另起一行瀏覽器不把文檔中的“回車換行符”當成換行水平線標記<hr/>(<hr></hr>)瀏覽器遇到<hr>，在頁面上畫出一條水平線屬性見表4-4預格式化標記<pre>預格式化標記<pre>使HTML文檔中的空格、Tab符、回車換行符起作用示例示例2.2.5HTML特殊字符HTML中的TAB鍵、回車換行、空格，無論有多少，一律只當成一個空格，表示空格采用特殊字符<<>>&& 空格©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超鏈接標記<a>標記創(chuàng)建跳轉(zhuǎn)到另一頁面的超鏈接<a

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

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

<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)向當前目錄下的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相對路徑說明..（兩個點）代表上一級目錄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基地址用法文件頭標記<head>之間可以包含基地址標記<basehref=“URL”></base>用來指定本頁面中所有超鏈接的基路徑，也叫基準路徑頁面超鏈接中的url在解析時，會自動加到基準路徑之后

<base

href=“/”>

</base>

<a

href=“1.html”>

</a>

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

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

</tr>，每一對<tr></tr>表示一行每一對<tr></tr>內(nèi)嵌套多對<td></td>，每一對<td></td>表示一個單元格<th></th>是一對特殊的<td></td>，可以用以定義表頭元素，居中顯示為黑體<table>與<tr>、<td>(或<th>)需要一起工作！重要節(jié)次星期一星期二星期三星期四星期五1,2英語高數(shù)網(wǎng)絡(luò)英語數(shù)據(jù)庫3,4Java數(shù)據(jù)庫實驗實驗Java5,6網(wǎng)絡(luò)實驗實驗實驗實驗<table><tr></tr><td>數(shù)據(jù)庫</td></table>示例示例thborder屬性：表格外框的寬度（單位px），默認為0（沒外框）align屬性：表格相對頁面的對齊方式（left,center,right)width屬性：表格寬度絕對像素值，比如：500px;占上一層元素寬度百分比，比如：90%height屬性：表格高度絕對像素值占上一層元素高度百分比示例<table>標記常用屬性cellpadding屬性：單元格邊框與單元格內(nèi)容的距離（單位px）cellspacing屬性：單元格之間的間距（單位px）bgcolor屬性:表格背景色示例<table>標記常用屬性單元格內(nèi)容單元格內(nèi)容<tr>標記常用屬性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)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論