經常使用的一些快捷鍵:
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 超文本標記語言php
<!doctype html> <!-- 聲明文檔類型 --> <html> <!-- 根標籤 --> <head> <!-- 頭標籤 --> <title></title> <!-- 標題標籤 --> </heaed> <body></body> <!-- 主體標籤 --> </html>
Html與htm是同樣的。後綴名不能決定文件格式,只能決定文件打開方式。 css
**單標籤:
換行標籤
html
**路徑
1.相對路徑
文件和圖片(html文檔)在同一個目錄(文件夾),直接寫文件名
文件和圖片在下一級目錄裏,文件夾名稱/圖片(html文件)名稱
圖片在文件的上一級目錄裏,../圖片(html文件)名稱
圖片在文件的上一級的其餘目錄裏,../文件夾名稱/圖片(html文件)名稱
總結:找到下一級目錄的圖片用/
跳出當前目錄用../
2.絕對路徑
src="文件完整路徑" 前端
**特殊字符
空格  
< 小於 <html5
大於 >
& 和 &
¥ 人民幣 ¥
? 版權 ©
? 註冊商標 ®
℃ 攝氏度 °
± 正負號 ±
× 乘 ×
÷ 除 ÷
2 平方 ²
3 立法 ³
**列表
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> web
**音樂標籤
<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一直滾下去 安全
**超連接
href 去往的路徑(跳轉頁面)。 必寫
titlr 提示文本。鼠標放到連接上顯示的文字
target="_self" 默認值。在自身頁面打開
Target="_blank" 打開新頁面服務器
**錨點(錨連接)
1.先定義一個錨點。如:<p id="sd"></p>
2.超連接到錨點。
**空鏈 不肯定連接到哪一個頁面時
**壓縮文件下載 不推薦使用
壓縮包
**超連接優化寫法
<base target="_blank"> 讓全部超連接都在新頁面打開 dom
**網頁編碼
<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小圖標
**表格
展現數據,對網頁重構的補充
border="1" 邊框粗細
bordercolor="red" 邊框顏色
cellspacing="20" 單元格與單元格的距離
cellpadding="10" 內容距邊框的距離
align="left/right/center"
若是直接給表格用align="center" 表格劇中
若是給tr/td使用,tr或者td內容居中
**表格的標準結構
colspan="2" 合併同一行的2個單元格
rowspan="2" 合併同一列的2個單元格
直接建立一個3*3的表格
table>tr3>td3 + 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
轉載於猿2048:➱《我的遺漏知識的回顧-HTML》