一：audio音頻與video視頻
<audio src=’’’’>//mp3,m4a,avi…
注：音頻與視頻的默認控件是隱藏的
controls：顯示控件
loop：循壞播放
autoplay：自動播放//現在很多瀏覽器為了用戶體驗都禁止自動播放，視頻加了靜音就會自動播放，音頻加靜音不會自動播放
muted：靜音
如果想做出與扣扣音樂一樣的效果：audio標簽+隱藏控件（默認的，控件的樣式用HTML加css模擬）+javaScript來實現交互功能

注：默認情況下，視頻是不能進行拉伸得，只能成比例
object-fit:cover;覆蓋操作，可以讓視頻覆蓋整個父容器

source：

為了支持多個文件的適配問題，可以用source標簽

二：新的表單控件

input type=“”email“”
input type=“url”
input type=“number”
input type=’‘range’’ minlength="" maxlength="" value="" step=""
//最小長度，最大長度，當前值，每步移動的距離
input type=’‘date’’
input type=“month”
input type=“week”

input type=’‘search’'當你寫進內容之后后面會有一個x按鈕
input type="color"顏色控件
input type="tel"電話號碼輸入框（跟普通框的區別，在移動端，會調起帶數字的軟鍵盤）
input type="time"時間控件

表單怎么吧值傳給后端的
name–卡
value–錢
后端根據name拿到value
表單的新屬性：autocomplete="off"關閉表單的默認信息提示（歷史輸入過的用戶名的提示）
autofocus:自動獲取光標
required:值不能為空
pattern：正則驗證（js內容）

傳輸方式：method：數據傳輸方式
GET：
POST:

傳輸類型：
enctype:數據傳輸類型
application/x-www-form-urlencoded:默認傳輸是文本
multipart/form-data 傳輸的是文件

三：分欄布局
column-count：3;分欄的個數
column-width:110px；分欄的寬度
個數和寬度不要一起寫
column-gap：50px;分欄的間距
column-rule:1px solid pink;分欄的邊線
column-span:合并分欄 num|all

四：偽類與偽元素
#elem:after{}
#elem:hover{}

在css2.1的時候：elem:after{}√
在css3的時候#elem：after{}× #elem::after{}√
#elem：hover{}√ #elem::hover{}×
偽類：單冒號：hover :link…偽類只會對操作的元素起作用
偽元素：雙冒號 --::after ::before對創建出來的虛擬容器起作用，相當于樣式添加到了這個虛擬容器上

五：link標簽的擴展學習

<link rel="dns-prefetch" href="//static.360buyimg.com"> 提前去進行域名的dns解析<link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico"> 給頭標簽頁添加小圖標

六：擴展meta標簽，元信息（輔助信息）

<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="大連美團網精選大連美食餐廳,酒店預訂,電影票,旅游景點,外賣訂餐,大連團購信息,您可查詢商家評價店鋪信息。大連生活,下載美團官方APP ,吃喝玩樂1折起。"><meta name="keyword" content="淘寶,掏寶,網上購物,C2C,在線交易,交易市場,網上交易,交易市場,網上買,網上賣,購物網站,團購,網上貿易,安全購物,電子商務,放心買,供應,買賣信息,網店,一口價,拍賣,網上開店,網絡購物,打折,免費開店,網購,頻道,店鋪">注：網頁的描述信息，有助于搜索引擎搜索。<meta name="renderer" content="webkit">已哪個引擎去渲染頁面。有的瀏覽器可能有多個引擎，chrome : webkit blink .. <meta http-equiv="X-UA-Compatible" content="ie=edge">ie瀏覽器已什么方式渲染edge最新版進行渲染，ie9 ie10 -> edge <meta http-equiv="refresh" content="3" url="">每個多長時間可以對瀏覽器進行刷新 <meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT"> 在指定的時間內，請求資源會走緩存。

七： CSS Hack?
我們一直用的就是chrome瀏覽器，但是還有很多其他瀏覽器，當然這些瀏覽器都可以稱為高級瀏覽器。

CSS Hack 解決那些古老的瀏覽器兼容性問題。Hack分類下載：ieTester工具 , 測試在服務器環境下。1. CSS屬性前綴法_ + * \9 \0 ...2. 選擇器前綴法*html3. IE條件注釋法<!--[if IE]>…<![endif]-->IE6 BUG 非常多：1. IE6高度的最小值是19px ,解決 overflow:hidden;2. IE6雙邊距問題margin和float，解決 display:inline;

總結

以上是生活随笔為你收集整理的每日随记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。