html基礎&標籤
阿新 • • 發佈：2020-07-30
html相關概念&&建站流程
- html
- 英文：Hyper Text Markup Language
- 中文：超文字標記語言
- 標記語言：描述網頁的一種語言
- 超文字：可以進行點選且跳轉的文字或者圖片等
- 網頁的組成部分
- 結構(html)==w3c(全球資訊網聯盟)
- 樣式(css)==w3c(全球資訊網聯盟)
- 行為(js)==ECMA(歐洲廠商聯盟)
- html的發展史
- xhtml 可擴充套件的超文字標記語言
- xhtml和html的區別
- xhtml後面必須帶斜槓
- xhtml的屬性值必須是雙引號
- xhtml的標籤必須都是小寫
- xhtml和html的區別
- 建站流程
- 申請域名
- 租用伺服器
- 建設網站
- 產品經理==>原型圖
- ui設計師==>ui設計圖
- 前端工程師==>將ui設計圖百分百還原
- 後端工程師==>將靜態網頁轉換成動態(資料動態)的
- 測試工程師==> 保證頁面功能/效能沒有問題
- 推廣
- 維護
html的基本結構
- 手動編寫
<!-- 宣告文件型別 -->
<!DOCTYPE html>
<html>
<!-- 頭部 -->
<head>
<!-- 網頁的編碼格式 -->
<meta charset="UTF-8">
<title>網頁的標題</title>
</head>
<body>
主體 文字，圖片等
</body>
</html>
- 自動生成網頁基本結構
- 新建一個.html字尾名的檔案
- 英文狀態下，寫出 ! 按回車或者tab鍵
- alt+b執行到瀏覽器
html的語法
- 標籤/標記/元素：放到尖括號裡面的單詞
- 雙標籤/標記：成對出現的標籤
- 單標籤/標記/空標籤：單獨出現的標籤
- 屬性：放到標籤後面，且用空格隔開
- 屬性值：屬性和屬性值之間用等號連線，屬性值要用引號引起來，可以出現多個屬性，且每個屬性之間用空格隔開
html的基本標籤
- 文章類
- 標題標籤 h1-h6
- 雙標籤
- h1-h6字型逐漸變小，且加粗
- 獨佔一行
- 段落標籤 p
- 雙標籤
- 獨佔一行
- 修飾類標籤
- 加粗 b strong
- 雙標籤
- 加粗
- 在同一行顯示
- 傾斜 i em
- 雙標籤
- 傾斜
- 同一行顯示
- 下劃線 u
- 雙標籤
- 加下劃線
- 在同一行顯示
- 刪除線 del
- 雙標籤
- 加刪除線
- 在同一行顯示
- 下標 sub
- 上標 sup
- 水平線 hr
- 單標籤
- 換行標籤 br
- 單標籤，強制換行
- 加粗 b strong
- 特殊字元
- 空格
- 左尖括號 <
- 右尖括號 >
- 版權符號 ©
- 註冊商標 ®
- 標題標籤 h1-h6
- 圖片
- 單標籤
- src 圖片路徑
- 絕對路徑
- 相對路徑
- 當前檔案和目標檔案在同一個目錄下面，直接圖片名.字尾
- 當前檔案和目標檔案的資料夾在同一個目錄下面 目標檔案資料夾 名/圖片名.字尾
- 當前檔案的資料夾和目標檔案的資料夾在同一個目錄下面，當前檔案套幾層就寫幾個../目標檔案資料夾名/圖片名.字尾
- alt 圖片未載入成功的時候的提示
- title 提示文字，滑鼠滑到圖片標籤的提示資訊，可以加在任何標籤
- width 寬度
- height 高度
- 超連結
- 雙標籤
- 自帶下劃線，自帶字型顏色
- href: 連結的地址 預設值 href="#"
- target
- _self 當前視窗開啟 預設值
- _blank 新開一個視窗開啟
vscode快捷鍵
- 儲存 ctrl+s
- 註釋 ctrl+/
- 向前縮排 shift+tab
- 向後縮排 tab
- 全選 ctrl+a
- 搜尋 ctrl+f
- 撤銷 ctrl+z
- 反撤銷 ctrl+y