HTML基础之标签篇（一）

最新推荐文章于 2021-09-20 10:28:47 发布

Jacky-Summer

最新推荐文章于 2021-09-20 10:28:47 发布

阅读量473

点赞数 1

分类专栏： HTML+CSS 文章标签： html 标签

本文链接：https://blog.csdn.net/lxjstudyIT/article/details/52206316

版权

HTML+CSS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

HTML编辑器我们现在选择的是Notepad++。安装完成后，选择文件-新建-（输入你的代码后）-另存为html文件（当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名），启动您的浏览器，然后选择”文件”菜单的”打开文件”命令，或者直接在文件夹中双击您的 HTML 文件,编写代码即可运行。
首先我们来了解一下html的基本结构：
这里写图片描述

接下来又重新来认识html标签了

（由于CSDN写博客用的是Markdown编辑器，里面打的html代码都无法直接显示出来，所以我还是以截图多作为知识点）

看完上面的整体基本结构，接下来继续上标签和代码
这里写图片描述
拿title标签来说，比如：

<html>
    <head>
        <title>Hello World!</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <p>请看上面网页标题</p>
    </body>
</html>

效果如图：这里写图片描述
title标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。上面代码也用到几个标签，接下来继续介绍

示范标题标签：

<html>
    <head>
        <title>Hello World!</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>
    </body>
</html>

运行结果：这里写图片描述
从上面的图片可以看出标题标签的样式都会加粗，h1标签字号最大，h2标签字号相对h1要小，以此类推h6标签的字号最小。

下面通过代码实例：

<html>
<head>
<meta charset="UTF-8">

<title>三种标签效果</title>
<style>
span{
    color:blue;     <!--    <span>元素设置文本颜色为蓝色。  -->
}
</style>
</head>
<body>
    <h1>比较三种标签</h1>
    <p>我是普通文字效果（右边变了）<span>span标签</span>（样式变了）</p>
    <p>我是普通文字效果（右边变了）<strong>strong标签</strong>（变粗了）</p>
    <p>我是普通文字效果（右边变了）<em>em标签</em>（变斜了）</p>
</body>
</html>

运行效果：这里写图片描述
这里顺带提下注释

看完接下来就是实战了

<html>
    <head>
        <meta charset="utf-8">
        <title>举个栗子</title>
    </head>
    <body>
        <h1>短文本引用:</h1>
        <!--     <q>标签，短文本引用。注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。-->
        <p>谈到李白，我们总会想起小学学过的诗句<q>床前明月光，疑是地上霜。</q>这就是引用了。</p>

        <h1>长文本引用:</h1>
        <p>接下来是长文本引用，比如我又想起李白一首诗，
        <blockquote>青山横北郭，白水绕东城。此地一为别，孤蓬万里征。
        浮云游子意，落日故人情。挥手自兹去，萧萧班马鸣。</blockquote>不错，真是一首好诗。
        <!--运行时可知浏览器对blockquote标签的解析是缩进样式。-->
        </p>

        <h1>回车换行:</h1>
        <h2> 《送友人》</h2>
        <p>青山横北郭，白水绕东城。<br/>
              此地一为别，孤蓬万里征。<br/>
              浮云游子意，落日故人情。<br/>
              挥手自兹去，萧萧班马鸣。<br/>
        </p>
        <!--回车换行的地方加入<br />，<br />标签作用相当于word文档中的回车。->
    </body>
</html>