HTML基礎學習筆記（1）

時間 2019-11-21

標籤 html 基礎學習筆記欄目 HTML 简体版

原文原文鏈接

HTML學習筆記（1）

1.經常使用快捷鍵

win+d---返回桌面
win+e---個人電腦
win+r---打開運行css
Alt+tab---切換軟件
ctrl+tab---切換軟件文檔html
F2---重命名
F5---刷新前端

2.認識前端

前端就是將效果圖生成網頁，利用HTML+CSS+JS
PC端移動端
用戶體驗

2認識網頁

網頁由文字、圖片、輸入框、視頻、音頻、超連接等組成；
web標準：W3c組織（萬維網聯盟）制定

html 結構標準---人的身體
CSS 表現標準---給人化妝、變得更漂亮
Js 行爲標準---至關於人在唱歌

基礎班課程

html 2天
css 7天
js 3天

瀏覽器

瀏覽器是一個上網的客戶端（軟件）。
IE、火狐、goole、獵豹、Safari瀏覽器、Opera

瀏覽器內核

渲染引擎
IE(trident) 谷歌/歐鵬(blink) 火狐(gecko) 蘋果(webkit)
渲染引擎是兼容性我呢提出現的根本緣由

瀏覽器和服務器

IIS web服務器提供網頁瀏覽服務

URL地址

瀏覽器向服務器發送請求（經過http協議）
http協議：超文本傳輸協議，也就是瀏覽器和服務器端的網頁傳輸數據的約束和規範
url協議:平時咱們寫的網址就是url地址
url協議：規定url地址的格式
協議規定格式： scheme://host.domain:port/path/filename
scheme: 定義因特網服務的類型。常見的就是http
host：定義域主機（http 的默認主機是www）
domain: 定義因特網域名好比：w3school.com.cn
:port 定義端口號（網頁默認端口 :80）
path: 網頁所在服務器上的路徑
filename: 文件名稱

4認識HTML

Hyper text markup language

超文本標記語言html5
超文本：超連接。（實現頁面跳轉）web

HTML結構標準瀏覽器

<!doctype html>    聲明文檔類型
 <html>             根標籤
 <head>             頭標籤：用戶只能看見標題
 <title></title>    標題標籤
 </head>
 <body>             主體標籤            
 </body>
 </html>

注：html與htm是同樣的。後綴名不能決定文件格式，只能決定打開文件的方式。

HTML標籤分類

單標籤： <!doctype html>
雙標籤：

HTML標籤關係分類

包含（嵌套關係）---</head></li>
並列關係---

開發工具：

Dw 歷史悠久
Sublime 輕量級有不少好用的插件
Webstorm 重量級太智能服務器
Sublime經常使用快捷鍵dom
html:xt+tab---html結構代碼
！+tab --- html5標籤結構
tab---自動補全
ctrl+shift+d---快速複製一行
ctrl+shift+k---快速刪除一行
ctrl+鼠標左鍵單擊---集體輸入
ctrl+h---查找替換
ctrl+f---查找
ctrl+/---註釋
ctrl+k+b---快速打開/隱藏側邊欄（查看選項）
ctrl+n---快速建立新文件
ctrl+l---快速選中一行
ctrl+w---關閉當前頁面
ctrl+shift+上/下箭頭---光標定位行，快速總體移動（上下移動）
F11 全屏模式
查看-佈局---設置頁面中顯示文檔分佈編輯器
其餘快捷鍵
- Ctrl+D 選詞（反覆按快捷鍵，便可繼續向下同時選中下一個相同的文本進行同時編輯）
- Ctrl+G 跳轉到相應的行
- Ctrl+J 合併行（已選擇須要合併的多行時）
- Ctrl+L 選擇整行（按住-繼續選擇下行）
- Ctrl+M 光標移動至括號內開始或結束的位置
- Ctrl+T 詞互換
- Ctrl+U 軟撤銷
- Ctrl+P 查找當前項目中的文件和快速搜索；輸入 @ 查找文件主標題/函數；或者輸入 : 跳轉到文件某行；
- Ctrl+R 快速列出/跳轉到某個函數
- Ctrl+K Backspace 從光標處刪除至行首
- Ctrl+K+B 開啓/關閉側邊欄
- Ctrl+KK 從光標處刪除至行尾
- Ctrl+K+T 摺疊屬性
- Ctrl+K+U 改成大寫
- Ctrl+K+L 改成小寫
- Ctrl+K+0 展開全部
- Ctrl+Enter 插入行後（快速換行）
- Ctrl+Tab 當前窗口中的標籤頁切換
- Ctrl+Shift+A 選擇光標位置父標籤對兒
- Ctrl+Shift+D 複製光標所在整行，插入在該行以前
- ctrl+shift+F 在文件夾內查找，與普通編輯器不一樣的地方是sublime容許添加多個文件夾進行查找
- Ctrl+Shift+K 刪除整行
- Ctrl+Shift+L 鼠標選中多行（按下快捷鍵），便可同時編輯這些行
- Ctrl+Shift+M 選擇括號內的內容（按住-繼續選擇父括號）
- Ctrl+Shift+P 打開命令面板
- Ctrl+Shift+/ 註釋已選擇內容
- Ctrl+Shift+↑能夠移動此行代碼，與上行互換
- Ctrl+Shift+↓能夠移動此行代碼，與下行互換
- Ctrl+Shift+[ 摺疊代碼
- Ctrl+Shift+] 展開代碼
- Ctrl+Shift+Enter 光標前插入行
- Ctrl+PageDown 、Ctrl+PageUp 文件按開啓的先後順序切換
- Ctrl+Z 撤銷
- Ctrl+Y 恢復撤銷
- Ctrl+F2 設置/取消書籤
- Ctrl+/ 註釋整行（如已選擇內容，同「Ctrl+Shift+/」效果）
- Ctrl+鼠標左鍵能夠同時選擇要編輯的多處文本
- Shift+鼠標右鍵（或使用鼠標中鍵）能夠用鼠標進行豎向多行選擇
- Shift+F2 上一個書籤
- Shift+Tab 去除縮進
- Alt+Shift+1（非小鍵盤）窗口分屏，恢復默認1屏
- Alt+Shift+2 左右分屏-2列
- Alt+Shift+3 左右分屏-3列
- Alt+Shift+4 左右分屏-4列
- Alt+Shift+5 等分4屏
- Alt+Shift+8 垂直分屏-2屏
- Alt+Shift+9 垂直分屏-3屏
- Ctrl+Shift+分屏序號將當前焦點頁分配到分屏序號頁
- Alt+. 閉合當前標籤
- Alt+F3 選中文本按下快捷鍵，便可一次性選擇所有的相同文本進行同時編輯
- Tab 縮進自動完成
- F2 下一個書籤
- F6 檢測語法錯誤
- F9 行排序(按a-z)

設置默認瀏覽器

Chrome

5標籤

單標籤

註釋標籤（ctrl+/）：
換行標籤： 
水平線標籤：<hr />

雙標籤

段落標籤： 特色：上下自動生成空白行。 換行沒有
標題標籤：<h1></h1>---一個頁面裏只能出現一次。h變化範圍：h1~h6
文本標籤：文本內容
文本格式化標籤：

文本加粗： （少用）
文本傾斜： （少用）
刪除線：<del></del> <s></s>（少用）
下劃線：<ins></ins> （少用）
注：之因此工做裏使用 <del></del> <ins></ins>，由於更有語義化，可讀性更強。
 上標
 下標

圖片標籤：
<img src="" alt="" title="" width="" height="" />
src---圖片來源必寫屬性
alt---替換文本圖片不顯示的時候顯示的文字
title---提示文本鼠標放到圖片上顯示文字
width---圖片寬度
height---圖片高度

6路徑

相對路徑：相對於文件自身出發，就是相對路徑。
文件和圖片（html文檔）在同一個目錄（文件夾），直接寫文件名
圖片（html）在文件的下一級目錄，文件夾名稱/圖片（html）名稱
圖片（html）在文件的上一級目錄，../圖片（html）名稱
圖片（html）在文件的上一級的其餘目錄，../其餘目錄名/圖片（html）名稱
總結：找到下一級目錄（文件夾）的圖片（文件）用 / ；跳出當前目錄使用../ide
絕對路徑：電腦上絕對路徑，通常不用

7超連接

<a href="03圖片標籤.html" title="圖片標籤" target="_blank">超連接</a>
href 去往的路徑（跳轉的頁面）必寫屬性
title 提示文本
target="_self" 默認值---在在自身頁面打開（關閉自身頁面，打開連接頁面）
target=」_blank」打開新頁面（自身頁面不關閉，打開一個新的連接頁面）

錨連接

先定義一個錨點:
超連接到錨點：<a href="#sd">回到頂部</a>

空鏈---不知道連接到那個頁面的時候，用空鏈
<a href="#">空鏈</a>
超連接的優化

<base target="_blank"> --- 讓全部的超連接都在新窗口打開

壓縮文件下載不推薦使用

<a href="../01-ppt.rar">壓縮包</a>

8特殊字符標記

( ) 空格---  *
< 小於號---< *
大於號---> *
& 和號---&
￥人民幣---¥
© 版權---©
® 註冊商標---®
° 攝氏度---°
± 正負號---±
× 乘號---×
÷ 除號---÷
² 平方2(上標2)---²
³ 立方3(上標3)---³

9列表

無序列表

<ul><li></li><li></li>……<li></li></ul> 默認爲實心小圓圈
<ul type="square"><li>今天是星期三</li></ul> 小方塊
<ul type="disc"><li>今天是星期三</li></ul> 實心小圓圈
<ul type="circle"><li>今天是星期三</li></ul> 空心小圓圈

有序列表

<ol type=""><li></li><li></li>……<li></li></ol>
type="1,a,A,i,I" 序號類型
start="3,c,……" 決定了開始的位置

自定義列表

<dl>
    <dt></dt>   小標題
    <dd></dd>   解釋標題
    <dd></dd>   解釋標題
</dl>

10音樂標籤

<embed src="1.mp3" hidden="true" />
- src---音樂文件來源
- hidden="true"/"false"---隱藏顯示播放符號

11滾動

頁面自動滾動效果之：<marquee>...</marquee>
中間的內容能夠爲文字，圖片，也能夠是由程序生成的文字或圖片
屬性：height 設置高度 width 設置寬度 bgcolor 設置背景顏色
behavior：設定滾動的方式
- slide--表示一端滾動到另外一端，不會重複。
- scroll：表示由一端滾動到另外一端，會重複。
- alternate：表示在兩端之間來回滾動。
direction：設置滾動的方向
- down :向下滾動
- left:向左滾動
- right:向右滾動
- up:向上滾動
loop：設置滾動次數，-1：一直滾下去

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。