一些說明
寫在前面：HTML和CSS，當你了解所有規(guī)則后，你應(yīng)該多寫頁面并記錄你出現(xiàn)的問題，這才是學(xué)習HTML和CSS的最佳方法
這是我學(xué)習一段時間之后，再次回顧HTML，希望大家也對HTML有不一樣的認識
我把HTML標簽分成兩大類，重要的和不重要的，希望大家都能從眾多標簽中解脫出來！！
本文的宗旨，簡明扼要！最快入門 HTML (把我給出的代碼不斷地敲，并且適當加點個性化的東西，HTML標記語言你就入門了)
溫故而知新
HTML，超文本標記語言（HyperText Markup Language）只是標記，沒有任何邏輯，學(xué)習起來會很快的
結(jié)構(gòu)如下：
這里寫了可以出現(xiàn)在head內(nèi)的所有標簽
<!DOCTYPE html> //HTML5的文檔聲明，現(xiàn)在都用這種方式了
<html> //文檔的根
<head> //文檔的頭部信息
<meta charset="utf-8"> //表示該文檔是以UTF-8編碼的
<title>菜鳥教程(runoob.com)</title> //頁面標題
//為搜索引擎定義關(guān)鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
//為網(wǎng)頁定義描述內(nèi)容:
<meta name="description" content="Free Web tutorials on HTML and CSS">
//定義網(wǎng)頁作者:
<meta name="author" content="Hege Refsnes">
//每30秒中刷新當前頁面:
<meta http-equiv="refresh" content="30">
<style>a{CSS樣式}</style>
<link rel="stylesheet" type="text/css" href="xxx.css">
<script>腳本</script>
<script type="text/javascript" src="xxxx.js"></script>
<noscript></noscript>
//該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:
<base target="_blank">
</head>
<body> //網(wǎng)頁主題部分
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>
關(guān)于文檔聲明：(了解即可，沒什么作用)
HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
tips:注釋長啥樣？
直擊主題：HTML標簽
來，我們來看看HTML的標簽都有哪些
h1 ~ h6 , p , a , img , button , caption , dd , dl ,dt, ul ,li , fieldset , from , iframe , input ,label , select , table td ,tr , tbody , tfoot , thead ，hr , html , body head title meta style script ,input , label , legend , div , span
基本上你只要看到這個標簽，懂這個標簽一般是怎么用的就OK了！
重點掌握的標簽有（一些特別基礎(chǔ)性的標簽不在此之內(nèi)）
<strong>超鏈接標簽a：只要是a標簽?zāi)馨?，那個被包含的都是超鏈接</strong>
a的常用方法如下：
1、<a target="_blank">
2、電子郵件 <a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
3、取消鏈接 <a href="javascript:void(0)">
4、錨點 <a href="#tips">可以鏈接到本頁面id為tips的元素，用于頁面內(nèi)跳轉(zhuǎn)
<a href="javascript:void(0)">hello</a>
<p><strong>圖像標簽img:</strong></p>
img[src,title,alt,width,height]
alt : 當圖片無法加載時替代圖片，一般都要寫的
1、圖片一個特殊用處(結(jié)合map,基本不用)
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<p><strong>表格</strong></p>
一般我們寫表格的時候，table>tr>td(th)，采用這三層結(jié)構(gòu)
一個完整的表格結(jié)構(gòu)是這樣的
<table>
<caption></caption>
<thead>
<tr>
<th></th>
.....
</tr>
</thead>
<tbody>
<tr>
<td></td>
......
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
......
</tr>
</tfoot>
</table>
屬性注意
<table border=0> //設(shè)置整個table的邊框，外框和內(nèi)框
<table cellpadding="10"> //相當于設(shè)置這個表格每個單元格的 padding 為 10px
<table cellspacing="10"> //相當于設(shè)置這個表格每個單元格的 margin 為 10px
<th colspan="2"> // 這個單元格跨了兩列 tr也可以用
<th rowspan="2"> //這個單元格跨了兩行 tr也可以用
列表
有序列表
<ol>
<li></li>
<li></li>
...
</ol>
無序列表
<ul>
<li></li>
<li></li>
...
</ul>
無序列表和有序列表，可以更改前面的標記類型，但是不常用，采用圖片或者iconfont居多，可以采用list-style-image：url("xxx.png) ；來設(shè)置，這個在CSS學(xué)習筆記中會詳細說明
列表支持嵌套
自定義列表
dl 注意一個dl里面最好只有一個dt，行業(yè)潛規(guī)則 原意是解釋名詞，
dt 一般一條信息，只解釋一個名詞,也就是一個dt
dd
dd
dd
dl
div -- 最具有代表性的塊級標簽
通常用于布局，很常見的div+css布局，為什么采用div呢？因為div是一個容器元素，div內(nèi)部可以包含很多標簽，
div內(nèi)部可以有div的
div是塊級標簽，注意，任何塊級標簽寫在頁面上，寬度都是占據(jù)父容器的百分之百，除非你設(shè)置塊級元素的寬度，具體的怎么排版，請看這篇：HTML+CSS復(fù)習之CSS基礎(chǔ)篇
span -- 最具有代表性的行級標簽
span是一個行級標簽，所謂行級標簽的意思是，內(nèi)容有多大，我在頁面中占據(jù)的位置就有多大（內(nèi)容+padding）
input --表單
表單的屬性特別多，可以去W3C看一遍，這里就不詳細講了，畢竟是寫個入門啦。表單主要用作數(shù)據(jù)傳遞，所以對表單的理解，就是要搞明白，表單的那些屬性是怎么回事
一個表單完整書寫
<form action="url" method="post/get" >
//文本框
<input name="username" type="text" />
//密碼框
<input name="password" type="password" />
//單選框（注意name要相同,是同一類行的選擇，以便后臺拿到數(shù)據(jù)）
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
//多選框（注意name要相同,是同一類行的選擇，以便后臺拿到數(shù)據(jù)）
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
//下拉框
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
//這種是為下拉框分組
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
//文本域
<textarea name="textarea" rows="10" cols="30">
我是一個文本框。
</textarea>
//提交按鈕，下面的提交按鈕，默認提交到action地址
<input type="submit" value="Submit">
<button>submit</button>
//這是另外一種形式的表單，注意其中的區(qū)別即可，
//fieldset標簽也只會在這種場合使用了
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
//datalist標簽，input的list屬性綁定到datalist的id，就可以完成這項工作了
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
//注意label標簽 , 通過綁定input的id來實現(xiàn)在label出點擊獲取焦點，有兩種寫法
<label for="name">用戶名</label>
<input id="naem" type="text" size="30">
<label>Hello<input type="text" size="30"></label>
</form>
實例如下：
<label for="name">用戶名??</label><input id="name" type="text" size="30">????<label>Hello??<input type="text" size="30"></label>
<strong>注意:</strong> Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 標簽。
output標簽，顧名思義，輸出標簽，那么從何處輸入，定義規(guī)則是怎么樣的呢？
form定義規(guī)則 ，那么你可不可以寫一個升級版的呢？
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 //數(shù)據(jù)源
+<input type="number" id="b" value="50"> //數(shù)據(jù)源
=<output name="x" for="a b"></output> //計算出結(jié)果
</form>
iframe 一般重要的標簽
通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。
<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0"></iframe>
iframe顯示的地址頁面內(nèi)容，制定高度和寬度，frameborder移除邊框
用iframe來顯示頁面內(nèi)部鏈接
<iframe src="www.baidu.com" name="iframe_a"></iframe>
<p><a target="iframe_a">Google</a></p>
全局屬性
這些屬性，基本上不怎么使用，了解即可。
accesskey 規(guī)定激活元素的快捷鍵。
一下元素支持accesskey屬性
<a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>。
<a accesskey="h">HTML</a>
<a accesskey="c">CSS</a>
例子：
<a accesskey="h">HTML</a> 、 <a accesskey="c">CSS</a>
class 規(guī)定元素的一個或多個類名（引用樣式表中的類）。
contenteditable 規(guī)定元素內(nèi)容是否可編輯。
contextmenu 規(guī)定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。
data-* 用于存儲頁面或應(yīng)用程序的私有定制數(shù)據(jù)。
dir 規(guī)定元素中內(nèi)容的文本方向。
draggable 規(guī)定元素是否可拖動。
dropzone 規(guī)定在拖動被拖動數(shù)據(jù)時是否進行復(fù)制、移動或鏈接。
hidden 規(guī)定元素仍未或不再相關(guān)。
id 規(guī)定元素的唯一 id。
lang 規(guī)定元素內(nèi)容的語言。
spellcheck 規(guī)定是否對元素進行拼寫和語法檢查。
style 規(guī)定元素的行內(nèi) CSS 樣式。
tabindex 規(guī)定元素的 tab 鍵次序。
title 規(guī)定有關(guān)元素的額外信息。
translate 規(guī)定是否應(yīng)該翻譯元素內(nèi)容。
空元素標簽
br , hr
HTML5標簽
article, aside , audio , bdi , canvas , datalist , command , details ,dialog , embed ,figcaption ,figure ,footer ,header , keygen , mark , meter , nav , output , process , rp ,rt , ruby , section , source , summary , time , track , video , wbr
這些都是html5的標簽，一眼便能看出，更加語義化了。
不重要的標簽
b（定義文本粗體） ,i（定義文本斜體） , strong , em , big ,small , sub , sup , ins , del , pre , code , kbd , tt , samp , var , address(定義文檔作者或擁有者的聯(lián)系信息) , abbr(定義縮寫) , acronym（定義只取首字母的縮寫，不支持HTML5） , bdo, blockquote , q, cite , dfn , colgroup , col , center, font , dir(與ul差不多，兼容性不如ul) , frame/frameset(這兩個標簽已經(jīng)沒人用了，主要是用了這個標簽，交互就做不了)
<code>計算機輸出</code>
<br />
<kbd>鍵盤輸入</kbd>
<br />
<tt>打字機文本</tt>
<br />
<samp>計算機代碼樣本</samp>
<br />
<var>計算機變量</var>
<br />
<b>注釋：</b>這些標簽常用于顯示計算機/編程代碼。
<acronym title="World Wide Web">WWW</acronym>
<bdo dir="rtl">該段落文字從右到左顯示。</bdo>
標簽嵌套規(guī)則
a標簽不能嵌套a標簽，p標簽不能嵌套塊級標簽
