HTML基础——图像，表格，块，字体

最新推荐文章于 2025-02-26 15:24:01 发布

原创最新推荐文章于 2025-02-26 15:24:01 发布 · 225 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML

html 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了HTML中的关键元素，包括图像、链接、表格、列表、字体和内联框架的使用方法，以及如何设置其属性来优化网页布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图像

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

同一级直接src = "example.gif"/

上级加入../ 可叠加

绝对路径加入file：//c:/example.gif

设置大小

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

但是要注意失真

图像居中，左，右：

img不能实现

可以在h或p，但通常在div块中实现

<div align="left">

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

</div>

加入文字：

万一图片不存在，出现一个破损的都尴尬，加上一个 alt就好了

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

超链：

<a href="http://www.12306.com" target="_blank" title="跳转到http://www.12306.com">www.12306.com</a>

href表示要跳转的连接

target表示要不要新建一个空页面

title表示放上去的提示信息

而中间的文字表示你要显示出来的

那么既然<a>和</a>中间是要显示出来的

<a 属性href target title> 显示文字(可以是用img显示图片)</aj>

我们也可以

<a href="http://www.12306.com">

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

</a>

放个图片来让你点击

表格：

1-普通表格 tr td

tr(table row)表示行，所有3个tr元素
td(table data)表示列，每一行，有2列，所以每一个tr元素里，有2个td元素

2-设置大边框属性与单元格属性 border，width以及alignvalign水平垂直对齐

<table border="1" width="200px">//红色部分为加入边框属性，
<tr>
<td>1</td>
<td>2</td>
</tr>

<tr>
<td width="50px">3</td>//红色部分为加入对1单元格的边框属性，对应的下面的也会继承，而旁边的会减去
<td>4</td>
</tr>

<tr>
<td width="80%" align="left" >a</td>//也可以这样来设定单元格宽度比例，align用于设置文字在单元格中的位置，水平对齐
<td>b</td>
</tr>

</table>

1	2
3	4
a	b

//1，3，a对映align的水平位置

valign用于设置文字垂直对齐

<tr>

<td valign="bottom" >a</td>

<td>

b <br/>

</td>

</tr>

1	2 2 2
3	4 4 4
a	b b b

//1，3，a对应valign的垂直对齐

3-合并：

水平：colspan

<tr><td colspan="2" >1，2</td></tr>

垂直：rowspan

<table border="1" width="200px"> <tr> <td rowspan="2">1,3</td> <td>2</td> </tr> <tr> <td>4</td> </tr> <tr> <td>a</td> <td>b</td> </tr> </table>

1,3	2
1,3	4
a	b

背景色：bgcolor

<tr bgcolor="gray">

<td width="50%">1</td>

<td>2</td>

</tr>//也可以放在td中

列表

列表分无序列表和有序列表
分别用<ul>标签和<ol>标签表示

ul改成ol就是有序的，输出就会带有序号1- 2-

块

div span

<img style="margin-left:50px" src="http://how2j.cn/example.gif"/>
<br/>
<img style="margin-left:50px" src="http://how2j.cn/example.gif"/>

<div style="margin-left:100px" >
<img src="http://how2j.cn/example.gif"/>
<br/>
<img src="http://how2j.cn/example.gif"/>
</div>

将style属性放带div里面，则整个块都具有距离左边100px的属性

div是块元素，即自动换行
常见的块元素还有h1,table,p
span是内联元素，即不会换行
常见的内联元素还有img,a,b,strong