最近在学习前端的一些东西，跟着一个很不错的网课，上周跟完了HTML的基础部分，现在总结一下学到的一些Tag。
HTML最初是用来在互联网内传递文章的，用来markup文章的不同部分，比如大小标题，段落，还可以把不同的部分归位不同的部分方便管理。
有关HTML的内容和参考在MDN https://developer.mozilla.org/en-US/docs/Web/HTML 都很容易找到，遇到不熟悉的可以随时google，非常方便。
但是感觉自己总结一下自己学过的东西还是会记得牢一点，所以就写在这里了。
新建一个HTML文件后，sublime可以自动生成一个HTML框架，大概可以分为两部分：<head> & <body>。 <head>主要用来添加正文以外的内容，比如文章的titile，与之相关的CSS，metadata等等，总结一下就是用来描述正文的dependency，类似Java中开头import一系列的库。 <body> 就是正文部分了，如果是一篇文章的话，这里就包括了文章的标题，段落等各个部分。 如果把一个网页比做一个句子，那html就是句子的主干，也就是名词，CSS就是句子的形容词，用来形容HTML文件， Javascript就是句子的动词，执行相关的动作。
常用的Tag：
<h1>~<h6> 这六个tags 就是一系列大小不同的标题（heading），一般来讲，一个网页中只有一个最大的标题<h1>,其他的标题可以重复多次使用。这些tag都是Closing Tags， 比如：<h1>XXXXX</h1>
<p> </p> 是paragrph的tag，用来标记文章的正文中的一个段落。
<button></button> 用来表示一个可以点击的按钮
<ul></ul> 是unordered-list的意思，这个list里的每一项要用<li></li>表示。
<ol></ol> 代表ordered-list,用法与<ul>相同。
<img src=""> 用来引用一张图片，这是一个self-closing tag，不需要另一个tag来结尾。
<link href=""> 放在<head>中，用来引用对应的CSS文件，或者其他需要引用的font，我的理解就是Java中的impot 或者C++中的include
<a href="url"> Link Text </a> 这个tag用来表示一个链接，点击这个链接可以跳转到一个新的网页。
Table
html可以表示一张表格，一个table主要用到的tag有：
<table></table> 包括了整张表格的内容，下面所有的tag都在<table>内：
<thead></thead> 表示表头，描述了整张表所包括的项目如：Name,Age,Breed.
例如：
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Breed</th>
</tr>
</thead>
其中<tr>代表一行（table row）, 一行以内可以包含多个小标题<th>(table heading)。
<tbody></tbody> 表示表体，与<thead></thead>属于一个层级的元素，<tbody>內也包括多个<tr>（表示多行），而每个<tr>内的元素用<td>标记(table data)
e.g.:
<tbody>
<tr>
<td>Rusty</td>
<td>2</td>
<td>Mutt</td>
</tr>
<tr>
<td>Wyatt</td>
<td>13</td>
<td>Golden</td>
</tr>
</tbody>
Forms
HTML的From主要用于获取用户的输入信息，一张form中主要包括以下几个元素：
<form></form>:类似<table>，包括了整个<form>的所有内容。值得一提的是<form>中包括了一些属性：action:描述要将data发送到哪里，method：HTTP request的种类，如get,post. e.g：
<form action="/my-form-submitting-page" method="post"> </form>
<input></input>:input 最重要的属性就是 type, 有如下几种比较重要type："text" --- 输入为纯文本， "date" --- 输入为日期， "color" --- 输入选取不同的颜色，"file" --- 输入为需要上传的文件， "checkbox" ---输入为一个checkbox， "password" --- 输入为密码，"radio" --- radio button用于单选输入（如性别）。另一个常用的属性是required，表示这一项输入是必须的，不能忽略。placeholder="XX" 用来提醒用户需要输入的内容 如：
<input id="username" type="email" required placeholder="your email">
另外，input还可以附件很多限制条件用来规范输入的格式，如 pattern=".{5,10}"表示输入的字符在5～10个
<input id="password" type="password" pattern=".{5,10}" required title="5 to 10 characters"> title="5 to 10 characters" 表示当输入不满足当前输入的范围时，提醒用户："5 to 10 characters" 。
<label></label> 顾名思义，label标注了这个input所需要的输入内容。最简单的用法就是将对应的input放在label内：
<label>Click me <input type="text"></label>
另外一种相对复杂的方法就是使 <input> 的id对应 <label>的for属性：
<label for="email">Email:</label>
<input id="email" type="email" required>
<textarea> 表示可以输入大段文字的区域，常用的属性有cols & rows用来描述textarea的大小，如：
<textarea cols="40" rows="4" id="textarea"></textarea>
<select></select> 表示一个dropdown的输入框，比如常见的选择出生年月日选择框。<select>内部需要包括所有的备选项，用<option>标记。例如：
<select name="mood">
<option value="happy">:)</option>
<option value="neutral">:|</option>
<option value="sad">:(</option>
</select>
每个form总的元素都带有name 和 value属性，方便在回传数据时区分不同的信息，回传数据的格式：name = value。例如：
<form>
<label for="dogs">Dogs: </label>
<input name="petChoice" id="dogs" type="radio" value="DOGS">
<label for="cats">Cats:</label>
<input name="petChoice" id="cats" type="radio" value="CATS">
<p>What‘s your current mood?</p>
<select name="mood">
<option value="happy">:)</option>
<option value="neutral">:|</option>
<option value="sad">:(</option>
</select>
<input type="text">
<textarea rows="10" cols="10"></textarea>
<button>Go!</button>
</form>
先总结这么多，之后还会总结一下CSS的基本用法。
原文：http://www.cnblogs.com/walterlearning/p/6390401.html