web前端第三節html-標簽

tml標簽是組成頁面的基本元素

聲明：元素和標簽其實是一樣的，不同的叫法而已!

HTML 提示：使用小寫屬性

屬性和屬性值對大小寫不敏感。
不過，萬維網聯盟在其 HTML 4 推薦標準中推薦小寫的屬性/屬性值。
而新版本的 (X)HTML 要求使用小寫屬性。

標簽的結束方式有半閉式標簽和全閉式標簽

半閉式標簽比如<meta/><br/><hr/>，由于這些標簽不需要有內容或者所傳遞信息已經表達過，因此，結束方式是直接在標簽末尾以/結束

全閉式標簽比如：<title></tiltle>,<p></p>,<h1></h1>,他們需要在標簽內填寫內容，為區別內容所屬標簽，因為需要<標簽>內容</標簽>全閉式標簽來表示

Html5元素我們暫不涉及，因為牽涉到兼容性問題，并非所有的瀏覽器都支持html5元素，win7系統在全球依然占據著，而win7默認的瀏覽器是IE 9(通常，不計較各種sp版本)，IE9對html5支持并不友好

塊級元素：

div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、table、menu、pre

塊級元素默認占據空間的一行

例如:

<!DOCtype html>
<html>
<head>
	<title>web前端實戰教程html標簽</title>
</head>
<body>
<div>我是第一個div</div>
<div>我是第二個div</div>
</body>
</html>

瀏覽器效果如下:

dispaly:block

內聯元素占據了元素的實際占用空間而非整個空間的一行

我們將上面2個div元素換成a元素，瀏覽器效果如下：

display:inlien

我們從firebug盒模型屬性出可以看出，a標簽是一個內聯元素，占據了一定的寬度和高度，如果它是一個塊狀元素，那么它占用的寬度就是100%,因此，在實戰環境中，特別是制作按鈕菜單和圖文塊的時候，我們可以把a標簽的display屬性設置為block,來保證整個鏈接區域的寬度被100%占用。

為什么使用語義化標簽？

我們知道html標簽有很多，比如：title,h1,p,span,div,strong,em,form,input等等，我可以使用<div>content</div>顯示內容為content，使用<span>content</span>可以達到同樣的效果啊。使用語義化標簽原因有兩點：

特殊的元素有特別的功能：比如a標簽，它可以通過標簽屬性href=”XXX”實現鏈接功能，form標簽可以實現表單提交功能等。
為了頁面結構清晰，瀏覽器在解析頁面的時候，是根據不同的元素類型來解析網頁的，我們肉眼看到的顯示效果，僅僅是效果。一個合適使用標簽元素布局結構清晰生產的網頁，對爬蟲來說是非常友好的，SEO提高的同時大大利于我們的網頁排名！

通常標簽 <strong> 替換加粗標簽 <b> 來使用， <em> 替換 <i>標簽使用。

然而，這些標簽的含義是不同的： <b> 與<i> 定義粗體或斜體文本。 <strong> 或者 <em> 意味著你要呈現的文本是重要的，所以要突出顯示。

現今所有主要瀏覽器都能渲染各種效果的字體。不過，未來瀏覽器可能會支持更好的渲染效果。更多的時候,我們把i標簽使用成背景icon的元素來使用，比如：

些事HTML5培訓認為在學習HTML5前應該做好的準備，歡迎參考指正：

為什么學習HTML5？
軟硬件環境
介紹HTML5
環境搭建
常見問題解決
掌握技能需求
為什么學習HTML5？
1：自從2010年HTML5正式推出以來，立即收到了世界各大瀏覽器的支持，根據直接各大知名媒體的評論，新的web時代，HTML5時代馬上就要到來。
2：跨平臺運行
3：硬件要求低
4：flash之外的選擇
軟硬件環境
1：硬件：雙核、2G內存
2：軟件：windows、Mac OS X、Linus
HTML5
HTML是用來描述網頁的一種語言
超文本標記語言（Hyper Text Markup Language）
HTML不是編程語言、是一種標記語言
HTML5新特性：
用于繪畫的canvas標簽
用于媒介回放的video和audio元素
對本地離線儲存的更好支持
新的特殊內容元素
如：article、footer、header、nav、section
新的表單控件
如：canlender、date、time、email、url、search
瀏覽器的支持
Safari、Chrome、Firefox、Opera、IE9等等基本支持了HTML5
環境搭建
常用：WebStorm、notepad++、Eclipse、text sublime、Dreamweaver等等
推薦：Intellij IDEA
常見問題解決方式：
1：尋求問題根源
2：查看參考文檔
W3C標準
3：參考示例
4：常見問題通過搜索引擎搜索
5：問題反饋
掌握技能需求
HTML5
XHTML
CSS3
javascript
jQuery:
jQuery-UI
jQuery-Mobie

HTML5培訓認為相對其他例如iOS開發，HTML5前端相對還是簡單的，有興趣的朋友可以到藍鷗鄭州HTML5培訓試聽。

原文：http://hn.lanou3g.com/2016/lo_news_0108/877.html

、什么是 HTML5？

HTML5 是最新的 HTML 標準；
HTML5 是專門為承載豐富的 web 內容而設計的，并且無需額外插件；
HTML5 擁有新的語義、圖形以及多媒體元素；
HTML5 提供的新元素和新的 API 簡化了 web 應用程序的搭建；
HTML5 是跨平臺的，被設計為在不同類型的硬件（PC、平板、手機、電視機等等）之上運行；

二、HTML5的一些新特性

用于繪畫的 canvas 元素；
用于媒介回放的 video 和 audio 元素；
對本地離線存儲的更好的支持；
新的特殊內容元素，比如article、footer、header、nav、section；
新的表單控件，比如 calendar、date、time、email、url、search；

三、video 元素

<video> 元素提供了播放、暫停和音量控件來控制視頻；
<video> 元素也提供了 width 和 height 屬性控制視頻的尺寸；
<video> 與</video> 標簽之間插入的內容是提供給不支持 video 元素的瀏覽器顯示的；

video 元素的三種視頻格式：

Ogg：帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件；
MPEG4：帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件；
WebM：帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件；

video 元素的屬性：

src：要播放的視頻的 URL；
width：設置視頻播放器的寬度；
height：設置視頻播放器的高度；
autoplay：自動播放；
controls：如果出現該屬性，則向用戶顯示控件，比如播放按鈕；
loop：循環播放；
preload：如果出現該屬性，則視頻在頁面加載時進行加載，并預備播放，如果使用 "autoplay"，則忽略該屬性；

video 元素的方法：

pause()：暫停當前播放的視頻；
play()：開始播放視頻；
load()：重新加載視頻元素；
canPlayType()：檢測瀏覽器是否能播放指定的視頻類型；
addTextTrack()：向音頻/視頻添加新的文本軌道；

四、audio元素

HTML5 規定了在網頁上嵌入音頻元素的標準，即使用 <audio> 元素；
<audio>元素能夠播放聲音文件或者音頻流；

audio元素的三種音頻格式：

MP3：適用于Internet Explorer、Chrome、Safari 等瀏覽器；
Wav：適用于Firefox、Opera等瀏覽器；
Ogg：適用于Firefox、IE9、Chrome 瀏覽器；

audio元素的屬性：

src：要播放的音頻的 URL；
autoplay：自動播放；
controls：如果出現該屬性，則向用戶顯示控件；
loop：循環播放；
preload：如果出現該屬性，則音頻在頁面加載時進行加載，并預備播放，如果使用 "autoplay"，則忽略該屬性；

audio元素的方法：

pause()：暫停當前播放的音頻；
play()：開始播放音頻；
load()：重新加載音頻；

五、canvas 元素

什么是 Canvas？

HTML5 的 canvas 元素通過 JavaScript 在網頁上繪制圖像，元素本身并沒有繪制能力，它只是圖形容器，必須使用腳本來繪制圖形；
canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法；
創建一個畫布

<canvas id="myCanvas" width="200" height="100"></canvas>

Canvas在HTML5 中的新屬性有：

height：設置 canvas 的高度；
width：設置 canvas 的寬度；

六、繪制三角形

getElementById()：可返回對擁有指定 ID 的第一個對象的引用；

getContext()：返回一個用于在畫布上繪圖的環境，2d表示二維繪圖；

beginPath()：開始一條路徑，或重置當前的路徑；

moveTo()：把路徑移動到畫布中的指定點，不創建線條。

lineTo()：添加一個新點，然后創建從該點到畫布中最后指定點的線條（該方法并不會創建線條）；

closePath()：創建從當前點到開始點的路徑；

strokeStyle屬性：設置或返回用于筆觸的顏色、漸變或模式；

stroke()：會實際地繪制出路徑；

fillStyle屬性：設置或返回用于填充繪畫的顏色、漸變或模式；

fill()：填充當前的圖像（路徑），默認顏色是黑色；

//空心三角形
var canvas=document.getElementById("myCanvas");
var cxt=canvas.getContext("2d");
cxt.beginPath();
cxt.moveTo(50,50);
cxt.lineTo(100,50);
cxt.lineTo(75,100);
cxt.closePath();//填充或閉合 需要先閉合路徑才能畫
cxt.strokeStyle="red";
cxt.stroke();
//實心三角形
cxt.beginPath();
cxt.moveTo(150,50);
cxt.lineTo(250,50);
cxt.lineTo(200,150);
cxt.closePath();
cxt.fillStyle="#89E1BF"
cxt.fill();

演示圖

圖1

七、使用Canvas繪制一個空心圓

arc()：創建弧或曲線（用于創建圓或部分圓）；

<body>
 <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
</body>
<script type="text/javascript">
 var can=document.getElementById("myCanvas") 
 var ctx=can.getContext("2d"); //創建context對象
 ctx.beginPath();//標志開始一個路徑
 ctx.arc(100,100,50,0,2*Math.PI);//在canvas中繪制圓形
 ctx.stroke()
 </script>

演示圖

圖2

八、繪制一個實心圓

<body>
 <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
</body>
<script type="text/javascript">
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d"); 
 ctx.beginPath();
 ctx.arc(100,100,50,0,2*Math.PI);
 ctx.fillStyle="#deffff";
 ctx.fill();
 ctx.strokeStyle="red"
 ctx.stroke();
 </script>

演示圖

圖3

九、繪制一個空心矩形

strokeRect()：繪制矩形（不填色），筆觸的默認顏色是黑色；

<body>
 <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
 var can=document.getElementById("myCanvas"); //獲得畫板數據
 var ctx=can.getContext('2d'); //獲得筆刷
 ctx.strokeStyle="blue"; //設置線條顏色
 ctx.strokeRect(100,100,100,100); //線條畫矩形
 </script>

演示圖

圖4

十、繪制一個實心的矩形

fillRect()：繪制“已填色”的矩形，默認的填充顏色是黑色；

<body>
 <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var can=document.getElementById("myCanvas");//獲得畫板數據
var ctx=can.getContext('2d'); //獲得筆刷
 ctx.strokeStyle="blue"; //設置線條顏色
 ctx.fillStyle="#ddedee"; //填充矩形
 ctx.fillRect(100,100,100,100);
 ctx.strokeRect(100,100,100,100);//線條畫矩形
 </script>

演示圖

圖5

在線咨詢

上一篇：微信悄悄更新，聊天界面進行調整
下一篇：JSP網站建設表格標記，結合JSP技術實現網站表格標

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商