高效入门html5（三）

列表List

无序列表：

<ul>
	<li>第一行</li>
	<li>第二行</li>
	<li>第三行</li>
</ul>

有序列表：（type是指定顺序的表现形式，如为a，则内容按abc排序，如为1，则内容按123排序）

<ol type="...">
	<li>第一行</li>
	<li>第二行</li>
	<li>第三行</li>
</ol>

在列表的每一行里面再嵌入一个列表也完全可以！如

<ul>
	<li>第1行
		<ul>
			<li>第1.1行</li>
			<li>第1.2行</li>
	        <li>第1.3行</li>
		</ul>
	</li>
	<li>第2行</li>
	<li>第3行</li>
</ul>

 

表格Table

大家冰雪聪明，看代码就懂了：

        <table>
            <caption>基本表格</caption>
            <tr>
                <th>num1</th>
                <th>num2</th>
                <th>num3</th>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
        </table>

如果想要删掉5而不改变布局，可以让4跨两列。也可以<td></td>里面什么都不输入。

<td colspan="2">4</td>

要想给表格加上边框或进一步美化它，就要去学学css的知识啦，可以去康康我的css文章哦。

 

输入input

<input>是个双标签

<input type="text" placeholder="请输入您的账号"/><br>
<input type="password" placeholder="请输入您的密码"/><br>
<input type="submit"/>

这个页面是不是很熟悉哈哈，短短三行代码就能实现，还可以加入value="…"定义输入的默认内容。
type定义输入的属性，text就是普通文本；password就是密码，输入时不明文显示；submit就是提交数据咯。还有很多type属性，如file、radio、range等，大家去试试吧

 

文本框textarea

<textarea row="10" cols="30"></textarea>

 

容器

这是个很重要的内容，如果大家已经用到容器知识，说明已经进入进阶学习了，html里有线型区域<span>和块型区域<div>，尤其是<div>，随便打开一个网页，按F12然后选elemen元素，你会看到一大堆的<div>，因为它可以很方便地进行网页布局。
在body里面输入下面的代码，你就能理解容器：

	<span>行区域1</span>
	<span>行区域2</span>
	<span>行区域3</span>
	<div>
	   块区域1
	</div>
	<div>
	   块区域2
	</div>
	<div>
	    块区域3
	</div>

相信不用我多说大家现在能明白块和行的区别了，那么它既然是容器，就能装下很多东西，之前介绍的<h1><p><img><video><table>等等都能装在一个容器里，而且他们之间能相互嵌套，div里嵌个span再嵌个div也完全ok，然后给容器加个类class="…"，我们就可以很方便地在css文件里对其进行编辑，同时整个页面的布局也可以随心所欲。