html 超链接＜a＞

最新推荐文章于 2023-03-05 00:47:21 发布

一枚小棋子

最新推荐文章于 2023-03-05 00:47:21 发布

阅读量484

点赞数 2

分类专栏： HTML 文章标签： html5 css

本文链接：https://blog.csdn.net/isfor_you/article/details/108718429

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

一、< a>基础介绍
二、简单新闻代码案例
- 1.输入代码
- 2.输出结果

一、< a>基础介绍

1. 超链接< a>

1.1 < a>…< /a>

<a href="超链接地址" target="_blank">文本内容</a>

target="_blank" ：在空白新页面打开这个超链接

1.2 a标签伪类

a)同一个标签，根据用户的某种状态不同，由不同的样式，称为==“伪类”==
b) :link 用户没有点击过的链接状态
c) :visited 用户点击过的链接状态
d) :hover 用户鼠标悬停到链接上的状态
e) :active 用户鼠标点击且不松手之前的状态
注意:在css中必须按照上述固定顺序写,否则失效

<head>
	<style type="text/css">
		a:link{
			color:#FF0000;}
		a:visited{
			color:#FF0000;}
		a:hover{
			color:blue;}
		a:active{
			color:#E67817;}
	</style>
</head>	
<body>
	<a href="#">我是a标签</a>
</body>

2. 图片< img>

<img src="../要显示的图片的路径" width="100pc" height="200pc" />

src="…/要显示的图片路径"： …/ 为返回上一级目录
width=“100px” : 设置图片宽度，高度为height

3.列表标签

无序列表

<ul type="disc">
	<li>
		列表项目
	</li>
	<li></li>
</ul>

type=“disc” : 列表标记为实心圆
type=“circle” : 列表标记为空心圆
type=“square” : 列表标记为实心方块

有序列表

<ol type="1">
	<li>
		列表项目
	</li>
	<li></li>
</ol>

type=“1” : 列表标记为数字
type=“A/a” : 列表标记为小大/小写字母
type=“I/i” : 列表标记为大/小写罗马字母

二、简单新闻代码案例

1.输入代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度新闻列表</title>
	</head>
	<body>
		<h1>科技&nbsp;<img src="1.jpg" width="50px"/></h1>
		<hr>
		<ul type="disc">
			<li>
				<a href="https://new.qq.com/omn/20200921/20200921A0BS3H00.html?ADTAG=LenovoPC&pgv_ref=LenovoPC&name=LenovoPC">
					7秒检测一台手机！回收宝的产品检测比苹果还厉害
				</a>
			</li>
			<li><a href="https://new.qq.com/rain/a/20200921A0GNQZ00">工业电子商务创新发展的“浙江模式”
				</a>
			</li>
			<li><a href="https://new.qq.com/omn/20200921/20200921A0A6IR00.html?ADTAG=LenovoPC&pgv_ref=LenovoPC&name=LenovoPC">
			联想拿出证据！常程违反竞业限制，为什么这次站队联想？
				</a>
			</li>
			<li><a href="https://new.qq.com/omn/TEC20200/TEC2020092100525300.html?ADTAG=LenovoPC&pgv_ref=LenovoPC&name=LenovoPC">
			联想再回应常程竞业协议纠纷：离职前为其支付500余万元竞业限制股权激励
				</a>
			</li>
		</ul>
		<ol type="1">
			<li>
				<a href="https://new.qq.com/rain/a/20200921A08C6R00">
					iOS 14 系统常见问题汇总，你遇到了吗
				</a>
			</li>
			<li><a href="https://new.qq.com/rain/a/20200921A0GUER00">供应链称华为将推出显示器 代工厂和订单量曝光
				</a>
			</li>
			<li><a href="https://new.qq.com/rain/a/20200921A0BO9300">38岁，宿华要去IPO敲钟
				</a>
			</li>
			<li><a href="https://new.qq.com/omn/20200921/20200921A085O800.html?ADTAG=LenovoPC&pgv_ref=LenovoPC&name=LenovoPC">
			健康宝不显示健康状态？官方释疑
				</a>
			</li>
		</ol>	
	</body>
</html>