前端學習之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學習之樂)直接免費獲取: