html 速查表
http://www.w3cschool.cc/html/html-quicklist.html
所有標簽適用范圍
http://www.w3cschool.cc/tags/html-elementsdoctypes.html
參考手冊:
http://www.w3cschool.cc/tags/html-reference.html
所有的標簽語言都是說給瀏覽器、搜索引擎聽的;推薦使用小寫屬性;
<!DOCTYPE html> 在HTML5中也是描述了文檔類型。
<!DOCTYPE>聲明有助于瀏覽器中正確顯示網(wǎng)頁。html標題 ,
<h1>..<h6>
段落<p></p>
鏈接<a href="**"> **</a>
Pic<image src="" >有些標簽元素有空內(nèi)容,這樣的標簽在開始標簽中關(guān)閉;
<br>更可靠的寫法是<br/>
所有的元素盡量都必須被關(guān)閉;消除潛在的隱患;html 屬性
屬性一般都是名稱/值對成對出現(xiàn) name="value"出現(xiàn)在開始標簽;
<a href="baidu.com">this is a link </a>
value一般用雙引號,如果屬性值本身有雙引號,必須使用單引號;
name =' jone "hello " ckalr'注釋: ``
水平線<hr/>
標題 僅用來構(gòu)建標題,被搜索引擎編制索引;<h1>****</h1>
段落<p>**</p>
換行<br/>鏈接
<a target="_blank"> tesbaidu</a>
id 屬性用來創(chuàng)建一個html書簽標記;
<a id="tips">useful tips section</a>
<a href="#tips">go to usetip</a>head 頭部
- <title> 標題
- <base>默認鏈接地址
- <meta> 元數(shù)據(jù),描述給搜索引擎用的
- <style> 樣式引用地址
<style type="text/css"> h1 {color:yellow;}</style> - <script> 加載的腳本文件
- <link> 定義了一個文檔和外部資源之間的關(guān)系
- 如何使用css
- 外部使用 - 使用外部css文件
<head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> - 內(nèi)部樣式表 -html <title>中區(qū)域使用<style>元素包含css
<head> <style type="text/css"> body {background-color:yellow;} </style> </head> - 內(nèi)聯(lián)樣式 ,元素中使用style屬性
<p style ="color:bule;margin-left:20px;">hello style</p>
<style> 定義文本樣式
<link> 定義資源引用地址
- 圖像
<img src="hello" alt="替換文字(圖片加載失敗時)" width="10" height="10" border="0"/>
創(chuàng)建圖片鏈接
<a href="http://***"><img src=""/></a>
html 圖片熱區(qū) area
<img src="hha.gif" width="200" height="200" alt="" usermap="#planet">
<map name="planet">
<area shape="rect" coords="0,0,100,100" href="***1">
<area shape="rect" coords="x1,y1,x2,y2" href="***2">
<area shape="circle" coords="x1,y1,r" href="***2">
</map>
- table
<table border="1" cellpadding="10 cellspacing="10"> //padding橫向間距 cellspacing 垂直間距
<caption>Monthly savings</caption> // 表格的標題
<tr>
<th>Month</th> // 表格的頭部 table header
<th>Savings</th>
</tr>
<tr>
<td colspan ="2">January</td> // 表格橫跨2列
<td>$100</td>
</tr>
<tr> //table row
<td>February</td> // table body
<td rowspan="2">$50</td> // 表格橫跨2行
<td>This cell contains a list // 表格內(nèi)嵌套其他元素
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
</tr>
</table>
- 列表
//list-style-type:disc/circle/square
<ul style="list-style-type:disc">
<li>say hi</li>
<li>say heello</li>
<li> say ha</li>
</ul>
<ol start="50" type="A"> //type=''A/a/I/i"
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
- 區(qū)塊
<div></div>
沒有特殊含義,與css搭配,用來設(shè)置大的內(nèi)容塊的樣式;另外可用于文檔布局;
<span></span>內(nèi)聯(lián)元素,沒特殊含義;與css搭配,用來為文本設(shè)置樣式 - 布局
可用div布局或者table布局,不建議使用table來布局,不是布局標簽; - 表單
表單元素,允許用戶在表單中輸入內(nèi)容;
<form name="input" action="..php" method="get">
<fieldset>
<legend>Personal information:</legend>
name :<input type="text" name="firstName"><br/>
pass: <input type="password" name="pwd"><br/>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
<input type ="checkbox" name="vehicle" value="bike">i hava a bike<br>
<input type= "checkbox" name="vehicle" value="car" checked="checked"> i have a car<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="button" value="Hello world!">
<textarea rows="10" cols="30">
我是一個文本框。
</textarea>
<input type="submit" value="submit">
</fieldset>
</form>
- 框架
通過使用框架,你可以在同一個瀏覽器窗口中顯示不止一個頁面。
<iframe src="url" width =200 height=200 frameborder="0" name="ifamre_a"></iframe>
<p><a target="ifamre_a">baidu</a></p>
- 腳本
<script>document.write("Hello World!")</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript> //腳本不能運行時的顯示
URL 只能使用 ASCII 字符集.
xhtml
xml+html = xhtml
是一種更嚴格的html
文檔結(jié)構(gòu)
XHTML DOCTYPE 是強制性的
<html> 中的 XML namespace 屬性是強制性的
<html>、<head>、<title> 以及 <body> 也是強制性的元素語法
XHTML 元素必須正確嵌套
XHTML 元素必須始終關(guān)閉
XHTML 元素必須小寫
XHTML 文檔必須有一個根元素屬性語法
XHTML 屬性必須使用小寫
XHTML 屬性值必須用引號包圍
XHTML 屬性不允許簡寫
錯誤示例:
<input checked>
<input readonly>
<input disabled>
<option selected>
正確示例:
<input checked="checked">
<input readonly="readonly">
<input disabled="disabled">