Web开发基础学习笔记整理(3)

写在<body>中的标记

(13)列表标记
      ①无序列表  <ul>   <li>
      ②有序列表  <ol>   <li>
(14)图片  <img  src=””  width=””  height=””  title=””  border=”” />
      src=””表示所要显示的图片
      width=””用来设置图片的宽度
      height=””用来设置图片的高度
      title=””用来设置图片的标题,也就是鼠标移到图片上会显示设置的标题内容
      border=””用来设置图片的边框,数字,表示边框的粗细。
(15)超链接
     a  文字链接     <a  href=””  target=””>文字</a>
        href=””表示点击链接跳转的地址
        target=””表示点击超链接的跳转方法   
        _self表示页面内部发生跳转,不会打开新的页面窗口,不写默认的一种方式
        _blank表示打开新的页面窗口发生链接的跳转
     b  图片链接  <a href=”” target=””><img /></a>
     c  图片的热点分割技术,分割图片,实现分割后区域的不同链接跳转
        <map>
            <area shape=”” coords=”” href=””></area> 分割的一个区域
            <area shape=”” coords=”” href=””></area> 分割的第二个区域
            ...
        </map>
             shape=””表示形状   coords=””表示坐标值   href=””跳转地址

代码部分:

<html>
	<head>
		<title>列表标记</title>
	</head>
	
	<body>
		<!-- 无序列表 ul li(list) -->
		<ul>
			<!-- <li>张三</li> 实心的圆 -->
			<!-- <li type="circle">张三</li> 空心的圆 -->
			<li>张三</li>
			<li type="circle">李四</li>
			<li>王五</li>
			<li>小红</li>
		</ul>
		
		<!-- 有序列表 ol li -->
		<ol>
			<!-- <li>星期一</li> 1. -->
			<li type="I">星期一</li> <!--I-->
			<li type="I">星期二</li> <!--II-->
			<li type="I">星期三</li> <!--III-->
			<li type="I">星期四</li> <!--IV-->
			<li type="I">星期五</li> <!--V-->
			<li type="I">星期六</li> <!--VI-->
			<li type="I">星期天</li> <!--VII-->
		</ol>
	</body>
</html>
<html>
	<head></head>
	<body>
		<!-- 图片 -->
		<img src="玫瑰.jpg" width="600" height="400" 
		title="这是一只小老虎" border="1"/>
		<!-- <img src="a.png"/> -->
		<br/>
		<br/>
		
		<!-- 文字链接 a href="" target="" -->
		<a href="http://www.baidu.com" target="blank">去百度</a>
		<a href="http://www.taobao.com">点我去淘宝</a>
		<a href="body.html" target="_self">去我自己的页面</a>
		<br/>
		<br/>
		
		<!-- 图片链接 -->
		<a href="http://www.baidu.com" target="_blank">
			<img src="玫瑰.jpg" width="600" height="400"/>
		</a>
		<br/>
		<br/>
		
		<!-- 图片热点分割 map标记 -->
		<img src="t.jpg" width="600" height="400" usemap="#a"/>
		<map name="a">
			<!-- 左区域 -->
			<area shape="rect" coords="0,0,300,400" href="http://www.baidu.com"></area>
			<!-- 右区域 -->
			<area shape="rect" coords="300,0,600,400" href="http://www.taobao.com"></area>
		</map>
	</body>
</html>

map区域分析:

在这里插入图片描述

效果图:

图1:

在这里插入图片描述

图2:

在这里插入图片描述

插入的图片:

玫瑰.jpg

在这里插入图片描述

t.jpg

在这里插入图片描述

发布了53 篇原创文章 · 获赞 33 · 访问量 1247

猜你喜欢

转载自blog.csdn.net/qq_44458489/article/details/104957594
今日推荐