當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

二、前端开发-HTML

發布時間：2025/3/21 HTML 28 豆豆

生活随笔收集整理的這篇文章主要介紹了二、前端开发-HTML 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

二、前端開發語言體系-HTML

文章目錄

二、前端開發語言體系-HTML
- HTML5
- - 表單
  - 繪圖
  - 多媒體
  - HTML5常用API
- 參考文章

HTML5

表單

HTML 表單用于搜集不同類型的用戶輸入。

元素定義 HTML 表單。表單元素指的是不同類型的 input 元素、復選框、單選按鈕、提交按鈕等等。

元素是最重要的表單元素，根據不同的 type 屬性，有很多形態。

類型描述

text	定義常規文本輸入
radio	定義單選按鈕輸入
submit	定義提交按鈕（提交表單）

action 屬性定義在提交表單時執行的動作。向服務器提交表單的通常做法是使用提交按鈕。通常，表單會被提交到 web 服務器上的網頁。如果省略 action 屬性，則 action 會被設置為當前頁面。

method 屬性規定在提交表單時所用的 HTTP 方法（GET 或 POST）

繪圖

HTML5新增了一個 canvas 屬性。該元素自身并不繪制圖形，只是相當于一張空畫布。如果開發者需要向 canvas 上繪制圖形則必須使用JavaScript腳本進行繪制。

為了向 canvas 元素上繪圖，必須經過如下3步。

獲取 canvas 元素對應的DOM對象，這是一個Canvas對象。

調用Canvas對象的getContext()方法，該方法返回一個CanvasRenderingContext2D對象，該對象即可繪制圖形。

調用CanvasRenderingContext2D對象的方法繪圖。

CanvasRenderingContext2D只提供了兩個方法來繪制幾何圖形：

fillRect(double x,double y,double width,double height):填充一個矩形區域。
strokeRect(double x,double y,double width,double height):繪制一個矩形邊框。

為了在Canvas上繪制更復雜的圖形，必須在Canvas上啟用路徑，借助于路徑來繪制圖形。介紹幾個方法：

arcTo(double x1,double y1,double x2,double y2,double radius):向Canvas的當前路徑上添加一段弧，確定這段弧的方式是：假設從當前點到P1(x1,y1)繪制一條線條，再從P1(x1,y1)到P2(x2,y2)繪制一條線條，arcTo則繪制一段同時與上面兩條線條相切，且半徑為radius的圓弧。
lineTo(double x,double y):把Canvas的當前路徑從當前結束點連接到x,y對應的點。
moveTo(double x,double y):把Canvas的當前路徑的結束點移動到x,y對應的點。

<body><canvas id="mc" height="400" width="400"></canvas> </body> <script type="text/javascript">/*該方法負責繪制圓角矩形x1、y2：是圓角矩形左上角的坐標。width、height：控制圓角舉行的寬、高radius：控制圓角矩形的四個圓角的半徑*/function createRoundRect(ctx,x1,y1,width,height,radius){//beginPath():丟棄任何當前定義的路徑并且開始一條新的路徑。它把當前的點設置為 (0,0)。 ctx.beginPath();// 移動到左上角ctx.moveTo(x1+radius,y1);// 添加一條連接到右上角的線段ctx.lineTo(x1+width-radius,y1);// 添加一段圓弧ctx.arcTo(x1 + width , y1, x1 + width, y1 + radius, radius);// 添加一條連接到右下角的線段ctx.lineTo(x1 + width, y1 + height - radius);// 添加一段圓弧ctx.arcTo(x1 + width, y1 + height , x1 + width - radius , y1 + height , radius);// 添加一條連接到左下角的線段ctx.lineTo(x1 + radius, y1 + height); // 添加一段圓弧ctx.arcTo(x1, y1 + height , x1 , y1 + height - radius , radius);// 添加一條連接到左上角的線段ctx.lineTo(x1 , y1 + radius);// 添加一段圓弧ctx.arcTo(x1 , y1 , x1 + radius , y1 , radius);//closePath() :方法創建從當前點到開始點的路徑。 ctx.closePath();}// 獲取canvas元素對應的DOM對象var canvas = document.getElementById('mc');// 獲取在canvas上繪圖的CanvasRenderingContext2D對象var ctx = canvas.getContext('2d');ctx.lineWidth=3;createRoundRect(ctx,30,30,200,100,20);ctx.stroke(); </script>

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)，使用 XML 格式定義圖形，圖像在放大或改變尺寸的情況下其圖形質量不會有損失。SVG 是萬維網聯盟的標準。HTML5 支持內聯 SVG。

SVG 圖像可通過文本編輯器來創建和修改
SVG 圖像可被搜索、索引、腳本化或壓縮
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質量地打印

<p>使用SVG繪制圓形</p> <svg xmlns="http://www.w3.org/2000/svg" height="500px" width="500px" version="1.1"><circle cx="200" cy="200" r="100" stroke="#afeedd" stroke-width="5" fill="#f0ddff"></circle> </svg><p>使用SVG繪制矩形</p> <svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" version="1.1"><rect x="50" y="100" width="300" height="150" style="fill:rgb(145,245,255);stroke-width:5;stroke:#EE799F;fill-opacity:0.9;stroke-opacity:0.9;"/> </svg>

多媒體

embed 標簽定義外部（非 HTML）內容的容器。（這是一個 HTML5 標簽，在 HTML4 中是非法的，但是所有瀏覽器中都有效）。

HTML5通過 audio 標簽來解決音頻播放的問題。

autoplay屬性控制是否網頁加載自動播放
controls 是否顯示播放控件，默認不顯示
loop 屬性用于控制循環次數，如果值為正整數，則播放指定的次數，如果是 loop 或者是 loop = -1，則無線循環播放。

HTML5通過 video 標簽來解決音頻播放的問題。

width 屬性設置播放窗口寬度
height 屬性設置播放窗口高度

HTML5常用API

History

History API提供了一種功能，能讓開發人員在不刷新整個頁面的情況下修改站點的URL。

Geolocation

Geolocation API 用于獲得用戶的地理位置，使得我們可以基于用戶地理位置開發互聯網應用。

RequestAnimationFrame

RequestAnimationFrame API用來請求動畫關鍵幀，專門用于優化動畫

Mutation Observer

Mutation Observer API用來監視DOM樹的更改，DOM樹的任何變動，比如節點的增減、屬性的變動、文本內容的變動，這個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; //經度console.log(wd+"-------------------"+jd); } function errorCallBack(error){ console.log("wrong"); }

參考文章

HTML 表單

HTML5實現簡單繪圖

HTML5之SVG的使用

HTML5 多媒體標簽

HTML5常用API

總結

以上是生活随笔為你收集整理的二、前端开发-HTML的全部內容，希望文章能夠幫你解決所遇到的問題。

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

html