TML5 簡介
HTML5 示例
實例
<!DOCTYPE html>
<html>
<body>
<video width="420" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
什么是 HTML5?
HTML5 是最新的 HTML 標準。
HTML5 是專門為承載豐富的 web 內容而設計的,并且無需額外插件。
HTML5 擁有新的語義、圖形以及多媒體元素。
HTML5 提供的新元素和新的 API 簡化了 web 應用程序的搭建。
HTML5 是跨平臺的,被設計為在不同類型的硬件(PC、平板、手機、電視機等等)之上運行。
注釋:在下面的章節中,您將學到如何“幫助”老版本的瀏覽器處理 HTML5。
HTML5中的新內容?
HTML5 的新的文檔類型(DOCTYPE)聲明非常簡單:
<!DOCTYPE html>
The new character encoding (charset) declaration is also very simple:
<meta charset="UTF-8">
HTML5 實例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
注釋:HTML5 中默認的字符編碼是 UTF-8。
HTML5 -新的屬性語法
HTML5 標準允許 4 中不同的屬性語法。
本例演示在 <input> 標簽中使用的不同語法:
類型 | 示例 |
Empty | <input type="text" value="John Doe" disabled> |
Unquoted | <input type="text" value=John Doe> |
Double-quoted | <input type="text" value="John Doe"> |
Single-quoted | <input type="text" value='John Doe'> |
在 HTML5 標準中,根據對屬性的需求,可能會用到所有 4 種語法。
HTML5 -新特性
HTML5 的一些最有趣的新特性:
·新的語義元素,比如 <header>, <footer>, <article>, and <section>。
·新的表單控件,比如數字、日期、時間、日歷和滑塊。
·強大的圖像支持(借由 <canvas> 和 <svg>)
·強大的多媒體支持(借由 <video> 和 <audio>)
·強大的新 API,比如用本地存儲取代 cookie。
HTML5 -被刪元素
以下 HTML 4.01 元素已從 HTML5 中刪除:
·<acronym>
·<applet>
·<basefont>
·<big>
·<center>
·<dir>
·<font>
·<frame>
·<frameset>
·<noframes>
·<strike>
·<tt>
VG 動畫有很多種實現方法,也有很大SVG動畫庫,現在我們就來介紹 svg動畫實現方法都有哪些?
SVG animation 有五大元素,他們控制著各種不同類型的動畫,分別為:
1.1、set
set 為動畫元素設置延遲,此元素是SVG中最簡單的動畫元素,但是他并沒有動畫效果。
使用語法:
<set attributeName="" attributeType="" to="" begin="" />
eg:繪制一個半徑為200的圓,4秒之后,半徑變為50。
<svg width="320" height="320">
<circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
<set attributeName="r" attributeType="XML" to="50" begin="4s" />
</circle>
</svg>
1.2、animate
是基礎的動畫元素,實現單屬性的過渡效果。
使用語法:
<animate
attributeName="r"
from="200" to="50"
begin="4s" dur="2s"
repeatCount="2"
></animate>
eg:繪制一個半徑為200的圓,4秒之后半徑在2秒內從200逐漸變為50。
<circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
<animate attributeName="r" from="200" to="50"
begin="4s" dur="2s" repeatCount="2"></animate>
</circle>
1.3、animateColor
控制顏色動畫,animate也可以實現這個效果,所以該屬性目前已被廢棄。
1.4、animateTransform
實現transform變換動畫效果,與css3的transform變換類似。實現平移、旋轉、縮放等效果。
使用語法:
<animateTransform attributeName="transform" type="scale"
from="1.5" to="0"
begin="2s" dur="3s"
repeatCount="indefinite"></animateTransform>
<svg width="320" height="320">
<circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
<animateTransform attributeName="transform" begin="4s"
dur="2s" type="scale" from="1.5" to="0"
repeatCount="indefinite"></animateTransform>
</circle>
</svg>
1.5、animateMotion
可以定義動畫路徑,讓SVG各個圖形,沿著指定路徑運動。
使用語法:
<animateMotion
path="M 0 0 L 320 320"
begin="4s" dur="2s"></animateMotion>
eg:繪制一個半徑為10的圓,延遲4秒從左上角運動的右下角。
<svg width="320" height="320">
<circle cx="0" cy="0" r="10" style="stroke: none; fill: #0000ff;">
<animateMotion
path="M 0 0 L 320 320"
begin="4s" dur="2s"
></animateMotion>
</circle>
</svg>
實際制作動畫的時候,動畫太單一不酷,需要同時改變多個屬性時,上邊的四種元素可以互相組合,同類型的動畫也能組合。以上這些元素雖然能夠實現動畫,但是無法動態地添加事件,所以接下來我們就看看 js 如何制作動畫。
上篇文章我們介紹js可以操作path,同樣也可以操作SVG的內置形狀元素,還可以給任意元素添加事件。
給SVG元素添加事件方法與普通元素一樣,可以只用on+事件名 或者addEventListener添加。
eg:使用SVG繪制地一條線,點擊線條地時候改變 x1 ,實現旋轉效果。
<svg width="800" height="800" id="svg">
<line id="line" x1="100" y1="100"
x2="400" y2="300"
stroke="black" stroke-width="5"></line>
</svg>
<script>
window.onload = function(){
var line = document.getElementById("line")
line.onclick = function(){
let start = parseInt(line.getAttribute("x1")),
end=400,dis = start-end
requestAnimationFrame(next)
let count = 0;
function next(){
count++
let a = count/200,cur = Math.abs(start+ dis*a)
line.setAttribute('x1',cur)
if(count<200)requestAnimationFrame(next)
}
}
}
</script>
js制作的SVG動畫,主要利用 requestAnimationFrame 來實現一幀一幀的改變。
我們上述制作的 SVG 圖形、動畫等,運行在低版本IE中,發現SVG只有IE9以上才支持,低版本的并不能支持,為了兼容低版本瀏覽器,可以使用 VML ,VML需要添加額外東西,每個元素需要添加 v:元素,樣式中還需要添加 behavier ,經常用于繪制地圖。由于使用太麻煩,所以我們借助 Raphael.js 庫。
Raphael.js是通過SVG/VML+js實現跨瀏覽器的矢量圖形,在IE瀏覽器中使用VML,非IE瀏覽器使用SVG,類似于jquery,本質還是一個javascript庫,使用簡單,容易上手。
使用之前需要先引入Raphael.js庫文件。cdn的地址為:https://cdn.bootcdn.net/ajax/libs/raphael/2.3.0/raphael.js
3.1、創建畫布
Rapheal有兩種創建畫布的方式:
第一種:瀏覽器窗口上創建畫布
創建語法:
var paper = Raphael(x,y,width,height)
x,y是畫布左上角的坐標,此時畫布的位置是絕對定位,有可能會與其他html元素重疊。width、height是畫布的寬高。
第二種:在一個元素中創建畫布
創建語法:
var paper = Raphael(element, width, height);
element是元素節點本身或ID width、height是畫布的寬度和高度。
3.2、繪制圖形
畫布創建好之后,該對象自帶SVG內置圖形有矩形、圓形、橢圓形。他們的方法分別為:
paper.circle(cx, cy, r); // (cx , cy)圓心坐標 r 半徑
paper.rect(x, y, width, height, r); // (x,y)左上角坐標 width寬度 height高度 r圓角半徑(可選)
paper. ellipse(cx, cy, rx, ry); // (cx , cy)圓心坐標 rx水平半徑 ry垂直半徑
eg:在div中繪制一個圓形,一個橢圓、一個矩形。
<div id="box"></div>
<script>
var paper = Raphael("box",300,300)
paper.circle(150,150,150)
paper.rect(0,0,300,300)
paper.ellipse(150,150,100,150)
</script>
運行結果如下:
除了簡單圖形之外,還可以繪制復雜圖形,如三角形、心型,這時就使用path方法。
使用語法:paper.path(pathString)
pathString是由一個或多個命令組成,每個命令以字母開始,多個參數是由逗號分隔。
eg:繪制一個三角形。
let sj = paper.path("M 0,0 L100,100 L100,0 'Z'")
還可以繪制文字,如果需要換行,使用 \n 。
文字語法:paper.text(x,y,text)
(x,y)是文字坐標,text是要繪制的文字。
3.3、設置屬性
圖形繪制之后,我們通常會添加stroke、fill、stroke-width等讓圖形更美觀,Raphael使用attr給圖形設置屬性。
使用語法:circle.attr({"屬性名","屬性值","屬性名","屬性值",...})
如果只有屬性名沒有屬性值,則是獲取屬性,如果有屬性值,則是設置屬性。
注意:如果只設置一個屬性時,可以省略‘{}’。如:rect.attr('fill','pink')
eg:給上邊的矩形添加邊框和背景色。
<div id="box"></div>
<script>
var paper = Raphael("box",300,300)
let rect = paper.rect(100,100,150,200)
rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})
</script>
3.4、添加事件
RaphaelJS一般具有以下事件:
click、dblclick、drag、hide、hover、mousedown、mouseout、mouseup、mouseover等以及對應的解除事件,只要在前面加上“un”就可以了(unclick、undblclick)。
使用語法:
obj.click(function(){
//需要操作的內容
})
3.5、添加動畫
animate為指定圖形添加動畫并執行。
使用語法:
obj.animate({
"屬性名1":屬性值1,
"屬性名2":屬性值2,
...
},time,type)
屬性名和屬性值就根據你想要的動畫類型加就ok。
time:動畫所需時間。
type:指動畫緩動類型。常用值有:
eg:點擊矩形,矩形緩緩變大。
<div id="box"></div>
<script>
var paper = Raphael("box",800,500)
let rect = paper.rect(100,100,150,100)
rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})
rect.attr('fill','pink')
rect.click(function(){
rect.animate({
"width":300,
"height":300
},1000,"bounce")
})
</script>
復制上邊的代碼,分別在各個瀏覽器和低版本IE瀏覽器運行,發現都可以正常運行。SVG的動畫庫挺多了,我們介紹了拉斐爾,有興趣的小伙伴可以自行找找其他庫。
TML(HyperText Markup Language)是一種用于創建網頁的標記語言。它由一系列的標簽組成,這些標簽用于描述網頁的結構和內容。HTML標簽通常由尖括號包圍,例如<tag>。
HTML標簽可以分為兩類:塊級元素和內聯元素。塊級元素用于組織網頁的結構,例如段落、標題、列表等。內聯元素用于標記文本中的特定部分,例如鏈接、強調文本等。
HTML標簽可以包含屬性,屬性提供了有關標簽的額外信息。例如,<a>標簽用于創建鏈接,可以使用href屬性指定鏈接的目標URL。
除了標簽和屬性,HTML還支持一些特殊字符實體,用于表示特殊字符,例如小于號(<)、大于號(>)等。
HTML可以與CSS(層疊樣式表)和JavaScript一起使用,以增強網頁的外觀和功能。CSS用于控制網頁的樣式,例如顏色、字體、布局等。JavaScript用于實現交互性和動態效果,例如表單驗證、動畫等。
通過使用HTML,開發人員可以創建具有結構良好、易于理解和導航的網頁。它是構建互聯網的基礎之一,被廣泛應用于網站開發和內容管理系統。
HTML的語法由標簽、屬性和內容組成。下面是HTML的基本語法規則:
下面是一個簡單的HTML示例:
<!DOCTYPE html>
<html>
<head>
<title>我的網頁</title>
</head>
<body>
<h1>歡迎來到我的網頁</h1>
<p>這是一個段落。</p>
<a href="https://www.example.com">點擊這里</a>訪問示例網站。
</body>
</html>
在這個示例中,<!DOCTYPE html>聲明了文檔類型為HTML5。<html>標簽是HTML文檔的根元素。<head>標簽用于定義文檔的頭部信息,例如標題和樣式表。<title>標簽定義了網頁的標題,將顯示在瀏覽器的標題欄中。<body>標簽用于定義文檔的主體內容。<h1>標簽定義了一個一級標題,<p>標簽定義了一個段落,<a>標簽定義了一個鏈接。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。