學習之路-前端-筆記-1、HTML筆記

時間 2019-11-06

標籤學習之路前端筆記 html 欄目 HTML 简体版

原文原文鏈接

本文轉載於:猿2048網站➫學習之路-前端-筆記-1、HTML筆記javascript

各類技巧
1.在Webstrom中同時按ctrl+alt+insert建立新內容
2.輸入標籤按tab自動補全按end 或 HOME實現光標移動到當前行的最後或最前
3.按住alt鍵不放同時按鼠標左鍵能夠實現光標同時存在於多行同時輸入多行相同內容
4.ctrl+d 快速複製光標所在的一行 ctrl+x 快速刪除光標所在的一行
5.選中內容 ctrl+alt+t 自動在內容先後補上標籤
6.ctrl+/ 直接出現註釋

7.ctrl+shift+↑（將選中的快速上移）php

ctrl+shift+↓（將選中的快速下移）

8.快速合併代碼（單個標籤）：ctrl+ - （全部選中標籤：ctrl+ shift+ -）
快速展開代碼（單個標籤）：ctrl+ + （全部選中標籤：ctrl+ shift+ +）html

9.shift+enter 新啓一行前端

10.ctrl+f 查找（通用） java

1、亂碼現象: 編寫網頁時沒有指定字符集 web

meata標籤指定網頁字符集瀏覽器

解決方法：在head標籤中添加<meta charset = "GBK"/>服務器

GBK(GB2312)/UTF-8區別 GBK裏面存儲的字符比較少，僅存儲了漢字和一些經常使用的外文體積比較少
UTF-8 裏存儲世界上全部漢字體積比較大ide

注意在html文件中指定的字符必須和保存這個文件的字符集一致，不然仍是出現亂碼（1.記事本格式字體 2.記事本另存爲時有選擇）oop

2、DTD文檔
在最上面聲明是H5 <!DOCTYPE html>
不區分大小寫

3、 h標籤添加標題語義
h1到h6 h1最大 h6最小
在企業開發中慎用H1 一個網頁只有一個H1

4、Hr標籤
添加一條分割線單獨佔一行
格式 <Hr /> /寫不寫都行

5、註釋

6、img標籤

<img src="">
給scr賦值有兩種方法
①相對路徑：從.html所在的文件夾直接找（直接用圖片名<img src="***.jpg">）（分爲上級：../***.jpg 下級：下一等文件夾名/***.jpg 同級）
②絕對路徑（瞭解）：從盤符寫圖片路徑

1.width
height
在img標籤中 width/height告訴img顯示的圖片有多寬/高
兩個都指定可能變形只指定一個不會變形
2.title
當鼠標停留在圖片上時須要彈出的描述框中顯示什麼內容
3.alt
當圖片找不到時顯示什麼內容

7、br標籤
換行

<br>
能夠多個一塊兒使用有多個br標籤換多少行
br不多用描述完了用P標籤

8、a標籤
1.超連接
<a href="跳轉的頁面"> 原頁面展現的內容</a>

2.a標籤不只可讓文字能夠點擊也可讓圖片(<img src="">)能夠點擊

3.若是經過a標籤的href屬性指定一個url地址，那麼必須在地址前加上http://或https://

4.不只能夠轉到別的網頁能夠指定本地.html文件

5.a標籤中有一個叫作 target屬性，這個屬性的做用就是專門用於控制如何跳轉
①：_self :用於在當前選項卡中跳轉也就是不新建界面
②：-blank :用於在新的選項卡中跳轉也就是新建界面

6.a標籤中有title（title=""）當光標停在連接文字上會提示""裏的文字

9、base標籤
1.用於統一指定當前網頁中全部的超連接（a標籤）如何打開
2.base標籤必須寫在head標籤裏
3.<base target="">(_self或_blank)
4.若是base標籤和a標籤中同時指定了target，瀏覽器會執行a標籤中target

10、假連接
不會跳轉的連接
①、#
②、javascript：
區別：#的假連接會自動回到網頁的頂部，而JavaScript：的假連接不會自動回到網頁頂部

11、錨點
1.在當前頁面跳轉
2.<a href="#center">跳轉到中部</a>
.
.
<h2 id="center">我是中部</h2>

3.經過咱們定義的a標籤跳轉到指定的位置，是沒有過分動畫的，直接一會兒跳轉到指定位置

4.a標籤也能夠跳轉到其餘界面指定位置
<a href="***.html#center">跳轉到其餘中部</a>
。
。
<h2 id="center">我是中部</h2>

12、

十3、表格

4.設置表格標題的標籤叫作caption （居中）
caption必定要寫在table標籤中緊跟在table標籤後

5.th標籤（td標籤換爲th）
專門存儲每一列的標題，會將標題自動居中+加粗文字

6.合併單元格

水平方向合併: <td colspan="2"></td> 同時刪除後面一個td標籤
垂直方向合併：<td rowspan="2"></td> 同時刪除「下面」一個td標籤（即下一個tr裏的下一個td）

7.表單

①.格式：
<form>
<表單元素>
</form>

②.常見表單元素
7.1.input標籤：input裏有一個type屬性，這個屬性有不少類型的取值，取值不一樣決定imput標籤的功能和外觀
<input type=""> : "text"爲明文輸入框 "password"爲暗文輸入框 <input type="" value=""> value給輸入框附以默認值

"radio"爲單選框（ <imput type="radio">
默認狀況下單選框不會互斥，要想要互斥必須給單選框標籤都設置一個name屬性，而後name屬性還必須設置相同值才能夠
若想要單選框默認選中一個框子，那麼能夠給input標籤添加一個checked屬性 checked="checked"
）
"checkbox"爲多選框(也可默認選中 checked="checked" )

"buttom" value="" 普通按鈕（value=""屬性爲按鈕上加字）
"image" src="圖片連接" 爲圖片按鈕
"reset" 重置按鈕（用於清空表單中已經寫好的數據）
"submit" 提交按鈕（
注意點：
1.須要在from中添加action屬性並指定提交到的服務器地址
2.給須要提交的表單元素添加name屬性
）
"hidden" 隱藏域（配合提交按鈕將一些數據默默地提交到服務器
7.2.lable標籤
將輸入框與文字綁定在一塊兒
格式：①.將文字利用label標籤包裹起來
②.給輸入框添加一個id屬性
③.在lable標籤中經過for屬性和輸入框中的 id進行綁定便可
（例：<lable for="account">帳號：</lable><input type="text" id="account">）

7.3.非input標籤

7.3.1.select標籤
用於定義下拉列表
格式：<select>
<option>列表內容</option>
</select>
能夠經過給option標籤添加一個selected屬性來指定列表的默認值
能夠經過給option標籤包裹一層optgroup標籤來給下拉列表中的數據分類》

7.3.2.textarea標籤
定義一個多行輸入框
格式：<textarea>
</textarea>

能夠給textarea標籤添加cols和rows指定輸入框的寬度和高度，可是仍是能夠輸入無數行
默認狀況下輸入框能夠手動拉伸

十4、多媒體標籤
1.video標籤
格式<video src="">
</video>

video標籤的屬性：
src：用於告訴視頻的地址
autoplay：用於告訴是否須要自動播放視頻 autoplay="autoplay"
controls：用於告訴是否須要顯示控制條
poster：用於視頻沒有顯示以前顯示一張佔位圖片
loop：通常用於作廣告視頻，用因而否須要循環播放
preload: 用於預加載視頻； preload和autplay相沖，若是設置了autplay屬性，那麼preload就會失效
muted: 用於靜音
width:
height：

2.video標籤的第二種格式：播放視頻
<video>
<source src="" type="">
<source src="" type="">
<source src="" type="">
</video>

存在乎義：用於解決瀏覽器適配問題
video支持3種視頻格式，咱們能夠把這三種格式都經過source標籤指定給viodeo標籤

（例：<video>
<source src="images/sbl.webm" type="video/webm">
<source src="images/sbl.mp4" type="video/mp4">
<source src="images/sbl.ogg" type="video/ogg">
</video>
）

3.audio標籤：播放音頻
兩種格式：
①.<audio src="">

</audio>

②.<audio>
<source scr="" type="">
<source scr="" type="">
<source scr="" type="">
</audio>

(例：
<audio>
<source scr="images/sbl.wav" type="audio/wav">
<source scr="images/sbl.mp3" type="audio/mp3">
<source scr="images/sbl.ogg" type="audio/ogg">
</audio>)

和video屬性差很少除了height/width/poster不能用其餘能用

4.詳情和概要標籤

格式：
<details>
<summary>概要信息</summary>
詳情信息
</details>

5.marquee標籤
做用：跑馬燈
格式：
<marquee>
內容
</marquee>

能夠添加 direction=""屬性改變方向（left/right/up/down）
能夠添加 width/height
能夠添加 scrollamount"" 屬性改變滾動速度
能夠添加 loop=""屬性改變滾動次數
能夠添加 behavior=""屬性設置滾動類型（slide滾動到邊界就中止 alternate滾動到邊界就彈回）

可讓圖片滾動（<img src"" >）

6.html被廢棄的標籤

不是添加語義而是修改樣式
①.<br> <hr> <font> <b> <u> <i> <s> 沒有語義

有語義（被廢棄後代替的標籤）：
<strong>==<b> 定義重要性強調的文字
ins==<u> 定義插入的文字
em==<i> 定義強調的文字
del==<s> 定義被刪除的文字有語義

HTML筆記做品