HTML5 ------ image和列表

红的花绿的叶

已于 2024-07-16 10:12:49 修改

阅读量135

点赞数

分类专栏：前端基础文章标签： html5 html css

于 2022-12-19 15:45:36 首次发布

本文链接：https://blog.csdn.net/qq_64227183/article/details/128329014

版权

前端基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

image

image 和 map 标签产生关联 ----- usemap

<map>需要定义 id 和 name 属性并且和usemap 的值相同

代码段如下：（在图片的某一个位置可以点击进入的网站链接）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	 *{
		padding:0;/*内边距*/
		margin:0;/*外边距
	  }

	   img{border:1px solid black;}//加上边框

	</style>


</head>
<body>
	<img src="./image/2.jpeg" alt="小新" usemap="#plant" />
	<map id="plant" name="plant">
	<area shape="circle" coords="227,291,50" href="https://www.baidu.com/"target="_blank" />
	</map>
</body>
</html>

代码段中的 coords 处就是链接所在的具体位置，其中href就是网站链接

列表

列表中有：无序列表，有序列表，定义列表

无序列表：

<ul></ul> 无序列表

<li></li> 列表的项目

代码示例：

<ul>
    <li>伊芙琳</li>
    <li>瑟提</li>
    <li>维鲁斯</li>
    <li>伊泽瑞尔</li>
</ul>

运行结果：

有序列表：

<ol></ol> 有序列表

<li></li> 列表的项目

代码示例：

<ol start="3">
    <li>德莱文</li>
    <li>德莱厄斯</li>
    <li>阿狸</li>
    <li>努努与威朗普</li>
</ol>

代码段中，start 表示从某处开始，代码中start="3"则表示从3开始，还可以在start属性后边加上type属性，表示改变表示方式，默认是阿拉伯数字，可以使用type改成罗马数字进行表示等等

运行结果：

定义列表：

<dl></dl> 定义列表

<dt></dt>

<dd></dd>

代码示例：

<dl>
	<dt>周一</dt>
	<dd>每一周的第一天</dd>
	<dt>周日</dt>
	<dd>每一周的最后一天</dd>
	<dt>一月</dt>
	<dd>每一年的第一个月</dd>
</dl>

运行结果：

表格

<table></table> 表示表格

<tr></tr> 表行

<th></th> 表头

<td></td> 表元

代码示例：

<table>
		<tr>
			<th>早餐</th>
			<th>午餐</th>
			<th>晚餐</th>
		</tr>
		<tr>
			<td>小面</td>
			<td>米饭</td>
			<td>米粉</td>
		</tr>
		<tr>
			<td>豆浆</td>
			<td>可乐</td>
			<td>雪碧</td>
		</tr>

</table>

运行结果：