HTML5入門

么是HTML5

官方概念：HTML5草案的前身名為Web Applications 1.0，是作為下一代互聯(lián)網(wǎng)標(biāo)準(zhǔn),用于取代html4與xhtml1 的新一代標(biāo)準(zhǔn)版本,所以叫html5。它增加了新的標(biāo)簽和屬性，加強(qiáng)了網(wǎng)頁(yè)的標(biāo)準(zhǔn)、語(yǔ)義化與web表現(xiàn)性能，同時(shí)還增加了本地?cái)?shù)據(jù)庫(kù)等 Web 應(yīng)用的功能。

廣義概念：HTML5代表瀏覽器端技術(shù)的一個(gè)發(fā)展階段。在這個(gè)階段，瀏覽器呈現(xiàn)技術(shù)得到了一個(gè)飛躍發(fā)展和廣泛支持，它包括：HTML5，CSS3，Javascript，API在內(nèi)的一套技術(shù)組合

HTML 5發(fā)展時(shí)間表

由上面圖可知：現(xiàn)在的HTML5還不是一個(gè)最終統(tǒng)一的版本，所以說(shuō)HTML5用在手機(jī)端的開發(fā)。

目前支持HTML5的瀏覽器

不同的瀏覽器顯示的效果可能不一樣。因?yàn)镠TML5沒(méi)有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)。（現(xiàn)在處在一個(gè)推廣階段），但是大部分是一樣的。

HTML5的特點(diǎn)

更簡(jiǎn)單

標(biāo)簽語(yǔ)義化

語(yǔ)法更寬松

多設(shè)備跨平臺(tái)

自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)

從頭說(shuō)起——文檔的聲明

Xhtml1.0的頁(yè)面架構(gòu)

Html5的頁(yè)面架構(gòu)

HTML5標(biāo)簽的語(yǔ)義化

在以前的html中，盒子用div或span。

在html5中，標(biāo)簽的最大變化是標(biāo)簽都有了語(yǔ)義，以前的div和span都沒(méi)有語(yǔ)義，僅僅表示一個(gè)盒子。

<header> 頭標(biāo)簽

<nav> 導(dǎo)航標(biāo)簽

<aside> 側(cè)邊欄標(biāo)簽

<article> 文章標(biāo)簽

<footer> 頁(yè)腳

<section> 章節(jié)，頁(yè)眉，欄目

HTML5新增的表單三個(gè)屬性

1、required：必填屬性

2、placeholder：默認(rèn)顯示內(nèi)容

3、autofocus：自動(dòng)獲取焦點(diǎn)

Html5中新增input標(biāo)記的type屬性

屬性	描述
email	郵件
date	日期
url	網(wǎng)址格式
number	數(shù)字
range	范圍
color	顏色

完整代碼

<form>

郵件：<input type="email" name="email"><br>

日期：<input type="date" name="mydate"><br>

網(wǎng)址：<input type="url"><br>

手機(jī)號(hào)：<input type="number"><br>

亮度：<input type="range" min="0" max="255"><br>

顏色：<input type="color"><br>

地址：

</optgroup>

</optgroup>

</select><br>

搜索車型：<input type="text" list="car">

</datalist>

</form>

Range調(diào)背景色

代碼如下：

<!doctype html>

<html>

<head>

//當(dāng)頁(yè)面準(zhǔn)備完畢的時(shí)候

$(document).ready(function(e) {

$('input').change(function(e) {

var red=$('#red').val(); //得到紅色的值

var green=$('#green').val(); //得到綠色的值

var blue=$('#blue').val(); //得到藍(lán)色的值

var value=$(this).val(); //當(dāng)前修改的值

$(this).next().html(value); //將值付給當(dāng)前修改元素后面的span

$('body').css('background-color','rgb('+red+','+green+','+blue+')');

});

</script>

</head>

<body>

紅色：<input type="range" id="red" min="0" max="255" value="255"><span>255</span><br>

綠色：<input type="range" id="green" min="0" max="255" value="255"><span>255</span><br>

藍(lán)色：<input type="range" id="blue" min="0" max="255" value="255"><span>255</span>

</body>

</html>

音頻播放

第一種寫法

如果聲音的格式html5不支持，就顯示標(biāo)記之間的提示信息

第二種寫法：

視頻播放

使用video標(biāo)記來(lái)插入視頻 autoplay表示自動(dòng)播放，controls表示顯示控制面板。

360音樂(lè)導(dǎo)航

完整代碼如下:

#nav{

list-style-type:none; /*去掉無(wú)序列表前面的點(diǎn)*/

margin:50px auto 0px; /*上邊界50px,左右居中，下邊界為0*/

width:960px; /*整個(gè)導(dǎo)航的寬度*/

height:38px;

color:#333;

font-size:14px;

padding:0px; /*填充清0*/

overflow:hidden; /*超出尺寸的部分不顯示*/

}

#nav li{

width:105px;

height:36px;

float:left; /*所有的li從左到右排列*/

text-align:center; /*文字居中對(duì)齊*/

line-height:38px; /*設(shè)置行高，目的是讓文字垂直居中*/

border-top:#C9CBCE solid 1px;

border-left:#C9CBCE solid 1px;

border-bottom:#C9CBCE solid 1px;

cursor:pointer; /*光標(biāo)移動(dòng)到li上變成手形*/

}

#nav li:last-child{ /*#nav下的最后一個(gè)li*/

border-right:#C9CBCE solid 1px;

}

#nav .liclick{

border-top:#54B82A solid 2px;

border-bottom:none;

}

#nav span{

width:100%;

height:38px;

display:block; /*只有塊顯示標(biāo)記才能設(shè)置寬度和高度*/

position:relative; /*相對(duì)定位，目的為了span可以移動(dòng)*/

z-index:-1; /*設(shè)置span上下層的順序，讓它在文字的下面*/

}

</style>

$(document).ready(function(e) {

//點(diǎn)擊li

$('#nav li').click(function(e) {

$('.liclick').removeClass('liclick');

$(this).addClass('liclick');

});

//每個(gè)li下面添加一個(gè)底色

var color=['#B9D329','#C0EBF7','#B9D329','#69BCF3','#79D9F3','#FA5F94','#ACD180','#FAB4CC','#FFAE5B'];

$('#nav li').append('<span>');

$('#nav span').each(function(index, element) {

$(this).css('background-color',color[index]);

});

//移動(dòng)到li上的時(shí)候顏色色塊升起

$('#nav li').hover(function(){

$(this).children('span').animate({'top':-38},200);

//獲得當(dāng)前l(fā)i的索引編號(hào)

var index=$(this).index();

$('audio').get(index).play(); //播放第index個(gè)音樂(lè)

},function(){

$(this).children('span').animate({'top':0},200);

});

</script>

</head>

<body>

</ul>

</body>

相關(guān)例題：http://pan.baidu.com/s/1hsDGA8k 密碼：55ic

tml5響應(yīng)式網(wǎng)站以其完美的動(dòng)態(tài)界面和友好的搜索引擎支持，受到了廣大企業(yè)建站用戶的喜愛(ài)。然而制作一個(gè)html5響應(yīng)式網(wǎng)站的費(fèi)用大多在10萬(wàn)元以上，對(duì)于廣大中小企業(yè)來(lái)講，這無(wú)異于是一個(gè)天文數(shù)字。那有沒(méi)有一個(gè)免費(fèi)的，自己就能勝任Html5建站的建站系統(tǒng)給我們用呢？

制作html5響應(yīng)式網(wǎng)站大多有兩種辦法，一種是委托建站公司建站，但通過(guò)建站公司年一般費(fèi)用較高，功能也不是特別完善，故對(duì)于中小企業(yè)來(lái)講，不是一個(gè)很好的選擇；另一種方式就是通過(guò)建站系統(tǒng)制作網(wǎng)站，除了自助建站系統(tǒng)外，其他的建站系統(tǒng)且支持html5技術(shù)的程序，大多需要專業(yè)的技術(shù)人員開發(fā)，企業(yè)除非招聘專業(yè)的技術(shù)人員，否則很難正常進(jìn)行下去。

想要制作一個(gè)免費(fèi)的HTml5響應(yīng)式網(wǎng)站，最好的辦法就是通過(guò)支持html5技術(shù)的自助建站系統(tǒng)制作企業(yè)網(wǎng)站。如時(shí)下支持html5技術(shù)最完善的建站寶盒企業(yè)自助建站系統(tǒng)，就能很好的滿足企業(yè)制作html5網(wǎng)站的需求。

建站寶盒自助建站系統(tǒng)不僅支持html5響應(yīng)式建站，還支持在線商城、分銷、餐飲網(wǎng)站的搭建，html5技術(shù)解決了pc端、手機(jī)端、微信端的界面兼容問(wèn)題，內(nèi)置的上千套html5網(wǎng)站模板覆蓋所有傳統(tǒng)行業(yè)，企業(yè)只需要一鍵安裝即可輕松完成建站工作，可視化的鼠標(biāo)拖拽建站模式，讓企業(yè)可以在任意頁(yè)面中修改頁(yè)面，每一個(gè)模塊都開發(fā)了數(shù)十種樣式，輕松替換即可改變，兵器2過(guò)去敲代碼、修樣式的建站模式。

再說(shuō)一下免費(fèi)建站，傳統(tǒng)建站模式下，企業(yè)需要先購(gòu)買域名、主機(jī)，然后再去尋找合適的建站系統(tǒng)進(jìn)行修改，建站寶盒自助建站系統(tǒng)則將主機(jī)、域名、建站系統(tǒng)打包在一起，建站只需要挑選喜歡的模版就能完成建站工作，方便很多。建站寶盒建站套餐價(jià)格也就千元左右，和普通建站中購(gòu)買主機(jī)域名費(fèi)用差不多，也就是說(shuō)，使用建站寶盒制作html5網(wǎng)站其實(shí)就是免費(fèi)的。

免費(fèi)的建站系統(tǒng)或建站服務(wù)時(shí)下很難看到，尤其是還支持那么強(qiáng)大的功能和技術(shù)，而且還能自己建網(wǎng)站。建站寶盒作為一款企業(yè)級(jí)的自助建站系統(tǒng)十分值得中小企業(yè)朋友制作企業(yè)網(wǎng)站呢。如何制作一個(gè)免費(fèi)的HTML5響應(yīng)式網(wǎng)站？:http://www.iisp.com/ztview/F_html5website1101.html

更多建站&互聯(lián)網(wǎng)行業(yè)資訊，敬請(qǐng)關(guān)注微信公眾號(hào)：耐思尼克（iisp-com）

天我親手創(chuàng)建了一個(gè)網(wǎng)頁(yè)。首先，打開一個(gè)文本文檔并將其重命名為“myweb”。然后，在文件中添加以下內(nèi)容：<html> <head> <title>My First Webpage</title> </head> <body> <h1>My First Webpage</h1> </body> </html>

這樣，你就成功地創(chuàng)建了一個(gè)靜態(tài)網(wǎng)頁(yè)，地址為本地。右鍵點(diǎn)擊文件，選擇“打開方式”，選擇“記事本”，然后在文件中添加以下代碼：<h1>Dog typehtml</h1>

這是一個(gè)HTML5的標(biāo)簽，它包含了HTML聲明和標(biāo)簽的功能。網(wǎng)頁(yè)的主體部分只有一個(gè)標(biāo)簽，即HTML標(biāo)簽，它是一個(gè)雙標(biāo)簽，包含一個(gè)開始標(biāo)簽和一個(gè)結(jié)束標(biāo)簽，內(nèi)部包含一個(gè)標(biāo)題和網(wǎng)頁(yè)內(nèi)容。在網(wǎng)頁(yè)的主體部分中，可以設(shè)置樣式、參數(shù)、標(biāo)題等。

網(wǎng)頁(yè)的主體部分是由HTML標(biāo)簽包裹的，這是一個(gè)雙標(biāo)簽，包括開始標(biāo)簽和結(jié)束標(biāo)簽。大美麗的網(wǎng)頁(yè)，保存并刷新。大美麗網(wǎng)頁(yè)的開頭部分已經(jīng)添加完成，網(wǎng)頁(yè)的主體部分位于標(biāo)題下方，即文章下方的部分，都是網(wǎng)頁(yè)的主體部分。我的第一個(gè)網(wǎng)頁(yè)就這樣完成了，非常有趣。保存并刷新網(wǎng)頁(yè)。我的第一個(gè)網(wǎng)頁(yè)只是一個(gè)簡(jiǎn)單的靜態(tài)網(wǎng)頁(yè)，如果需要添加更多功能，可以使用網(wǎng)頁(yè)開發(fā)工具進(jìn)行操作。

在網(wǎng)頁(yè)中添加一個(gè)生日祝福的內(nèi)容。在王翰的文章中添加一個(gè)標(biāo)題，標(biāo)題為“生日祝福”。這也是一個(gè)雙標(biāo)簽，包括開始標(biāo)簽和結(jié)束標(biāo)簽。保存并刷新網(wǎng)頁(yè)。

在大美麗網(wǎng)頁(yè)中添加一個(gè)圖片。這是一個(gè)單標(biāo)簽，只有一個(gè)標(biāo)簽，沒(méi)有結(jié)束標(biāo)簽。在百度中搜索一張圖片，并將其地址復(fù)制下來(lái)。使用快捷鍵Ctrl + C，然后使用快捷鍵Ctrl + V將圖片添加到網(wǎng)頁(yè)中。保存并刷新網(wǎng)頁(yè)，你會(huì)看到圖片已經(jīng)顯示在網(wǎng)頁(yè)中。

在網(wǎng)頁(yè)中添加一段文字和圖片，使它們位于同一行。使用行內(nèi)標(biāo)簽“span”，使文字不會(huì)換行。保存并刷新網(wǎng)頁(yè)。

這就是我今天做的第一個(gè)網(wǎng)頁(yè)，非常簡(jiǎn)單。通過(guò)創(chuàng)建一個(gè)文本文檔并添加一些簡(jiǎn)單的內(nèi)容，就可以創(chuàng)建一個(gè)簡(jiǎn)單的靜態(tài)網(wǎng)頁(yè)。使用記事本打開文件會(huì)自動(dòng)顯示代碼提示，按一個(gè)Tap縮進(jìn)一行，就可以添加更多的標(biāo)簽和內(nèi)容。行內(nèi)標(biāo)簽可以嵌套在塊標(biāo)簽中，但塊標(biāo)簽不能嵌套在行內(nèi)標(biāo)簽中。

使用color屬性將其設(shè)置為藍(lán)色，保存并刷新頁(yè)面，即可獲得相應(yīng)的代碼提示。只需輸入color，即可獲得相應(yīng)的提示，而無(wú)需輸入c。這樣的代碼更加易讀。今天的任務(wù)已經(jīng)完成，可以回顧一下今天的重點(diǎn)。了解了h天貓無(wú)網(wǎng)頁(yè)的特性，只能包含一個(gè)h天命標(biāo)簽，且只能包含一個(gè)焊的body。

還學(xué)習(xí)了雙標(biāo)簽和單標(biāo)簽的概念。雙標(biāo)簽是指有頭有尾的標(biāo)簽，如html hand。單標(biāo)簽則只有一個(gè)標(biāo)簽，例如一妹子。此外，還了解了行內(nèi)標(biāo)簽和塊標(biāo)簽的區(qū)別。請(qǐng)自行查看相關(guān)內(nèi)容。為標(biāo)簽定義樣式時(shí)，可以使用style屬性。然后在其中添加顏色、字體等樣式信息即可。對(duì)于圖片標(biāo)簽，請(qǐng)注意使用其 src 屬性來(lái)指定圖片路徑。今天的學(xué)習(xí)就到這里了，再見。

在線咨詢

上一篇：如何用 JavaScript+Canvas 開發(fā)一款超級(jí)燒腦小游戲？
下一篇：產(chǎn)品經(jīng)理的技術(shù)腦：html是什么意思？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

HTML5入門

您的項(xiàng)目需求