網頁概述
優點
- 不需要安裝
- 無需更新
- 跨平台
使用的語言
- HTML、CSS、JavaScript
網頁簡史
-
歷史
- 蒂姆·伯納斯-李爵士萬維網發明人
- 從1990年代初的基本文本編輯的網頁開始，1990年代中期的在線網頁建設，到上世紀90年代末崛起的flash，再到后來的CSS和Javasvript的崛起，直到現在web 2.0時代鼎盛時期，網頁設計經歷了多次變革。
-
瀏覽器和網頁
-
瀏覽器將編寫的網頁源代碼渲染成我們想要的樣子
-
瀏覽器問題：
存在很多不同的瀏覽器
萬維網的初期，網頁編寫沒有標准
-
-
W3C的建立
- 伯納斯1994年建立萬維網聯盟（W3C）
- 制定了網頁開發標准，使同一個網頁在不同的瀏覽器中有相同的效果
網頁結構
- 根據W3C標准，一個網頁主要由三部分組成：結構、表現、行為。
- 結構 html用於描述頁面的結構
- 表現 CSS用於控制頁面中元素的樣式，美化頁面
- 行為 JavaScript用於響應用戶操作
HTML
- HTML(Hypertext Markup Language) 超文本標記語言
- HTML使用標簽的形式來標識網頁中不同的組成部分
- 超文本指的是超鏈接，使用超鏈接可以從一個頁面，跳轉到另一個頁面
基本語法
-
注釋：HTML中的注釋是
<!-- 注釋內容 --> -
標簽：
在HTML中用<標簽名> </標簽名>來標識特定的內容
-
標簽的屬性
-
屬性是一個名值對（x=y)
-
屬性和標簽名或其他屬性使用空格隔開
-
屬性根據文檔來編寫，有些屬性有屬性值，有些沒有，有屬性值的要用引號引起來
代碼示例
<h1> 這是我的<font color="red" size="3">第一個</font>網頁 </h1>
-
-
-
文檔聲明（doctype)
-
文檔聲明用來告知瀏覽器當前網頁的版本
-
html5的文檔聲明
<!doctype html> 或 <!DOCTYPE HTML>
-
-
網頁基本結構
<!--文檔聲明，聲明當前網頁的版本HTML5版本--> <!doctype html> <!--html的根標簽（元素），網頁中的所有內容都要寫在根元素的里邊--> <html> <!-- head是網頁的頭部，head中的內容不會在網頁中直接出現，主要用來幫助瀏覽器或搜索引擎來解析網頁--> <head> <!--meta標簽用來設置網頁的元數據，這里meta用來 設置網頁的字符集，避免亂碼問題--> <meta charset="utf-8"> <!--title 中的內容會顯示在瀏覽器的標題欄，搜索引擎會主要根據title中的內容來判斷網頁的主要內容--> <title>網頁的標題</title> </head> <!--body是html的子元素，表示網頁的主體，網頁中所有可見的內容都寫在body中--> <body> </body> </html> -
實體
-
在網頁中編寫多個空格默認情況會自動被瀏覽器解析為一個空格
-
在HTML中，有些特殊符號不能直接書寫。例：多個連續空格，大於號/小於號
-
使用實體（轉義字符）來書寫這些特殊符號
實體語法：
空格 > 大於號 < 小於號 ©版權符號
-
CSS概述
- 本身含義：層疊樣式表
- 網頁實際上是一個多層結構，通過css可以分別為網頁的每一層來設置樣式，最終我們所看到的是網頁的最上邊一層
- 總之，CSS用來設置網頁中的元素樣式