HTML基础day01-常用文本标签

最新推荐文章于 2024-07-24 14:22:29 发布

少龙吖

最新推荐文章于 2024-07-24 14:22:29 发布

阅读量248

点赞数 1

文章标签： html 前端 html

本文链接：https://blog.csdn.net/sl3037302304/article/details/121407304

版权

上一节讲解了我们初始化的默认代码这些代码配置好了就可以进行我们的新操作

在网页的视区展示我们的内容

今天咱们学习几个简单的标签

第一个标签是段落标签p标签

p标签的作用很强大可以存放文字并且默认生成段落的格式

当然我们的标签还是要放在body当中放在我们的身体当中因为是给我们用户看的

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
    <p align="center">
        上一节讲解了我们初始化的默认代码 这些代码配置好了 就可以进行我们的新操作

在网页的视区展示我们的内容

今天咱们学习几个简单的标签

第一个标签是段落标签p标签

p标签的作用很强大 可以存放文字 并且默认生成段落的格式 
    </p>
</body>
</html>

上面还可以加属性名我们这里加的属性名为align表示对齐方式有三个分别为left right center 表示里面的文字默认左对齐右对齐和居中显示

这里我们用的是居中属性 align="center" 属性名为align 属性值为center

但是直接加在标签里面的属性值很少我们后期都会使用css设置

下面我们来了解一下标题标签

标题标签我们这里一共有6级

分别为h1-h6

表示强调程度的不同

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>
    <p>
        这是段落标签
    </p>
</body>
</html>

上面了解了标题段落我们来进行学习一下超文本链接标签a标签

超文本链接标签在网页中很常见可以用于跳转到另一个网页或者跳转到下面的段落

如果想要跳转到我们本地写的文件需要写我们链接文件的相对地址

后面会给大家举出例子

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
   <a href="https://baidu.com" target="_blank">跳转到百度</a>
   <a href="https://baidu.com" target="_self">跳转到百度</a>
</body>
</html>

属性1 href代表的是url 就是我们需要链接到的网页的地址

属性2 target 表示我们网页打开的方式一个是在当前网页直接打开一个是在新窗口打开

属性值_blank代表的是在新窗口打开网页 _self为默认属性表示为在当前网页打开

学习的a标签可能有些人很好奇在一篇长文档中我点击一个链接会直接跳转到相关的段落

这里用的是我们的锚点链接

何为锚点链接根据我个人的理解就是我在这个段落放入一个锚点一个独一无二的名字

然后点击链接会直接跳转到锚点处

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
    <a href="#dsd">第三段</a><br>
    <p>年有季节，春夏秋冬；日有季节，黑白交替；生命也该有季节，那是生老病死。</p>
    <br><br><br><br><br><br><br><br><br><br>
    <p>乔治、赫伯特说过：“一个人如果20岁不英俊，30岁不强壮，40岁不富有，50岁不睿智，那么他这辈子就别想英俊、强壮、富有和睿智了。”这是西方人眼中的生命的季节。</p>
    <br><br><br><br><br><br><br><br><br><br>
    <p >孔老先生说过：“吾十有五而志于学，三十而立，四十而不惑，五十而知天命，六十而耳顺，七十而从心所欲，不逾矩。”也属一种对生命的季节的限定，但孔老先生只有勇气限定自己，怯于给别人下论断。</p>
    <br><br><br><br><br><br><br><br><br><br>
    <p id="dsd">不管怎样，正如中国古话所说：“朝闻道，夕死可矣。”它告诉人们：不论在什么时候，只要你明白了生命的好处所在，你就开始了生命的春天。</p>
</body>
</html>

这边我用了<br>标签 br标签表示的是换行标签

当我点击第三段的时候会自己跳转到下面的段落

最后再讲一个标签水平线标签

<hr>标签

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
    <p>第一段</p>
    <hr>
    <p>第二段</p>
    <hr color="red" size="5" width="500px">
</body>
</html>

如果只有一个hr 默认的一条跟你窗口一样宽的细线

但是我们可以使用属性值改变他的长短粗细和颜色这边粗细好像是有7个等级我们在css中可以具体设置他的粗细

px单位是像素单位我们大多长度宽度都需要带上我们的单位px

少龙吖

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础day01-常用文本标签

上一节讲解了我们初始化的默认代码这些代码配置好了就可以进行我们的新操作在网页的视区展示我们的内容今天咱们学习几个简单的标签第一个标签是段落标签p标签p标签的作用很强大可以存放文字并且默认生成段落的格式当然我们的标签还是要放在body当中放在我们的身体当中因为是给我们用户看的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &lt.
复制链接

扫一扫