前端之HTML、CSS（一）
開發工具
-
- 編輯器
Dreamware、Sublime、Visual Studio Code、WebStorm
-
- 瀏覽器
Chrome、IE（Edge）、Safari、FireFox、Opera
瀏覽器內核：瀏覽器內核分為兩個部分：渲染引擎和JS引擎。渲染引擎是通過獲取HTML、XML以及圖片，引入CSS格式，渲染顯示形成網頁；而JS引擎是通過解析JavaScript，動態顯示網頁。
瀏覽器內核主要類別：Trident（IE）、Gecko（FireFox）、Webkit（Safari）、Chromium/Blink（Chrome）、Presto（Opera），其中win10發布，Edge使用EdgeHTML內核，Opera瀏覽器目前使用Blink內核，Presto已經廢棄。
移動端瀏覽器內核主要使用系統內置瀏覽器內核，一般為Webkit內核或者Trident內核。
瀏覽器使用情況統計：http://tongji.baidu.com/data/browser
網頁
網頁是由文字、圖片、超鏈接等元素構成，網頁形成：前端代碼由瀏覽器渲染形成網頁。
Web標准：結構標准（Structure）、表現標准（Presentation）、行為標准（Behavior）
-
- 結構標准：HTML，內容
- 表現標准：CSS，形式
- 行為標准：JavaScript，效果
HTML
HTML：Hyper Text Markup Language-超文本標記語言。
HTML骨架結構
1 <html> 2 <head> 3 <title> </title> 4 </head> 5 <body> 6 7 </body> 8 </html>
HTML標簽
排版標簽
標題標簽：閉標簽，<h1>、<h2>、<h3>、<h4>、<h5>、<h6>，加粗效果，依次縮小。格式：<hn>content</hn>，其中n代表1，2，3，4，5，6。注意：<title></title>標簽表示文檔標題標簽。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>標題標簽-測試</title> 5 </head> 6 <body> 7 <h1>一級標題</h1> 8 <h2>二級標題</h2> 9 <h3>三級標題</h3> 10 <h4>四級標題</h4> 11 <h5>五級標題</h5> 12 <h6>六級標題</h6> 13 </body> 14 </html>
段落標簽：閉標簽，<p>，效果分段會自動換行顯示。格式：<p>content</p>.
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>段落標簽-測試</title> 5 </head> 6 <body> 7 <p>這是一個段落</p> 8 </body> 9 </html>
水平線標簽：開標簽，<hr />，效果一條水平實線。格式：<hr />。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>水平線標簽-測試</title> 5 </head> 6 <body> 7 <p>這是一個段落</p> 8 <hr /> 9 <p>這是另外一個段落</p> 10 </body> 11 </html>
換行標簽：開標簽，<br />，效果顯示換行。格式：<br />。注意：段落標簽和換行標簽都可以產生換行效果，但是段落標簽換行產生行間距大於換行標簽產生的換行。
1 !DOCTYPE html> 2 <html> 3 <head> 4 <title>換行標簽-測試</title> 5 </head> 6 <body> 7 <p>All growth is a leap<br /> in the dark.</p> 8 </body> 9 </html>
盒子標簽：閉標簽，<div>、<span>，分別為塊級元素和行級元素的無語義盒子，無特殊效果，CSS布局使用。格式：<div>content</div>、<span>content</span>。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>div-span標簽-測試</title> 5 </head> 6 <body> 7 <div>塊級元素內容</div> 8 <p>這是一個<span>完整的</span>段落</p> 9 <div>塊級元素一</div> 10 <div>塊級元素二</div> 11 <span>行級元素一</span> 12 <span>行級元素二</span> 13 </body> 14 </html>
文本格式化標簽
粗體標簽：閉標簽，<b>、<strong>，效果文本以粗體方式顯示。格式：<b>content</b>，<strong>content</strong>。推薦使用：<strong>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>粗體標簽-測試</title> 5 </head> 6 <body> 7 <b>文本加粗</b> 8 <strong>文本加粗</strong> 9 </body> 10 </html>
斜體標簽：閉標簽，<i>、<em>，效果文本以斜體方式顯示。格式：<i>content</i>，<em>content</em>。推薦使用：<em>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>粗體標簽-測試</title> 5 </head> 6 <body> 7 <i>文本傾斜</i> 8 <em>文本傾斜</em> 9 </body> 10 </html>
刪除線標簽：閉標簽，<s>、<del>，效果文本加刪除線形式顯示。格式：<s>content</s>、<del>content</del>。推薦使用：<del>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>刪除線標簽-測試</title> 5 </head> 6 <body> 7 <s>文本加刪除線</s> 8 <del>文本加刪除線</del> 9 </body> 10 </html>
下划線標簽：閉標簽，<u>、<ins>，效果文本加下划線形式顯示。格式：<u>content</u>、<ins>content</content>。推薦使用：<ins>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>下划線標簽-測試</title> 5 </head> 6 <body> 7 <u>文本加下划線</u> 8 <ins>文本加下划線</ins> 9 </body> 10 </html>
圖片標簽
開標簽，基本格式：<img src=“url” />，效果是添加圖片。src為圖片標簽的必須屬性，表示圖片的位置屬性。
| 屬性 | 屬性值 | 描述 |
| src | URL | 圖片路徑，必需 |
| alt | 文本 | 圖像無法顯示的替換文本 |
| title | 文本 | 鼠標懸停圖像時的顯示文本 |
| width | 像素 | 圖像顯示寬度 |
| height | 像素 | 圖像顯示高度 |
| border | 數字 | 圖像邊框的粗細,缺省：無邊框 |
標記屬性的格式：<img src="URL", alt="content-text", title="title-text", width="npx", height="npx", border="1" />,其中n取任意數字，px為像素單位。屬性中只有src為必需，推薦添加alt屬性。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>圖片標簽-測試</title> 5 </head> 6 <body> 7 <img src="content-01.jpg", title="三體", width="100px", height="100px", border="1" /> 8 <br /> 9 <img src="content-02.gif", alt="流浪地球" /> 10 </body> 11 </html>
鏈接標簽
鏈接標簽又稱為錨點標簽，基本格式：<a href="URL">content</a>，效果是添加跳轉鏈接。href同圖片標簽中src一樣，是位置屬性，必需設置。
| 屬性 | 屬性值 | 描述 |
| href | URL | 鏈接跳轉位置 |
| target | _blank | 鏈接以新窗口打開，缺省：當前窗口打開 |
注意：href屬性中的屬性值URL，外部鏈接：href="http://www.xxx.com"；內部鏈接：href="statics/xxx.html"；空鏈接：href="#"；書簽鏈接：href="#id"。另外，鏈接標簽中的內容content可以是圖像，音頻等，不局限為文本信息。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>鏈接標簽-測試</title> 5 </head> 6 <body> 7 <a href="http://www.baidu.com", target="_blank">百度</a> 8 <a href="index.html">首頁</a> 9 <a href="#">空鏈接</a> 10 <a href="#paragraph">Do it</a> 11 <p>Beautiful is better than ugly.</p> 12 <p>Explicit is better than implicit.</p> 13 <p>Simple is better than complex.</p> 14 <p>Complex is better than complicated.</p> 15 <p>Flat is better than nested.</p> 16 <p>Sparse is better than dense.</p> 17 <img src="python.jpg", alt="python", width="400px", height="400px"> 18 <p>Readability counts.</p> 19 <p>Special cases aren't special enough to break the rules.</p> 20 <p>Although practicality beats purity.</p> 21 <p>Errors should never pass silently.</p> 22 <p>Unless explicitly silenced.</p> 23 <p>In the face of ambiguity, refuse the temptation to guess.</p> 24 <p>There should be one-- and preferably only one --obvious way to do it.</p> 25 <p>Although that way may not be obvious at first unless you're Dutch.</p> 26 <p id="paragraph">Now is better than never.</p> 27 <p>Although never is often better than *right* now.</p> 28 <p> the implementation is hard to explain, it's a bad idea.</p> 29 <p>If the implementation is easy to explain, it may be a good idea.</p> 30 <p>Na>mespaces are one honking great idea -- let's do more of those!</p> 31 </body> 32 </html>
base標簽：base標簽同<meta charset="UTF-8" >以及<title>標簽，定位於<head>內，效果設定當前頁面為根頁面，鏈接頁面均使用新窗口打開，多個頁面鏈接時，不用為每個頁面設定target="_blank"屬性。書簽鏈接一般時定位於當前頁面，可以使用target="_self"來特殊設定。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>鏈接標簽-測試</title> 6 <base target="_blank"> 7 </head> 8 <body> 9 <a href="http://www.baidu.com", target="_blank">百度</a> 10 <a href="index.html">首頁</a> 11 <a href="#">空鏈接</a> 12 <a href="#paragraph">Do it</a> 13 <p>Beautiful is better than ugly.</p> 14 <p>Explicit is better than implicit.</p> 15 <p>Simple is better than complex.</p> 16 <p>Complex is better than complicated.</p> 17 <p>Flat is better than nested.</p> 18 <p>Sparse is better than dense.</p> 19 <p>Readability counts.</p> 20 <p>Special cases aren't special enough to break the rules.</p> 21 <p>Although practicality beats purity.</p> 22 <p>Errors should never pass silently.</p> 23 <p>Unless explicitly silenced.</p> 24 <p>In the face of ambiguity, refuse the temptation to guess.</p> 25 <p>There should be one-- and preferably only one --obvious way to do it.</p> 26 <p>Although that way may not be obvious at first unless you're Dutch.</p> 27 <p id="paragraph">Now is better than never.</p> 28 <p>Although never is often better than *right* now.</p> 29 <p> the implementation is hard to explain, it's a bad idea.</p> 30 <p>If the implementation is easy to explain, it may be a good idea.</p> 31 <p>Na>mespaces are one honking great idea -- let's do more of those!</p> 32 </body> 33 </html>
特殊字符標簽
| 空格字符 | | |
| < | 小於號 | < |
| > | 大於號 | > |
| & | 和號 | & |
| © | 版權號 | © |
| ® | 商標號 | ® |
| × | 乘號 | × |
| ÷ | 除號 | ÷ |
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>特殊符號標簽-測試</title> 6 <base target="_blank"> 7 </head> 8 <body> 9 <div>HT ML HTML</div> 10 <div><div></div> 11 <div>&</div> 12 <div>©</div> 13 <div>®</div> 14 <div>2×5</div> 15 <div>4÷2</div> 16 </body> 17 </html>
注釋標簽
注釋，不在頁面顯示，不被執行。格式：<!-- 注釋語句 -->，注釋利人利己，很有必要。
路徑
相對路徑
1.圖像文件和HTML文件位於同一文件夾，只需輸入圖像文件名即可。
<img sre="images.jpg" />
2.圖像文件位於HTML文件的下一級文件夾，輸入文件夾名/文件名。
<img src="文件夾-a/images.jpg" />
3.圖像文件位於HTML文件的上一級文件夾，在圖像文件名之前加../；如果上兩級文件夾，則使用../../，依此類推。
<img src="../images.jpg" />
<img src="../../images.jpg" />
4.圖像文件位於上一級文件夾的同級文件夾的子文件夾，輸入../返回上一級文件夾后/同級文件名/子文件夾名/圖像文件名，依此方法類推。
<img src="../../文件夾-2/文件夾-a/images.jpg" />
絕對路徑
盤符:\根目錄\子目錄\文件名.擴展名，例如：D:\test\templates\icon.jpg。或者URL圖片地位：https://img2018.cnblogs.com/blog/1492256/201902/1492256-20190216222217245-682202389.png。推薦使用相對路徑