基础标签
超链接a标签
1、href属性:跳转的地址,可以是网页,也可以是本地的文件;
<a href="https://www.baidu.com">百度一下,你就知道</a>
禁止跳转(#也可以实现,但是每次点击后,都会返回到页面的最上方 用户体验感不好)
<a href="javascript:void(0)">百度一下,你就知道</a>
2、target属性:跳转的方式,默认在本网页打开;
_self:默认在本网页打开;
_blank:点击一次,打开一个新网页;
_new:点击多次也只打开一个新的网页;(当target属性值赋值但无效时,默认为只打开一个新网页)
<a href="https://www.baidu.com" target="_blank">百度一下,你就知道</a>
3、“#” 锚点功能
从点击的位置跳转到对应的位置,例:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 400px;
background-color: blue;
margin-bottom: 20px;
}
</style>
</head>
<body>
<a href="#aa">111</a>
<a href="#bb">222</a>
<a href="#cc">333</a>
<a href="#dd">444</a>
<a href="#ee">555</a>
<div>111</div>
<div>222</div>
<div>333</div>
<div>444</div>
<div id="ee">555
<a href="" name="ee"></a>
</div>
</body>
点击href跳转到”#ee“的a标签后,跳转到锚点name为”ee“的a标签处(id为ee的div处)
dl和dt、dd标签
dl:大框架
dt:标题
dd:内容
<dl>
<dt>这是一个标题</dt>
<dd>这是主要文字的内容</dd>
<dt>这是一个标题</dt>
<dd>这是主要文字的内容</dd>
</dl>
效果图如下:
有序ol 和 无序ul标签(子集只能够写li)
ul 和 li 标签
ul li :无序列表
<ul style="list-style: none;"> <!--list-style:none 不显示无序列表的标题 -->
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
list-style:
none:不显示
disc:实心圆
circle:空心圆
square:实心方块
ol 和 li 标签
ol li:有序列表
<ol type="1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ol>
序列的类型 type:
1:阿拉伯数字排序
I:罗马数字
a:小写字母
A:大写字母
单位分类:
1、px:像素 最常用的一个单位
2、em:1 em = 一个字体的大小
3、rem:html字体的大小
4、vw:屏幕的宽度为100vw 1vw = 屏幕的宽度/100;
5、vh:屏幕的高度为100vh 1vh = 屏幕的高度/100;