《Web前端開發(fā)基礎(chǔ)》課件-1認(rèn)識(shí)網(wǎng)頁與網(wǎng)站_第1頁
《Web前端開發(fā)基礎(chǔ)》課件-1認(rèn)識(shí)網(wǎng)頁與網(wǎng)站_第2頁
《Web前端開發(fā)基礎(chǔ)》課件-1認(rèn)識(shí)網(wǎng)頁與網(wǎng)站_第3頁
《Web前端開發(fā)基礎(chǔ)》課件-1認(rèn)識(shí)網(wǎng)頁與網(wǎng)站_第4頁
《Web前端開發(fā)基礎(chǔ)》課件-1認(rèn)識(shí)網(wǎng)頁與網(wǎng)站_第5頁
已閱讀5頁，還剩28頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

《Web前端基礎(chǔ)》課程認(rèn)識(shí)網(wǎng)頁與網(wǎng)站第一部分Knowledge支撐知識(shí)網(wǎng)頁（WebPage）是網(wǎng)站中的一個(gè)基本單位，它是通過超文本標(biāo)記語言（HTML）編寫的，可以在瀏覽器中顯示和訪問，網(wǎng)頁通常包含文本、圖片、音頻、視頻等多媒體元素，以及鏈接到其他網(wǎng)頁的超鏈接。網(wǎng)站（Website）是一個(gè)由多個(gè)網(wǎng)頁（WebPage）組成的集合，通常包含一個(gè)或多個(gè)主題，提供相關(guān)的信息和服務(wù)，網(wǎng)站可以是個(gè)人的、企業(yè)的、政府的等各種類型，用于展示、交流、銷售等多種目的。網(wǎng)頁(web)與網(wǎng)站1按網(wǎng)頁在網(wǎng)站中的位置進(jìn)行分類，可以分為主頁和內(nèi)頁；主頁：用戶進(jìn)入網(wǎng)站時(shí)看到的第一個(gè)頁面就是主頁（homepage）。內(nèi)頁：通過主頁中的超級(jí)鏈接，打開的網(wǎng)頁就是內(nèi)頁。按網(wǎng)頁的表現(xiàn)形式進(jìn)行分類，可以分為靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁。靜態(tài)網(wǎng)頁：指用HTML語言編寫的網(wǎng)頁，其制作簡(jiǎn)單易學(xué)，但缺乏靈活性，在瀏覽網(wǎng)頁時(shí)瀏覽者和服務(wù)器不發(fā)生交互。動(dòng)態(tài)網(wǎng)頁：使用ASP、PHP、JSP、ASP.NET等程序生成的網(wǎng)頁，可以與瀏覽者進(jìn)行交互，也稱為交互式網(wǎng)頁，如可以收集瀏覽者填寫的表單信息等。網(wǎng)頁的相關(guān)概念及基本要素1網(wǎng)頁的基本要素（1）頁面標(biāo)題頁面標(biāo)題網(wǎng)頁基本要素1（2）網(wǎng)站標(biāo)志（3）網(wǎng)頁尺寸1024*768下，網(wǎng)頁寬度保持在1002以內(nèi)，如果滿框顯示的話,高度是612-615之間.就不會(huì)出現(xiàn)水平滾動(dòng)條和垂直滾動(dòng)條。1440*900下，網(wǎng)頁寬度保持在1420以內(nèi)，頁面居中，如果滿框顯示的話,高度是800-810之間.就不會(huì)出現(xiàn)水平滾動(dòng)條和垂直滾動(dòng)條。網(wǎng)頁網(wǎng)站的相關(guān)概念及基本要素1（4）導(dǎo)航欄（5）版權(quán)區(qū)網(wǎng)頁網(wǎng)站的相關(guān)概念及基本要素1網(wǎng)頁與HTML1HTML是HyperTextMarkupLanguage的縮寫，中文翻譯為“超文本標(biāo)記語言”，是制作網(wǎng)頁的最基本語言。HTML的出現(xiàn)由來已久，1993年HTML首次以因特網(wǎng)的形式發(fā)布。隨著HTML的發(fā)展，W3C（WorldWideWebConsortium，萬維網(wǎng)聯(lián)盟）掌握了對(duì)HTML規(guī)范的控制權(quán)，負(fù)責(zé)后續(xù)版本的制定工作。然而，在快速發(fā)布了HTML的4個(gè)版本后，HTML迫切需要添加新的功能，制定新規(guī)范。在2004年，一些瀏覽器廠商聯(lián)合成立了WHATWG工作組。2006年，W3C組建了新的HTML工作組，明智地采納了WHATWG的意見，并于2008年發(fā)布了HTML5的工作草案。

2014年10月29日，萬維網(wǎng)聯(lián)盟宣布，經(jīng)過8年的艱辛努力，HTML5標(biāo)準(zhǔn)規(guī)范終于制定完成，并公開發(fā)布。HTML5優(yōu)勢(shì)1（1）解決了跨瀏覽器問題在HTML5之前，各大瀏覽器廠商為了爭(zhēng)奪市場(chǎng)占有率，會(huì)在各自的瀏覽器中增加各種各樣的功能，并且不具有統(tǒng)一的標(biāo)準(zhǔn)。使用不同的瀏覽器，常?？吹讲煌捻撁嫘ЧＴ贖TML5中，納入了所有合理的擴(kuò)展功能，具備良好的跨平臺(tái)性能。針對(duì)不支持新標(biāo)簽的老式IE瀏覽器，只需簡(jiǎn)單地添加JavaScript代碼就可以使用新的元素。HTML5優(yōu)勢(shì)1（2）新增了多個(gè)新特性新的特殊內(nèi)容元素，比如header、nav、section、article、footer。新的表單控件，比如calendar、date、time、email、url、search。用于繪畫的canvas元素。用于多媒體的video和audio元素。對(duì)本地離線存儲(chǔ)的更好的支持。地理位置、拖拽、攝像頭等API。HTML5優(yōu)勢(shì)1（3）用戶優(yōu)先的原則安全機(jī)制的設(shè)計(jì)

為確保HTML5的安全，在設(shè)計(jì)HTML5時(shí)做了很多針對(duì)安全的設(shè)計(jì)。HTML5引入了一種新的基于來源的安全模型，該模型不僅易用，而且針對(duì)不同的API（ApplicationProgrammingInterface—應(yīng)用程序編程接口）都通用。（4）表現(xiàn)和內(nèi)容分離

為了避免可訪問性差、代碼高復(fù)雜度、文件過大等問題，HTML5規(guī)范中更細(xì)致、清晰地分離了表現(xiàn)和內(nèi)容。但是考慮到HTML5的兼容性問題，一些陳舊的表現(xiàn)和內(nèi)容的代碼還是可以兼容使用的。HTML已經(jīng)盡量將“網(wǎng)頁的內(nèi)容結(jié)構(gòu)”與“網(wǎng)頁的排版布局”分開，它的主要原則如下。(1)用標(biāo)簽元素描述網(wǎng)頁的內(nèi)容結(jié)構(gòu)。(2)用CSS描述網(wǎng)頁的排版布局。(3)用JavaScript描述網(wǎng)頁的事件處理，即通過鼠標(biāo)或鍵盤在網(wǎng)頁元素上進(jìn)行動(dòng)作(如單擊、雙擊、輸入)后執(zhí)行的程序。HTML5優(yōu)勢(shì)1（5）化繁為簡(jiǎn)的優(yōu)勢(shì)新的簡(jiǎn)化的字符集聲明。新的簡(jiǎn)化的DOCTYPE。簡(jiǎn)單而強(qiáng)大的HTML5API。以瀏覽器原生能力替代復(fù)雜的JavaScript代碼。

為了實(shí)現(xiàn)這些簡(jiǎn)化操作，HTML5規(guī)范需要比以前更加細(xì)致、精確。為了避免造成誤解，HTML5對(duì)每一個(gè)細(xì)節(jié)都有著非常明確的規(guī)范說明，不允許有任何的歧義和模糊出現(xiàn)。HTML5瀏覽器支持情況1現(xiàn)今瀏覽器的許多新功能都是從HTML5標(biāo)準(zhǔn)中發(fā)展而來的。

目前常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等，通過對(duì)這些主流Web瀏覽器的發(fā)展策略的調(diào)查，發(fā)現(xiàn)它們都在支持HTML5上采取了措施。《Web前端基礎(chǔ)》課程使用HTML5制作第一個(gè)頁面任務(wù)：創(chuàng)建第1個(gè)HTML5頁面第一部分Knowledge開發(fā)工具任務(wù)效果展示2網(wǎng)頁制作過程中，為了開發(fā)方便，通常我們會(huì)選擇一些較便捷的工具，如Editplus、notepad++、VScode、Dreamweaver等。實(shí)際工作中，最常用的網(wǎng)頁制作工具是HBuilder，課程中的案例將全部使用HBuilderX。接下來使用HBuilder來創(chuàng)建一個(gè)HTML5頁面。2Hbuilder的工作界面22Hbuilder的工作界面3HTML標(biāo)記什么是HTML標(biāo)記？3HTML標(biāo)記帶有“<>”符號(hào)的元素被稱為HTML標(biāo)記例如：<html>、<head>、<body>都是HTML標(biāo)記也稱為HTML標(biāo)簽或HTML元素3HTML標(biāo)記通常將HTML標(biāo)記分為兩大類，分別是“雙標(biāo)記”與“單標(biāo)記”雙標(biāo)記單標(biāo)記雙標(biāo)記也稱體標(biāo)記，是指由開始和結(jié)束兩個(gè)標(biāo)記符組成的標(biāo)記。單標(biāo)記也稱空標(biāo)記，是指用一個(gè)標(biāo)記符號(hào)即可完整地描述某個(gè)功能的標(biāo)記。<標(biāo)記名/>表示該標(biāo)記的作用開始，一般稱為“開始標(biāo)記表示該標(biāo)記的作用結(jié)束，一般稱為“結(jié)束標(biāo)記”<標(biāo)記名>內(nèi)容</標(biāo)記名>HTML標(biāo)記3HTML注釋標(biāo)記如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標(biāo)記?；菊Z法格式<!--注釋語句-->標(biāo)記屬性3標(biāo)記的屬性位置語法格式字體位置字號(hào)顏色<標(biāo)記名屬性1="屬性值1"屬性2="屬性值2"…>內(nèi)容</標(biāo)記名><hrcolor="red"size="3px"width="80%"/>HTML標(biāo)記31.<!DOCTYPE>標(biāo)簽<!DOCTYPE>聲明必須位于HTML文檔中的第一行，也就是位于<html>標(biāo)簽之前。該標(biāo)簽告知瀏覽器文檔所使用的HTML規(guī)范。在所有HTML文檔中規(guī)定!DOCTYPE是非常重要的，這樣瀏覽器就能了解預(yù)期的文檔類型。網(wǎng)頁基本結(jié)構(gòu)標(biāo)簽42.<html>標(biāo)簽此元素可告知瀏覽器其自身是一個(gè)HTML文檔。xmlns屬性：是用來定義xmlnamespace（命名空間）的，如果需要使用符合XML規(guī)范的XHTML文檔，則應(yīng)該在文檔中的<html>標(biāo)簽中至少使用一個(gè)xmlns屬性，以指定整個(gè)文檔所使用的主要命名空間。

<html>與</html>標(biāo)簽限定了文檔的開始點(diǎn)和結(jié)束點(diǎn)，在它們之間是文檔的頭部和主體。文檔的頭部由<head>標(biāo)簽定義，而主體由<body>標(biāo)簽定義。網(wǎng)頁基本結(jié)構(gòu)標(biāo)簽43.<head>標(biāo)記<head>標(biāo)記用于定義文檔的頭部，它是所有頭部元素的容器。<head>中的元素可以引用<title>標(biāo)題、<meta/>元信息、<link>外部文件、<style>樣式信息。文檔的頭部描述了文檔的各種屬性和信息，包括文檔的、在Web中的位置以及和其他文檔的關(guān)系等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會(huì)真正作為內(nèi)容顯示給讀者。網(wǎng)頁基本結(jié)構(gòu)標(biāo)簽44.<meta>標(biāo)簽<meta>元素可提供有關(guān)頁面的元信息（meta-information），比如針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞。5.<title>標(biāo)簽<title>標(biāo)簽定義文檔的標(biāo)題，它是head部分中唯一必需的元素。瀏覽器會(huì)以特殊的方式來使用標(biāo)題，并且

溫馨提示

  • 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)論