HTML5入門

么是HTML5

官方概念：HTML5草案的前身名為Web Applications 1.0，是作為下一代互聯網標準,用于取代html4與xhtml1 的新一代標準版本,所以叫html5。它增加了新的標簽和屬性，加強了網頁的標準、語義化與web表現性能，同時還增加了本地數據庫等 Web 應用的功能。

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

HTML 5發(fā)展時間表

由上面圖可知：現在的HTML5還不是一個最終統一的版本，所以說HTML5用在手機端的開發(fā)。

目前支持HTML5的瀏覽器

不同的瀏覽器顯示的效果可能不一樣。因為HTML5沒有一個統一的標準。（現在處在一個推廣階段），但是大部分是一樣的。

HTML5的特點

更簡單

標簽語義化

語法更寬松

多設備跨平臺

自適應網頁設計

從頭說起——文檔的聲明

Xhtml1.0的頁面架構

Html5的頁面架構

HTML5標簽的語義化

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

在html5中，標簽的最大變化是標簽都有了語義，以前的div和span都沒有語義，僅僅表示一個盒子。

<header> 頭標簽

<nav> 導航標簽

<aside> 側邊欄標簽

<article> 文章標簽

<footer> 頁腳

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

HTML5新增的表單三個屬性

1、required：必填屬性

2、placeholder：默認顯示內容

3、autofocus：自動獲取焦點

Html5中新增input標記的type屬性

屬性	描述
email	郵件
date	日期
url	網址格式
number	數字
range	范圍
color	顏色

完整代碼

<form>

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

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

網址：<input type="url"><br>

手機號：<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調背景色

代碼如下：

<!doctype html>

<html>

<head>

<title>無標題文檔</title>

//當頁面準備完畢的時候

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

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

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

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

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

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

$(this).next().html(value); //將值付給當前修改元素后面的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>

藍色：<input type="range" id="blue" min="0" max="255" value="255"><span>255</span>

</body>

</html>

音頻播放

第一種寫法

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

第二種寫法：

視頻播放

使用video標記來插入視頻 autoplay表示自動播放，controls表示顯示控制面板。

360音樂導航

完整代碼如下:

#nav{

list-style-type:none; /*去掉無序列表前面的點*/

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

width:960px; /*整個導航的寬度*/

height:38px;

color:#333;

font-size:14px;

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

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

}

#nav li{

width:105px;

height:36px;

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

text-align:center; /*文字居中對齊*/

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

border-top:#C9CBCE solid 1px;

border-left:#C9CBCE solid 1px;

border-bottom:#C9CBCE solid 1px;

cursor:pointer; /*光標移動到li上變成手形*/

}

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

border-right:#C9CBCE solid 1px;

}

#nav .liclick{

border-top:#54B82A solid 2px;

border-bottom:none;

}

#nav span{

width:100%;

height:38px;

display:block; /*只有塊顯示標記才能設置寬度和高度*/

position:relative; /*相對定位，目的為了span可以移動*/

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

}

</style>

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

//點擊li

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

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

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

});

//每個li下面添加一個底色

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]);

});

//移動到li上的時候顏色色塊升起

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

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

//獲得當前l(fā)i的索引編號

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

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

},function(){

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

});

</script>

</head>

<body>

</ul>

</body>

相關例題：http://pan.baidu.com/s/1hsDGA8k 密碼：55ic

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

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

想要制作一個免費的HTml5響應式網站，最好的辦法就是通過支持html5技術的自助建站系統制作企業(yè)網站。如時下支持html5技術最完善的建站寶盒企業(yè)自助建站系統，就能很好的滿足企業(yè)制作html5網站的需求。

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

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

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

更多建站&互聯網行業(yè)資訊，敬請關注微信公眾號：耐思尼克（iisp-com）

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

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

這是一個HTML5的標簽，它包含了HTML聲明和標簽的功能。網頁的主體部分只有一個標簽，即HTML標簽，它是一個雙標簽，包含一個開始標簽和一個結束標簽，內部包含一個標題和網頁內容。在網頁的主體部分中，可以設置樣式、參數、標題等。

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

在網頁中添加一個生日祝福的內容。在王翰的文章中添加一個標題，標題為“生日祝福”。這也是一個雙標簽，包括開始標簽和結束標簽。保存并刷新網頁。

在大美麗網頁中添加一個圖片。這是一個單標簽，只有一個標簽，沒有結束標簽。在百度中搜索一張圖片，并將其地址復制下來。使用快捷鍵Ctrl + C，然后使用快捷鍵Ctrl + V將圖片添加到網頁中。保存并刷新網頁，你會看到圖片已經顯示在網頁中。

在網頁中添加一段文字和圖片，使它們位于同一行。使用行內標簽“span”，使文字不會換行。保存并刷新網頁。

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

使用color屬性將其設置為藍色，保存并刷新頁面，即可獲得相應的代碼提示。只需輸入color，即可獲得相應的提示，而無需輸入c。這樣的代碼更加易讀。今天的任務已經完成，可以回顧一下今天的重點。了解了h天貓無網頁的特性，只能包含一個h天命標簽，且只能包含一個焊的body。

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

在線咨詢

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

您的項目需求

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

整合營銷服務商

HTML5入門

您的項目需求