HTML5 CSS3網(wǎng)頁設(shè)計(jì)與制作 課件 （呂麥絲） 第2章 HTML基礎(chǔ)_第1頁
HTML5 CSS3網(wǎng)頁設(shè)計(jì)與制作 課件 （呂麥絲） 第2章 HTML基礎(chǔ)_第2頁
HTML5 CSS3網(wǎng)頁設(shè)計(jì)與制作 課件 （呂麥絲） 第2章 HTML基礎(chǔ)_第3頁
HTML5 CSS3網(wǎng)頁設(shè)計(jì)與制作 課件 （呂麥絲） 第2章 HTML基礎(chǔ)_第4頁
HTML5 CSS3網(wǎng)頁設(shè)計(jì)與制作 課件 （呂麥絲） 第2章 HTML基礎(chǔ)_第5頁
已閱讀5頁，還剩24頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第2章HTML基礎(chǔ)學(xué)習(xí)目標(biāo)認(rèn)識(shí)HTML，了解HTML發(fā)展歷史01掌握HTML文檔的基本結(jié)構(gòu)02掌握文本標(biāo)題、段落、換行等其他標(biāo)記的使用03簡(jiǎn)單網(wǎng)頁的設(shè)計(jì)與應(yīng)用04本章任務(wù)任務(wù)1HTML概念任務(wù)2HTML文檔基本結(jié)構(gòu)任務(wù)3HTML文檔標(biāo)簽屬性任務(wù)4案例實(shí)戰(zhàn)——第一個(gè)HTML網(wǎng)頁設(shè)計(jì)文檔任務(wù)1HTML概念HTML簡(jiǎn)介

什么是HTML？HTML是HyperTextMarkupLanguage的英文縮寫，即超文本標(biāo)記語言，它是用來描述網(wǎng)頁的一種語言。HTML不是一種編程語言，而是一種標(biāo)記語言，標(biāo)記語言是一套標(biāo)記標(biāo)簽，使用標(biāo)記標(biāo)簽構(gòu)成HTML文檔，并用來描述網(wǎng)頁，所以HTML文檔也被稱為網(wǎng)頁。所謂超文本，有兩層含義：1、超越文本限制

網(wǎng)頁中可以加入圖片、聲音、動(dòng)畫、多媒體等內(nèi)容。2、超級(jí)鏈接文本

網(wǎng)頁中的文件可以跳轉(zhuǎn)到另一個(gè)文件，甚至可以與世界各地主機(jī)上的文件相連接。常用的瀏覽器HTML文檔能獨(dú)立于各種操作系統(tǒng)平臺(tái)，訪問它只需要一個(gè)web瀏覽器。Web瀏覽器的作用是讀取HTML文檔，并以網(wǎng)頁的形式顯示出它們。瀏覽器不會(huì)顯示HTML標(biāo)簽，而是使用標(biāo)簽來解釋頁面的內(nèi)容。因此，我們所看到的網(wǎng)頁，是瀏覽器對(duì)HTML文檔進(jìn)行解釋的結(jié)果。同樣，我們也可以通過瀏覽器直接查看一個(gè)網(wǎng)頁的HTML源代碼，在瀏覽器菜單欄上選擇“查看源文件”即可。常用的瀏覽器有IE（新版本的Windows操作系統(tǒng)改為Edge）、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。平時(shí)稱為五大瀏覽器，瀏覽器圖標(biāo)如下：HTML發(fā)展歷史1990年，由于對(duì)Web未來發(fā)展的遠(yuǎn)見，TimBerners-Lee提出了超文本的概念，并于第二年在SGML(en-US)的基礎(chǔ)上將其正式定義為一個(gè)標(biāo)記語言。IETF(en-US)于1993年正式開始制定HTML規(guī)范，并在經(jīng)歷了幾個(gè)版本的草案后于1995年發(fā)布了HTML2.0版本。1994年，Berners-Lee為了Web發(fā)展而成立了W3C(en-US)。1996年，W3C接管了HTML的標(biāo)準(zhǔn)化工作，并在1年后發(fā)布了HTML3.2推薦標(biāo)準(zhǔn)。1999年，HTML4.0發(fā)布，并在2000年成為ISO(en-US)標(biāo)準(zhǔn)。2014年發(fā)布了HTML5標(biāo)準(zhǔn)的最終版。任務(wù)2HTML文檔基本結(jié)構(gòu)任務(wù)描述設(shè)計(jì)“HelloHTML”頁面，效果圖如圖2-2-1所示：圖2-2-1任務(wù)實(shí)現(xiàn)任務(wù)分析實(shí)現(xiàn)思路主體包含一級(jí)標(biāo)題顯示文字內(nèi)容‘“HelloHTML”頁面’。網(wǎng)頁title包含文字內(nèi)容“HTML基礎(chǔ)”。meta關(guān)鍵字設(shè)置屬性值為“網(wǎng)頁，計(jì)算機(jī)”。任務(wù)實(shí)現(xiàn)頁面基本結(jié)構(gòu)HTML的每個(gè)頁面都包含一些基本的結(jié)構(gòu)標(biāo)簽，頁面內(nèi)容也就是在這些基本標(biāo)簽中書寫的，下面我們通過一個(gè)示例來看看一個(gè)頁面的基本結(jié)構(gòu)有哪些。示例內(nèi)容：第一個(gè)HTML網(wǎng)頁示例參考代碼如下：上面這段代碼表示了HTML文檔的基本結(jié)構(gòu)，主要使用了<!DOCTYPE>、<html>、<head>、<title>以及<body>等標(biāo)簽。頁面基本結(jié)構(gòu)標(biāo)簽說明<!DOCTYPE>標(biāo)簽用法：文檔聲明標(biāo)簽，為單標(biāo)簽，告知web瀏覽器當(dāng)前頁面使用了哪種HTML版本編寫代碼，此處使用的是HTML5版本。聲明文檔必不可少，而且必須位于HTML文檔的第一行。語法格式如下：<!DOCTYPEhtml><html>標(biāo)簽用法：表示頁面編寫的代碼都是HTML代碼。該標(biāo)簽為雙標(biāo)簽，直到</html>結(jié)束。除了文檔聲明標(biāo)簽外的所有標(biāo)簽都必須寫在<html></html>中間。語法格式如下：<html></html>頭部標(biāo)簽用法：<head>是HTML文檔的頭部標(biāo)簽,表示頁面的“頭部”，該標(biāo)簽也為雙標(biāo)簽，到</head>結(jié)束。在此標(biāo)簽中可以插入用以說明文件的標(biāo)題和一些公共屬性的標(biāo)簽，如title、meta等。語法格式如下：<head></head>主體標(biāo)簽用法：<body>用來定義主體標(biāo)簽，表示頁面的“身體”，它也是雙標(biāo)簽，到</body>結(jié)束，頁面中要展示的絕大部分內(nèi)容都寫在<body></body>之間。語法格式如下：<body>

<h1></h1></body><title>標(biāo)簽：表示頁面的標(biāo)題，該標(biāo)簽為雙標(biāo)簽，如要指定HTML文檔的網(wǎng)頁標(biāo)題（它將顯示在瀏覽器窗口頂部標(biāo)題欄），就要在頭部?jī)?nèi)容中提供有關(guān)信息。用title元素來指定網(wǎng)頁標(biāo)題，即在<title></title>之間寫上網(wǎng)頁標(biāo)題，如“標(biāo)題：我的第一個(gè)網(wǎng)站”。<meta>標(biāo)簽：一般用來定義頁面信息的名稱、關(guān)鍵字等，可提供有關(guān)頁面的元信息（meta-information），該標(biāo)簽為單標(biāo)簽，并且一個(gè)頭部中可以有多個(gè)<meta>標(biāo)簽。META標(biāo)簽分兩大部分：HTTP標(biāo)題信息(HTTP-EQUIV)和頁面描述信息(NAME)。例如加入關(guān)鍵字Keywords會(huì)自動(dòng)被大型搜索網(wǎng)站自動(dòng)搜集，也可以設(shè)定頁面格式及刷新等等。這些定義的內(nèi)容并不在網(wǎng)頁頁面中顯示。但他們會(huì)有一些特殊的作用。如：<metaname="Keywords"content="網(wǎng)頁,計(jì)算機(jī)">可以定義在網(wǎng)頁發(fā)布后，如在網(wǎng)站搜索“網(wǎng)頁，計(jì)算機(jī)”等文字內(nèi)容時(shí)，搜索到該頁面。任務(wù)實(shí)現(xiàn)“HelloHTML”頁面實(shí)現(xiàn)<!DOCTYPEhtml><html><head><title>HTML基礎(chǔ)</title>/*標(biāo)題定義*/<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><metaname="Keywords"content="網(wǎng)頁,計(jì)算機(jī)">/*關(guān)鍵字定義*/</head><body><h1>“HelloHTML”頁面</h1>/*頁面文字定義*/</body></html>任務(wù)描述任務(wù)分析任務(wù)3HTML文檔標(biāo)簽屬性任務(wù)描述

本任務(wù)主要講解屬性和屬性值的設(shè)置。通過對(duì)水平線的屬性和屬性值進(jìn)行不同的設(shè)置，呈現(xiàn)出形態(tài)各異的水平分隔線。通過本案例，同學(xué)們可以熟悉頁面的文檔結(jié)構(gòu)，并且對(duì)標(biāo)簽的屬性和屬性值的設(shè)置，有一個(gè)初步的了解。任務(wù)3：設(shè)計(jì)水平分隔線效果圖任務(wù)實(shí)現(xiàn)任務(wù)分析實(shí)現(xiàn)思路1.在頁面里面寫入文字和水平線。2.對(duì)水平線的屬性和屬性值進(jìn)行設(shè)置，使其呈現(xiàn)出案例效果。任務(wù)實(shí)現(xiàn)基本語法1、HTML標(biāo)簽HTML中由左尖角號(hào)（<）、內(nèi)容以及右尖角號(hào)（>）組成的用于描述功能的符號(hào)稱為“標(biāo)記”。使用<>包圍的目的是將HTML文檔標(biāo)記與普通文本進(jìn)行區(qū)分。如常用的<html>、<head>、<body>等都是標(biāo)記。標(biāo)記通常分為單標(biāo)記和雙標(biāo)記兩種類型。2、屬性和屬性值HTML通過標(biāo)記告訴瀏覽器如何展示網(wǎng)頁，如<br>告訴瀏覽器顯示一個(gè)換行。另外還可以為某些元素附加一些信息，這些附加信息被稱為屬性（attribute）。基礎(chǔ)案例操作1.單標(biāo)記和雙標(biāo)記示例（1）單標(biāo)記單標(biāo)記僅單獨(dú)使用就可以表達(dá)完整的意思。語法格式：<標(biāo)記名稱>語法說明：最常用的單標(biāo)記是<br>,它表示換行。（2）雙標(biāo)記雙標(biāo)記由首標(biāo)記和尾標(biāo)記兩部分構(gòu)成，它必須成對(duì)使用。首標(biāo)記告訴Web瀏覽器從此處開始執(zhí)行該標(biāo)記所表示的功能。尾標(biāo)記告訴Web瀏覽器在這里結(jié)束該標(biāo)記。語法格式：<標(biāo)記名稱>內(nèi)容</標(biāo)記名稱>參考代碼如下：<B><I>文字加粗和傾斜演示</I></B>注意：這里的“b”是“粗體（bold）”的意思標(biāo)記可以包含標(biāo)記，即標(biāo)記可以成對(duì)嵌套，但是不能交叉地嵌套。基礎(chǔ)案例操作2.屬性語法示例給頁面插入一條粗細(xì)為5px，顏色為紅色的水平線參考代碼如下：<hrsize="5px"color=red>如上面案例所示，通過標(biāo)簽的屬性和屬性值的設(shè)置，可以對(duì)標(biāo)簽進(jìn)行一些個(gè)性化設(shè)計(jì)，屬性基本語法：<標(biāo)記名稱屬性名1="屬性值"屬性名2="屬性值">語法說明：屬性應(yīng)寫在首標(biāo)記內(nèi)，并且和標(biāo)記名之間有一個(gè)空格分隔。例如，上例中hr標(biāo)記中，size為屬性，5px為屬性值，屬性值可以直接書寫，也可以使用""括起來。以下寫法也是正確的：<hrsize=5px>基礎(chǔ)案例操作3.注釋注釋標(biāo)簽用于在HTML源碼中插入注釋。注釋會(huì)被瀏覽器忽略?？梢允褂米⑨寣?duì)程序代碼進(jìn)行解釋，適當(dāng)?shù)淖⑨寣?duì)以后代碼的閱讀和維護(hù)產(chǎn)生很大的幫助。語法格式：<!--注釋內(nèi)容-->語法說明：左括號(hào)后需要寫一個(gè)驚嘆號(hào)，右括號(hào)前就不需要了。基礎(chǔ)案例操作4.編寫HTML文件的注意事項(xiàng)“<”和“>”是任何標(biāo)記的開始和結(jié)束。元素的標(biāo)記要用這對(duì)尖括號(hào)括起來，并且結(jié)束的標(biāo)記總是在開始的標(biāo)記前加一個(gè)斜杠“/”；元素必須被關(guān)閉。標(biāo)記可以嵌套使用，但不能嵌套標(biāo)記。任何回車符和空格在HTML代碼中都不起作用。為了代碼清晰，建議不同的標(biāo)記都單獨(dú)占一行；標(biāo)記中可以放置各種屬性，屬性值都用“"”括起來；標(biāo)簽名和屬性建議都用小寫字母。編寫代碼，一般應(yīng)該使用縮進(jìn)風(fēng)格，以便更好的理解頁面的結(jié)構(gòu)，便于閱讀和維護(hù)。基礎(chǔ)案例操作4.編寫HTML文件的注意事項(xiàng)為了使瀏覽器能正常瀏覽網(wǎng)頁，在用記事本或別的HTML開發(fā)工具編寫好HTML文檔后，在保存HTML時(shí)，對(duì)HTML文件的命名要注意以下幾點(diǎn)：（1）文件的擴(kuò)展名為.htm或.html結(jié)束，建議統(tǒng)一使用html作為文件名的后綴；（2）文件名中只可由英文字母、數(shù)字或下劃線組成；（3）文件名中不要包含特殊符號(hào)，比如空格、$等；（4）文件名區(qū)分大小寫；（5）網(wǎng)站首頁文件名一般是index.html或default.html。任務(wù)實(shí)現(xiàn)<!DOCTYPEhtml><html><metacharset="UTF-8"><head><title>水平分隔線</title></head><body><center>關(guān)于我們<hr>五十個(gè)不同的分子，<hrsize="6">/*設(shè)置水平線粗細(xì)*/在不同狀態(tài)下進(jìn)入了同一容器，<hrwidth="40%">/*設(shè)置水平線長(zhǎng)度*/這就組成了我們的家——多媒體專業(yè)。<hrwidth="60"align="left">/*設(shè)置水平線長(zhǎng)度和對(duì)齊方式*/在這個(gè)容器里，我們碰撞著，摩擦著，產(chǎn)生了各色各樣的靈感，活力與情緒。<hrsize="6"width="30%"align="center"noshadecolor="red">/*設(shè)置水平線粗細(xì)、長(zhǎng)度、對(duì)齊方式、陰影形式和顏色*/</center></body></html>任務(wù)描述任務(wù)分析任務(wù)4案例實(shí)戰(zhàn)——第一個(gè)HTML網(wǎng)頁設(shè)計(jì)文檔案例描述根據(jù)提供的圖片，實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圖文混排頁面，要求圖片和文字居中顯示，并且圖片和文字由水平線分隔，最終效果參考圖2-4-1圖2-4-1案例分析實(shí)現(xiàn)思路根據(jù)效果圖，可以看出最終效果就是圖片和文字在頁面中居中顯示的效果。應(yīng)該首先把圖片、水平線、文字添加進(jìn)去，再通過屬性和屬性值的設(shè)置將其水平居中。案例實(shí)現(xiàn)<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title></head><body><center><imgsrc="img/b.png"/></center>/*圖片設(shè)置居中*/<hr>/*水平標(biāo)記*/<palign="cent

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(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ǔ)空間，僅對(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)論