laravel框架上傳圖片實現實時預覽功能
1、介紹
HTML指的是超文字標記/標籤語言(Hyper Text Markup Language),專門製作網頁的計算機語言
HTML檔案的字尾必須是 "htm" 或者 "html"
2、檔案標籤
<html>標籤: 代表當前書寫的是一個HTML文件
<head>標籤:儲存的本頁面的一些重要的資訊，它不會顯示
<head>標籤:有一個子標籤<title>它是用於定義頁面的標題的
<body>標籤:書寫的內容會顯示出來
<body>標籤的屬性：
1. text用於設定文字顏色
2. bgcolor用於設定頁面的背景色
3. background用於設定頁面的背景圖片
3、HTML註釋
<!-- 這個就是註釋 -->
4、標籤：
1、換行標籤：<br/>標籤就是一個換行(回車)功能標籤
2、段落標籤：<p> 標籤中的內容會在開始與結束之間產生一個空白行，並且它會自動換行
align是它的常用屬性，可以用來設定段落中的內容對其方式，可取的值有：
left 、right 、center
3、水平標籤：<hr> 標籤會在頁面上產生一個水平線，它的常用屬性有：
align:可取值有left right center代表水平線位置
size:代表水平線厚度(粗細) size="5",5的預設單位是 "畫素/畫素點",也可以實用百分比,size="50%"
width:代表水平線寬度
color:水平線的顏色
4、分割槽標籤：<div> 塊標籤，是用來進行佈局的，普通的div並沒有什麼效果，肉眼也看不見，但div與CSS結合，
就會更好對頁面進行排版
<span> 標籤用來組合文件中的行內元素，一般使用 <span> 來組合行內元素，以便通過樣式來格式化它們
<div>與<span>的區別：
1. div會自動換行，我們也叫這樣的標籤叫塊級元素
2.span標籤它不會自動換行，我們叫它為行內元素
3.div整體劃分區塊，而span區域性劃分區塊
5、字型標籤：<font>標籤可以設定字型，字的大小及顏色，常用屬性：
1、face：用於設定字型，例如 宋體、楷體等
2、size：用於設定字型大小（大小預設設定1-7，7最大，想要更大需要實用css）
3、color：用於設定字型的顏色，螢幕上的顏色是有紅綠藍三原色組成的，所以顏色表達方式有：
1.使用十六進位制表示，取值範圍#000000 ~ #FFFFFF(黑色到白色)
2.RGB顏色表示法:RGB(x,y,z)。x、y、z是0~255之間的整數。rgb字母大小寫無所謂
6、標題標籤：<h1>--<h6>,h1最大h6最小，它們代表的是標題， 自動換行，字型加粗，標題與標題之間產生一定的距離
7、格式化標籤：<b> 字型加粗
<i> 字型傾斜
<del> 刪除線
<u> 下劃線
8、列表標籤：ol 有序列表 ，列表按照有序進行排列，常用的屬性有：
tyep="A" 字母排序
type="1" 羅馬數字排序
start="3" 指定序列從幾開始排序
ul 無序排序，列表不按順序排序，但是可以設定排序是的開頭標誌，常用屬性有：
type="disc" 預設 實心圓
type="square" 方塊
type = "circle" 空心圓
9、 影象標籤：<img>標籤可以在網頁引入一張圖片,常用屬性：
1. src代表的圖片的路徑
2. width圖片的寬度
3. height圖片的高度
4. border用於設定圖片的邊框
5. alt如果圖片不可以顯示時，預設顯示的文字資訊
6. title滑鼠懸停圖片上，預設顯示的文字資訊
7. align圖片附件文字的對齊方式，可取值有
left:把影象對齊到左邊
right:把影象對齊到右邊
middle:把影象與中央對齊
top:把影象與頂部對齊
bottom:把影象與底部對齊(預設)
10、超連結標籤：<a>標籤，可以實現跳轉到其他頁面操作，超連結的內容不僅可以是文字，也可以是圖片等資訊
常用的屬性：1、href代表的我們要跳轉的路徑
2、target這個屬性規定在何處開啟這個連結文件，可取值：
_blank 在新視窗中開啟頁面
_self 預設 在本視窗開啟頁面
功能性連線：發郵件：
<ahref="mailto:[email protected]">聯絡站長</a>
qq聊天視窗：
<a href="tencent://message/?uin=19998539&Menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=1:615050000:7"/>
</a>
11、表格標籤：<table>：定義一個表格
border：邊框，取值是以畫素為單位
width ：代表表格的寬度
align ： 代表表格的對齊方式，取值有 left、right、center
cellspacing：單元格間距（通常設定0表示單線表格）
<tr>：表格中的行
align 代表表格的對齊方式，常用取值有：left、right、center
<td>: 表格中的資料單元格
colspan 指示列的合併
rowspan 指示行的合併
12、表單標籤：<from>就是表單標籤，它得常用屬性有：
action：整個表單提交的目的地
method: 表單提交得方式，有get提交和post提交
get：提交時，傳輸資料量少（傳遞普通文字資訊，傳遞照片會失敗）
明文提交（在瀏覽器的url 後面會顯示提交的資料，不適合用於登入）
post：提交時，傳輸資料量大（傳遞文字和圖片都行）
密文提交（瀏覽器的url後面看不到提交 的資料）
表單中的元素（控制元件）：1、<input>元素type屬性：
- text: 預設值，普通的文字輸入框
- placeholder屬性：提示文字
- maxlength屬性：最多能輸入字元數量
- password: 密碼輸入框
- checkbox：多選框/複選框
- checked：被選中
- radio：單選按鈕
- file ：上傳檔案
- submit ：提交按鈕
- reset：重置按鈕
- button：普通按鈕
2、<select>：下拉列表/下拉框
- <option> 列表鐘的項
- selected 被選中的
3、<textarea> : 文字域（多行文字框）
可以通過 cols 和 rows 屬性來規定 textarea的尺寸，
不過更好的辦法是使用 CSS 的height 和 width 屬性
4、<button>：按鈕
在form表單中，作用和submit一樣
不再form表單鍾，就是普通按鈕（配合後期的javascript，可擴充套件性更高）
13、框架標籤：
通過和框架標籤可以定製HTML頁面佈局。可以理解為：用多個頁面拼裝成一個頁 面。
注意，框架標籤和body標籤不共存。“有你沒我，有我沒你”
14、其他標籤與特殊字元
1、<meta>標籤
2、<link>標籤，使用該標籤來匯入css
3、特殊字元
5、HTML5新特性
1.H5包含H4
2.大小寫不敏感：標籤、屬性、屬性的值 : <inPUT Type="password"/>
3.引號可以省略：<input type = "password"> --> <inpyt type=password>
4.省略了結尾標籤： <p> 哈哈哈哈哈 ps:原始碼中html會幫我們自動補全的
5.新增語義化標籤
6、媒體標籤：想在網頁上播放視訊，就要使用<video> 屬性有：
src：媒體資原始檔的位置
controls：控制面版
autoplay: 自動播放
loop: 迴圈播放
<video src="img/html-css-js之間的關係.mp4" controls loop autoplay></video>
7、新增表單控制元件