1园蝠、認識網(wǎng)頁
介紹網(wǎng)頁產(chǎn)生過程，在程序員眼中不應(yīng)該再是美麗的前端頁面而是此頁面顯示效果和布局的技術(shù)手段如何實現(xiàn)隔节，如庖丁解牛。
2寂呛、瀏覽器
認識五大瀏覽器怎诫，Chrome瀏覽器市場占用最多，前端開發(fā)使用必備贷痪。瀏覽器內(nèi)核（理解）——面試用分為渲染引擎和JS引擎幻妓。
- Trident（IE內(nèi)核）國產(chǎn)瀏覽器用
- Gecko（firefox）火狐瀏覽器，代碼開源插件多劫拢，走向沒落
- webkit（Safari）
- Chromium/Bink（Chrome）
- Presto（Opera）
3肉津、Web標準
結(jié)構(gòu)標準：結(jié)構(gòu)用于對網(wǎng)頁元素進行整理和分類强胰，主要包括XML和XHTML兩個部分。
樣式標準：表現(xiàn)用于設(shè)置網(wǎng)頁元素的版式妹沙，顏色偶洋，大小等外觀樣式，主要指的是CSS距糖。
行為標準：行為是指網(wǎng)頁模型的定義及交互的編寫玄窝，主要包括DOM和ECMAScript兩個部分。
4悍引、HTML初識
HyperText Markup Language 超文本標記語言
用代碼的形式展現(xiàn)
4.1哆料、HTML骨架格式
<html> <head>頭部 <title>網(wǎng)頁名稱</title>題目 </head> <body> 頁面主體 </body> </html>
- html標簽：作用所有html中標簽的根節(jié)點
- head標簽：作用用于存放title頁面題目 meta base基礎(chǔ)路徑 style樣式標簽 script link 注意在head標簽中我們必須要設(shè)置的標簽是title
- title標簽：作用讓頁面擁有一個屬于自己的標題
- body標簽：作用頁面的主體部分，用于存放所有的html標簽如p h a b u is em del ins strong img
4.2吗铐、HTML標簽分類
- <標簽名>雙標簽</標簽名>例如 <body> </body>成對出現(xiàn)
- <標簽名/>單標簽 例如<hr/ >水平線 <br/ >換行
4.3东亦、HTML標簽關(guān)系
- 嵌套關(guān)系 （父子）
<head> <title></title> </head> - 并列關(guān)系
<head> <body></body> </head>
5、開發(fā)工具
- DreamWeaver
- Sublime
- WebStorm
- HBuilder
- Visual Studio Code
個人建議用Sublime加上插件可以實現(xiàn)各種功能和需求
有機會各種都接觸一些唬渗，畢竟目前無法定論將來工作時用哪個工具
6典阵、文檔類型
html:xt 按下Tab鍵快速生成標準結(jié)構(gòu)（快捷鍵）
DTD 文檔類型定義Document Type Definition
我們學(xué)的是HTML的下一個版本XHTML
6.1、XHTML是什么镊逝？
可擴展超文本標記語言 Extensible HyperText Markup Language
- <!DOCTYPE>后面的第一個標簽必須是<html></html>必須是最后一個標簽
- 所有的標簽都必須要有一個相應(yīng)的結(jié)束標簽 例如：<br />
- 標準的xtml標簽都要小寫 <head>
HEAD - 所有屬性值非空壮啊，必須用雙引號 例如：屬性=“值”
7、字符集
utf-8 目前最常用的字符集編碼方式撑蒜，常用的字符集編碼方式還有g(shù)bk和gb2312
gb2312簡單中文包括6763個漢字
BIG5 繁體中文 港澳臺等用
GBK 包含全部中文字符是GB2312的擴展歹啼，加入對繁體字的支持，兼容GB2312
UTF-8 則包含全世界所有國家需要用到的字符
以后在meta標簽內(nèi)設(shè)置charset=UTF-8
8座菠、學(xué)習(xí)HTML常用標簽
- 標題標簽6個h1至h6 h1不能亂用會影響SEO
- Ctrl+U查看網(wǎng)頁源代碼 Ctrl+F 快速查找 Ctrl+R 快速刷新
- p段落標簽/p塊級標簽響應(yīng)式自動換行
- 水平線標簽<hr />單標簽
8.1狸眼、文本格式化標簽
加粗<b></b><strong></strong>strong語義化利于SEO
傾斜<i></i><em></em>em語義化利于SEO
刪除<s></s><del></del>推薦使用del
下劃線<u></u><ins></ins>推薦使用ins
8.2、標簽屬性
<標簽名 屬性1="值" 屬性1="值"></標簽名>
標簽屬性用鍵值對形式展現(xiàn)浴滴，之間用空格隔開拓萌，順序不影響結(jié)果
例如<hr width="400">
8.3、圖像標簽
<img src="圖像url" />
- alt 圖像不能顯示時的替換文本
- title 鼠標懸停時顯示的內(nèi)容（顯示在鼠標右下角）
- width 設(shè)置圖像的寬度 height 設(shè)置圖像的高度
- border 設(shè)置圖像邊框的寬度 （加數(shù)字顯示邊框）
8.4升略、鏈接標簽
<a href="跳轉(zhuǎn)目標" target="目標窗口的彈出方式">文本或圖像</a>
空鏈接 _self在本窗口打開_blank在新窗口打開（利于SEO）
8.5微王、錨點定位快速定位到目標內(nèi)容（用id屬性聯(lián)系）
<a href="#mao"></a>
需要定位處在標簽內(nèi)寫入id屬性id="mao" 利用mao聯(lián)系兩者
8.6、base標簽和nofollow
<base target="_blank">所有鏈接在新的窗口中打開(基礎(chǔ)路徑)
<a rel="nofollow"> </a> nofollow 作用不讓爬蟲抓取鏈接內(nèi)容
8.7品嚣、特殊字符和注釋標簽
空格 <小于號< >大于號>
&和號&￥人民幣￥ 版權(quán)?
注釋標簽 寫給程序員或自己看的
8.8炕倘、相對和絕對路徑
- 圖像文件和html文件位于同一文件夾
只需輸入圖像文件的名稱即可，如<img src="img.jpg" /> - 圖像文件位于html文件的下一級文件夾
輸入文件夾名和文件名翰撑，之間用/隔開罩旋，如<img src="pages/img.jpg" /> - 圖像文件位于html文件的上一級文件夾
在文件夾名之前加入../ 如果是上兩級需要使用../../以此類推
<img src="../img.jpg" />
4.絕對路徑 帶盤符的路徑或者完整的網(wǎng)絡(luò)路徑
