htmlday2笔记

HTML是用于创建网页的标准标记语言，本篇笔记主要讲解了两个关键元素：图片标签`<img>`和表格标签`<table>`，以及相关的属性和用法。 我们来看图片标签`<img>`。这是一个单标签，用于在网页中插入图片。基本语法是`<img src="图片地址" alt="描述内容">`。`src`属性定义了图片的来源，可以是同一站点下的相对路径，也可以是网络上的绝对URL。`alt`属性提供了图片的描述，当图片无法显示时，浏览器会显示这个描述。此外，`<img>`标签还有其他属性，如`width`和`height`用来设置图片的宽度和高度，单位通常是像素（px）。`border`定义图片边框的宽度，`hspace`和`vspace`则分别设置图片与文字的水平和垂直间距，但这些属性在现代Web开发中更多地通过CSS样式来实现。 接下来是表格标签`<table>`。表格由`<table>`、行标签`<tr>`和单元格标签`<td>`组成。`<tr>`包含`<td>`，`<td>`用于填充内容。创建表格的基本结构如下： ```html <table> <tr> <td>内容</td> <td>内容</td> <td>&nbsp;</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> </tr> </table> ``` `<table>`标签有多个属性，如`border`定义表格边框的宽度，`width`和`height`设置表格的尺寸，`align`指定表格的水平对齐方式（左、中、右），`cellpadding`是单元格内容与边框之间的距离，`cellspacing`是单元格之间的距离，`bgcolor`设置表格背景颜色，`background`设置背景图片。`rules`和`bordercolor`用于边框线的样式，但现在更推荐使用CSS来实现这些效果。 在实际需求中，例如创建一个三行五列的表格，可以这样编写： ```html <table width="990" border="2"> <!-- 三行五列的表格内容 --> </table> ``` 另外，`<tr>`和`<td>`也有自己的属性。`<tr>`的`height`设定行高，`bgcolor`和`background`分别用于背景颜色和图片，`align`和`valign`则控制行内的水平和垂直对齐。`<td>`的属性类似，可设置单元格的宽度、高度、背景和内容对齐方式。 对于单元格的合并，我们可以使用`colspan`和`rowspan`属性。例如，`colspan="3"`将一个单元格横向合并为3列，`rowspan="2"`则将单元格纵向合并为2行。 我们提到了链接标签`<a>`，用于创建超链接。`href`属性指定链接的目标地址，`target`定义打开链接的方式（默认在原窗口，`_blank`在新窗口），`name`则用于创建锚点。例如，创建一个指向淘宝的链接： ```html <a href="http://www.taobao.com">淘宝</a> ``` 在本地测试链接时，可以使用相对路径，如果文件在同一目录下，只需提供文件名。 HTML中的`<img>`和`<table>`是构建网页布局和展示内容的重要元素，通过它们的属性可以灵活地调整图片和表格的样式。同时，`<a>`标签则实现了页面间的跳转，为用户提供导航功能。理解并熟练运用这些元素和属性，是制作静态网页的基础。在实际开发中，还要结合CSS和JavaScript来增强网页的交互性和美观性。