认识html元素
前端现在越来越火，可以用去年热门的词语来形容——“风口上的猪”。希望这个系列的文集能够给“毫无任何基础，但是想转到前端的人”一点帮助。
认识一个html文档的基本结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Here is title</title>
</head>
<body>
Here is content.
</body>
</html>
HTML 文档是由** HTML 元素** 定义的，而HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
- 首先，HTML元素从闭合属性上可分为2类：
- 自闭和标签
自闭和标签在html元素中的比例不大，常用的就以下几个：
<img /> <br /> <input /> <hr />
从上面的标签可以看出，自闭合标签形如： <标签名 />（建议：/和前面的标签名之间空一格）
- 手动闭合标签
html元素中大多数标签都是需要我们手动闭合的。
手动闭合的意义就是——告诉浏览器，我这个标签里的内容起始位置和结束位置。
常用的标签：
<h1></h1>
<h2></h2>...
<p></p>
<div></div>
<a></a>
<button></button>
<span></span>
<label></label>
<textarea></textarea>
<table></table>
<thead></thead>
<tbody></tbody>
<tr></tr>
<th></th>
<td></td>
<ul></ul>
<li></li>
<dl></dl>
<dt></dt>
<dd></dd>
<form></form>
#####下面着重介绍一些以后天天都会用到标签
- img
<img src="" alt="" />
<img />标签具体两个常用的属性：
src (source) 属性是必需的:它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径；
alt 属性是非必需的：它指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容；
（备注：我们强烈推荐您在文档的每个图像中都使用这个属性。这样即使图像无法显示，用户还是可以看到关于丢失了什么东西的一些信息。）
- br
<br /> 可插入一个简单的换行符。
注释：请使用
来输入空行，而不是分割段落。
- input
<input /> 标签用于搜集用户信息。
根据不同的 type 属性值，输入字段拥有很多种形式:
输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
1.文本框
<input type="text" value="" placeholder="" />
<input type="text" value="这是value" placeholder="" />
<input type="text" value="" placeholder="这里是提示文字" />
value代表此文本框中显示的值,placeholder设置的值表示当value为空时，给用户的提示文字。
2.密码框
<input type="password" value="" />
<input type="password" value="123456" />
<input type="password" value="" placeholder="请输入密码" />
3.单选框
<input type="radio" value="male" checked name="gender" /> 男
<input type="radio" value="female" name="gender" /> 女
value:在界面上不会显示出来；
checked:如果存在，则表示默认选中；
name： 当多个<input type="radio" />的name属性值相同时，表示这多个单选框，同时只能有一个选中；
4.复选框
<input type="checkbox" value="footballl" checked name="hobbies" /> 足球
<input type="checkbox" value="basketball" name="hobbies" /> 篮球
多个复选框的name即使相同，也可以同时选中；
- textarea元素
<textarea rows="10" cols="30">
在这篇文章中，你可以对html元素有基本的了解。
</textarea>
<textarea> 标签定义多行的文本输入控件,上面介绍的<input type="text">是单行文本框。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
- a标签
<a href="http://www.coderyin.com/" target="" title="点击这里可以跳转到我的个人网站">我的个人网站</a>
href属性是a链接必须的属性，代表你需要跳转的网页链接；
target属性有两个常用值：
target="_blank"：表示在新的窗口打开页面；
target="_self"（默认值）：表示在当前窗口打开；
title属性：当用户鼠标悬浮到链接上时，会出现一段提示文字，提示文字的内容为你设置的属性值；
- select标签
<select>
<option value="">请选择学院名称</option>
<option value="1">风景园林学院</option>
<option value="2">家具设计学院</option>
<option value="3">林学院</option>
<option value="4">艺术设计学院</option>
<option value="5">信息科学与技术学院</option>
</select>
<select></select> 元素可创建单选或多选菜单；
select元素中的<option></option>标签用于定义列表中的可用选项。
- 表格元素
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>abcdefg</td>
<td>男</td>
</tr>
<tr>
<td>殷晓飞</td>
<td>男</td>
</tr>
</tbody>
</table>
表格一般由多个子元素构成：
<table></table>：最外层容器（可以通过设置border属性来控制表格边框）；
<thead></thead>：表格头——用于包裹表格的顶部信息;
<tbody></tbody>: 表格主题内容;
<tr></tr>表示一行记录；
<td></td>表示一列，但嵌套在tbody标签的tr标签内；
<th></th>也表示一列，但嵌套在thead标签的tr标签内；
注意：
一个表格只有一个table标签；
一个table标签内只有一个thead和一个tbody;
一个thead内只有一个tr,thead中的tr中可以有多个th（可以有多列）;
一个tbody中可以有多个tr（可以有多行记录）,每个tr中可以有多个td（可以有多列）；
- button元素
<button type="button">提交按钮</button>
- label元素
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。
如果您在 label 元素内点击文本，就会触发此控件。
就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
- ul标签
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul></ul> 标签定义无序列表。
- ol标签
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol> </ol>标签定义有序列表。
ol上有以下几个常用属性：
start规定有序列表的起始值，默认为1。
type规定在列表中使用的标记类型。
- dl标签
<dl>
<dt>各个学院</dt>
<dd>风景园林学院</dd>
<dd>家具设计学院</dd>
<dd>林学院</dd>
<dd>艺术设计学院</dd>
<dd>信息科学与技术学院</dd>
</dl>
<dl> 标签定义了定义列表（definition list）。
<dl> 标签用于结合dt（定义列表中的项目）和 dd (描述列表中的项目）。
- p标签
<p>文章段落内容</p>
<p> 标签具有确切的语义，用于定义段落。
- h1-h6标签
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。
- div标签
<div>这里面可以只放文本，也可以放其他任何标签，当然可以放自己</div>
<div class="news">
<h2>News headline 1</h2>
<p>some text. some text. some text... </p>
<div>
<a href="#">这是链接</a>
</div>
</div>
<div> 可定义文档中的分区或节（division/section），用于网站布局，块状分隔。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
- span标签
<p><span>殷晓飞</span> <span>web前端</span> 尽己力，听天命。</p>
<span></span>标签可以放在任何元素中，行内元素，多个span可以在同一行。
- form标签
<form> 标签用于为用户输入创建 HTML 表单，在页面中用户看不到form元素的显示效果。
表单能够包含 input 、label、button、select等等元素。
#####快掌握这些基本的html元素，开始自己的前端学习之旅吧~
