豆子最近在学前端的基础知识，主要包括Html, CSS, Javascript, Dom, JQuery等内容。豆子没打算做专业的前端开发，不过学会一些常见的界面设计，对于学习Python的web框架还是很有必要的。这篇博客通过各种简单例子的迅速过一遍HTML的常见使用。


例1. 首先看看<head>标签的内容


<head><!--自闭合标签--><metacharset="UTF-8"/><!--<metahttp-equiv="Refresh"Content="2"/>--><!--<metahttp-equiv="Refresh"Content="2;Url=http://www.autohome.com.cn"/>--><!--标签属性name="alex"--><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><title>老男人</title><linkrel="shortcuticon"href="favicon.ico"></head>


<meta>里面指定字符集，IE兼容模式

<tite>显示标题

<link>显示标题的图标



效果如下：


例2：<body>里面一些常见的标签


<!--内联和块级--><div>12</div><span>12</span>

标签分为内联标签和块级标签，比如<div>就是块级，可以看见颜色是应用到整行，<span>就是内联标签，颜色只是应用到文字上面。



<!--符号-->&lt;a&nbsp;b&gt;

&lt 小于符合； &gt大于符号； &nbsp 空格


<!--段落和换行--><p>asdfuo<br/>iuasdkfjlkjasdfkj<br/>alskdjfas;dlfj</p><p>asdfuoiuasdkfjlkjasdfkjalskdjfas;dlfj</p><p>asdfuoiuasdkfjlkjasdfkjalskdjfas;dlfj</p>

<p>是段落标签，他和直接敲文字的区别是他可以自动换行，如果要手动换行，可以通过<br>实现


<!--标题--><h2>a</h2><h3>a</h3><h4>a</h4><h5>a</h5><h6>a</h6><h7>a</h7><h7>a</h7>

<h2>，<h3>等等是设置字体的大小，数字越小，字体越大；当然也可以通过style来指定大小


<!--a标签--><ahref="http://www.baidu.com">跳转1</a><ahref="http://www.baidu.com"target="_blank">跳转2</a><!--<divhref="http://www.baidu.com">阿萨德发送到</div>--><!--寻找页面中id=i1的标签，讲其标签放置在页面顶部--><ahref="#i1">第一章</a><ahref="#i2">第二章</a><ahref="#i3">第三章</a><!--id没有一个标签的id属性值不允许重复；id属性可以不写--><divid="i1">第一章内容</div><divid="i2">第二章内容</div><divid="i3">第三章内容</div>

<a> 标签是跳转，可以通过href指定跳转的对象，这个对象可以是一个网页的Url，也可以是其他标签的

如果不指定target=_blank, 会从当前tab跳转，否则新开一个tab页面跳转



例3 嵌套div

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title></head><body><div>asdfasdf<div><div><a>asdf</a></div></div><div>asdfas\</div>asdf</div></body></html>


例4 表格和各种输入框

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title></head><body><form><inputtype="text"/></form><formaction="method='post'><div><p>用户名：<inputtype="text"/></p><p>密码：<inputtype="password"/></p><p>邮箱：<inputtype="email"/></p><p>性别(单选框)：<br/>男<inputtype="radio"name="ee"/><br/>女<inputtype="radio"name="ee"/></p><p>爱好（复选框）：<br/>男1<inputtype="checkbox"/><br/>男2<inputtype="checkbox"/><br/>男3<inputtype="checkbox"/><br/>男4<inputtype="checkbox"/><br/>男5<inputtype="checkbox"/></p><p>城市：<select><option>上海</option><option>北京</option><option>广州</option></select><selectmultiplesize="10"><option>上海</option><option>北京</option><option>广州</option></select><select><optgrouplabel="AAA"><option>上海</option><option>北京</option></optgroup><optgrouplabel="BBB"><option>广州</option></optgroup></select></p><p>文件：<inputtype="file"/></p><p>备注：<textarea></textarea></p><inputtype="submit"value="submit"/><inputtype="button"value="button"/><inputtype="reset"value="reset"/></div></form></body></html>

文本框很直接，就是输入值

密码框，邮箱自动隐藏密码和判断邮件格式；

单选框，复选框都是通过指定name联系在一起

下拉列表框可以指定默认的选项，调整大小，甚至通过<optgroup>分组

所有的这些数据可以通过form的submit来提交给后台, form的属性比较重要的是action，这个是提交给哪个url，method，这个分为get和post，get会在url后面显示提交的内容，而post会隐藏这些内容

例5：列表

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title></head><body><ul><li>1asdfasdf1</li><li>2asdfasdf</li><li>2asdfasdf</li></ul><ol><li>1asdfasdf1</li><li>2asdfasdf</li><li>2asdfasdf</li></ol><dl><dt>DT</dt><dd>dd</dd><dd>dd</dd><dd>dd</dd><dt>DT</dt><dd>dd</dd></dl></body></html>

<ul>和<li>是星点隔开；

<ol>和<li>是数字隔开；

<dl>和<dt>是缩进格式隔开




列6 表格

<body><tableborder="1";background-color="red"><tr><thcolspan="3">标题一</th><th>标题二</th></tr><tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容三</td></tr><tr><td>内容一</td><tdrowspan="2">内容二</td><td>内容三</td><td>内容三</td></tr><tr><td>内容一</td><td>内容三</td><td>内容三</td></tr><tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容三</td></tr></table><hr/><tableborder="1"><thead><tr><th>第一列</th><th>第二列</th><th>第三列</th><th>第四列</th></tr></thead><tbody><tr><td>第一列</td><td>第二列</td><td>第三列</td><td>第四列</td></tr><tr><td>第一列</td><td>第二列</td><td>第三列</td><td>第四列</td></tr></tbody></table></body>

注意事项：

<table>里面分<thead>和<tbody>,前者是标题，后者是内容；<tr>是一行；<td>是列，<th>是自动加粗的标题

横跨可以指定 colspan的属性，竖跨可以指定rowspan的属性



例7 iframe

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title></head><body><h2>sina</h2><iframesrc="http://www.sina.com.cn"></iframe></body></html>