客貼
https://www.chuangkit.com/banner.html
Fotor
https://www.fotor.com.cn/
搞定設計
https://dianshang.gaoding.com
年前，濱海之邊馬上畢業的老少年
經過幾天半死不活的思考之后決定干前端
那個時候為了面試各種css屬性js API背的是滾瓜爛熟
然后投簡歷，企業要項目經驗，
我沒有工作我哪來的項目經驗啊
沒人會管你為什么沒有
so
自己編唄，于是乎為了炫技，為了證明自己開始了我的第一個自己給自己找需求的項目 ，他有個一吊炸天的項目名稱
還有我辛苦的汗水結晶。
為了吸引別人的眼光 首先得弄一個超級醒目得banner，怎么弄呢，別人的都是平面得 我就弄成立體得，于是乎四處找資料，最終弄成了一個如下圖所示得banner：給你來個俯視圖得角度
然后實際的顯示效果是醬紫：
怎么做到的呢，實際就是將一個元素的transform-style設置成preserve-3d 這個屬性允許他的子元素在一個3d空間中以一種以立體的方式呈現而不是跟平面一樣，然后將子元素，對于這個banner來說就是六張圖，絕對定位至同一中心點，然后分別旋轉0，60，120，。。。，360這種角度，然后再給個translateZ讓他們在z軸撐開，這樣就是一個3d得展示效果咯。
其實那個時候遇到的一個難點是讓這個3dbanner適配各種大小的屏幕，移動端先不說，pc端瀏覽器的寬度就是五花八門的，還有另外一點就是得讓這個banner居中
年少的我，那個時候為了適配直接將某些值寫死的 這樣的話其實在大小屏上呈現的效果會差很多，而且最為重要的一點是，在沒有進行適配的屏幕上，效果可能會很差。
關于怎么布局，以及其他細節可以查看張鑫旭的這篇文章，著此進行的一些小修改就是將原有的寫死的數值改成百分比，然后圖片上的translateZ采用js動態計算，然后居中banner的時候也是，為了使其居中，給整個banner的容器給一個left，這個值得大小等于容器的大小減去圖片的寬度再除以2.
關于translateZ的計算：
因為實際是一個等邊六邊形嘛，所以θ的大小等于 （360 / 6）/2，然后translateZ的大小就是 (x/2) / tanθ 還挺簡單。
整體上來說沒有太過復雜的處理，額外注意的一點是，居中那個banner，如果無法使內部的圖片元素寬度等于包圍他父級元素的時候 保持旋轉居中的時候是很困難的，但是為了凸顯一個立體的事物我們自然需要使得父元素的內能顯示當前正面的一張圖片，還有兩側的側面，這個時候就需要一個技巧，就是在父元素外層再包一層元素，然后我們的居中操作在這個元素上設置，就是上面說的設置left值，這樣的話既能保證圖片的寬度與父級是一致的，也同時滿足了立體的顯示效果。
預覽地址https://daxiazilong.github.io/extream/
技術講解完畢，以下是牢騷時間。
現在再去看以前寫過的東西，那些曾經引以為豪的
絞盡腦汁 去創造的
以及那時不能完美地解決的
好像都變得平平淡淡
額外一件值得開心的事情是 現在得我能解決以前得自己不能完美解決得東西了，這種感覺很舒服~
時間過得真快。
、定義
<meta> 標簽提供關于 HTML 文檔的元數據。它不會顯示在頁面上，但是對于機器是可讀的。可用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他 web 服務。
2、作用
meta里的數據是供機器解讀的，告訴機器該如何解析這個頁面，還有一個用途是可以添加服務器發送到瀏覽器的http頭部內容，例如我們為頁面中添加如下meta標簽：
- <meta http-equiv="charset" content="iso-8859-1">
- <meta http-equiv="expires" content="31 Dec 2008">
瀏覽器的頭部就會包括這些:
- charset:iso-8859-1
- expires:31 Dec 2008
只有瀏覽器可以接受這些附加的頭部字段，并能以適當的方式使用它們時，這些字段才有意義。
3、meta的必需屬性和可選屬性
meta的必需屬性是content，當然并不是說meta標簽里一定要有content，而是當有http-equiv或name屬性的時候，一定要有content屬性對其進行說明。例如：
必需屬性
<meta name="keywords" content="HTML,ASP,PHP,SQL">
這里面content里的屬性就是對keywords進行的說明，所以呢也可以理解成一個鍵值對吧，就是{keywords:"HTML,ASP,PHP,SQL"}。
可選屬性
在W3school中，對于meta的可選屬性說到了三個，分別是http-equiv、name和scheme。考慮到scheme不是很常用，所以就只說下前兩個屬性吧。
http-equiv
http-equiv屬性是添加http頭部內容，對一些自定義的，或者需要額外添加的http頭部內容，需要發送到瀏覽器中，我們就可以是使用這個屬性。在上面的meta作用中也有簡單的說明，那么現在再舉個例子。例如我們不想使用js來重定向，用http頭部內容控制，那么就可以這樣控制：
<meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />
在頁面中加入這個后，5秒鐘后就會跳轉到指定頁面啦，效果可看W3school的例子
name
第二個可選屬性是name，這個屬性是供瀏覽器進行解析，對于一些瀏覽器兼容性問題，name屬性是最常用的，當然有個前提就是瀏覽器能夠解析你寫進去的name屬性才可以，不然就是沒有意義的。還是舉個例子吧:
<meta name="renderer" content="webkit">
這個meta標簽的意思就是告訴瀏覽器，用webkit內核進行解析，當然前提是瀏覽器有webkit內核才可以，不然就是沒有意義的啦。當然看到這個你可能會有疑問，這個renderer是從哪里冒出來的，我要怎么知道呢？這個就是在對應的瀏覽器的開發文檔里就會有表明的，例如這個renderer是在360瀏覽器里說明的。360瀏覽器內核控制Meta標簽說明文檔
常用meta標簽大總結
接下來就是常用的meta標簽大總結啦，我會盡可能的做到全
charset
charset是聲明文檔使用的字符編碼，解決亂碼問題主要用的就是它，值得一提的是，這個charset一定要寫第一行，不然就可能會產生亂碼了。
charset有兩種寫法
- <meta charset="utf-8">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
兩個都是等效的。
百度禁止轉碼
百度會自動對網頁進行轉碼，這個標簽是禁止百度的自動轉碼
<meta http-equiv="Cache-Control" content="no-siteapp" />
SEO 優化部分
- <!-- 頁面標題<title>標簽(head 頭部必須) -->
- <title>your title</title>
- <!-- 頁面關鍵詞 keywords -->
- <meta name="keywords" content="your keywords">
- <!-- 頁面描述內容 description -->
- <meta name="description" content="your description">
- <!-- 定義網頁作者 author -->
- <meta name="author" content="author,email address">
- <!-- 定義網頁搜索引擎索引方式，robotterms 是一組使用英文逗號「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。 -->
- <meta name="robots" content="index,follow">
viewport
viewport主要是影響移動端頁面布局的，例如：
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
content 參數：
- width viewport 寬度(數值/device-width)
- height viewport 高度(數值/device-height)
- initial-scale 初始縮放比例
- maximum-scale 最大縮放比例
- minimum-scale 最小縮放比例
- user-scalable 是否允許用戶縮放(yes/no)
各瀏覽器平臺
Microsoft Internet Explorer
- <!-- 優先使用最新的ie版本 -->
- <meta http-equiv="x-ua-compatible" content="ie=edge">
- <!-- 是否開啟cleartype顯示效果 -->
- <meta http-equiv="cleartype" content="on">
- <meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
-
-
- <!-- Pinned Site -->
- <!-- IE 10 / Windows 8 -->
- <meta name="msapplication-TileImage" content="pinned-tile-144.png">
- <meta name="msapplication-TileColor" content="#009900">
- <!-- IE 11 / Windows 9.1 -->
- <meta name="msapplication-config" content="ieconfig.xml">
Google Chrome
- <!-- 優先使用最新的chrome版本 -->
- <meta http-equiv="X-UA-Compatible" content="chrome=1" />
- <!-- 禁止自動翻譯 -->
- <meta name="google" value="notranslate">
360瀏覽器
- <!-- 選擇使用的瀏覽器解析內核 -->
- <meta name="renderer" content="webkit|ie-comp|ie-stand">
UC手機瀏覽器
UCBrowser_U3_API
QQ手機瀏覽器
- <!-- 鎖定屏幕在特定方向 -->
- <meta name="x5-orientation" content="landscape/portrait">
- <!-- 全屏顯示 -->
- <meta name="x5-fullscreen" content="true">
- <!-- 頁面將以應用模式顯示 -->
- <meta name="x5-page-mode" content="app">
Apple iOS
- <!-- Smart App Banner -->
- <meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
-
-
- <!-- 禁止自動探測并格式化手機號碼 -->
- <meta name="format-detection" content="telephone=no">
-
-
- <!-- Add to Home Screen添加到主屏 -->
- <!-- 是否啟用 WebApp 全屏模式 -->
- <meta name="apple-mobile-web-app-capable" content="yes">
- <!-- 設置狀態欄的背景顏色,只有在 “apple-mobile-web-app-capable” content=”yes” 時生效 -->
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <!-- 添加到主屏后的標題 -->
- <meta name="apple-mobile-web-app-title" content="App Title">
Google Android
- <meta name="theme-color" content="#E64545">
- <!-- 添加到主屏 -->
- <meta name="mobile-web-app-capable" content="yes">
- <!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->
App Links
- <!-- iOS -->
- <meta property="al:ios:url" content="applinks://docs">
- <meta property="al:ios:app_store_id" content="12345">
- <meta property="al:ios:app_name" content="App Links">
- <!-- Android -->
- <meta property="al:android:url" content="applinks://docs">
- <meta property="al:android:app_name" content="App Links">
- <meta property="al:android:package" content="org.applinks">
- <!-- Web Fallback -->
- <meta property="al:web:url" content="http://applinks.org/documentation">
- <!-- More info: http://applinks.org/documentation/ -->
最后——移動端常用的meta
- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <meta name="apple-mobile-web-app-status-bar-style" content="black" />
- <meta name="format-detection"content="telephone=no, email=no" />
- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
- <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 刪除蘋果默認的工具欄和菜單欄 -->
- <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 設置蘋果工具欄顏色 -->
- <meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略頁面中的數字識別為電話，忽略email識別 -->
- <!-- 啟用360瀏覽器的極速模式(webkit) -->
- <meta name="renderer" content="webkit">
- <!-- 避免IE使用兼容模式 -->
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->
- <meta name="HandheldFriendly" content="true">
- <!-- 微軟的老式瀏覽器 -->
- <meta name="MobileOptimized" content="320">
- <!-- uc強制豎屏 -->
- <meta name="screen-orientation" content="portrait">
- <!-- QQ強制豎屏 -->
- <meta name="x5-orientation" content="portrait">
- <!-- UC強制全屏 -->
- <meta name="full-screen" content="yes">
- <!-- QQ強制全屏 -->
- <meta name="x5-fullscreen" content="true">
- <!-- UC應用模式 -->
- <meta name="browsermode" content="application">
- <!-- QQ應用模式 -->
- <meta name="x5-page-mode" content="app">
- <!-- windows phone 點擊無高光 -->
- <meta name="msapplication-tap-highlight" content="no">
- <!-- 適應移動端end -->
