14、什麼是HTML 5，HTML5與HTML的比較及其基礎語法
阿新 • • 發佈：2021-01-22
技術標籤：第三冊：HTML+CSSjavascriptwebhtml5css3css
2.22 什麼是HTML 5，HTML5相關基礎知識
一、官方概念：HTML5草案的前身名為Web Applications 1.0，是作為下一代網際網路標準,用於取代html4與xhtml1 的新一代標準版本,所以叫html5。它增加了新的標籤和屬性，加強了網頁的標準、語義化與web表現效能，同時還增加了本地資料庫等 Web 應用的功能。二、廣義概念：HTML5代表瀏覽器端技術的一個發展階段。在這個階段，瀏覽器呈現技術得到了一個飛躍發展和廣泛支援，它包括：HTML5，CSS3，Javascript，API在內的一套技術組合 。
IE9+，Firefox，Opear，Safari，Chrome，獵豹，UC，百度，遨遊，海豚。
五、HTML特點
1、更簡單，標籤語義化，語法更寬鬆，多裝置跨平臺，自適應網頁設計。
2、xHTML1.0的頭：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns xHTML1.0的字元宣告：<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
HTML5的字元宣告：<meta charset=”utf-8”>
不允許寫結束符的標籤：(單標籤)
a) area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
b) li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th
例如：
<ul>
<li>北京
<li>上海
</ul>
c) html、head、body、colgroup、tbody
HTML5支援鬆散的語法極大地相容了程式設計人員的不規範程式碼，同時保證頁面效果不會改變。HTML5是向下相容的。
5、新增的結構標記
HTML5的標記最大的變化就是有了語義，以前的<div><span>僅僅表示盒子，沒有具體的語義。
<header> 頭標籤 <nav> 導航
<aside> 側邊欄 <article> 文章標籤
<footer> 腳 <section> 章節
練習：
<style type="text/css">
header,nav,section,footer{
width:780px;
height:100px;
border:#000 solid 1px;
margin:5px auto;
}
aside,article{
width:45%;
height:90px;
float:left;
border:#000 solid 1px;
margin:3px 0px 0px 3px;
}
</style>
<body>
<header>頭</header>
<nav>導航</nav>
<section>
<aside>側邊欄</aside>
<article>文章</article>
</section>
<footer>腳</footer>
</body>
Required：必填欄位（在表單中，方框內如果沒有填寫內容，會顯示提示叫你填該內容）
Autofocus：自動獲得焦點（開啟瀏覽器，滑鼠在表單填寫方框內）
Placeholder：預設顯示內容（在填寫方框內會有一段灰色字，當你填寫好內容後，字消失；刪除填寫的內容後，字顯示）
<form>
姓名：<input type="text" name="username" required autofocus placeholder="請輸入姓名" />
<br />
<input type="submit" value="提交" />
</form>
HTML5的表單元素可以不放在表單域中，可以直接通過id關聯起來。
<!DOCTYPE html >
<head>
<meta charset="utf-8" >
<title>無標題文件</title>
</head>
<body>
<form>
郵件：<input type="email" required /> <br />
網址：<input type="url" required /><br />
年齡：<input type="number" /><br />
紅色：<input type="range" min="0" max="255" value="255" /><br />
顏色：<input type="color" /><br />
年月日：<input type="date" /><br />
年周：<input type="week" /><br />
年月：<input type="month" /><br />
時間b:<input type="time"><br>
年月日時間:<input type="datetime-local"><br>
地區：
<select>
<optgroup label="北京">
<option>東城區</option>
<option>西城區</option>
</optgroup>
<optgroup label="上海">
<option>閔興區</option>
<option>黃浦區</option>
</optgroup>
</select><br>
搜尋：<input type="text">
<datalist>
<option>奧迪</option>
<option>奧妙</option>
<option>奧祕</option>
<option>深奧</option>
</datalist>
<input type="submit" value="提交" />
</form>
</body>
</html>
方法一：
<audio src="music/music.mp3" controls autoplay="autoplay">不支援此格式</audio>
Controls:表示顯示控制面板
Autoplay：自動播放
如果不支援此音訊格式，顯示<audio>標籤的內容
<audio controls autoplay>
<source src="music/music.mp3">
<source src="music/music.ogg">
</audio>
如果不支援第一個音訊就播放下一個。
方法一：
<video src="video/movie.mp4" controls autoplay></video>
<video controls autoplay>
<source src="video/movie.mp4">
<source src="video/movie.ogg">
<source src="video/movie.webm">
</video>
:before在盒子的前面插入（內部的前面）
:after在盒子的後面插入（內部的後面）
Content是用來插入內容，如果沒有內容，content也必須要寫，content的內容是空。
<!DOCTYPE html >
<head>
<meta charset="utf-8" />
<title>無標題文件</title>
<style type="text/css"\>
#shi:before{
content:"鋤禾日當午，";
background-color:#006699;
}
#shi:after{
content:"誰知盤中餐，";
background-color:#996699;
}
</style>
</head>
<body>
<div id="shi">鋤禾日當午，</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>無標題文件</title>
<style type="text/css">
#con{
width:300px;
height:30px;
line-height:30px;
border:#000000 solid 1px;
margin:100px auto;
font-size:12px;
}
#con input{
margin:0px 10px;
padding:0px;
height:30px;
width:220px;
border:none;
}
#con:before{
content:'';/*沒有內容也要寫*/
width:25px;
height:25px;
background:url(./22.銀杏的葉子、春天浮動/img/tu1.png) no-repeat;
display: inline-block;
vertical-align:middle;
}
#con:after{
content:'';
width:25px;
height:25px;
display:inline-block;
background:url(./22.銀杏的葉子、春天浮動/img/tu2.png) no-repeat;
vertical-align:middle;
}
</style>
</head>
<body>
<div id="con"><input type="text" value="搜尋我的禮物" /></div>
</body>
</html>
<style type="text/css">
#content{
width:300px;
height:300px;
border:#000000 solid 1px;
margin:100px auto;
display:table;
}
#wenzi{
border:#000000 solid 1px;
text-align:center;
vertical-align:middle;
display:table-cell;/*居中*/
}
</style>
</head>
<body>
<div id="content">
<div id="wenzi">鋤禾日當午，<br />
汗滴禾下土。<br />
誰知盤中餐，<br />
粒粒皆辛苦。<br />
</div>
</div>
</body>
<style type="text/css">
div{
width:300px;
height:300px;
border:#000000 solid 1px;
margin:100px auto;
background:url(./22.銀杏的葉子、春天浮動/img/face.jpg) no-repeat center;
}
div:hover:before{
content:'';
width:100%;
height:100%;
display:block;
box-sizing:border-box;
border:rgba(0,0,0,0.1) solid 7px;
}
</style>