最简单的HTML入门

HTML

1.标题

		<h1 >大标题</h1>
		
		<h2>小一点的标题</h2>
		
		<h3>在小一点的标题</h3>
		
		<h4>更小一点的标题</h4>
		
		<h5>小标题</h5>
		
		<h6>小小标题</h6>

2.斜体

		<i>这是斜体</i>
		
		<!--换行-->
		<br/>
		
		<em>这是斜体</em>

3.粗体

		<b>这里是粗体</b>
		
		<!--换行-->
		<br/>
		
		<strong>这里是粗体</strong>

4.预格式

预格式文本的内容会按照你的输入格式进行显示。

利用其它标签与预格式标签进行对比

		<pre>
			
			我
			就
			是
			预
			格
			式
			
		</pre>
		
		<h1>
			
			
			我
			是
			假
			预
			格
			式
			
			
		</h1>

5.删除效果

		<del>这里是删除效果</del>
		
		<br/>
		
		<s>这里是删除效果，但是有的浏览器不支持</s>

6.下划线

		<ins>下划线</ins>
		
		<br/>
		
		<u>下划线，不建议使用</u>

7.图像

<img src="http://how2j.cn/example.gif" />

img标签不能居中，需要放在div标签中,靠左（left）靠右（right）同理

		<div align="center">
			
			<img src="http://how2j.cn/example.gif" />
			
		</div>

alt属性：当图片存在时不会出现，当图片不存在时就会出现

<img src="http://how2j.cn/example1.gif" alt="这是一个图片" />

8.超链接

<a href="http://csdn.net">csdn</a>

图片作为超链接

<a href="http://csdn.net">
    <img src="http://how2j.cn/example.gif"/>
</a>

9.表格

tr是行 td是列 border是边框

<table border="1px" width="200px">
    <tr>
        <td>1.1</td>
        <td>1.2</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
    </tr>
</table>

给列设置绝对宽度

<td width="50px">1.1</td>

同理，给列设置相对宽度

<td width="70%">1.1</td>

单元格垂直对齐,valign属性有top、bottom、middle

	<table border="1px" width="200px">
		<tr>
			<td valign="top">1.1</td>
			<td>1.2.1 <br/>
				1.2.2 <br/>
				1.2.3 <br/>
			</td>
		</tr>
		<tr>
			<td>2.1</td>
			<td>2.2</td>
		</tr>
	</table>

横跨两列，水平合并

<table border="1px" width="200px">
    <tr>
        <td>1.1</td>
        <td>1.2.1 
        </td>
    </tr>
    <tr>
        <td colspan="2">2</td>
    </tr>
</table>

竖跨两行，垂直合并

<table border="1px" width="200px">
    <tr>
        <td rowspan="2">1.1</td>
        <td>1.2</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
</table>

10.有序表

	<ol>
		
		<li>lol</li>
		<li>dota</li>
		<li>csgo</li>
		
	</ol>

11.无序表

	<ul>
		
		<li>lol</li>
		<li>dota</li>
		<li>csgo</li>
		
	</ul>

12.内联框架

<iframe width="500px" height="300px" src="http://csdn.net"></iframe>

13.input框

<!--文本框-->
		<input type="text" />
		
		<br />
		
		<!--文本框，并设置文本框长度-->
		<input type="text" size="10" />
		
		<br />
		
		<!--文本框,设置初始值-->
		<input type="text" value="请输入内容"/>
		
		<br />
		
		<!--文本框，带初始内容-->
		<input type="text" placeholder="请输入内容" />
		
		<br />
		
		<!--密码框-->
		<input type="password" />
		
		<br />
		
		<!--单选框-->
		<input type="radio" /> 内容1
		<input type="radio" /> 内容2
		<input type="radio" /> 内容3
		
		<br />
		
		<!--复选框-->
		<input type="checkbox" /> 内容1
		<input type="checkbox" /> 内容2
		<input type="checkbox" /> 内容3
		
		<br />
		
		<!--按钮-->
		<input type="button" value="按钮"/>
		
		<br />

14.下拉框

		<select>
			<option>选项1</option>
			<option>选项2</option>
			<option>选项3</option>
		</select>

15.form表单

<form method="get" accept-charset="http://***">

    账号<input type="text" placeholder="请输入账号" />
    <br />
    密码<input type="password" placeholder="请输入密码"/>
    <br />
    <input  type="submit" value="登录" />

</form>

其中method改成post也可以提交数据，get是form默认的提交方式，并会在地址栏看到提交的参数，而post看不到，get不能提交二进制数据，如上传文件，而post却可以。

16.文本域

<textarea>这里是文本域</textarea>

17.按钮

普通按钮<input type="button" value="普通按钮" />
<br>
提交按钮<input type="submit" value="提交按钮" />
<br>
重置按钮<input type="reset" value="重置按钮" />
<br>
图像按钮<button>
    <img src="http://how2j.cn/example.gif"/>
</button>
<br>
button提交按钮 <button type="submit">登录</button>