HTML元素与a标签应用-优快云博客

本文链接：https://blog.youkuaiyun.com/cxxya/article/details/88364380

1 分类

1.1 行级元素 (inline)

特点：内容决定元素所占位置，不可以通过CSS改变宽高。
span, strong, em, a, del

1.2 块级元素 (block)

特点：独占一行，可以通过CSS改变宽高。
div, p, ul, li, ol, form, address

1.3 行级块元素 (inline-block)

特点：内容决定大小，可以改变宽高。
img

可以通过 display 属性改变元素的展示属性。

2 a标签(anchor)

用途：
1 超链接

<a href="https://www.baidu.com">百度</a>
<a href="https://www.baidu.com" 
   style="width:100px;height:100px;background-color:#f40" 
   target="_blank"></a>

2 锚点

<html>
<head>
	<meta charset="utf-8">
	<title>As an Anchor</title>
</head>

<body>
	<div id="demo1" style="width:100px;height:100px;background-color:gray">demo1</div>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<div id="demo2" style="width:100px;height:100px;background-color:green">demo2</div>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	
	<a style="dispaly:block;position:fixed;
	   bottom:100px;
	   right:100px;
	   border:1px solid black;
	   border-radius:10px;
	   height:25px;" 
	   href="#demo1">
	   find demo1</a>
	<a style="dispaly:block;position:fixed;
	   bottom:75px;
	   right:100px;
	   border:1px solid black;
	   border-radius:10px;
	   height:25px;"
	   href="#demo2">
	   find demo2</a>
</body>
</html>

3 打电话/发邮件

<a href="tel:123****1234">call xxx</a>
<a href="mailto:cxx404@qq.com">mail to cxx</a>

4 协议限定符

<a href="javascript:alert(':)')">push</a>