在移動端中我們經常碰到橫屏豎屏的問題，那么我們應該如何去判斷或者針對橫屏、豎屏來寫不同的代碼呢。
這里有兩種方法：
一：CSS判斷橫屏豎屏
寫在同一個CSS中
XML/HTML Code復制內容到剪貼板@(:){/*豎屏css*/}@(:){/*橫屏css*/}
分開寫在2個CSS中
豎屏
XML/HTML Code復制內容到剪貼板
橫屏
XML/HTML Code復制內容到剪貼板
二：JS判斷橫屏豎屏
XML/HTML Code復制內容到剪貼板//判斷手機橫豎屏狀態：.(""?"":"",(){if(.===180||.===0){alert('豎屏狀態！');}if(.===90||.===-90){alert('橫屏狀態！');}},false);
//移動端的瀏覽器一般都支持.這個參數，通過這個參數可以判斷出手機是處在橫屏還是豎屏狀態。
屏幕方向對應的.值：
ipad,： 90 或 -90 橫屏
ipad,： 0 或180 豎屏
：0 或180 橫屏
： 90 或 -90 豎屏
HTML標簽
開始標簽( tag):開放標簽
結束標簽( tag):閉合標簽
元素
定義：HTML元素指的是從開始標簽到結束標簽的代碼（元素以開始標簽為起始以借宿標簽終止）
元素的內容：元素的內容指的是開始標簽與結束標簽之間的內容
元素的特點：
1，大多數HTML元素可嵌套（可以包括其他的HTML元素）
2，HTML文檔有嵌套的HTML元素構成
3，不要忘記結束標簽，未來的HTML版本不允許省略結束標簽
4，空的html元素
5，沒有內容的html元素被稱為元素的空內容，空元素是在開始標簽中關閉的
注意：
空元素和空內容的區別：空元素的開始標簽和結束標簽是相同的，注重的是標簽。空內容指的是元素內的內容是空的，注重的是內容。
HTML基本結構
:不是標簽，只是用以聲明幫助瀏覽器正確地現實網頁
元素是所有頭部元素的容器
標簽始終位于head元素中，標簽提供關于HTML文檔的元數據
以上這篇Html5元素及基本語法詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持查字典教程網。
如何巧用HTML5設計按鈕背景不同動畫特效，在該特效中，當鼠標滑過按鈕時，使用CSS3 來動畫 -size和-屬性，來實現各種背景動畫效果。
下面來看一下整體的效果圖：
具體實現：
1. CSS樣式
首先為按鈕設置通用樣式。將按鈕的背景去除，設置2像素的實線邊框，并將底部邊框設置為4個像素。通過來設置按鈕的尺寸，并為按鈕的文字顏色設置平滑動畫過渡效果。
第一種按鈕背景動畫：
在第一種按鈕背景動畫中，按鈕的背景使用2個漸變圖層來制作。當鼠標滑過按鈕時執行幀動畫，該動畫修改按鈕的-size屬性。它縮小了背景圖片的尺寸，使所有的圓點連成一片。
第二種按鈕背景動畫：
第二種按鈕背景動畫中，使用線性漸變作為按鈕的背景圖像。在鼠標滑過按鈕時，通過修改按鈕的-屬性，使背景位置不斷發生變化，形成斑馬線運動效果。
第三種按鈕背景動畫：
第三種按鈕背景動畫中，使用花點漸變作為按鈕的背景圖像。在鼠標滑過按鈕時，通過修改按鈕的-屬性，使背景位置不斷發生變化，形成點運動效果。
第四種按鈕背景動畫：
第四種按鈕背景動畫中，使用波浪變作為按鈕的背景圖像。在鼠標滑過按鈕時移動端web頁面橫向看，通過修改按鈕的-屬性，使背景位置不斷發生變化，形成波浪動態運動效果。
第五種按鈕背景動畫：
第五種按鈕背景動畫中，使用斜線變作為按鈕的背景圖像。在鼠標滑過按鈕時，通過修改按鈕的-屬性，使背景位置不斷發生變化，形成斜線運動效果。
第六種按鈕背景動畫：
第六種按鈕背景動畫中，使用圓形閃動漸變作為按鈕的背景圖像。在鼠標滑過按鈕時，通過修改按鈕的-屬性，使背景位置不斷發生變化，形成圓形閃動效果。
這就是六個按鈕的每個效果和代碼，除了這個css樣式還可以使用一些標準的組件來制作。
以上這篇巧用HTML5給按鈕背景設計不同的動畫簡單實例就是小編分享給大家的全部內容了移動端web頁面橫向看，希望能給大家一個參考，也希望大家多多支持查字典教程網。