ctrl+c (複製) ctrl+v(粘貼) ctrl+s(保存) ctrl+a(全選) windows+d(返回桌面)
window+e(打開最近訪問的文件)
1.2 瞭解web前端基礎
pc端 （網頁、網站）
移動端（手機上的安卓軟件）
1.3 網頁介紹
組成：文字，圖片，視頻，按鈕，搜索框，音頻…… 等元素組成
web標準：製作網頁的規範
web標準：結構標準（html：寫網頁結構）
表現標準（css：美化網頁）
行爲標準（js：響應效果）
瀏覽器：訪問網頁 建議用google（如果用谷歌沒問題，其他就沒問題）
主流瀏覽器：谷歌、IE、歐鵬、火狐、safari（蘋果系統）
瀏覽器與服務器之間的關係
1.4 html 簡單介紹
概念：Hyper Text Markup Language 超文本標記語言
超文本：在網頁中能夠實現頁面跳轉的文本（超鏈接標籤）
標記：在網頁中顯示的標籤（在網頁中做記號）
結構：
//指定文檔類型 <html> //根標籤 <head> <title>網頁標題</title> </head> <body> 在瀏覽器中看到的所有網頁信息都要放在body標籤中 </body> </html>
結構中標籤的分類
單標籤：標籤只有開始沒有結束
如:<link> <hr>
雙標籤：標籤有開始有結束
如：<head></head> <body></body>
標籤關係分類：嵌套關係（父子關係） head 和 title
並列關係（兄弟關係） head 和 body
1.5 寫html 用什麼寫都可以（記事本等等）
文件後綴名問題
注意：文件後綴名決定文件的打開方式
網頁的後綴名是：.html 或者 .htm
1.6 開發工具
DW Sublime webstorm 等等
安裝sublime
新建文件
方式一： 1.ctrl+n 2.ctrl+s 3.!+tab（必須保證是html文件纔可以使用這個)
方式二：直接new file 新建
方式三：在本地文件夾中新建，導入Sublime
新建文件夾
方式一：在本地裏新建，然後導入Sublime
方式二：在Sublime中新建 在左側右鍵+new folder +文件名（不用後綴）
Sublime常用的快捷鍵 ctrl+shift+d 快速複製
ctrl+f 快速查找
ctrl+h 查找替換
ctrl+l 快速關閉
1.7 單標籤
註釋標籤 <!-- 註釋的信息 --> ( 快捷鍵：ctrl+/ )
換行標籤 <br>
橫線標籤 <hr>
1.8 雙標籤
1.8.1 標題標籤
<h1> </h1>（一號標題）
<h2> </h2>（二號標題） ……
h1~h6 h1最大，h6最小
從語義化角度出發，一般只出現一個一號標題
注：快速改數字 鼠標左鍵點擊1後面,按住ctrl拖到後面的1後面再單擊鼠標左鍵，改成2
1.8.2 段落標籤 <p></p>
1.8.3 表示強調的標籤
文本標籤 <font></font>
改變顏色屬性 <color></color> //color是屬性，不是標籤
改變文字大小屬性 <size></size>
文字加粗標籤 <strong></strong> 或者 <b></b> 推薦用strong
文字斜體顯示 <em></em> 或者 <i></i> 推薦用em
下劃線標籤 <ins></ins> 或者 <u></u> 推薦用ins
刪除線 <del></del> 或者 <s></s> 推薦用del
1.8.4沒有語義的雙標籤
<div></div> 塊標籤，實現網頁佈局
<span></span> 在網頁佈局過程中使用，行元素
注：div與span的區別：基本一致，只是div自動換行
div標籤中可以包含任何標籤
1.9 多媒體標籤
圖片標籤
寫法：<img >
屬性：src：設置一個要顯示圖片的路徑
title：當鼠標放在圖片上時，描述圖片的屬性（設置鼠標懸停到圖片上的文字提示）
alt：①對圖片的描述信息（當圖片顯示不出來時顯示，當圖片可以顯示出來時則看不見）
②爲搜索引擎服務（搜索信息時的關鍵字）
width：寬度
height：高度
注： 設置了寬度或高度，只改變一個，另一個會根據寬高比自動改變
1.10 路徑
1.10.1 絕對路徑
絕對路徑 E:\a\b.html (不建議用)
①帶有磁盤目錄的路徑 如：<img src=”E:\a\b.html”>
②帶有具體的網址 如：http://www.baidu.com/img/1.jpg
1.10.2 相對路徑：
①如果資源文件（img）和當前文件（html）在同一個文件夾中，src=”文件名”
②如果資源文件（img）和當前文件（html）不在同一個文件夾中，如果頁面在圖片的上一級目錄中，src=”圖片所在文件夾名稱加上+圖片名稱”
如：<img src=”1/1.html” alt=””>
③如果資源文件（img）和當前文件（html）不在同一個文件夾中，如果頁面在圖片的下一級目錄中，src=”+圖片名稱
如：<img src=” ..\b.html”alt=””>
注：一個../代表返回一級
1.11 超鏈接
寫法： <a href=” ” title=” ” target=“_self ”></a>
作用： 跳轉頁面
屬性： <a href=”#” > 不跳轉到任何頁面/跳轉到本頁面 </a>
title: 設置鼠標懸停在超鏈接上的文字提示
target: ① _self 默認值在當前頁面中打開新頁面
② _blank 在新窗口中打開頁面
超鏈接跳轉到其他頁面的其他寫法
在head中寫 <base target=”_blank”> 可以直接在新頁面中打開
1.12 錨鏈接
錨鏈接屬於超鏈接的另一種用法，實現的是本頁面內部的跳轉
如：返回頂部 <a href=”#”></a>
返回笑臉處 <div id=”xl”>笑臉</div> <a href=”#xl”></a>
1.13 特殊字符
1.14 html5（補充，瞭解）
導航標籤 <nav></nav>
區域 <section></section>
底部 <footer></footer>
側邊欄 <aside></aside>
文章 <article></article>
視頻標籤<video src=”movie.mp4”controls autoplay loop></video>
屬性：controls 顯示控制面板 autoplay 自動播放 loop 循環播放
多種視頻格式
<video controls> <source src="movie.mp4"> <source src="movie.mp3"> <source src="movie.avi"> <source src="movie.rmvb"> </video>
音頻標籤
<audio src="See you again.mp3" controls autoplay loop></audio>