網(wǎng)頁設(shè)計(jì)與制作教程課件 項(xiàng)目1 HTML5的基本結(jié)構(gòu)_第1頁
網(wǎng)頁設(shè)計(jì)與制作教程課件 項(xiàng)目1 HTML5的基本結(jié)構(gòu)_第2頁
網(wǎng)頁設(shè)計(jì)與制作教程課件 項(xiàng)目1 HTML5的基本結(jié)構(gòu)_第3頁
網(wǎng)頁設(shè)計(jì)與制作教程課件 項(xiàng)目1 HTML5的基本結(jié)構(gòu)_第4頁
網(wǎng)頁設(shè)計(jì)與制作教程課件 項(xiàng)目1 HTML5的基本結(jié)構(gòu)_第5頁
已閱讀5頁，還剩19頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

項(xiàng)目1HTML5的基本結(jié)構(gòu)項(xiàng)目描述

HTML是HypertextMarkupLanguage的縮寫，中文翻譯為：超文本標(biāo)記語言。使用HTML編寫的文檔稱為網(wǎng)頁，目前最新版本是HTML5，HTML是網(wǎng)頁設(shè)計(jì)的基礎(chǔ)語言，本項(xiàng)目將通過使用html5的基本結(jié)構(gòu)及其常用的標(biāo)簽，完成一張簡單網(wǎng)頁制作，效果如圖1-1所示。為后面各項(xiàng)目的學(xué)習(xí)打下基礎(chǔ)。項(xiàng)目目標(biāo)知識目標(biāo)1、掌握VisualStudioCode編輯器安裝的方法；2、掌握HTML5的基本結(jié)構(gòu)；3、了解頭部標(biāo)簽的作用；4、掌握網(wǎng)頁標(biāo)題的用法；5、掌握標(biāo)題標(biāo)簽、水平標(biāo)簽、段落標(biāo)簽、換行標(biāo)簽的寫法。技能目標(biāo)1、使用VisualStudioCode編輯器制作簡單網(wǎng)頁；2、能熟練使用標(biāo)題標(biāo)簽、水平標(biāo)簽、段落標(biāo)簽、換行標(biāo)簽。項(xiàng)目分析

(1)、制作網(wǎng)頁需要用到編輯器，掌握該編輯使用方法。(2)、在html5文件相應(yīng)的標(biāo)簽位置編寫網(wǎng)頁的內(nèi)容。(3)、使用h1~h6標(biāo)簽顯示標(biāo)題、<hr>標(biāo)簽顯示水平線、<p>標(biāo)簽顯示段落文字的效果。知識引入

子任務(wù)1認(rèn)識網(wǎng)頁與網(wǎng)站1、網(wǎng)頁與網(wǎng)站瀏覽網(wǎng)頁時在瀏覽器中看到的一個個頁面就是網(wǎng)頁，而多個相關(guān)的網(wǎng)頁的集合就構(gòu)成了一個網(wǎng)站。網(wǎng)頁，是網(wǎng)站中的任何一個頁面，通常是HTML（標(biāo)準(zhǔn)通du用標(biāo)記語言下的zhi一個應(yīng)用）格式（文件擴(kuò)展名為html、或htm、或asp、或aspx、或php、或jsp等）。網(wǎng)址：用于定位某個網(wǎng)站某個頁面的一串字符。如：/nba.shtml。主頁：訪問網(wǎng)站時，默認(rèn)打開的第一個頁面就是主頁也叫首頁。如：(搜狐網(wǎng))、(百度網(wǎng))、(優(yōu)酷網(wǎng))等。2、瀏覽網(wǎng)頁的工具-瀏覽器瀏覽器：用于打開顯示網(wǎng)頁的軟件。最常見的是Windows系統(tǒng)自帶的IE瀏覽器。還有火狐Firefox、谷歌、360安全瀏覽器、遨游、騰訊TT等等。3、網(wǎng)頁的基本元素網(wǎng)頁的基本元素大體是相同的一般包括網(wǎng)頁標(biāo)題、文本、圖象、超鏈接、動畫、表單、音頻視頻等內(nèi)容組成。網(wǎng)頁的組成元素如下圖1-2所示。圖1-2網(wǎng)頁的組成元素子任務(wù)2了解html5的基本結(jié)構(gòu)html5的基本結(jié)構(gòu)如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>網(wǎng)頁標(biāo)題</title></head><body>

網(wǎng)頁內(nèi)容</body>從以上的代碼可以看出，html標(biāo)簽總是成對出現(xiàn)，每一對標(biāo)簽一般都有一個開始的標(biāo)記（如<body>），也有一個結(jié)束的標(biāo)記（如</body>）,標(biāo)簽的標(biāo)記要用一對尖括號括起來，并且結(jié)束的標(biāo)記總是在開始的標(biāo)記前加一個斜杠。一個基本的HTML5網(wǎng)頁由以下幾分部組成，如圖1-3所示。(1）內(nèi)容類型HTML5的文件擴(kuò)展名為“.html”或“.htm”，內(nèi)容類型（ContentType）仍然為“text/html”。（2）<!DOCTYPEhtml>文檔的聲明，該聲明必須位于HTML5文檔中的第一行，也就是位于<html>標(biāo)簽之前。在HTML5中，文檔的類型聲明方法如下：<!DOCTYPEhtml>（3）<html>標(biāo)簽出現(xiàn)在文檔的開始，每一個html文檔都是從<html>開始，結(jié)束于</html>。（4）<head>標(biāo)簽出現(xiàn)在文檔的開頭部分。<head>與</head>之間的內(nèi)容不會在瀏覽器的文檔窗口顯示，但是其間的元素有特殊重要的意義。(5)<meta>標(biāo)簽meta標(biāo)簽元素定文檔的字符編碼，其寫法如下：<metacharset="UTF-8">meta標(biāo)簽中name屬性語法格式是：<metaname="參數(shù)"content="具體的描述">其中name屬性共有以下幾種參數(shù)。(①-③為常用屬性)①keywords(關(guān)鍵字)說明：用于告訴搜索引擎，你網(wǎng)頁的關(guān)鍵字。舉例：<metaname="keywords"content="PHP中文網(wǎng)">②description(網(wǎng)站內(nèi)容的描述)說明：用于告訴搜索引擎，你網(wǎng)站的主要內(nèi)容。舉例：<metaname="description"content="php中文網(wǎng)提供大量免費(fèi)、原創(chuàng)、高清的php視頻教程">③viewport(移動端的窗口)說明：這個屬性常用于設(shè)計(jì)移動端網(wǎng)頁。在用bootstrap,AmazeUI等框架時候都有用過viewport。<metaname="viewport"content="width=device-width,initial-scale=1">width=device-width：表示寬度是設(shè)備屏幕的寬度initial-scale=1.0：表示初始的縮放比例。④http-equiv屬性，http-equiv顧名思義，相當(dāng)于HTTP的作用。meta標(biāo)簽中http-equiv屬性語法格式是：<metahttp-equiv="參數(shù)"content="具體的描述">常用的結(jié)構(gòu)是：<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/>說明：X-UA-Compatible用于告知瀏覽器以何種版本來渲染頁面。（一般都設(shè)置為最新模式，在各大框架中這個設(shè)置也很常見。）content="IE=edge,chrome=1"：指定IE和Chrome使用最新版本渲染當(dāng)前頁面。（6）<title>標(biāo)簽定義HTML文檔的標(biāo)題。<title>與</title>之間的內(nèi)容將顯示在瀏覽器窗口的標(biāo)題欄。（7）<body>標(biāo)簽表明是HTML文檔的主體部分。在<body>與</body>之間，通常都會有很多其它元素,如：在頁面中的文字、圖像、動畫、超鏈接；這些元素和元素屬性構(gòu)成HTML文檔的主體部分。

圖1-3HTML的基本結(jié)構(gòu)(8)注釋的作用是便于開發(fā)人員理解代碼的作用，在文檔中完全看不見，只有通過查看源文件才能看見，故注釋不會影響頁面效果?；靖袷剑篐TML中的格式為“<!–注釋語句–>”；CSS中的格式為”/*注釋語句*/"。子任務(wù)3安裝VisualStudioCode編輯器這里可直接點(diǎn)擊DownloadforWindows下載。下載完成后是一個exe文件，本文以VSCodeUserSetup-x64-1.39.2為例做簡單安裝介紹。（具體過程見教材）VisualStudioCode是一個輕量但功能強(qiáng)大的源代碼編輯器，可在桌面上運(yùn)行，適用于Windows，macOS和Linux。它內(nèi)置了對JavaScript，TypeScript和Node.js的支持，并具有豐富的其他語言（如C++，C＃，Java，Python，PHP，Go）和運(yùn)行時（如.NET和Unity）的擴(kuò)展生態(tài)系統(tǒng)。下載VisualStudioCode官方頁面點(diǎn)擊：/,如圖1-4所示。圖1-4

VisualStudioCode官方頁面子任務(wù)4使用VisualStudioCode編輯器

VisualStudioCode內(nèi)置html開發(fā)神器Emmet，Emmet是前端開發(fā)快速輸入代碼的一種方式，作為文本編輯器的插件存在，可以幫助用戶快速編寫HTML和CSS代碼，加快Web前端開發(fā)的速度。子任務(wù)5制作簡單的HTML5網(wǎng)頁說明：網(wǎng)頁文件命名規(guī)則：①文件后綴名為*.htm或*.html；②無空格；③無特殊符號（例如&符號），只可以有下劃線“_”，只可以為英文、數(shù)字；④區(qū)分大小寫；⑤首頁文件名默認(rèn)為：index.htm或index.html；⑥用拼音、英文、數(shù)字命名，莫用中文命名。子任務(wù)6使用Chrome瀏覽器的開發(fā)者工具瀏覽器是網(wǎng)頁運(yùn)行的環(huán)境，因此瀏覽器的類型也是在網(wǎng)頁設(shè)計(jì)時遇到的一個問題。由于各個軟件廠商對HMTL標(biāo)準(zhǔn)的支持有所不同，導(dǎo)致同樣的網(wǎng)頁在不同的瀏覽器下有不同的表現(xiàn)。設(shè)計(jì)出來的網(wǎng)頁在不同瀏覽器上效果上一致，HTML5可以讓問題簡單化，具備好跨瀏覽器特性。為了能更好的展示網(wǎng)頁效果，本書中所有的網(wǎng)頁代碼都在Chrome瀏器下運(yùn)行。Chrome開發(fā)者工具（DevTools或者DeveloperTools）是GoogleChrome瀏覽器中內(nèi)置的組網(wǎng)頁制作和調(diào)試工具。開發(fā)者工具為網(wǎng)頁開發(fā)人員提供了訪問瀏覽器及其網(wǎng)頁應(yīng)用程序內(nèi)部代碼。使用開發(fā)者工具有效地跟蹤布局問題，設(shè)置JavaScript斷點(diǎn)，并獲得代碼優(yōu)化策略。子任務(wù)7使用換行標(biāo)簽

換行標(biāo)簽<br>是一個單標(biāo)簽,它沒有結(jié)束標(biāo)簽，是英文break的縮寫，作用是將文字在一個段內(nèi)強(qiáng)制換行。一個<br>標(biāo)簽代表一個換行，連續(xù)多個標(biāo)簽可以實(shí)現(xiàn)多次換行。使用換行標(biāo)簽時，在需要換行的位置添加<br>標(biāo)簽即可子任務(wù)8使用段落標(biāo)簽

在HTML文檔中，使用<p>標(biāo)簽來標(biāo)記一段文字。段落標(biāo)簽是雙標(biāo)簽，即<p></p>,在<p>開始標(biāo)簽和</p>結(jié)束標(biāo)簽之間的內(nèi)容形成一個段落。如果省略結(jié)束標(biāo)簽，從<p>標(biāo)簽開如，直到遇見下一個段落標(biāo)簽之前的文本，都在一個段落內(nèi)。任務(wù)9使用標(biāo)題標(biāo)簽、水平線標(biāo)簽1、標(biāo)題標(biāo)簽<h1>~<h6>在HTML文檔中，文本的結(jié)構(gòu)除了以行和段出現(xiàn)之外，往往還包含有各種級別的標(biāo)題。各種級別的標(biāo)題由<h1>~<h6>元素來定義，<h1>~<h6>標(biāo)簽中的字母h是英文header的簡稱。作為標(biāo)題，它們的重要性是有區(qū)別的，其中<h1>標(biāo)題的重要性最高，<h6>標(biāo)題最低。一般一個頁面只能有一個<h1>,而<h2>~<h6>可以有多個。2、水平線標(biāo)簽<hr>標(biāo)簽在HTML頁面中創(chuàng)建一條水平線。水平分隔線（horizontalrule）可以在視覺上將文檔分隔成各個部分。項(xiàng)目實(shí)施

步驟1：開始→“程序”→“visualStudiocode”啟動編輯器,點(diǎn)擊“文件”菜單點(diǎn)擊“新建文件”，如圖1-23所示；圖1-23新建文件步驟2：單擊狀態(tài)欄的“純文本”在“選擇語言模式”對話框中選擇“HTML(html)”，如圖1-24所示；圖1-24

選擇HTML(html)步驟3：英文輸入“！”或“html:5”,然后按Tab鍵或Ctrl+E組合鍵，即可出現(xiàn)如下所示的代碼；<!DOCTYPE

html><html

lang="en"><head>

<meta

charset="UTF-8">

<meta

name="viewport"

content="width=device-width,

initial-scale=1.0">

<title>Document</title></head><body>

</body></html>步驟4：修改<title>網(wǎng)頁標(biāo)題、<meta>元素信息和注釋內(nèi)容，并在網(wǎng)頁的主體中添加內(nèi)容，代碼如下；<!DOCTYPE

html><html

lang="en"><head>

<meta

charset="UTF-8">

<!--設(shè)置瀏覽器的閱讀編碼-->

<meta

name="keywords"

content="web前端設(shè)計(jì)">

<!--設(shè)置網(wǎng)站的關(guān)鍵字-->

<meta

name="description"

content="web前端設(shè)計(jì)，和有夢的人一起學(xué)習(xí)HTML5、CSS3和JavaScript技術(shù)">

<!--網(wǎng)站描述-->

<title>HTML5語言特點(diǎn)</title>

<!--設(shè)置網(wǎng)站首頁的標(biāo)題--></head><body>

<h3>THML5

開發(fā)語言有哪些特點(diǎn)？</h3>

<hr>

<h4>1、HTML語法較弱</h4>

<p>在w3c制定的HTML5規(guī)范中，對于HTML5在語法結(jié)構(gòu)上的規(guī)格限制是較松散的，如、或在瀏覽器中具有同樣的功能，是不區(qū)分大小寫的。另外，也沒有嚴(yán)格要求每個控制標(biāo)記都要有相對應(yīng)的結(jié)束控制標(biāo)記。</p>

<h4>2、HTML5編寫簡單</h4>

<p>即使用戶沒有任何編程經(jīng)驗(yàn)，也可以輕易使用HTML來設(shè)計(jì)網(wǎng)頁，HTML5的使用只需將文本加上一些標(biāo)記(Tags)即可。</p></body></html>步驟5：再次執(zhí)行“文件”菜單中的“保存”命令或使用Ctrl+S組合鍵保存文件，保存

溫馨提示

  • 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)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論