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>