二、前端开发-HTML
生活随笔
收集整理的這篇文章主要介紹了
二、前端开发-HTML
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
二、前端開發(fā)語言體系-HTML
文章目錄
- 二、前端開發(fā)語言體系-HTML
- HTML5
- 表單
- 繪圖
- 多媒體
- HTML5常用API
- 參考文章
HTML5
表單
HTML 表單用于搜集不同類型的用戶輸入。
元素定義 HTML 表單。表單元素指的是不同類型的 input 元素、復(fù)選框、單選按鈕、提交按鈕等等。元素是最重要的表單元素，根據(jù)不同的 type 屬性，有很多形態(tài)。
| text | 定義常規(guī)文本輸入 |
| radio | 定義單選按鈕輸入 |
| submit | 定義提交按鈕（提交表單） |
action 屬性定義在提交表單時執(zhí)行的動作。向服務(wù)器提交表單的通常做法是使用提交按鈕。通常，表單會被提交到 web 服務(wù)器上的網(wǎng)頁。如果省略 action 屬性，則 action 會被設(shè)置為當(dāng)前頁面。
method 屬性規(guī)定在提交表單時所用的 HTTP 方法（GET 或 POST）
<form action="" method="get" id="forms"><input type="text" id="username" placeholder="用戶名" required /><input type="password" id="pws" placeholder="密碼" required /><input type="email" id="email" placeholder="郵箱" required /><input type="submit" value="提交" id="submitBtn"> </form>繪圖
HTML5新增了一個 canvas 屬性。該元素自身并不繪制圖形，只是相當(dāng)于一張空畫布。如果開發(fā)者需要向 canvas 上繪制圖形則必須使用JavaScript腳本進(jìn)行繪制。
為了向 canvas 元素上繪圖，必須經(jīng)過如下3步。
CanvasRenderingContext2D只提供了兩個方法來繪制幾何圖形：
- fillRect(double x,double y,double width,double height):填充一個矩形區(qū)域。
- strokeRect(double x,double y,double width,double height):繪制一個矩形邊框。
為了在Canvas上繪制更復(fù)雜的圖形，必須在Canvas上啟用路徑，借助于路徑來繪制圖形。介紹幾個方法：
- arcTo(double x1,double y1,double x2,double y2,double radius):向Canvas的當(dāng)前路徑上添加一段弧，確定這段弧的方式是：假設(shè)從當(dāng)前點到P1(x1,y1)繪制一條線條，再從P1(x1,y1)到P2(x2,y2)繪制一條線條，arcTo則繪制一段同時與上面兩條線條相切，且半徑為radius的圓弧。
- lineTo(double x,double y):把Canvas的當(dāng)前路徑從當(dāng)前結(jié)束點連接到x,y對應(yīng)的點。
- moveTo(double x,double y):把Canvas的當(dāng)前路徑的結(jié)束點移動到x,y對應(yīng)的點。
SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)，使用 XML 格式定義圖形，圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有損失。SVG 是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)。HTML5 支持內(nèi)聯(lián) SVG。
- SVG 圖像可通過文本編輯器來創(chuàng)建和修改
- SVG 圖像可被搜索、索引、腳本化或壓縮
- SVG 是可伸縮的
- SVG 圖像可在任何的分辨率下被高質(zhì)量地打印
多媒體
embed 標(biāo)簽定義外部（非 HTML）內(nèi)容的容器。（這是一個 HTML5 標(biāo)簽，在 HTML4 中是非法的，但是所有瀏覽器中都有效）。
<embed src="helloworld.swf" />HTML5通過 audio 標(biāo)簽來解決音頻播放的問題。
- autoplay屬性控制是否網(wǎng)頁加載自動播放
- controls 是否顯示播放控件，默認(rèn)不顯示
- loop 屬性用于控制循環(huán)次數(shù)，如果值為正整數(shù)，則播放指定的次數(shù)，如果是 loop 或者是 loop = -1，則無線循環(huán)播放。
HTML5通過 video 標(biāo)簽來解決音頻播放的問題。
- width 屬性設(shè)置播放窗口寬度
- height 屬性設(shè)置播放窗口高度
HTML5常用API
- History API提供了一種功能，能讓開發(fā)人員在不刷新整個頁面的情況下修改站點的URL。
- Geolocation API 用于獲得用戶的地理位置，使得我們可以基于用戶地理位置開發(fā)互聯(lián)網(wǎng)應(yīng)用。
- RequestAnimationFrame API用來請求動畫關(guān)鍵幀，專門用于優(yōu)化動畫
- Mutation Observer API用來監(jiān)視DOM樹的更改，DOM樹的任何變動，比如節(jié)點的增減、屬性的變動、文本內(nèi)容的變動，這個API都能得到通知。
一個獲取地理位置的例子：
if(window.navigator.geolocation) {navigator.geolocation.getCurrentPosition(successCallBack,errorCallBack); } else{console.log("error"); } function successCallBack(position) {var wd=position.coords.latitude; //緯度var jd=position.coords.longitude; //經(jīng)度console.log(wd+"-------------------"+jd); } function errorCallBack(error){ console.log("wrong"); }參考文章
HTML 表單
HTML5實現(xiàn)簡單繪圖
HTML5之SVG的使用
HTML5 多媒體標(biāo)簽
HTML5常用API
總結(jié)
以上是生活随笔為你收集整理的二、前端开发-HTML的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一、前端能做什么
- 下一篇： 三、前端开发-CSS