前端基礎知識
1.了解web前端基礎
（1） 網頁介紹
組成: 文字，圖片，按鈕，輸入框，視頻等等元素組成的
（2）web標準 :制作網頁的規範
a.結構標準（HTML）
b.表現標準（CSS）
c.行為標準（JavaScript）
2.瀏覽器
谷歌 內核 :blink
IE（高版本） 內核:trident
蘋果瀏覽器: 內核webkit
歐鵬 內核: Presto 現在用的是webkit
火狐 內核: gecko
3.HEML（Hyper Text markup Language） 超級文本標記語言（超文本標記語言）
超文本: 在網頁中能夠實現頁面跳轉的文本【超鏈接標簽】
標記: 在網頁中做記號
4.結構
<!Doctype html> 指定文檔類型 <html> 根標簽 <head> <title>網頁標題</title> </head> <body>
在瀏覽器中看到的所有的網頁信息都要放在body標簽中
</body> </html>
結構中標簽的分類
單標簽：標簽只有開始沒有結束 如：<link>標簽
雙標簽：標簽有開始有結束 如： <head></head><body></body>
標簽關系分類
嵌套關系（父子關系）
並列關系 （兄弟關系）
5. html基礎開發工具
sublime（這個好用） 、Dw、webStorm
sublime常用快捷鍵: ctrl+shift+d 快速復制
標簽+Tab快速補全
ctrl+f 快速查找
ctrl+h 快速選中替換
6.html標簽介紹
（1）單標簽:
註釋標簽:<!--註釋內容--> ctrl+/
換行標簽: <br>
橫線:<hr>
（2）雙標簽:
標題標簽: <h1></h1> 一號標題
<h1>--><h6> 由大到小
註意：從語義化角度來考慮一個網頁中一號標題最好只出現一次
段落標簽: <p></p>
a.表示強調標簽:
文本標簽:<font></font>
font的屬性: color 改變文字顏色屬性
size 改變問題大小屬性
文本加粗顯示標簽: <strong></strong>(推薦使用) 或者<b></b>
文字斜體顯示: <em></em> 或者<i></i>
下劃線標簽: <ins></ins> 或者 <u></u>
刪除線: <del></del> 或者<s></s>
b.沒有語義的標簽
div 實現網頁布局
<span></span> 在網頁布局中使用
div標簽可以包含任何標簽
c.多媒體標簽
圖片標簽
寫法: <img> 屬性：scr ： 設置一個要顯示的圖片路徑
title：設置鼠標懸停在圖片上的文字提示
alt： 對圖片的描述信息，圖片顯示不出來就會出現界面上，給搜索引擎看的
width：寬度
height：高度
7.路徑
（1）絕對路徑
帶有磁盤的路徑
帶有具體網址的路徑
（2）相對路徑
如果文件和當前html在同一個文件夾。src=“文件名”
如果文件和當前html不在同一個文件夾中。圖片在下一級文件夾中，src="文件夾/文件名"
如果文件和當前html不在同一個文件夾中。圖片在上一級文件夾中，src="../文件名"
8.超鏈接
<a href=" "></a> 跳轉頁面 設置#是不跳轉
title ： 設置鼠標停留在超鏈接的文字上提示
target ： _self 默認在當前頁面中打開新頁面
_blank 在新窗口中打開頁面
<head><base target="_blank"></head> 跳轉到該頁面都會在一個新的窗口中打開跳轉
錨鏈接屬於超鏈接的另一種用法。
<div id ="dizhi">haha</div>
<a href="#dizhi">跳到本頁內部的haha那裏去</a>
9.html版本結構（sublime中快捷方式）
html5 !+Tab
第二種 html:4s +tab
第三種 html：4t+Tab
10.HTML5標簽( 主要面向移動端的布局)
（1） 有語義的標簽
<nav></nav>導航標簽
<section></section> 區域
<footer></footer> 底部
<aside></aside>側邊欄
<article></article> 文章
以上的標簽和div標簽一樣，但是區別是比div更俱語義性
（2）
視頻標簽：<video scr="" controls aotoplay loop></video> //有控制面板的視頻播放
controls 顯示控制面板
aotoplay 自動播放
loop 循環
多種視頻格式(只會選擇適合的格式播放)
<video controls> <source src = "xx.mp4"> <source src = "xx.mp3"> <source src = "xx.rmvb"> <source src = "xx.avi"> </video>
音頻標簽：
<audio src="xx.mp3" controls autoplay loop></audio>
11.Meta 標簽 用法
<meta charset="utf-8">防止頁面亂碼
<meta name="keywords" content="童裝，女裝">設置網頁關鍵字
<meta name="description" content="描述信息"> 描述信息
<meta http-equiv="refresh" content="3;http://www.baidu.com"> 網頁重定向（當當前網頁域名丟失，三秒後跳到百度）
charset：字符集
utf-8、Gbk、gb2312、big5
12.列表
無序列表
註意: 其中的 <li> 標簽可以包含任何標簽
在網頁中展示信息的無序列表
<ul>
<li>列表項</li>
</ul>
有序列表
<ol>
<li>列表項</li>
</ol>
自定義列表
<dl>
<dt>標題</dt>
<dd>列表項</dd>
</dl>
註意:
<dt>只能包含行內元素（span,a）
dd標簽中可以包含所有標簽
13.表格
(1). 組成：
行: tr
列: td
表格: table
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="1" width="400" height="300" cellspacing="0" cellpadding="0" align="center" bgcolor="blue"> <tr align="center"> <td>姓名</td> <td>年齡</td> <td>體重</td> <td>職業</td> </tr> <tr> <td>張三</td> <td>18</td> <td>80</td> <td>挖掘機</td> </tr> <tr> <td>小米</td> <td>20</td> <td>70</td> <td>全棧</td> </tr> <tr> <td>小東</td> <td>23</td> <td>66</td> <td>工程師</td> </tr> </table> </body> </html>
(2)作用
顯示數據
網頁布局
(3)屬性
boder 設置邊框 width寬度 height高度
cellspacing 設置td與td之間的距離
cellpadding 設置內容與td（左側的距離）
align： left| center | right 設置對齊方式
註意： 1.如果給table標簽設置align屬性，只能讓整個table標簽居中，內容不會居中
2.給tr或者 td 設置 align屬性 ，可以讓其內容居中
bgcolor：設置背景顏色
前端基礎知識