目錄
一、網頁的概述
1.網頁名詞解釋
2.web 標準
3.瀏覽器
二、HTML5
1.HTML5的優勢
2.HTML5全新的結構
三、標簽
1.標簽的屬性
2.標簽關系
3.文本標簽
文本格式化標簽
文本語意標簽
文本控制標簽
4.影像標簽
常見的圖片格式：
影像標簽的屬性
相對路徑和絕對路徑
四、HTML基本結構
1.第一個HTML網頁
2.骨架標簽的決議
一、網頁的概述
網頁 ：網頁主要由文字、影像和超鏈接（超鏈接為單擊可以跳轉的網頁元素）等元素構成，當然除了這些元素，網頁中還可以包含音頻、視頻以及影片等，
靜態網頁：
用戶無論何時何地訪問，網頁都會顯示固定的資訊，除非網頁源代碼被重新修改上傳， 靜態網頁更新不方便，但是訪問速度快，
動態網頁：
顯示的內容則會隨著用戶操作和時間的不同而變化， 動態網頁可以和服務器資料庫進行實時的資料交換，
1.網頁名詞解釋
| 名詞 | 名詞釋義 |
|---|---|
| Internet網路 | 就是通常所說的互聯網，是由一些使用公用語言互相通信的計算機連接而成的網路， |
| WWW | WWW（英文World Wide Web的縮寫）中文譯為“萬維網”是Intertnet提供的一種網頁瀏覽服務， |
| URL | URL（英文Uniform Resource Locator的縮寫）中文譯為“統一資源定位符” URL其實就是Web地址，俗稱“網址”， |
| DNS | DNS （英文Domain Name System的縮寫）是域名決議系統， |
| HTTP和HTTPS | HTTP (英文Hypertext transfer protocol的縮寫) 中文譯為超文本傳輸協議，是一種詳細規定了瀏覽器和萬維網服務器之間互相HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網路協議，要比HTTP協議安全，通信的規則， |
| Web | Web通常指互聯網的使用環境，但對于網站制作者來說，它是一系列技術的復合總稱，通常稱之為網頁， |
| W3C組織 | W3C（英文World Wide Web Consortium的縮寫）中文譯為“萬維網聯盟”，萬維網聯盟是國際最著名的標準化組織 |
2.web 標準
什么是web標準？
不是某一個標準，而是由W3C和其他標準化組織制定的一系列標準的集合， 包含我們所熟悉的HTML、XHTML、CSS、Javascript等等，
| 結構標準 | （對網頁元素進行整理和分類，主要包括HTML、XML和XHTML，）相當于房子的框架 |
| 表現標準 | （設定網頁元素的版式、顏色，大小等外觀，主要指CSS）相當于房子的裝修 |
| 行為標準 | （網頁模型的定義及互動的撰寫，主要包括DOM和ECMAScript）相當于房子內部設備 |
3.瀏覽器
常用瀏覽器：IE、火狐和谷歌是目前互聯網上的三大瀏覽器，
瀏覽器硬核：瀏覽器內核是瀏覽器最核心的部分，負責對網頁語法的解釋并渲染網頁（也就是顯示網頁效果），是渲染引擎（標準叫法）的通俗叫法，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式資訊，不同的瀏覽器內核對網頁撰寫語法的解釋也不同，因此同一網頁在不同的內核的瀏覽器里的渲染（顯示）效果也可能不同，
二、HTML5
1.HTML5的優勢
HTML5作為HTML的最新版本，是HTML的傳遞和延續，經歷HTML4.0、XHTML再到HTML5從某種意義上講，這是HTML超文本標簽語言的更新與規范程序，因此，HTML5并沒有給用戶帶來多大的沖擊，大部分標簽在HTML5版本中依然適用，
1.兼容
HTML5并不是對之前HTML語言顛覆性的革新，它的核心理念就是要保持與過去技術的完美銜接，因此HTML5有很好的兼容性，
HTML5定義了一些可以省略結束標簽的元素， HTML5中又恢復了對大寫標簽的支持， HTML5制定了一個通用的標準，
2.合理
HTML5中增加和洗掉的標簽都是對現有的網頁和用戶習慣進行分析、概括而推出的，
3.易用
作為當下流行的標簽語言，HTML5嚴格遵循 “簡單至上”的原則，
簡化的字符集宣告，
簡化的DOCTYPE，
以瀏覽器原生能力（瀏覽器自身特性功能）替代復雜的JavaScript代碼，
2.HTML5全新的結構
| <!DOCTYPE>標簽 | <html>標簽 | <head>標簽 | <body>標簽 |
| 位于檔案的最前面，用于向瀏覽器說明當前檔案使用哪種 HTML 或 XHTML 標準規范， | DOCTYPE> 標簽之后，也稱為根標簽，用于告知瀏覽器其自身是一個 HTML 檔案， | 定義HTML檔案的頭部資訊，也稱為頭部標簽，緊跟在<html>標簽之后，主要用來封裝其他位于檔案頭部的標簽， | 定義HTML檔案所要顯示的內容，也稱為主體標簽，瀏覽器中顯示的所有文本、影像、音頻和視頻等資訊都必須位于<body>標簽內， |
三、標簽
概念：
在HTML頁面中，帶有“< >”符號的元素被稱為HTML標簽，如上面提到的<html>、<head>、<body>都是HTML標簽，所謂標簽就是放在“< >”符號中表示某個功能的編碼命令，也稱為HTML標簽或HTML元素,統一稱作HTML標簽，
雙標簽是指由開始和結束兩個標簽符組成的標簽，（例如：<h3> </ h3>）
單標簽是指用一個標簽符號即可完整地描述某個功能的標簽，(例如：< /br>)
1.標簽的屬性
格式：<標記名 屬性1="屬性值1" 屬性2="屬性值2" …> 內容 </標記名>
<h1 align="center" >標題文本<h1>
鍵值對
“鍵值對”可以理解為對“屬性”設定“屬性值”，鍵值對有多種表現形式，例如color="red" 、width:200px;等，其中color和width即為“鍵值對”中的“鍵”（英文key），red和200px為“鍵值對”中的“值”（英文value），“鍵值對”廣泛地應用于編程中，HTML屬性的定義形式“屬性="屬性值"”只是“鍵值對”中的一種，
2.標簽關系
包含關系
<head>
<title>
</title>
</head>并列關系
<p></p>
<h></h>3.文本標簽
文本格式化標簽
| 標題標簽 | <h1>……<h6> | <h1>到<h6>重要性依次遞減 |
| 段落標簽 | <p> | 默認自動換行 |
| 水平線標簽 | <hr /> | 將段落與段落分隔開 |
| 換行標簽 | <br /> | 和word中Enter鍵作用相同 |
文本語意標簽
| time標簽 | time標簽用于定義時間或日期，可以代表24小時中的某一時間，time標簽不會在瀏覽器中呈現特殊效果，但是該元素能夠以機器可讀的方式對日期和時間進行編碼，用戶能夠將生日提醒或其他事件添加到日程表中，搜索引擎也能夠生成更智能的搜索結果， |
| mark標簽 | mark標簽的主要功能是在文本中高亮顯示某些字符，該元素的用法與em標簽和strong標簽有相似之處，但是使用mark標簽在突出顯示樣式時更隨意靈活， |
| cite標簽 | cite標簽可以創建一個參考，用于對檔案參考參考文獻的說明，一旦在檔案中使用了該標簽，被標注的檔案內容將以斜體的樣式展示在頁面中，以區別于段落中的其他字符， |
文本控制標簽
| 特殊字符 | 描述 | 字符的代碼 |
|---|---|---|
| 空格符 | | |
| < | 小于號 | < |
| > | 大于號 | > |
| & | 和號 | & |
| ￥ | 人民幣 | ¥ |
| ? | 著作權 | © |
| ? | 注冊商標 | ® |
| ° | 攝氏度 | ° |
| ± | 正負號 | ± |
| × | 乘號 | × |
| ÷ | 除號 | ÷ |
| 2 | 平方2（上標2） | ² |
| 3 | 立方3（上標3） | ³ |
4.影像標簽
格式：<img src="影像URL" />
常見的圖片格式：
GIF
GIF最突出的地方就是它支持影片，同時GIF也是一種無損的影像格式，也就是說修改圖片之后，圖片質量幾乎沒有損失，再加上GIF支持透明（全透明或全不透明），因此很適合在互聯網上使用，GIF格式常常用于Logo、小圖示及其他色彩相對單一的影像，
PNG
PNG包括PNG-8和真色彩PNG（PNG-24和PNG-32），相對于GIF，PNG最大的優勢是體積更小，支持alpha透明（全透明，半透明，全不透明），并且顏色過渡更平滑，但PNG不支持影片，
IE6是可以支持PNG-8，但在處理PNG-24的透明時會顯示灰色，
JPG
JPG所能顯示的顏色比GIF和PNG要多的多，可以用來保存超過256種顏色的影像，但是JPG是一種有損壓縮的影像格式，這就意味著每修改一次圖片都會造成一些影像資料的丟失，
小圖片考慮GIF或PNG-8，半透明影像考慮PNG-24，類似照片的影像則考慮JPG，
影像標簽的屬性
相對路徑和絕對路徑
| 相對路徑 | 相對路徑不帶有盤符，通常是以HTML網頁檔案為起點，通過層級關系描述目標影像的位置， |
| 絕對路徑 | 絕對路徑一般是指帶有盤符的路徑，例如“D:\HTML+CSS網頁制作\chapter02\img\logo.gif”，或完整的網路地址，例如“http://www.itcast.cn/images/logo.gif”， |
- 影像檔案和html檔案位于同一檔案夾：
只需輸入影像檔案的名稱即可，如<img src=“logo.gif” />，
- 影像檔案位于html檔案的下一級檔案夾：
輸入檔案夾名和檔案名，之間用“/”隔開，如<img src="img/img01/logo.gif" />，
- 影像檔案位于html檔案的上一級檔案夾：
在檔案名之前加入“../” ，如果是上兩級，則需要使用 “../ ../”，以此類推，如<img src="../logo.gif" />，
四、HTML基本結構
1.第一個HTML網頁
<html>
<head>
<title>網頁標題</title>
</head>
<body>我的第一個網頁</body>
</html>2.骨架標簽的決議
| 標簽名 | 定義 | 解釋 |
|---|---|---|
| <html> </html> | HTML標簽 | 跟標簽，包括頁面中所有內容 |
| <head> </head> | 頭部標簽 | 包含所有頭部元素 |
| <title> </title> | 標題標簽 | 里面寫網頁標題 |
| <body> </body> | 主體標簽 | 包含網頁全部內容，寫網頁骨架 |
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/303559.html
標籤：其他
下一篇：nginx功能搭建詳細教程