前端學習之HTML第一天
Html基礎
-
常用快捷鍵
|
Ctrl+c |
複製 |
|
Ctrl+v |
貼上 |
|
Ctrl+x |
剪下 |
|
Ctrl+a |
全選 |
|
Ctrl+s |
儲存 |
|
Ctrl+z |
撤銷一步 |
|
Windows+d |
返回桌面 |
|
Windows+e |
我的電腦 |
|
Windows+r |
開啟執行 |
|
Alt+tab |
切換軟體 |
|
Ctrl+tab |
軟體文件之間的切換 |
|
F2 |
重新命名 |
|
F5 |
重新整理頁面 |
-
認識大前端
- 前端就是將效果圖生成網頁，利用html+css+js等技術。
- Pc端 移動端
- 使用者體驗
- 學習態度
-
認識網頁
- 網頁由文字、圖片、輸入框、視訊、音訊、超連結等組成。
- Web標準
W3c組織（全球資訊網聯盟）
Html 結構標準 相當人的身體
Css 表現標準 相當與給人化妝 變的更漂亮
Js 行為標準 想當與人在唱歌，頁面更靈動。
-
基礎學習安排
Html 2天
Css 7天
Js 3天
-
瀏覽器
◆瀏覽器是一個上網的客戶端（軟體）。
-
瀏覽器核心
渲染引擎
渲染引擎是相容性問題出現的根本原因。
-
瀏覽器和伺服器的那點事
IIS web伺服器 提供網頁瀏覽服務
-
Url地址
Url地址就是咱們說的網址。
-
認識html
Hyper text markup language（超文字標記語言）
超文字：超連結。（實現頁面跳轉）
-
Html結構標準
<!doctype html> 宣告文件型別
<html> 根標籤
<head> 頭標籤
<title></title> 標題標籤
</head>
<body> 主體標籤
</body>
</html>
Html 與htm是一樣的。
字尾名不能決定檔案格式，只能決定開啟檔案開啟的方式。
-
Html標籤分類
單標籤 <! Doctype html>
雙標籤 <html></html> <head></head> <title></title>
-
Html標籤關係分類
包含（巢狀關係） <head><title></title></head> 父子
並列關係 <head></head><body></body> 兄弟姐妹
-
開發工具
Dw 歷史悠久，設計師使用。
Sublime 輕量級 有很多好用的外掛。
Webstorm 重量級 太過智慧。
|
|
新建檔案、開啟檔案、開啟資料夾 |
|
Html:xt+tab |
Html結構程式碼 |
|
tab |
補全標籤程式碼 |
|
Ctrl+shift+d |
快速複製一行 |
|
Ctrl+shiif+k |
快速刪除一行 |
|
Ctrl+滑鼠左鍵單擊 |
集體輸入 |
|
Ctrl+h |
查詢替換 |
|
Ctrl+f |
查詢 |
|
Ctrl+/ |
註釋 |
|
Ctrl+L |
快速選擇一行 |
|
Ctrl+shift+↑（↓） |
快速上移（下移）一行 |
|
F11 |
全屏 |
|
|
檢視----佈局 |
-
設定預設瀏覽器
Chrome瀏覽器右上角
-
標籤
- 單標籤
◆註釋標籤 ctrl+/
◆ 換行標籤 <br />
◆ 水平線標籤 <hr />
2.雙標籤
<p>文字內容</p>
特點：上下自動生成空白行。<br>換行不會生成空白行。
3.標題標籤
h1-h6 取值到h6，h1 在一個頁面裡只能出現一次。
4.文字標籤
<font>文字內容</font>
5.文字格式化標籤
文字加粗標籤 <strong></strong> <b></b> 工作裡儘量使用strong
6.文字傾斜標籤
<em></em> <i></i> 工作裡儘量使用em
7.刪除線標籤
<del></del> <s></s> 工作裡儘量使用del
8.下劃線標籤
<ins></ins> <u></u> 工作裡儘量ins
◆注意：之所以工作裡使用<strong></strong> <em></em> <del></del> <ins></ins> 是因為更有語義化。
-
圖片標籤
Src 圖片的來源 必寫屬性
Alt 替換文字 圖片不顯示的時候顯示的文字
Title 提示文字 滑鼠放到圖片上顯示的文字
Width 圖片寬度
Height 圖片高度
◆圖片沒有定義寬高的時候，圖片按照百分之百比例顯示，如果只更改圖片的寬度或者高度，圖片等比例縮放。
-
路徑
1.相對路徑
相對於檔案自身出發，就是相對路徑。
◆檔案和圖片（html文件）在同一個目錄(資料夾) ，直接寫檔名。
◆圖片（html文件）在檔案在下一級目錄裡。資料夾名稱+/+圖片（html）名稱
◆圖片（html）在檔案的上一級目錄裡，..+/+圖片（html）名稱
◆圖片在檔案的上一級的其他目錄裡，../資料夾名稱/圖片名稱
★總結：找到下一級目錄（資料夾）的圖片（檔案）用 /，跳出當前目錄使用../
2.絕對路徑
-
超連結
href 去往的路徑（跳轉的頁面） 必寫屬性
title 提示文字 滑鼠放到連結上顯示的文字
target=”_self” 預設值 在自身頁面開啟（關閉自身頁面，開啟連結頁面）
Target=”_blank” 開啟新頁面 （自身頁面不關閉，開啟一個新的連結頁面）
-
錨鏈接
1.先定義一個錨點
2.超連結到錨點
-
空鏈
不知道連結到那個頁面的時候，用空鏈
-
壓縮檔案下載 不推薦使用
-
超連結優化寫法<base target="_blank"> 讓所有的超連結都在新視窗開啟
-
另存為 ctrl+shift+s
-
特殊字元
-
列表
- 無序列表
<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,I” type的值可以為1,a,A,i,I
start=”3” 決定了開始的位置。
3.自定義列表
<dl>
<dt></dt> 小標題
<dd></dd> 解釋標題
<dd></dd> 解釋標題
</dl>
-
音樂標籤
-
滾動
如果有疑問聯絡博主：y19970821ywty
要用到的工具，視訊教程，關注公眾號（Java學習之樂）直接免費獲取：
