《Web前端開發基礎》課件-1認識網頁與網站_第1頁
《Web前端開發基礎》課件-1認識網頁與網站_第2頁
《Web前端開發基礎》課件-1認識網頁與網站_第3頁
《Web前端開發基礎》課件-1認識網頁與網站_第4頁
《Web前端開發基礎》課件-1認識網頁與網站_第5頁
已閱讀5頁，還剩28頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

2014年10月29日，萬維網聯盟宣布，經過8年的艱辛努力，HTML5標準規范終于制定完成，并公開發布。HTML5優勢1（1）解決了跨瀏覽器問題在HTML5之前，各大瀏覽器廠商為了爭奪市場占有率，會在各自的瀏覽器中增加各種各樣的功能，并且不具有統一的標準。使用不同的瀏覽器，常常看到不同的頁面效果。在HTML5中，納入了所有合理的擴展功能，具備良好的跨平臺性能。針對不支持新標簽的老式IE瀏覽器，只需簡單地添加JavaScript代碼就可以使用新的元素。HTML5優勢1（2）新增了多個新特性新的特殊內容元素，比如header、nav、section、article、footer。新的表單控件，比如calendar、date、time、email、url、search。用于繪畫的canvas元素。用于多媒體的video和audio元素。對本地離線存儲的更好的支持。地理位置、拖拽、攝像頭等API。HTML5優勢1（3）用戶優先的原則安全機制的設計

為確保HTML5的安全，在設計HTML5時做了很多針對安全的設計。HTML5引入了一種新的基于來源的安全模型，該模型不僅易用，而且針對不同的API（ApplicationProgrammingInterface—應用程序編程接口）都通用。（4）表現和內容分離

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

為了實現這些簡化操作，HTML5規范需要比以前更加細致、精確。為了避免造成誤解，HTML5對每一個細節都有著非常明確的規范說明，不允許有任何的歧義和模糊出現。HTML5瀏覽器支持情況1現今瀏覽器的許多新功能都是從HTML5標準中發展而來的。

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

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

溫馨提示

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

評論

0/150

提交評論