首頁 > 開發者 > JavaScript
Html5的一些基礎知識，Html5基礎知識
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>頁面標題</title>
<meta name="keywords" content="關鍵字" />
<meta name="description" content="頁面描述" />
<!--
<meta http-equiv="refresh" content="3;URL=http://www.baidu.com/" />
-->
<meta http-equiv="pragma" content="no-cache" />
</head>
<body>
<hr />
<hr />是一條直線
<h1>小標題</h1>
<h2>小標題</h2>
<!--h1至h6是小標題，標題會越來越小-->
<p><p>
</p>指的是段落
</p>
<br />指的是換行，放在一句話的後面,重複用可以多空幾行<br />
&nbsp; 指的是空格。圓角狀態下的空格也可以在網頁中表現出來。<br />
Tab指縮排<br />
title放上去的時候會顯示
<dl>
<dt>蘋果</dt>
<dd>蘋果是一種水果</dd>
<dt>香蕉</dt>
<dd>香蕉也是一種水果</dd>
</dl>
<dl/> </dl/> 是指定義<br />
<table border="1" cellpadding="10" cellspacing="10">
<tr><th>姓名</th><th>性別</th><th>學科</th></tr>
<tr><td colspan="2">李培能</td><td>男</td><td>語文</td></tr>
<tr><td rowspan="2">胡習平</td><td>男</td><td>語文</td></tr>
<tr><td>王小康</td><td>男</td><td>語文</td></tr>
<tr><td>戴曉</td><td>男</td><td>語文</td></tr>
</table>
<p>表格由table標籤建立，tr標籤建立行，td(colspan可以橫跨幾列,
rowspan可以橫跨幾行)或th(使第一行粗一點)建立列;
border標籤表示表格邊框的寬度,cellpadding標籤表示字和框線的距離,
cellspacing標籤表示每個儲存格的間距</p>
<h1>會員註冊</h1>
<form action="http://www.baidu.com" target="_blank" name="form1">
姓名:<input type="text" value="李培能" disabled="disabled" /><br />
密碼:<input type="password" /><br />
頭像:<input type="file" /><br />
<input type="hidden" /><br />
<input type="button" value="點我" /><br />
性別:<input type="radio" id="boy1" name="sex1" checked="checked" />
<label for="boy1">男</label>
<input type="radio" id="girl1" name="sex1" />
<label for="girl1">女</label><br />
愛好:<input type="checkbox" checked="checked" />讀書
<input type="checkbox" />上網
<input type="checkbox" />旅遊<br />
自我介紹：<textarea cols="20" rows="3">預設填寫</textarea><br />
<select name="city">
<optgroup label="中國">
<option value="武漢">武漢</option>
<option value="天門">天門</option>
<option value="深圳">深圳</option>
</optgroup>
</select>
<input type="submit" value="確認提交" />
<input type="reset" /><br />
</form>
<p>form表示表單；input標籤定義表單的輸入介面，通過type屬性來展示不同
的輸入介面，通過value來改變預設值，file可以用來上傳頭像,hidden表示隱
藏,button表示普通按鈕，radio表示單選(但是要加name來關聯)，checkbox用
來表示多選（愛好）,submit表示提交，rest表示重設;
action表示表單要提交到哪裡,method表示提交方式（post和get）;
checked=“checked”表示單選或複選的預設選擇,disabled="disabled"表示預設
選擇無法改變，readonly=“readonly”表示唯讀，size表示框的長度,textarea
是雙標籤，表示多行輸入(cols表示長度,rows表示行數)；
label用來提升使用者體驗，使勾選更容易(需要id和for配合使用)；
select用來建立下拉欄{用option【用disabled(不能選)，selected="selected"
（預設）,value】來配合，還有disabled，name，multiple="multiple"（展開）};
optgroup用來表示組合（用label來配合），給選項進行分組
</p>
<img src="從前有座靈劍山/靈劍山扉頁08.jpg" usemap="#img1" />
<map id="img1" name="img1">
<area shape="rect" coords="440,161,570,300" href="http://ac.qq.com/Comic/ComicInfo/id/524356" target="_blank" title="從前有座靈劍山" alt="從前有座靈劍山" />
</map>
<br />
<!-- rect為矩形 circle為圓形(其座標變現為440,161,30（半徑）) 用來表示圖形的一部分的超連結，座標是相對於
圖片的左上方而言，且都為正數，通過框來得出座標。alt是解釋。-->
相對路徑，指的就是圖片的名字
./等於目前的目錄 ../等於上一級目錄 檔案夾名稱/等於目前的目錄內的檔案夾
<a href="http://tieba.baidu.com/i/164490219?fr=home" title="我的貼吧" target="_blank"> <img src="174330602201403241309561585826451753_014.jpg" width="50%" /> </a>
<!-- 這是用來表示圖片超連結 -->
<a href="http://tieba.baidu.com/i/164490219?fr=home" title="我的貼吧" target="_blank"> 百度貼吧 </a>
<a href="http://tieba.baidu.com/i/164490219?fr=home" title="我的貼吧" target="_blank"><input type="button" value="點我" /></a>
<div>換行</div>
<!-- div快級元素，可以用來存放標籤 -->
<span>不換行</span>
<p>我是一<span>句話</span></p>
<!-- span內嵌元素，以便通過css來美化它們 -->
<ul>
<li>
網友A：我喜歡小說。
<ul>
<li>
網友B：我喜歡漫畫。
<ul>
<li>
網友A：小說更好看。
</li>
</ul>
</li>
</ul>
</li>
<li>列表</li>
</ul>
<ol>
<li>列表</li>
<li>列表</li>
</ol>
<marquee direction="down">向下捲動</marquee>
<!-- 我是被注釋的內容，不會顯示 -->
<div>ANSI格式對應的charset=“gb2312”</div>
<h1>標籤寫法以及嵌套的探討</h1>
1、不容許寫結束標籤的元素有（單標籤）：area,bass,br,col,command,embed,hr,img,
input,keygen,link,meta,paran,source,track,wbr.<br />
可以省略結束標籤的元素有：li,dt,dd,p,rt,rp,optgroup,option,colgroup,
thead,tbody,tfoot,tr,td,th.<br />
可以省略全部標籤的元素有：html,head,body,colgroup,tbody.<br />
2、具有boolean值(是/否)的屬性：disabled，readonly，checked.
這些元素寫的話就是true，不寫的話就是false<br />
屬性值的引號可以省略，但屬性值不可以包括Null 字元串，<，>,=,+<br />
3、區塊層級元素可以嵌套內嵌元素，比如：<div><span>；<br />
但內嵌元素不可以嵌套區塊層級元素，span不可以在div的前面；<br />
內嵌元素可以嵌套內嵌元素，比如：<a href="#"><span></span></a>；<br />
區塊層級元素不能放在p標籤內，比如：<p><ul><li></li></ul></p>是錯的，
<p><div></div></p>也是錯的；<br />
li內可以包含div標籤和ul、ol標籤；<br />
區塊層級元素和內嵌元素是可以相互轉化的。
<div><p></p></div>是對的。
<h1>其他標籤</h1>
head中合法的標籤有：bass,link,meta,title,style,script.
1、為html頁面添加描述資訊用於搜尋引擎抓取
使用name屬性，配合content來實現！（放在head中，title的下面）
<meta name="keywords" content="關鍵字" />
<meta name="description" content="頁面描述" />
2、引入css檔案
css代碼是寫在一個單獨的檔案中的
<link rel="stylesheet" href="檔案位置" type="text/css" />
3、為html文檔加入使用的語言，在國際化網站中使用
<html lang="zh-CN">
</html>
英文使用en
4、用html來實現網頁的跳轉
<meta http-equiv="refresh" content="等待秒數;URL=跳轉 URL地址" />
5、告訴瀏覽器不要載入頁面的緩衝（即擷取網站的最新內容）
<meta http-equiv="pragma" content="no-cache" />
6、iframe標籤，架構(把一個網頁以小框框的形式插入到另一個網頁)
建立包含另一個文檔的內聯架構（即行內架構）【是在body內】。
屬性：
frameborder 值：1,0 作用：規定是否顯示架構周圍的邊框
width
scrolling 值:yes,no,auto（自動） 作用：規定是否在iframe中顯示捲軸
src 規定在iframe中顯示文檔的URL,可以是本地的html檔案，也可以是遠端html檔案
<iframe src="http://www.baidu.com/" width="50%" height="600" frameborder="0">
</iframe>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
