007 认识HTML 标签分类 属性 和 锚点功能

目录

007 认识HTML 标签分类 属性 和 锚点功能

1 、 标签的分类

块级标签

块级标签 独占一行，不允许其他标签共用
div
 div 的样式是 没有任何样式，使用div是区别其他区域的工具，进行定位区域的。

内联标签

内联标签 按内容占位置的效果
span
联标签 span 和div的功能一样，只是和其他标签共享一行

2、标签属性

1 特殊符号编码表

不同的编码格式针对特俗字符有不同的对照表，在html中也有特殊字符的对照表

2 标签的属性之 id

id在属性查找时 要是使用#号 进行标识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #c1{
            color: red;
        }
    </style>
</head>
<body>

<div id="c1">aaaaaaa</div>
</body>
</html>

锚点

锚点的功能 设定标签的id号， 通过标签的id 定位的标签的位置，到达在页面中任意跳动的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            background-color: gainsboro;
            height: 900px;
        }
    </style>
</head>
<body>

<a href="#c1">第一章</a>
<a href="#c2">第二章</a>
<a href="#c3">第三章</a>
<span id="tops"></span>

<div id ="c1" >第一章的内容 <a href="#tops">返回顶部</a> </div>
<div id ="c2" >第二章的内容 <a href="#tops">返回顶部</a> </div>
<div id ="c3" >第三章的内容 <a href="#tops">返回顶部</a> </div>

</body>
</html>
posted @ 2023-02-09 16:38  mmszxc  阅读(61)  评论(0)    收藏  举报