網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5+CSS3）（徐洪亮第2版） 課件 項(xiàng)目2 走近網(wǎng)頁(yè)架構(gòu)師-HTML語(yǔ)言_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5+CSS3）（徐洪亮第2版） 課件 項(xiàng)目2 走近網(wǎng)頁(yè)架構(gòu)師-HTML語(yǔ)言_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5+CSS3）（徐洪亮第2版） 課件 項(xiàng)目2 走近網(wǎng)頁(yè)架構(gòu)師-HTML語(yǔ)言_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5+CSS3）（徐洪亮第2版） 課件 項(xiàng)目2 走近網(wǎng)頁(yè)架構(gòu)師-HTML語(yǔ)言_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5+CSS3）（徐洪亮第2版） 課件 項(xiàng)目2 走近網(wǎng)頁(yè)架構(gòu)師-HTML語(yǔ)言_第5頁(yè)
已閱讀5頁(yè)，還剩37頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

項(xiàng)目2走近網(wǎng)頁(yè)架構(gòu)師——HTML語(yǔ)言基礎(chǔ)2.1任務(wù)1：制作“走向遠(yuǎn)方”網(wǎng)頁(yè)WEB22.2前端修煉手冊(cè)：HTML語(yǔ)言的概念和基本結(jié)構(gòu)2.3任務(wù)2：制作“我的空間”網(wǎng)頁(yè)前端修煉手冊(cè)：HTML標(biāo)簽的分類及常見(jiàn)的HTML標(biāo)簽?zāi)芰μ嵘褐谱鳌袄诸悘奈易銎稹本W(wǎng)頁(yè)能力挑戰(zhàn)：制作“菜鳥加油”網(wǎng)頁(yè)目錄2.1任務(wù)1：制作“走向遠(yuǎn)方”網(wǎng)頁(yè)WEB32.1任務(wù)1：制作“走向遠(yuǎn)方”網(wǎng)頁(yè)了解HTML語(yǔ)言的基本概念。掌握HTML語(yǔ)言的基本結(jié)構(gòu)，能夠使用HTML語(yǔ)言編寫簡(jiǎn)單網(wǎng)頁(yè)。認(rèn)識(shí)style屬性，能夠使用style屬性設(shè)置行內(nèi)樣式。知識(shí)技能目標(biāo)WEB42.2前端修煉手冊(cè)：HTML語(yǔ)言的概念和基本結(jié)構(gòu)WEB5一個(gè)網(wǎng)頁(yè)對(duì)應(yīng)于一個(gè)HTML文件HTML文件以.html為擴(kuò)展名2.2.1

HTML語(yǔ)言的概念WEB6構(gòu)成網(wǎng)頁(yè)文檔的主要語(yǔ)言英文全稱：Hyper

Text

Markup

Language中文全稱：超文本標(biāo)記語(yǔ)言[!]<!doctype

html>文檔類型<html></html>整個(gè)文檔<head></head>文檔頭部<meta>文檔元信息<title></title>文檔標(biāo)題<body></body>文檔主體<!doctype

html><html><head><meta

charset="utf-8"><title>無(wú)標(biāo)題文檔</title></head><body></body></html>①文檔基本結(jié)構(gòu)標(biāo)簽介紹文檔基本結(jié)構(gòu)2.2.2

HTML文檔的基本結(jié)構(gòu)②其它可用在head部分的標(biāo)簽<base>為頁(yè)面上的所有鏈接規(guī)定默認(rèn)地址或目標(biāo)<link>定義文檔與外部資源的關(guān)系，如鏈接樣式表<script></script>定義客戶端腳本，如Javascript<style></style>

為文檔定義樣式信息2.2.2

HTML文檔的基本結(jié)構(gòu)2.3任務(wù)2：制作“我的空間”網(wǎng)頁(yè)WEB92.3任務(wù)2：制作“我的空間”網(wǎng)頁(yè)熟練掌握HTML的基本結(jié)構(gòu)和常見(jiàn)標(biāo)簽的用法。能夠熟練使用行內(nèi)樣式表。能夠使用HTML語(yǔ)言編寫簡(jiǎn)單網(wǎng)頁(yè)。知識(shí)技能目標(biāo)WEB102.4前端修煉手冊(cè)：HTML標(biāo)簽的分類及常見(jiàn)的HTML標(biāo)簽WEB11HTML語(yǔ)言的核心是標(biāo)簽2.4.1

HTML標(biāo)簽的分類①單標(biāo)簽和標(biāo)簽對(duì)標(biāo)簽是成對(duì)出現(xiàn)的格式：<標(biāo)簽名>內(nèi)容</標(biāo)簽名>樣例：<p>段落內(nèi)容</p>雙標(biāo)簽單獨(dú)使用的標(biāo)簽格式：<標(biāo)簽名>樣例：<hr>單標(biāo)簽提示：標(biāo)簽不分大小寫，<body>和<BODY>表示的意思相同，推薦使用小寫。2.4.1

HTML標(biāo)簽的分類②塊級(jí)元素、行級(jí)元素和行級(jí)塊元素不可設(shè)置寬度、高度和上、下內(nèi)、外邊距（左、右方向的內(nèi)、外邊距設(shè)置有效）其寬度和高度由其內(nèi)容自動(dòng)填充與其他行內(nèi)元素共處一行例：a、span、i、lable行內(nèi)元素（inline）可以設(shè)置寬度、高度、內(nèi)邊距和外邊距獨(dú)占一行不設(shè)置寬度和高度，則寬度默認(rèn)為父級(jí)元素的寬度例：div、p、h1、h2……h(huán)n、ol、ul、dl、li、form、table塊元素（block）可以設(shè)置寬度、高度和內(nèi)外邊距可以與其他行內(nèi)元素、內(nèi)聯(lián)元素共處一行例：input、img行內(nèi)塊元素（inline-block）2.4.1

HTML標(biāo)簽的分類②塊級(jí)元素、行級(jí)元素和行級(jí)塊元素可以在行內(nèi)樣式或CSS樣式中改變?cè)氐膁isplay屬性將三種元素進(jìn)行轉(zhuǎn)換。display:block；(將元素變?yōu)閴K元素)display:inline；(將元素變?yōu)樾袃?nèi)元素)display:inline-block；（將元素變?yōu)樾袃?nèi)塊元素）元素之間的轉(zhuǎn)化DIV標(biāo)簽<div></div>標(biāo)簽對(duì)定義HTML文檔中的分區(qū)或節(jié)（division/section）。它可以把文檔分割為獨(dú)立的、不同的部分。2.4.2常見(jiàn)的HTML標(biāo)簽<div

style="color:#F00;"><h3>This

is

a

header</h3><p>This

is

a

paragraph.</p></div>代碼網(wǎng)頁(yè)效果15DIV標(biāo)簽<div></div>標(biāo)簽對(duì)定義HTML文檔中的分區(qū)或節(jié)（division/section）。它可以把文檔分割為獨(dú)立的、不同的部分。2.4.2常見(jiàn)的HTML標(biāo)簽<h1>NEWS

WEBSITE</h1><p>some

text.

some

text.

some

text...</p><div

class="news"><h2>News

headline

1</h2><p>some

text.

some

text.

some

text...</p></div><div

class="news"><h2>News

headline

2</h2><p>some

text.

some

text.

some

text...</p></div>代碼網(wǎng)頁(yè)效果16標(biāo)題標(biāo)簽<h1></h1>標(biāo)簽對(duì)定義了最大的一號(hào)標(biāo)題，<h6></h6>標(biāo)簽對(duì)則定義了最小的六號(hào)標(biāo)題。2.4.2常見(jiàn)的HTML標(biāo)簽<h1>這是一號(hào)標(biāo)題</h1><h2>這是二號(hào)標(biāo)題</h2><h3>這是三號(hào)標(biāo)題</h3><h4>這是四號(hào)標(biāo)題</h4><h5>這是五號(hào)標(biāo)題</h5><h6>這是六號(hào)標(biāo)題</h6>代碼網(wǎng)頁(yè)效果17段落與換行標(biāo)簽2.4.2常見(jiàn)的HTML標(biāo)簽<p>愛(ài)好１：我喜歡散步</p><p>愛(ài)好２：我喜歡旅游</p>HTML段落是通過(guò)<p></p>標(biāo)簽對(duì)定義的。代碼網(wǎng)頁(yè)效果18段落與換行標(biāo)簽要在不產(chǎn)生一個(gè)新段落的情況下達(dá)到換行效果，需要使用<br>標(biāo)簽。2.4.2常見(jiàn)的HTML標(biāo)簽<p>愛(ài)好１：我喜歡<br>散步</p><p>愛(ài)好２：我喜歡旅游</p>代碼網(wǎng)頁(yè)效果19水平線標(biāo)簽水平線標(biāo)簽<hr>是一個(gè)單標(biāo)簽，作用是在HTML頁(yè)面中創(chuàng)建一條水平線來(lái)分隔網(wǎng)頁(yè)中的內(nèi)容。2.4.2常見(jiàn)的HTML標(biāo)簽<p>操作內(nèi)容</p><hr><p>操作技巧</p><hr>代碼網(wǎng)頁(yè)效果20圖像標(biāo)簽插入圖像<img>作為HTML實(shí)體標(biāo)簽存在，而背景圖像則是CSS的修飾內(nèi)容。2.4.2常見(jiàn)的HTML標(biāo)簽<img

src="images/flower.png"width="157"height="77"alt="這是圖像"/>代碼網(wǎng)頁(yè)效果21替換文本屬性。alt屬性是必需的屬性，它規(guī)定在圖像無(wú)法顯示時(shí)的替代文本。用戶無(wú)法查看圖像的原因可能有以下幾種：網(wǎng)速太慢src屬性中的錯(cuò)誤瀏覽器禁用圖像用戶使用的是屏幕閱讀器等altsrc指圖像的寬度和高度，常用單位為px（像素）width和height2.4.2常見(jiàn)的HTML標(biāo)簽圖像標(biāo)簽<img>標(biāo)簽主要包含以下幾個(gè)屬性：指存儲(chǔ)圖像的位置，

包括路徑和圖像名稱。2.4.2常見(jiàn)的HTML標(biāo)簽圖像標(biāo)簽圖像路徑：絕對(duì)路徑和相對(duì)路徑絕對(duì)路徑含義<img

src="D:/myweb/images/flower.png"/>圖像flower.png在D盤myweb文件夾下images子文件夾里<img

src="/images/flower.png"/>圖像flower.png在域名為的服務(wù)器中的images文件夾里2.4.2常見(jiàn)的HTML標(biāo)簽圖像標(biāo)簽圖像路徑：絕對(duì)路徑和相對(duì)路徑網(wǎng)頁(yè)位置圖像位置和名稱

相對(duì)路徑

含義d:\myweb圖像與網(wǎng)頁(yè)在同d:\myweb\flower.png

<img

src="flower.png"/>一目錄圖像在網(wǎng)頁(yè)下一d:\myweb\images\flower.png

<img

src="images/flower.png"/>層目錄圖像在網(wǎng)頁(yè)上一d:\flower.png

<img

src="../flower.png"/>層目錄圖像與網(wǎng)頁(yè)在同d:\images\flower.png

<img

src="../images/flower.png"/>

一層但不在同一目錄d:\mywebd:\mywebd:\myweb25超鏈接標(biāo)簽超鏈接可以使一個(gè)HTML文檔與另一個(gè)文檔相連接，即從一個(gè)網(wǎng)頁(yè)跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)，或從一個(gè)網(wǎng)頁(yè)的某部分跳轉(zhuǎn)到其它部分。2.4.2常見(jiàn)的HTML標(biāo)簽<a

href=""target="_blank">搜狐</a>代碼網(wǎng)頁(yè)效果搜狐鏈接目標(biāo)的打開方式。targethref2.4.2常見(jiàn)的HTML標(biāo)簽<a>標(biāo)簽主要包含以下幾個(gè)屬性：是必需的屬性，屬性值為超鏈接的目標(biāo)文件的路徑。超鏈接的相對(duì)路徑寫法與

圖像的相對(duì)路徑寫法相似。超鏈接標(biāo)簽2.4.2常見(jiàn)的HTML標(biāo)簽超圖鏈像接標(biāo)簽超鏈接相對(duì)路徑應(yīng)用樣例網(wǎng)頁(yè)位置鏈接目標(biāo)位置和名稱相對(duì)路徑

含義d:\mywebd:\myweb\test.htmld:\myweb\links\

test.htmld:\

test.htmld:\aaa\

test.htmlhref="test.html"

目標(biāo)與網(wǎng)頁(yè)在同一目錄href="links/test.html"

目標(biāo)在網(wǎng)頁(yè)下一層目錄href="../test.html"

目標(biāo)在網(wǎng)頁(yè)上一層目錄目標(biāo)與網(wǎng)頁(yè)在同一層但href="../aaa/test.html"不在同一目錄d:\mywebd:\mywebd:\myweb2.4.2常見(jiàn)的HTML標(biāo)簽超圖鏈像接標(biāo)簽target可能的屬性值及含義相對(duì)路徑含義target="_blank"保留當(dāng)前窗口，在新窗口中打開鏈接的目標(biāo)文件。target="_self"在當(dāng)前窗口打開鏈接的目標(biāo)文件。target="_parent"在父窗口中打開鏈接的目標(biāo)文件。（主要用于框架網(wǎng)頁(yè)）target="_top"以整個(gè)瀏覽器作為窗口打開鏈接的目標(biāo)文件。（突破頁(yè)面框架的限制）為圖像添加的超鏈接，點(diǎn)擊圖像進(jìn)入其它頁(yè)面。格式：<a

href="鏈接目標(biāo)路徑及文件名"><img

src="圖像路徑及名稱"></a>圖像超鏈接文字超鏈接2.4.2常見(jiàn)的HTML標(biāo)簽超鏈接類型為文字添加的超鏈接，

點(diǎn)擊文字進(jìn)入其它頁(yè)面。格式：<a

href="鏈接目標(biāo)路徑及文件名">鏈接文字</a>超鏈接標(biāo)簽在同一頁(yè)面上跳轉(zhuǎn)的鏈接錨點(diǎn)超鏈接創(chuàng)建錨點(diǎn)超鏈接分兩步：

1．目標(biāo)位置命名錨點(diǎn)

格式：<a

name="錨點(diǎn)名稱">目標(biāo)位置</a>2．標(biāo)題位置添加超鏈接格式：<a

href="#錨點(diǎn)名稱">標(biāo)題名</a>為文字或圖像添加指向電子郵件的超鏈接。格式：<a

href="mailto:郵箱名">聯(lián)系我</a>電子郵件超鏈接將文本設(shè)為斜體，不具備強(qiáng)調(diào)作用<i>…</i><em>…</em>2.4.2常見(jiàn)的HTML標(biāo)簽文本格超式鏈化接標(biāo)簽常見(jiàn)的HTML文本格式化標(biāo)簽有以下幾種：表示強(qiáng)調(diào)，默認(rèn)將文本斜體顯示。表示語(yǔ)義強(qiáng)調(diào)，默認(rèn)將文本加粗顯示。<strong>…</strong>將文本加粗，不具備強(qiáng)調(diào)作用。<b>…</b>無(wú)序列表標(biāo)簽，其中的列表項(xiàng)由<li>…</li>標(biāo)簽定義<ul>…</ul><ol>…</ol>2.4.2常見(jiàn)的HTML標(biāo)簽HTML列表標(biāo)簽分為：有序列表標(biāo)簽，其中的列表項(xiàng)由<li>…</li>標(biāo)簽定義。定義列表標(biāo)簽，由項(xiàng)目及項(xiàng)目的注釋組成，其中的項(xiàng)目由<dt>…</dt>標(biāo)簽定義，每個(gè)項(xiàng)目的具體注釋由<dd>…</dd>標(biāo)簽定義。<dl>…</dl>列表標(biāo)簽列表標(biāo)簽2.4.2常見(jiàn)的HTML標(biāo)簽三種列表的用法及效果：<ol><li>咖啡</li><li>茶</li><li>牛奶</li></ol><ul><li>咖啡</li><li>茶</li><li>牛奶</li></ul><dl><dt>咖啡</dt><dd>黑色飲料</dd><dt>茶</dt><dd>棕色飲料</dd><dt>牛奶</dt><dd>白色飲料</dd></dl>代碼網(wǎng)頁(yè)效果32表格的行標(biāo)簽，標(biāo)記表

格中一行的開始和結(jié)束。trtable2.4.2常見(jiàn)的HTML標(biāo)簽簡(jiǎn)單的

HTML表格由以下標(biāo)簽對(duì)組成：表格標(biāo)簽，標(biāo)記表格的開始和結(jié)束表頭標(biāo)簽，一般用于表格行或列的標(biāo)題，默認(rèn)加粗顯示。th表格標(biāo)簽表格的單元格標(biāo)簽，標(biāo)記表格中一個(gè)單元格的開始和結(jié)束。td<table>…</table><tr>…</tr><th>…</th><td>…</td>列表標(biāo)簽2.4.2常見(jiàn)的HTML標(biāo)簽<table

width="200"

border="1"><tr><th>日期</th><th>考試科目</th></tr><tr><td>星期一</td><td>語(yǔ)文</td></tr><tr><td>星期二</td><td>數(shù)學(xué)</td></tr></table>簡(jiǎn)單的HTML表格樣例：代碼網(wǎng)頁(yè)效果34表格主體（正文）標(biāo)簽。用于組合HTML表格的主體內(nèi)容。tbody標(biāo)題標(biāo)簽用來(lái)定義表格標(biāo)題

caption標(biāo)簽必須緊隨

table標(biāo)簽之后。<caption>…</caption>caption2.4.2常見(jiàn)的HTML標(biāo)簽復(fù)雜表格可能用到的HTML標(biāo)簽對(duì)用于對(duì)HTML表格中的表頭內(nèi)容進(jìn)行分組thead表格標(biāo)簽用于對(duì)HTML表格中的表注（頁(yè)腳）內(nèi)容進(jìn)行分組tfoot<tbody>…<tbody><thead></thead><tfoot></tfoot><tbody>應(yīng)該與<thead>和<tfoot>元素結(jié)合起來(lái)使用。如果使用<thead>、<tfoot>以及<tbody>，就必須三個(gè)都用。出現(xiàn)次序：<thead>、<tfoot>、<tbody>提示列表標(biāo)簽2.4.2常見(jiàn)的HTML標(biāo)簽復(fù)雜的HTML表格樣例：<table

border="1"><thead><tr><th>Month</th><th>Savings</th></tr></thead><tfoot><tr><td>Sum</td><td>$180</td></tr></tfoot><tbody><tr><td>January</td><td>$100</td></tr></tbody></table>代碼網(wǎng)頁(yè)效果36HTML5常用結(jié)構(gòu)標(biāo)簽<header>…</header>定義文檔的頁(yè)眉（介紹信息）。<footer>…</footer>定義文檔或節(jié)的頁(yè)腳。頁(yè)腳通常包含文檔的作者、版權(quán)信息、使用條款鏈接、聯(lián)系信息等。<article>…</article>定義獨(dú)立的自包含內(nèi)容。一篇文章應(yīng)有其自身的意義，應(yīng)該有可能獨(dú)立于站點(diǎn)的其余部分而仍然是完整的。<article>的潛在來(lái)

溫馨提示

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

評(píng)論

0/150

提交評(píng)論