HTML5基本元素
<!DOCTYPE html>
<html>
<head>
<title>HTML5保留的經常使用元素</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<style type="text/css">
div div{
display:inline-block;
padding:10px;
background-color:#aaa;
margin:3px;
}
</style>
</head>
<body> javascript
<!--1.基本標籤--> css
<!--採用標題一到標題六來輸出文本-->
<h1>Crazy JAVA</h1>
<h2>Crazy JAVA</h2>
<h3>Crazy JAVA</h3>
<h4>Crazy JAVA</h4>
<h5>Crazy JAVA</h5>
<h6>Crazy JAVA</h6>
<!--輸出一條水平線-->
<hr/>
<!--使用span定義三節，不進行換行-->
<span>Tomcat</span>
<span>Jetty</span>
<span>OBA</span>
<!--使用div定義三節，進行換行-->
<div>Tomcat</div>
<div>Jetty</div>
<div>OBA</div>
<!--使用P定義三節-->
<p>Tomcat</p>
<p>Jetty</p>
<p>OBA</p> html
<!--2.文本格式化標籤--> html5
<span><b>加粗文本</b></span><br/>
<span><i>斜體文本</i></span><br/>
<span><b><i>加粗斜體文本</i></b></span><br/>
<span><em>被強調的文本</em></span><br/>
<span><strong>粗體文本</strong></span><br/>
<span><big>大號文本</big></span><br/>
<span><small>小號文本</small></span><br/>
<span>X<sup>2</sup></span><br/>
<span>X<sub>2</sub></span><br/>
<span><bdo dir="ltr">從左到右顯示</bdo></span><br/>
<span><bdo dir="rtl">從右到左顯示</bdo></span><br/> java
<!--3.語義相關標籤--> android
<!--使用q表示一段短的引用文本,會帶上引號-->
<p>瘋狂Java精神是<q cite="http://www.fkjava.org">瘋狂緣自夢想,技術成就輝煌。</q></p>
<!--使用blockquote表示一段長的引用文本-->
<div>
<blockquote>
業精於勤,荒於嬉。<br/>
行成於思,毀於隨。<br/>
</blockquote>
</div>
<!--cite經常使用於表示做品的標題-->
<p>
<cite>《芙蓉鎮》</cite>.<cite>《藍風箏》</cite>是國內頗有影響力的電影。
</p>
<!--code使用-->
<p>
下面定義一個Java類<br/>
<code>
public class Cat<br/>
{<br/>
private int name="abc";<br/>
}<br/>
</code>
</p>
<!--pre元素包含預約義格式的文本-->
<pre>
pubic class Cat
{
private int name="bcd";
}
</pre>
<p>
<!--使用abbr定義縮寫-->
瘋狂Java教育中心的縮寫是<abbr title="瘋狂教育">fkjy</abbr><br/>
<!--使用address定義地址-->
瘋狂軟件地址是<address>中國軟件基地</address>
</p>
<p>
<!--使用dfn定義專業術語-->
<dfn>HTML</dfn>是一種廣爲認知標籤語言。
</p>
<p>
可經過輸入以下命令:<br/>
<kbd>list -l</kbd>
在Linux的shell窗口中查看當前目錄下全部文件,目錄的詳細信息。
</p>
<!--使用samp定義示範文本內容-->
<samp>
我在閱讀xxxx圖書的第一章
</samp>
<!--使用var變量-->
<var>i</var>.<var>j</var>.<var>k</var>一般用做循環計數變量。
<!--使用del和ins表示修訂-->
<p>
Android是一個<del>開發</del><ins>開放</ins>式的手機.平板電腦操做系統。
</p> ajax
<!--4.超連接和錨點-->
<a href="http://www.baidu.com">百度一下,你就知道?</a><br/>
<a href="http://www.baidu.com" target="_blank">百度一下,你就知道?</a><br/>
<a href="http://www.baidu.com"><img src="imgs/1.jpg" alt="百度"/></a> shell
<!--5.列表相關元素-->
<!--無序-->
<ul>
<li>java</li>
<li>ajax</li>
<li>android</li>
</ul>
<!--有序-->
<ol start="2" type="I">
<li>java</li>
<li>ajax</li>
<li>android</li>
</ol>
<!--定義列表-->
<dl>
<dt>Crazy JAVA</dt>
<dt>Crazy AJAX</dt>
<dt>Crazy ANDROID</dt>
<dt>Crazy XML</dt>
</dl> 編程
<!--6.圖像相關-->
<img src="imgs/yzcw.jpg" alt="漁舟唱晚" width="500" height="500" usemap="#test"/>
<map name="test" id="test">
<area shape="circle" coords="57,55,25" href="http://www.baidu.com" alt="BaiDu Search"/>
<area shape="ploy" coords="188,28,185,50,200,74,224,72,246,51" href="http://www.google.com" alt="Google Search"/>
</map> 瀏覽器
<!--7.表格相關元素-->
<table style="width:400px" border="1">
<caption><b>瘋狂Java體系圖書</b></caption>
<tr>
<td>書名</td>
<td>做者</td>
</tr>
<tr>
<td>瘋狂Java</td>
<td>LiG</td>
</tr>
<tr>
<td>輕量級JavaEE</td>
<td>LiG</td>
</tr>
</table>
<!--跨行.跨列的表格-->
<table style="width:240px" border="1">
<tr>
<td rowspan="2">跨兩行的單元格</td>
<td>普通單元格</td>
</tr>
<tr>
<td>普通單元格</td>
</tr>
<tr>
<td colspan="2">跨兩列的單元格</td>
</tr>
<tr>
<td>普通單元格</td>
<td>普通單元格</td>
</tr>
</table>
<!--使用thead 。tbody,tfoot單元格-->
<table style="width:400px" border="1">
<caption><b>瘋狂Java</b></caption>
<thead>
<tr>
<td>書名</td>
<td>做者</td>
</tr>
</thead>
<tbody>
<tr>
<td>XML</td>
<td>LiG</td>
</tr>
<tr>
<td>瘋狂Java</td>
<td>LiG</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" style="text-align:right">總計2本</td>
</tr>
</tfoot>
</table>
<!--爲指定列設置屬性值-->
<table style="background-color:black;
border-collapse:separate;
border-spacing:1px;">
<caption><b>瘋狂Java體系圖書</b></caption>
<!--定義全部列的背景色是白色-->
<colgroup style="background-color:#FFF;">
<!--設置第一列的列度-->
<col style="width:160px;"/>
<!--定義橫跨兩列,設置兩列各寬100px-->
<col span="2" style="width:100px;"/>
</colgroup>
<thead>
<tr>
<td>書名</td>
<td>做者</td>
<td>價格</td>
</tr>
</thead>
<tbody>
<tr>
<td>XML</td>
<td>LiG</td>
<td>100</td>
</tr>
<tr>
<td>瘋狂Java</td>
<td>LiG</td>
<td>99</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" style="text-align:right">總計2本</td>
</tr>
</tfoot>
</table>
<!--8.框架相關元素-->
<iframe src="http://wwww.baidu.com" width="200px" height="120px"></iframe>
<hr/>
<!--HTML5新增的屬性-->
<!--1.contentEditable屬性,指定contentEditable=「true」表示該元素是可編輯的-->
<div id="target" contentEditable="true" style="width:500px;border=1px solid black">
瘋狂Java講義
<!--contentEditable屬性是可繼承的-->
<table style="width:420px;border-collapse:collapse;" border="1">
<thead>
<tr>
<td>書名</td>
<td>做者</td>
</tr>
</thead>
<tbody>
<tr>
<td>XML</td>
<td>LiG</td>
</tr>
<tr>
<td>瘋狂Java</td>
<td>LiG</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" style="text-align:right">總計2本</td>
</tr>
</tfoot>
</table>
</div>
<!--2.designMode屬性 至關於一個全局的contentEditable屬性-->
<!--3.hidden屬性(IE下未隱藏,Chrome下正常)-->
<button onClick="var target=document.getElementById('target');target.hidden=!target.hidden;">顯示與隱藏</button><br/>
<!--4.spellcheck屬性-->
<textarea spellcheck="true" rows="3" cols="40"></textarea>
<!--5.文檔結構元素-->
<article>
<header>
<h1>學習Android必須先學習Java?</h1>
<div>做者:johson</div>
</header>
<p>
這個還真是必須得學!
</p>
<section>
<article>
<header>
<h1>仍是得學習Java</h1>
<div>做者:abc</div>
</header>
<p>
雖然android不必定適用Android開發,還能夠選擇其餘語言開發.
</p>
<article>
<article>
<header>
<h1>Java是基礎</h1>
<div>做者:heidi</div>
</header>
<p>
Java是基礎,學好Java再學習Android事半功倍!
</p>
<article>
</section>
<footer>
以上帖子和回覆只表明我的觀點。
</footer>
<aside>
<h3>關於樓主</h3>
<section>
<div>用戶組:編程摸索</div>
<div>註冊時間:2012-08-20</div>
<div>最後發表時間:2012-09-20</div>
</section>
</aside>
</article>
<aside>
<h3>頁面導航</h3>
<nav>
<ul>
<li><a href="#">查看本頁</a></li>
<li><a href="http://www.baidu.com">BaiDu</a></li>
<li><a href="http://www.google.com">Google</a></li>
</ul>
</nav>
</aside>
<figure style="border:2px solid black;padding:5px;width:500px">
<figcaption>
<b>搜索引擎</b>
<img src="imgs/1.jpg" alt="BaiDu"/>
<img src="imgs/1.jpg" alt="Google"/>
</figcaption>
</figure>
<!--語義相關元素-->
<article>
<header>
<h2>瘋狂軟件將引入<mark>HTML5></mark>相關課程</h2>
</header>
<p>
0 <mark>HTML5</mark>是下一代HTML規範,瘋狂軟件計劃在<time datetime="2012-08-20">2012年8月</time>
引入<mark>HTML5</mark>相關課程,瘋狂軟件上課時間是<time datetime="09:00">早上9點</time>到
<time datetime="17:30">下午5點半</time>，瘋狂軟件將於龍年的<time datetime="2012-01-30DT09:00">正月初八</time>
正式上課,也就是<time>2012-01-30</time>
</p>
</article>
<!---只有Chrome支持以下兩個屬性-->
<details>
<summary>芙蓉鎮</summary>
芙蓉鎮是一部好片子,值得一看!
</details>
<p>
<!--兩個特殊功能的元素-->
當前的行車速度是<meter value="200" min="0" max="220" low="0" high="160">200</meter>公里/小時.<br/>
任務完成是<progress value="30" max="100">30/100</progress><br/>
</p>
<br/>
<!--HTML5新增的拖放API-->
<div id="source" style="width:80px;height:80px;border:1px solid black;background-color:#bbb;" draggable="true">
瘋狂軟件教育
</div>
<script type="text/javascript">
var source=document.getElementById('source');
source.ondragstart=function(evt){
//讓拖動操做攜帶數據
evt.dataTransfer.setData("text/plain","www.baidu.com");
}
document.ondragover=function(evt){
//取消事件的默認行爲
return false;
}
document.ondrop=function(evt){
source.style.position="absolute";
source.style.left=evt.pageX+"px";
source.style.top=evt.pageY+"px";
//取消事件默認行爲
return false;
}
</script>
<!--經過DataTransfer對象，可讓拖放操做完成更多的功能
下面實現一個容許經過拖放來添加、刪除收藏夾的功能：
-->
<div style="width:600px;border:1px solid black;">
<h2>可將喜歡的項目拖入收藏夾</h2>
<div draggable="true" ondragstart="dsHandler(event)">百度</div>
<div draggable="true" ondragstart="dsHandler(event)">谷歌</div>
<div draggable="true" ondragstart="dsHandler(event)">淘寶</div>
<div draggable="true" ondragstart="dsHandler(event)">微博</div>
</div>
<div id="dest" style="width:400px;height:400px;border:1px solid black;float:left;">
<h2 ondragleave="return false">收藏夾</h2>
</div>
<img id="gb" draggable="false" src="imgs/3.jpg" alt="垃圾桶" style="width:50px;height:50px;float:left;"/>
<script type="text/javascript">
var dest=document.getElementById('dest');
var myicon=document.createElement('img');
myicon.src="imgs/1.jpg";
var dsHandler=function(evt){
var dt=evt.dataTransfer;
//改變拖動圖標
dt.setDragImage(myicon,0,0);
dt.setData("text/plain","<item>"+evt.target.innerHTML);
}
//當元素被拖放到收藏夾上所觸發的行爲
dest.ondrop=function(evt){
var text=evt.dataTransfer.getData("text/plain");
if(text.indexOf('<item>')==0){
//建立一個新的div元素
var newEle=document.createElement("div");
newEle.id=new Date().getUTCMilliseconds();
newEle.draggable="true";
newEle.innerHTML=text.substring(6);
newEle.ondragstart=function(evt){
evt.dataTransfer.setData("text/plain","<remove>"+newEle.id);
}
dest.appendChild(newEle);
}
}
//當元素被拖到垃圾箱上所觸發的行爲
var gb=document.getElementById('gb');
gb.ondrop=function(evt){
var id=evt.dataTransfer.getData("text/plain");
if(id.indexOf('<remove>')==0){
var target=document.getElementById(id.substring(8));
dest.removeChild(target);
}
}
document.ondragover=function(evt){
return false;
}
document.ondrop=function(evt){
return false;
}
</script>
<!--經過設置DataTransfer對象的effectAllowed、dropEffect屬性能夠控制拖放行爲，effectAllowed用於控制被拖動元素的拖動行爲，一般放在ondragstart事件監聽器中，dropEffect則控制被放入目標組件的行爲，所以一般放在ondragover事件監聽器中
若是dropEffect設置的拖放行爲不在effectAllowed屬性設置的多個拖放行爲以內，拖放操做將會失敗
-->
<div id="test" draggable="true" style="width:80px;height:60px;border:1px solid black">
拖動我
</div>
<script type="text/javascript">
var test=document.getElementById("test");
test.ondragstart=function(evt){
var dt=evt.dataTransfer;
dt.effectAllowed='link';
dt.setData("text/plain","www.baidu.com");
}
</script>
<!--HTML表單相關元素和屬性-->
<!--1、HTML原有表單及表單控件
1.表單元素
form的相關屬性：
action---表單被提交到哪一個地址
method--GET/POST請求類型
enctype---對錶單內容編碼所採用的字符集
---application/x-www-form-urlencoded（默認編碼方式，URL編碼格式）
---multipart/form-data（二進制方式處理表單--文件上傳）
---text/plain（直接經過表單發送郵件）
name---指定表單惟一名稱
target---打開目標URL方式
有name屬性的會生成請求參數，不然不會生成；
表單屬性設置爲disabled則不會被提交
2.input元素
size指定元素寬度，maxlength指定最大輸入字符數
3.label元素
當用戶單擊<label>元素所生成的標籤時，該標籤關聯的表單控件元素會得到焦點
讓標籤和表單控件關聯有兩種方式：
隱式關聯：使用for屬性
顯式關聯：將表單元素直接放在<label>標籤中（IE不支持）
4.button元素
比<input type="button">功能更強大、更豐富
不要在button標籤之間放置圖像映射，會干擾表單按鈕的行爲
5.列表框和下拉列表
<select>生成的是下拉列表仍是列表框徹底由是否指定size或multiple屬性來決定，只要指定了其中一個屬性，就會生成列表框
6.使用textarea指定文本域
textarea元素不能指定value屬性
-->
<form action="http://www.baidu.com" method="get">
<!--input元素-->
<!--label標籤隱士關聯-->
<label for="username">單行文本框:<input id="username" name="username" type="text" /></label><br/>
不能編輯的文本框:<input id="username2" name="username" type="text" readonly="true"/><br/>
<!--label標籤顯示關聯-->
<label>密碼框:<input id="password" name="password" type="password"/></label><br/>
隱藏框:<input id="hidden" name="hidden" type="hidden"/><br/>
單選框:
<input id="red" name="red" type="radio" value="red"/>紅
<input id="yellow" name="yellow" type="radio" value="yellow"/>黃
<input id="green" name="green" type="radio" value="green"/>綠<br/>
複選框:
<input id="eat" name="eat" type="checkbox" value="eat"/>吃
<input id="sleep" name="sleep" type="checkbox" value="sleep"/>睡
文件上傳:<input id="file" name="file" type="file"/><br/>
圖像域:<input id="image" name="image" type="image" src="imgs/1.jpg"/><br/>
四個按鈕:<br/>
<input id="submit" type="submit" value="提交"/>
<input id="reset" type="reset" value="取消"/>
<input id="submit2" type="submit" disabled="true" value="提交"/>
<input id="no" type="button" value="無動做"/><br/>
<!--button 元素-->
<button type="button"><b>提交</b></button><br/>
<button type="submit"><img src="imgs/1.jpg" title="BAIDU"/></button><br/>
<!--列表框和下拉列表-->
<select id="skills" name="skills">
<option value="java">java語言</option>
<option value="ruby">ruby語言</option>
</select><br/>
<!--容許多選的下拉列表-->
<select id="books" name="books" multiple="multiple" size="4">
<option value="java">java語言</option>
<option value="ruby">ruby語言</option>
<option value="html5">html5語言</option>
</select>
<!--容許多選的列表框-->
<select id="johnson" name="johnson" multiple="multiple" size="6">
<optgroup label="瘋狂Java體系圖書">
<option value="java" label="aaa">java語言</option>
<option value="ruby">ruby語言</option>
<option value="html5">html5語言</option>
</optgroup>
<optgroup label="其餘">
<option value="struts" >struts權威指南</option>
<option value="ajax">ajax</option>
</optgroup>
</select><br/>
<textarea cols="20" rows="2"></textarea><br/>
<textarea cols="20" rows="8" readonly="readonly"></textarea><br/>
</form>
<!--2、HTML5新增屬性和元素
1.html5爲表單控件新增的屬性
form屬性：可讓表單控件在<form>元素以外，提升了靈活性
formaction屬性：處理表單內包含了多個按鈕，不一樣按鈕提交到不一樣action的場景
formxxx屬性：與formaction類似，用於指定formenctype、formmethod、formtarget等屬性
autofocus屬性：爲某個表單添加該屬性後，瀏覽器打開頁面時會自動得到焦點（整個頁面最多隻能定義一個）
placeholder屬性：單行文本框、多行文本域顯示的提示信息
list屬性：用於實現下拉框和文本框結合實現自動補全功能，須要與datalist標籤配合使用
autocomplete屬性：主要用於和list組合，當開發者不但願某些用戶看到下拉菜單，可經過設置autocomplete來實現，on表示顯示下拉菜單，off表示不顯示（目前只有Opera支持）
-->
<form id="addForm" action="add">
物品名:<input type="text" name="name" list="books" autocomplete="on"/><br/>
用戶名:<input type="text" name="username" id="username" placeholder="input username" autofocus="true"/><br/>
密碼:<input id="password" name="password" type="password" placeholder="input password"/><br/>
<input type="submit" value="register" formaction="register" formmethod="get"/>
<input type="submit" value="login" formaction="login" formmethod="post"/><br/>
</form>
物品描述:<textarea cols="40" rows="3"name="desc" form="addForm"></textarea>
<datalist id="books">
<option value="java">Java</option>
<option value="html5">html5</option>
<option value="android">android</option>
</datalist>
<!--功能豐富的input標籤-->
<form action="do">
color:<input name="color" type="color"/><br/>
date:<input name="date" type="date"/><br/>
time:<input name="time" type="time"/><br/>
datetime:<input name="datetime" type="datetime"/>
datetime-local:<input name="datetime-local" type="datetime-local"/><br/>
month:<input name="month" type="month"/><br/>
week:<input name="week" type="week"/><br/>
email:<input name="email" type="email"/><br/>
tel:<input name="tel" type="tel"/><br/>
url:<input name="url" type="url"/><br/>
number:<input name="nmber" type="number"/><br/>
range:<input name="range" type="range"/><br/>
search:<input name="search" type="search"/><br/>
<!--<output>必屬於某個表單，要麼定義在某個表單內部，要麼指定form屬性--> <output name="a" for="color" onforminput="innerHTML=color.value"></output> </form> </body> </html>
- 1. Html5元素及基本語法
- 2. HTML5文本元素解析
- 3. HTML5 figure元素
- 4. HTML5 - 4.元素
- 5. HTML5: HTML5 語義元素
- 6. HTML5之video元素
- 7. Html5元素佈局
- 8. HTML5語義元素
- 9. html5新增元素
- 10. HTML5結構元素
- 更多相關文章...
- • Lua 基本語法 - Lua 教程
- • C# 基本語法 - C#教程
- • Kotlin學習（二）基本類型
- • Kotlin學習（一）基本語法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Html5元素及基本語法
- 2. HTML5文本元素解析
- 3. HTML5 figure元素
- 4. HTML5 - 4.元素
- 5. HTML5: HTML5 語義元素
- 6. HTML5之video元素
- 7. Html5元素佈局
- 8. HTML5語義元素
- 9. html5新增元素
- 10. HTML5結構元素