HTML学习第二周周记

---

前言

这篇文章将记录我的HTML第二周的学习内容，这一周我学习了用table、div来分区块和制作表格。

---

一、制作表格

表格由 table 标签来定义。每个表格均有若干行（由 tr 标签定义），每行被分割为若干单元格（由 td 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
下面就是我写的一个例子

<table border="2" cellspacing="10"><tr>
		  <td><img src="images/self1.jpg" width="200px"></td>
		  <td><img src="images/wechat.jpg"width="150px"></td>
		  </tr></table>

其中，border表示为表格的边框宽度，cell spacing为表格的格间距，像这里我就是插入了图片。

二、制作区块

1.用table制作区块

用表格的方式制作网页的不同区块，其实无非就是用长宽不同的单元格来分割网页，从而达到网页分区块的目的。

代码如下（示例）：

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题</h1>
</td>
</tr>
 
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>菜单</b><br>
1<br>
2<br>
3
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
4</td>
</tr>
 
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
5</td>
</tr>
</table>

这里面的colspan=2就是让这个单元格横跨两个单元格的长度,可以看一下下面这张图：

2.用div制作网页区块

HTML div元素是块级元素，它可用于组合其他 HTML 元素的容器。它没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，div元素可用于对大的内容块设置样式属性。

div元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 table 元素进行文档布局不是表格的正确用法。table 元素的作用是显示表格化的数据。

这里是我用div来让button居中。

<div style="text-align: center;">
			<a href="self.html" target="_blank" class="button button1" style="text-decoration: none;" >这里是Jiayi的个人信息</a>
		</div>

---

总结

以上就是我第二周的HTML学习周记，如果你有什么问题欢迎在留言区发表，我们下周见，see you~