整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
么是HTML5
官方概念：HTML5草案的前身名為Web Applications 1.0，是作為下一代互聯網標準,用于取代html4與xhtml1 的新一代標準版本,所以叫html5。它增加了新的標簽和屬性，加強了網頁的標準、語義化與web表現性能，同時還增加了本地數據庫等 Web 應用的功能。
廣義概念：HTML5代表瀏覽器端技術的一個發展階段。在這個階段，瀏覽器呈現技術得到了一個飛躍發展和廣泛支持，它包括：HTML5，CSS3，Javascript，API在內的一套技術組合
HTML 5發展時間表
由上面圖可知：現在的HTML5還不是一個最終統一的版本，所以說HTML5用在手機端的開發。
目前支持HTML5的瀏覽器
不同的瀏覽器顯示的效果可能不一樣。因為HTML5沒有一個統一的標準。（現在處在一個推廣階段），但是大部分是一樣的。
HTML5的特點
更簡單
標簽語義化
語法更寬松
多設備跨平臺
自適應網頁設計
從頭說起——文檔的聲明
Xhtml1.0的頁面架構
Html5的頁面架構
HTML5標簽的語義化
在以前的html中，盒子用div或span。
在html5中，標簽的最大變化是標簽都有了語義，以前的div和span都沒有語義，僅僅表示一個盒子。
<header> 頭標簽
<nav> 導航標簽
<aside> 側邊欄標簽
<article> 文章標簽
<footer> 頁腳
<section> 章節，頁眉，欄目
HTML5新增的表單三個屬性
1、required：必填屬性
2、placeholder：默認顯示內容
3、autofocus：自動獲取焦點
Html5中新增input標記的type屬性
| 屬性 | 描述 |
| 郵件 | |
| 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>
地址：
<select>
<optgroup label="北京">
<option>西城區</option>
<option>東城區</option>
</optgroup>
<optgroup label="天津">
<option>河西區</option>
<option>河東區</option>
</optgroup>
</select><br>
搜索車型：<input type="text" list="car">
<datalist id="car">
<option>奧迪</option>
<option>奧拓</option>
<option>大眾</option>
</datalist>
<input type="submit" value="提交">
</form>
Range調背景色
代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//當頁面準備完畢的時候
$(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音樂導航
完整代碼如下:
<style type="text/css">
#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>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(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);
//獲得當前li的索引編號
var index=$(this).index();
$('audio').get(index).play(); //播放第index個音樂
},function(){
$(this).children('span').animate({'top':0},200);
});
});
</script>
</head>
<body>
<ul id="nav">
<li>我的主頁</li>
<li>新聞頭條</li>
<li>電 視 劇</li>
<li>最新電影</li>
<li>小 游 戲</li>
<li>小說大全</li>
<li>旅游度假</li>
<li>今日團購</li>
<li>品牌特賣</li>
</ul>
<audio src="360music/m1.mp3"></audio>
<audio src="360music/m2.mp3"></audio>
<audio src="360music/m3.mp3"></audio>
<audio src="360music/m4.mp3"></audio>
<audio src="360music/m5.mp3"></audio>
<audio src="360music/m6.mp3"></audio>
<audio src="360music/m7.mp3"></audio>
<audio src="360music/m8.mp3"></audio>
<audio src="360music/m9.mp3"></audio>
</body>
相關例題：http://pan.baidu.com/s/1hsDGA8k 密碼：55ic
.<h1></h1>:標題
2.<strong></strong>:加粗
<em></em>:斜線
<ins></ins>:下劃線
<del></del>:刪除線
3.<div></div>:一個占一行的格子
<span></span>：一個占一格的格子
4.<p></p>:一個段落
</br>:單標簽 換行
5.<img src=”圖像的路徑和文件名”/>:圖像標簽 注意：圖片要和vscode放在一個文件夾
alt:替換文本 圖像顯示不出來的時候用文字替換 (顯示不出來就是地址填錯啥的)
使用方法：<img src=”圖像的路徑和文件名” alt=“這是一個魔方的圖片” />
Title：提示文本 鼠標放到圖像上提示的文字
使用方法：<img src=”圖像的路徑和文件名” alt=“這是一個魔方的圖片” title=” 這是一個魔方的圖片“ />
6.<width>:設定圖像寬度
<height>:設定圖像高度
<border>:給圖像設定邊框
/:下一級
../:上一級
7.<a></a>:鏈接標簽
<a href=”外部鏈接or內部鏈接” target=”打開窗口的方式1._self 當前窗口打開頁面 2._blank 新窗口打開頁面”/> 默認是_self
<a href=”#”></a>:空鏈接
<a href=”壓縮包的名稱”></a>:下載鏈接
<a herf=”外部鏈接”><img src=”圖片地址名稱”></a>:點擊圖片到外部鏈接
錨點鏈接：點擊鏈接快速到達頁面的某個位置
8.注釋<!—“”--> 快捷鍵：ctrl+/
9.特殊字符： :空格
<：小于號<
>: 大于號>
8.<th></th>:表頭單元格 內部字會居中并且加粗
<tr></tr>:行
<td></td>:列
Cellpadding=””：文字與單元格之間的間隙
Rowspan:跨行合并單元格
Colspan:跨列合并單元格
Align=“center left right”:讓表格所在頁面的位置
Border：邊框
Cellspacing:單元格與邊框之間的距離
<thead>：表格頭部區域標簽
<tbody>：表格主題區域標簽
Bgcolor：表格背景顏色
<input type=”text”>：一個框
<intput type=”checkbox”>:勾選正方形框
<input type=”radio”>:勾選圓圈框
若有不足，請大佬出手指點。
TML前端開發最終取決于掌握標簽的多少
HTML大概有七八百個標簽
樓主這里給大家總結了下HTML常用標簽
標簽描述
<!--...-->定義注釋。
<!DOCTYPE> 定義文檔類型,所有H5都是這玩意打頭。
<a>定義錨。
<abbr>定義縮寫。
<acronym>定義只取首字母的縮寫。
<address>定義文檔作者或擁有者的聯系信息。
<applet>不贊成使用。定義嵌入的 applet。
<area>定義圖像映射內部的區域。
<article>定義文章。
<aside>定義頁面內容之外的內容。
<audio>定義聲音內容。
<b>定義粗體字。
<base>定義頁面中所有鏈接的默認地址或默認目標。
<basefont>不贊成使用。定義頁面中文本的默認字體、顏色或尺寸。
<bdi>定義文本的文本方向，使其脫離其周圍文本的方向設置。
<bdo>定義文字方向。
<big>定義大號文本。
<blockquote>定義長的引用。
<body>定義文檔的主體。
<br>定義簡單的折行。
<button>定義按鈕 (push button)。
<canvas>定義圖形。
<caption>定義表格標題。
<center>不贊成使用。定義居中文本。
<cite>定義引用(citation)。
<code>定義計算機代碼文本。
<col>定義表格中一個或多個列的屬性值。
<colgroup>定義表格中供格式化的列組。
<command>定義命令按鈕。
<datalist>定義下拉列表。
<dd>定義定義列表中項目的描述。
<del>定義被刪除文本。
<details>定義元素的細節。
<dir>不贊成使用。定義目錄列表。
<div>定義文檔中的節。
<dfn>定義定義項目。
<dialog>定義對話框或窗口。
<dl>定義定義列表。
<dt>定義定義列表中的項目。
<em>定義強調文本。
<embed>定義外部交互內容或插件。
<fieldset>定義圍繞表單中元素的邊框。
<figcaption>定義 figure 元素的標題。
<figure>定義媒介內容的分組，以及它們的標題。
<font>不贊成使用。定義文字的字體、尺寸和顏色。
<footer>定義 section 或 page 的頁腳。
<form>定義供用戶輸入的 HTML 表單。
<frame>定義框架集的窗口或框架。
<frameset>定義框架集。
<h1> to <h6>定義 HTML 標題。
<head>定義關于文檔的信息。
<header>定義 section 或 page 的頁眉。
<hr>定義水平線。
<html>定義 HTML 文檔。
<i>定義斜體字。
<iframe>定義內聯框架。
<img>定義圖像。
<input>定義輸入控件。
<ins>定義被插入文本。
<isindex>不贊成使用。定義與文檔相關的可搜索索引。
<kbd>定義鍵盤文本。
<keygen>定義生成密鑰。
<label>定義 input 元素的標注。
<legend>定義 fieldset 元素的標題。
<li>定義列表的項目。
<link>定義文檔與外部資源的關系。
<map>定義圖像映射。
<mark>定義有記號的文本。
<menu>定義命令的列表或菜單。
<menuitem>定義用戶可以從彈出菜單調用的命令/菜單項目。
<meta>定義關于 HTML 文檔的元信息。
<meter>定義預定義范圍內的度量。
<nav>定義導航鏈接。
<noframes>定義針對不支持框架的用戶的替代內容。
<noscript>定義針對不支持客戶端腳本的用戶的替代內容。
<object>定義內嵌對象。
<ol>定義有序列表。
<optgroup>定義選擇列表中相關選項的組合。
<option>定義選擇列表中的選項。
<output>定義輸出的一些類型。
<p>定義段落。
<param>定義對象的參數。
<pre>定義預格式文本。
<progress>定義任何類型的任務的進度。
<q>定義短的引用。
<rp>定義若瀏覽器不支持 ruby 元素顯示的內容。
<rt>定義 ruby 注釋的解釋。
<ruby>定義 ruby 注釋。
<s>不贊成使用。定義加刪除線的文本。
<samp>定義計算機代碼樣本。
<script>定義客戶端腳本。
<section>定義 section。
<select>定義選擇列表（下拉列表）。
<small>定義小號文本。
<source>定義媒介源。
<span>定義文檔中的節。
<strike>不贊成使用。定義加刪除線文本。
<strong>定義強調文本。
<style>定義文檔的樣式信息。
<sub>定義下標文本。
<summary>為 <details> 元素定義可見的標題。
<sup>定義上標文本。
<table>定義表格。
<tbody>定義表格中的主體內容。
<td>定義表格中的單元。
<textarea>定義多行的文本輸入控件。
<tfoot>定義表格中的表注內容（腳注）。
<th>定義表格中的表頭單元格。
<thead>定義表格中的表頭內容。
<time>定義日期/時間。
<title>定義文檔的標題。
<tr>定義表格中的行。
<track>定義用在媒體播放器中的文本軌道。
<tt>定義打字機文本。
<u>不贊成使用。定義下劃線文本。
<ul>定義無序列表。
<var>定義文本的變量部分。
<video>定義視頻。
<wbr>定義可能的換行符。
<xmp>不贊成使用。定義預格式文本。
標簽描述
<!DOCTYPE> 定義文檔類型。
<html>定義 HTML 文檔。
<title>定義文檔的標題。
<body>定義文檔的主體。
<h1> to <h6>定義 HTML 標題。
<p>定義段落。
<br>定義簡單的折行。
<hr>定義水平線。
<!--...-->定義注釋。
格式
標簽描述
<acronym>定義只取首字母的縮寫。
<abbr>定義縮寫。
<address>定義文檔作者或擁有者的聯系信息。
<b>定義粗體文本。
<bdi>定義文本的文本方向，使其脫離其周圍文本的方向設置。
<bdo>定義文字方向。
<big>定義大號文本。
<blockquote>定義長的引用。
<center>不贊成使用。定義居中文本。
<cite>定義引用(citation)。
<code>定義計算機代碼文本。
<del>定義被刪除文本。
<dfn>定義定義項目。
<em>定義強調文本。
<font>不贊成使用。定義文本的字體、尺寸和顏色
<i>定義斜體文本。
<ins>定義被插入文本。
<kbd>定義鍵盤文本。
<mark>定義有記號的文本。
<meter>定義預定義范圍內的度量。
<pre>定義預格式文本。
<progress>定義任何類型的任務的進度。
<q>定義短的引用。
<rp>定義若瀏覽器不支持 ruby 元素顯示的內容。
<rt>定義 ruby 注釋的解釋。
<ruby>定義 ruby 注釋。
<s>不贊成使用。定義加刪除線的文本。
<samp>定義計算機代碼樣本。
<small>定義小號文本。
<strike>不贊成使用。定義加刪除線文本。
<strong>定義語氣更為強烈的強調文本。
<sup>定義上標文本。
<sub>定義下標文本。
<time>定義日期/時間。
<tt>定義打字機文本。
<u>不贊成使用。定義下劃線文本。
<var>定義文本的變量部分。
<wbr>定義可能的換行符。
表單
標簽描述
<form>定義供用戶輸入的 HTML 表單。
<input>定義輸入控件。
<textarea>定義多行的文本輸入控件。
<button>定義按鈕。
<select>定義選擇列表（下拉列表）。
<optgroup>定義選擇列表中相關選項的組合。
<option>定義選擇列表中的選項。
<label>定義 input 元素的標注。
<fieldset>定義圍繞表單中元素的邊框。
<legend>定義 fieldset 元素的標題。
<isindex>不贊成使用。定義與文檔相關的可搜索索引。
<datalist>定義下拉列表。
<keygen>定義生成密鑰。
<output>定義輸出的一些類型。
框架
標簽描述
<frame>定義框架集的窗口或框架。
<frameset>定義框架集。
<noframes>定義針對不支持框架的用戶的替代內容。
<iframe>定義內聯框架。
圖像
標簽描述
<img>定義圖像。
<map>定義圖像映射。
<area>定義圖像地圖內部的區域。
<canvas>定義圖形。
<figcaption>定義 figure 元素的標題。
<figure>定義媒介內容的分組，以及它們的標題。
音頻/視頻
標簽描述
<audio>定義聲音內容。
<source>定義媒介源。
<track>定義用在媒體播放器中的文本軌道。
<video>定義視頻。
鏈接
標簽描述
<a>定義錨。
<link>定義文檔與外部資源的關系。
<nav>定義導航鏈接。
列表
標簽描述
<ul>定義無序列表。
<ol>定義有序列表。
<li>定義列表的項目。
<dir>不贊成使用。定義目錄列表。
<dl>定義定義列表。
<dt>定義定義列表中的項目。
<dd>定義定義列表中項目的描述。
<menu>定義命令的菜單/列表。
<menuitem>定義用戶可以從彈出菜單調用的命令/菜單項目。
<command>定義命令按鈕。
表格
標簽描述
<table>定義表格
<caption>定義表格標題。
<th>定義表格中的表頭單元格。
<tr>定義表格中的行。
<td>定義表格中的單元。
<thead>定義表格中的表頭內容。
<tbody>定義表格中的主體內容。
<tfoot>定義表格中的表注內容（腳注）。
<col>定義表格中一個或多個列的屬性值。
<colgroup>定義表格中供格式化的列組。
樣式/節
標簽描述
<style>定義文檔的樣式信息。
<div>定義文檔中的節。
<span>定義文檔中的節。
<header>定義 section 或 page 的頁眉。
<footer>定義 section 或 page 的頁腳。
<section>定義 section。
<article>定義文章。
<aside>定義頁面內容之外的內容。
<details>定義元素的細節。
<dialog>定義對話框或窗口。
<summary>為 <details> 元素定義可見的標題。
元信息
標簽描述
<head>定義關于文檔的信息。
<meta>定義關于 HTML 文檔的元信息。
<base>定義頁面中所有鏈接的默認地址或默認目標。
<basefont>不贊成使用。定義頁面中文本的默認字體、顏色或尺寸。
編程
標簽描述
<script>定義客戶端腳本。
<noscript>定義針對不支持客戶端腳本的用戶的替代內容。
<applet>不贊成使用。定義嵌入的 applet。
<embed>為外部應用程序（非 HTML）定義容器。
<object>定義嵌入的對象。
<param>定義對象的參數。
屬性描述
accesskey規定激活元素的快捷鍵。
class規定元素的一個或多個類名（引用樣式表中的類）。
contenteditable規定元素內容是否可編輯。
contextmenu規定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。
data-*用于存儲頁面或應用程序的私有定制數據。
dir規定元素中內容的文本方向。
draggable規定元素是否可拖動。
dropzone規定在拖動被拖動數據時是否進行復制、移動或鏈接。
hidden規定元素仍未或不再相關。
id規定元素的唯一 id。
lang規定元素內容的語言。
spellcheck規定是否對元素進行拼寫和語法檢查。
style規定元素的行內 CSS 樣式。
tabindex規定元素的 tab 鍵次序。
title規定有關元素的額外信息。
translate規定是否應該翻譯元素內容。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
