第一章 HTML&CSS基础 04

1 、图片及超链接

图片

图片常用到的属性：

<img src=”路径”  

title=”鼠标悬停上去之后的提示信息” 

alt=”图片不显示之后的提示信息” 

width=”设置图片的宽度，默认单位是像素”

Height=”设置图片的高度，默认单位是像素”/>

超链接

超链接常用到的属性：

<a href=”路径”

 title=”鼠标悬停上去之后的提示信息”  

target=”_self默认值，本窗口打开 或 _blank新窗口打开” ></a>

2、列表应用

列表分为无序列表、有序列表、自定义列表，例如：

无序列表

无序列表：没有顺序的成组列表

代码展示：

<!--默认值：实心圆-->
<ul>
	<li>无序列表</li>
</ul>

<!--type="disc" 实心圆-->
<ul type="disc">
	<li>无序列表</li>
</ul>

<!--type="circle" 空心圆-->
<ul type="circle">
    <li>无序列表</li>
</ul>

<!--type="square" 方块-->
<ul type="square">
	<li>无序列表</li>
</ul>

 运行结果展示：

有序列表

有序列表：成组出现的有顺序的列表

代码展示：

<ol>
	<li>有序列表</li>
	<li>有序列表</li>
	<li>有序列表</li>
</ol>

<!-- type="1/A/a/I/i" 这里自己设置，设置阿拉伯数字就是阿拉伯数字，设置大写字母就是大写字母，以此类推 -->
<ol type="A">
	<li>有序列表</li>
	<li>有序列表</li>
	<li>有序列表</li>
</ol>

<!-- start="定义开始位置,必须是数字" 假如你给出A，start=3，它就是以C开始的列表-->
<ol type="A" start="3">
	<li>有序列表</li>
	<li>有序列表</li>
	<li>有序列表</li>
</ol>

 运行结果展示：

 自定义列表

自定义列表：图文并茂，大小不一的成组列表，都可用自定义列表

代码展示（图片路径根据个人需求设置，dt一般情况下只使用一次，dd可以使用多次）：

		<dl>
			<dt>自定义问题</dt>
			<dd>对问题的详细描述</dd>
		</dl>
		<dl>
			<dt>
				<img src="../imgs/百度logo.png"/>
			</dt>
			<dd>这个图是一个百度标志1</dd>
			<dd>这个图是一个百度标志2</dd>
			<dd>这个图是一个百度标志3</dd>
		</dl>

运行结果展示：