常用的一些快捷鍵： Windows + e 我的電腦Ctrl + Tab 網頁間不同頁面切換F2 重命名Ctrl+Shift+S 另存為 前端的一些常識：前端意義：將效果圖生成網頁網頁組成：文字、圖片、輸入框、視頻、音頻、超鏈接Web標準：Html 結構標準；Css 表現標準；Js 行為標準 瀏覽器 ...
常用的一些快捷鍵：
Windows + e 我的電腦
Ctrl + Tab 網頁間不同頁面切換
F2 重命名
Ctrl+Shift+S 另存為
前端的一些常識：
前端意義：將效果圖生成網頁
網頁組成：文字、圖片、輸入框、視頻、音頻、超鏈接
Web標準：Html 結構標準；Css 表現標準；Js 行為標準
瀏覽器內核
-----------------IE----谷歌/歐朋----火狐----蘋果
渲染引擎 trident blink gecko webkit
渲染引擎是相容性問題出現的根本原因
常用前端編輯器
包含（嵌套關係）、併列關係
Dw 歷史悠久，設計師使用
Sublime 輕量級，插件好用
Webstorm 重量級，智能
Sublime常用鍵
Html:xt+tab Html結構代碼
tab 補全標簽代碼
Ctrl+shift+d 快速複製一行
Ctrl+shift+k 快速刪除一行
Ctrl+滑鼠左鍵單擊 集體輸入
Ctrl+h 查找替換
Ctrl+/ 註釋
Ctrl+l 快速選中一行
Ctrl+shift+↑（↓） 快速上移（下移）一行
查看----佈局
url協議
IIS web伺服器 提供網頁瀏覽服務
Url地址 平時所用網址
url協議：規定url地址格式
協議規定格式：
**scheme://host.domain:port/path/filename
**scheme:定義網際網路服務類型。常見http/https
**host:定義域主機（http預設主機值www）
**domain:定義網際網路功能變數名稱 比如：w3school.com.cn
**:port 定義埠號（網頁預設埠:80）
**path:網頁所在伺服器上路徑
**filename:文件名稱
HTML結構標準
Hyper Text Markup Language 超文本標記語言
<!doctype html> <!-- 聲明文檔類型 -->
<html> <!-- 根標簽 -->
<head> <!-- 頭標簽 -->
<title></title> <!-- 標題標簽 -->
</heaed>
<body></body> <!-- 主體標簽 -->
</html>
Html與htm是一樣的。尾碼名不能決定文件格式，只能決定文件打開方式。
**單標簽：
<br /> 換行標簽
<hr /> 水平線標簽
**雙標簽
<p></p> 段落標簽。上下自動生成空白行
<h123456></h123456> 標題標簽。seo搜索優化
<font></font> 文本標簽
**文本格式化標簽
加粗 <strong></strong><b></b> 儘量用strong
傾斜 <em></em><i></i> 儘量用em
刪除線 <del></del><s></s> 儘量用del
下劃線 <ins></ins><u></u> 儘量用ins
**圖片標簽
<img src="XXX.jpg" alt="林志玲" title="我的女神" width="300" height="500" />
alt 替換文本 圖片不顯示的時候顯示的文字
title 提示文本
圖片沒有定義寬高的時候，圖片按照百分之百比例顯示，如果只更改圖片的寬度或者高度，圖片等比例縮放
**路徑
1.相對路徑
文件和圖片（html文檔）在同一個目錄（文件夾），直接寫文件名
文件和圖片在下一級目錄里，文件夾名稱/圖片（html文件）名稱
圖片在文件的上一級目錄里，../圖片（html文件）名稱
圖片在文件的上一級的其他目錄里，../文件夾名稱/圖片（html文件）名稱
總結：找到下一級目錄的圖片用/
跳出當前目錄用../
2.絕對路徑
src="文件完整路徑"
**特殊字元
空格  
< 小於 <
> 大於 >
& 和 &
￥ 人民幣 ¥
? 版權 ©
? 註冊商標 ®
℃ 攝氏度 °
± 正負號 ±
× 乘 ×
÷ 除 ÷
2 平方 ²
3 立法 ³
#上標 2<sup>3</sup> 2的三次方
#下標 H<sub>2<sub>O 元素水
**列表
1.無序列表
<ul>
<li></li> 列表項
<li></li>
<li></li>
</ul>
type="square" 小方塊
type="disc" 實心小圈圈
type="circle" 空心小圈圈
2.有序列表
<ol>
<li></li> 列表項
<li></li>
<li></li>
</ol>
type="1,a,A,i,Ⅰ"
start="3" 決定開始的位置
3.自定義列表
<dl>
<dt></dt> 小標題
<dd></dd> 解釋標題
<dd></dd> 解釋標題
</dl>
**音樂標簽
<embed src="X.mp3" hidden="true"> hidden作隱藏播放器用。ture/false
**滾動
<marquee behavior="" direction=""></marquee>
中間內容：文字、圖片、程式生成的文字或圖片
height、width、bgcolor、
-behavior設定滾動方式
alternate：表示在兩段之間來回滾動
scroll：表示由一段滾動到另一端，會重覆
slide：表示由一段滾動到另一端，不會重覆
-direction設置滾動方向
down、left、right、up
loop：設置滾動次數。-1一直滾下去
**超鏈接
<a href="XXX.html" title="圖片標簽" target="_self"></a>
href 去往的路徑(跳轉頁面)。 必寫
titlr 提示文本。滑鼠放到鏈接上顯示的文字
target="_self" 預設值。在自身頁面打開
Target="_blank" 打開新頁面
**錨點（錨鏈接）
1.先定義一個錨點。如：<p id="sd"></p>
2.超鏈接到錨點。<a href="#sd"></a>
**空鏈 <a href="#"></a> 不確定鏈接到哪個頁面時
**壓縮文件下載 不推薦使用
<a href="../../XX.rar">壓縮包</a>
**超鏈接優化寫法
<base target="_blank"> 讓所有超鏈接都在新頁面打開
**網頁編碼
<meta charset="UTF-8">
+tab html5標簽結構
charset 編碼
Ascll
Ansi（擴展的ASCII編碼）
Unicode
gb2312 （簡單中文）
GBK （全部中文字元、繁體）
Big5(繁體中文)
Utf-8
****meta標簽
**name
-<meta name="generator" contect="XX">用以說明生成工具
-網頁關鍵字
<meta name="keywords" content="Java培訓...">
keyword關鍵字用於seo優化
-網頁描述
<meta name="description" content="自己網頁在搜索引擎下顯示的描述！">
-網頁製作者
<meta name="Author" contect="你的姓名">告訴SEO站點製作作者
-設定網頁被爬取許可權
<meta name="Robots" contect="all|none|index|noindex|follow|nofollow">
all:文件將被檢索，頁面上鏈接可以被查詢
none:文件將不被檢索，且頁面上鏈接不可以被查詢
index:文件將被檢索
noindex:文件將不被檢索，但頁面上鏈接可以被查詢
follow:頁面上的鏈接可以被查詢
nofollow:文件將不被檢索，但頁面上鏈接可以被查詢
**http-equiv
-網頁重定向
<meta http-equiv="refresh" conten="5;http://www.baidu.com">
不同功能變數名稱之間相互跳轉
**鏈接外部樣式表文件
<link rel="stylesheet" href="1.css">
<link rel="icon" href="XXXX.ico">每個網頁抬頭的icon小圖標
**表格
展示數據，對網頁重構的補充
<table border="1" width="500" height="300" cellspacing="20" cellpadding="10" align="center" bgcolor="yellow">
<tr align="center">
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
border="1" 邊框粗細
bordercolor="red" 邊框顏色
cellspacing="20" 單元格與單元格的距離
cellpadding="10" 內容距邊框的距離
align="left/right/center"
如果直接給表格用align="center" 表格劇中
如果給tr/td使用，tr或者td內容居中
**表格的標準結構
<table>
<caption><caption> 表頭
<thead></thead>
<tbody>
<tr>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td rowspan="2"></td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
colspan="2" 合併同一行的2個單元格
rowspan="2" 合併同一列的2個單元格
直接創建一個3*3的表格
table>tr*3>td*3 + Tab鍵
**表格標題
<th></th>用法同<td>
-內容垂直對齊方式
<td valign="top/middle/bottom"></td>
**表單
表單作用：收集信息
提示信息
表單控制項
--表單域
<form action='1.php' method="get">
屬性：action:處理信息
Method="get|post"
Get通過地址欄提供傳輸信息，安全性差
Post通過1.php來處理信息，安全性高
<fieldset> 標簽用於從邏輯上將表單中的元素組合起來
--文本輸入框
用戶名：<input type="text" maxlength="6" readonly="readonly" disabled="disabled" name="username" value="大前端">
maxlength="6" 限制輸入字元長度
readonly="readonly" 將輸入框設置為只讀狀態（不能編輯）
disabled="disabled" 輸入框為激活
name="username" 輸入框的名稱
value="XXXX" 將輸入框內容傳給處理文件
--密碼輸入框
密碼：<input type="password" name="pwd">
文本輸入框的所有屬性對密碼輸入框都有效
--單選框
<input type="radio" name="gender" checked="checked">男
只有將name的值設置相同的時候，才能實現單選效果。
checked="checked" 設置預設選中項
--下拉列表
<select>
<option>下拉列表選項</option>
<option>下拉列表選項</option>
<option>下拉列表選項</option>
<option selected="selected">下拉列表選項</option>
</select>
屬性：
multiple="multiple" 將下拉列表設置為多選項
selected="selected" 設置預設選中項目
2018.03.28
