1. Html快速入門之基本介紹
1.1 網頁組成
1.2 瀏覽器內核
| 瀏覽器 |
內核 |
備註 |
| IE |
Trident |
IE、獵豹安全、360極速瀏覽器、百度瀏覽器 |
| firefox |
Gecko |
這幾年已經沒落，打開速度慢、升級頻繁、豬一樣的隊友flash、神一樣對手chrome |
| Safari |
webkit |
chrome的內核一開始是webkit，現在是Blink |
| chrome |
Chromeium/Blink |
在Chromeium項目中研發Blink渲染引擎（瀏覽器核心），內置於Chrome瀏覽器之中。Blink其實是WebKit的分支，大部分國產瀏覽器最新版本都採用Blink內核。二次開發 |
| Opera |
blink |
現在跟隨chrome用blink內核 |
Android手機而言，使用率最高的是webkit內核，大部分國產瀏覽器的內核也屬於webkit二次開發。
ios以及WP7平臺上，系統大部分自帶瀏覽器內核，一般是Safari或IE內核Trident
1.3 Web標準
W3C組織，萬維網聯盟是國際最著名的標準化組織。
- 結構（Structure），結構主要用於對網頁元素進行整理和分類，主要以HTML爲主
- 表現（Presentation） ，表現用於設置網頁元素的版式、顏色、大小等外觀樣式，主要以CSS爲主
- 行爲 （Behavior），行爲指網頁模型的定義及交互的編寫，主要是JavaScript
1.4 Html概念
- Html是超文本標記語言，用來描述網頁。
- html不是編程語言，是一種標記語言（markup language）。
- 標記語言是一套標記系統（markup tag）
1.5 超文本的含義
- 它可以加入圖片、聲音、動畫、多媒體等內容（超越文本限制）
- 它可以從一個文件跳轉到另一個文件，與世界各地主機的文件連接（超文本鏈接）
1.6 Html骨架標籤
| 標籤名 |
定義 |
說明 |
|
HTML標籤 |
頁面中最大的標籤，根標籤 |
|
文檔的頭部 |
注意在head標籤中我們必須要設置的標籤是title |
|
文檔的標題 |
讓頁面擁有一個屬於自己的網頁標題 |
|
文檔的主體 |
元素包含文檔的所有內容，頁面內容基本都是放到body裏面的 |
1.7 Html標籤分類
- 常規元素（雙標籤）
<標籤名>內容</標籤名>
- 空元素（單標籤）
<標籤名/>
1.8 html標籤的關係
（主要針對雙標籤）
1.9 html開發工具
- Dreamweaver
- SublimeText
- WebStorm
- HBuilder
- Visual Studio Code
- IDEA
- 等
1.10 *.html說明
<!DOCTYPE html>告訴瀏覽器按照Html5規範解析頁面<meta charset="UTF-8">指定此文檔的編碼方式爲UTF-8<html lang="en">指定html語言種類，en定義語言爲英語，zh-CN定義語言爲中文
1.11 字符集
- GB2312簡體中文，包括6763個漢字
- BIG5繁體中文，港澳臺等通用
- GBK包含全部中文字符，是GB2312的擴展，加入對繁體字的支持，兼容GB2312
- UTF-8基本上包含全世界所有國家需要用到的字符
1.12 html常用標籤
1.12.1 排版標籤
- 標題標籤h1~h6
- 段落標籤p，
- 水平線標籤hr
- 換行標籤br
- div和span標籤,盒子標籤，div用來佈局，一行只能放一個div，span標籤用來佈局，一行上可以放好多的span
1.12.2 文本格式化標籤
- <b></b>或<strong></strong>,文本以粗體方式顯示（XHtml推薦使用strong）
- <i></i>或<em></em>,文本以斜體方式顯示（XHtml推薦使用em）
- <s></s>或<del></del>,文本以加刪除線方式顯示（XHtml推薦使用del）
- <u></u>或<ins></ins>,文本以下劃線方式顯示（XHtml推薦使用u）
1.12.3 標籤屬性
1.12.4 圖像標籤
<img src=""/>
| 屬性 |
屬性值 |
描述 |
| src |
url |
圖像的路徑,href="#"，空鏈接 |
| alt |
文本 |
圖像不能顯示的替換文本 |
| title |
文本 |
鼠標懸停時顯示的內容 |
| width |
像素（XHTML不支持%頁面百分百） |
設置圖像的寬度 |
| height |
像素（XHTML不支持%頁面百分百） |
設置圖像的高度 |
| border |
數字 |
設置圖像邊框的寬度 |
1.12.5 鏈接標籤
| 屬性 |
作用 |
| href |
用於指定連接目標的url地址，（必須屬性）當爲標籤應用href屬性時，它就具有了超鏈接的功能 |
| target |
用於指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中_self爲默認值，_blank爲在新窗口中打開方式 |
1.12.6 註釋標籤
快捷鍵ctrl+/
1.13 路徑
打開目錄文件夾的第一層就是根目錄
| 路徑分類 |
符號 |
說明 |
| 同一級路徑 |
無符號 |
*.html和*.png在同一個目錄下，不需要使用符號，如<img src=*.png/>| |
| 下一級路徑 |
/ |
*.png在文件*.html同級文件夾a的目錄下，如<img src=a/*.png/> |
| 上一級路徑 |
../ |
*.png與文件*.html父文件夾a同級，如<img src=../*.png/>,如果是上2級就是../../,類推 |
絕對物理地址<img src="C:\web\*.ping"/>
絕對網絡地址<img src="http://www.baidu.com/logo.png"/>
1.14 錨點定位
| 屬性 |
作用 |
示例 |
| id |
標記名稱 |
<h3 id="tree"></h3>標記的位置 |
| #id |
指定標記跳轉 |
<a href="#tree"></a>指定去往的位置id |
1.15 base標籤
| 標籤 |
作用 |
示例 |
| base |
指定鏈接標籤整體打開方式 |
<head><base target="_blank"></head>，base標籤在head中 |
1.16 預格式化文本標籤
| 標籤 |
作用 |
示例 |
| pre |
預格式化文本 |
<body><pre>原始樣式文本</pre></body> |
1.17 特殊字符
| 特殊字符 |
描述 |
字符的代碼 |
| 空格符 |
|
|
| < |
小於號 |
&alt; |
| > |
大於號 |
> |
| & |
和號 |
& |
| ￥ |
人民幣 |
¥ |
| © |
版權 |
© |
| ® |
註冊商標 |
® |
| ° |
攝氏度 |
° |
| ± |
正負號 |
± |
| × |
乘號 |
× |
| ÷ |
除號 |
÷ |
| ² |
平方² |
² |
| ³ |
平方³ |
³ |
1.18 Html5發展之路
1.19 什麼是xhtml
xhtml是更嚴格更純淨的html代碼
- xhtml指可擴展超文本標籤語言a
- xhtml的目標是取代html
- xhtml與html4.01幾乎相同
- xhtml是更嚴格更純淨的html版本
- xhtml是作爲一種xml應用被重新定義的html
- xhtml是一個w3c標準
1.20 html和xhtml區別
- xhtml是2001年1月發佈的w3c推薦標準
- xhtml得到了所有主流瀏覽器的支持
- xhtml元素是以xml格式編寫的html元素。xhtml是嚴格版本的html，例如它要求標籤必須小寫，標籤必須被正確關閉，標籤順序必須正確排列，對於屬性都必須使用雙引號等。
1.21 表格標籤
| 標籤 |
作用 |
| table |
表格父標籤 |
| tr |
表格行 |
| td |
表格列 |
1.22 Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--段落-->
<h1>標題文本</h1>
<h2>標題文本</h2>
<h3>標題文本</h3>
<h4>標題文本</h4>
<h5>標題文本</h5>
<h6>標題文本</h6>
<!--<img src="../Pictures/demo1.png" alt="加載不了顯示" title="懸停" width="300" border="10"/>-->
<!--<a href="http://www.baidu.com"/><img src="../Pictures/demo1.png" alt="測試" title="點擊進入項目">-->
<a href="http://www.baidu.com" target="_blank"><img src="../Pictures/demo1.png" alt="測試" title="進入"></a>
<a href="#one">測試</a>
<h2 id="one">知網的概念是國家知識基礎設施（National Knowledge Infrastructure，NKI），由世界銀行於1998年提出。CNKI工程是以實現全社會知識資源傳播共享與增值利用爲目標的信息化建設項目，由清華大學、清華同方發起，始建於1999年6月。在黨和國家領導以及教育部、中宣部、科技部、新聞出版總署、國家版權局、國家發改委的大力支持下，在全國學術界、教育界、出版界、圖書情報界等社會各界的密切配合和清華大學的直接領導下，CNKI工程集團經過多年努力，採用自主開發並具有國際領先水平的數字圖書館技術，建成了世界上全文信息量規模最大的"CNKI數字圖書館"，並正式啓動建設《中國知識資源總庫》及CNKI網格資源共享平臺，通過產業化運作，爲全社會知識資源高效共享提供最豐富的知識信息資源和最有效的知識傳播與數字化學習平臺。（一般評定職稱所說的中國期刊網，是中國知網）。 CNKI工程的具體目標：一是大規模集成整合知識信息資源，整體提高資源的綜合和增值利用價值；二是建設知識資源互聯網傳播擴散與增值服務平臺，爲全社會提供資源共享、數字化學習、知識創新信息化條件；三是建設知識資源的深度開發利用平臺，爲社會各方面提供知識管理與知識服務的信息化手段；四是爲知識資源生產出版部門創造互聯網出版發行的市場環境與商業機制，大力促進文化出版事業、產業的現代化建設與跨越式發展。 憑藉優質的內容資源、領先的技術和專業的服務，中國知網在業界享有極高的聲譽，在2007年，中國知網旗下的《中國學術期刊網絡出版總庫》獲首屆“中國出版政府獎”，《中國博士學位論文全文數據庫》、《中國年鑑網絡出版總庫》獲提名獎。這是中國出版領域的最高獎項。國家“十一五”重大網絡出版工程-----《中國學術文獻網絡出版總庫》也於2006年通過新聞出版總署組織的鑑定驗收。</h2>
</body>
</html>
