HTML基础知识（1）常用标签的使用 h、p、img、meta、a、iframe...

文章目录

1、html简介

在这里插入图片描述

2、html注释

  • <!-- 注释内容-->

举例：

<!DOCTYPE html>
<html>
    <!-- head标签，标签中的内容不会直接显示在网页中，帮助浏览器解析页面 -->
    <head>
        <meta charset="urt-8">
        <!-- 默认显示在浏览器的标题栏中，搜索引擎搜索时，会首先搜索title标签中的内容 -->
        <title>标题</title>
    </head>
    <body>
        <!-- 注释，注释中的内容不显示在页面中 -->
        <h1>你好</h1>
    </body>
</html>

3、标签的属性

  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现，比如：name=“value”。

3.1 代码

  <!-- 属性：
            可以通过属性来设置标签中的内容
            写在开始标签中，属性名="属性值" -->
         <h1>你好<font color="red" size="12px">，小明</font></h1>

3.2 测试结果

在这里插入图片描述

4、常用的标签

4.1 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>常用的标签</title>
    </head>
    <body>
           <!-- 1、标题标签 

                一共有6级标签 显示效果h1最大，h6最小
                六级标题中 h1最重要。仅次于标题title。搜索引擎搜索结束标题，立即查看h1
                中的内容
            -->

            <h1>一级标题</h1>
            <h2>一级标题</h1>
            <h3>一级标题</h1>
            <h4>一级标题</h1>
            <h5>一级标题</h1>
            <h6>一级标题</h1>

            <!-- 2、段落标签：
                  内容中的一个自然段，独占一行
                 使用p标签 -->
            <p>我是P标签 </p>
            <p>我是p标签</p>


            <!-- 3、换行标签 br 自结束标签 -->
            <p>我要学前端，<br/>
               我要走全栈。
            </p>

            <!-- 4、hr在页面中生成一个横线 -->
            <hr>
    </body>
</html>

4.2 测试结果

在这里插入图片描述

5、实体

5.1 代码

<!DOCTYPE html>
<htmL>
    <head>
        <meta charset="utf-8">
        <title>实体</title>
    </head>
    <doby>

<!-- 
        一些特殊字符是不能直接使用的,要使用转义字符串(实体)
        浏览器自动解析实体,
        实体的名字:
                <  &lt;
                >  &gt;
                空格:&nbsp;
                版权符号:&copy; -->

        <p>&copy;我&nbsp;&nbsp;要学习全栈哦</p>
        <p>大于号:&lt;</p>
        <p>小于号:&gt;</p>

      
    </doby>
</htmL>

5.2 测试结果

在这里插入图片描述

6、图片引入

  • <img src="图片地址" alt="图片不能显示展示的信息"/>
    目录结构
    在这里插入图片描述

6.1 代码

<!DOCTYPE html>
<htmL>

<head>
    <meta charset="utf-8">
    <title>图片</title>
</head>
<doby>

    <!-- 使用img标签在一个网页中引入外部图片
      img也是一个自结束标签

      属性:
          src:外部图片地址.相对路径,绝对路径
          alt:外部图片不能显示,对图片的描述
               不写alt属性,搜索引擎不会对img中的图片进行收录
          width:图片宽度,px作为单位
          height:图片高度,px作为单位
          开发中一般使用自适应页面,不建议使用width和height
         
        相对路径:
            相对于当前资源所在目录的位置
            ../返回上一级目录,返回几级目录就写几个

        图片的格式:
             JPEG(JPG):支持图片颜色多,图片可以压缩,不支持透明.一般保存照片等颜色丰富的图片
             GIF:支持的颜色少,只支持简单透明,支持动态图
             PNG:支持颜色多,并且支持复杂的透明
        
        图片使用原则:
            效果不一致:使用效果好的
            效果一致:使用小的
    
        -->

<img src="image/car.jpg" alt="这是车" width="400px" height="300px">


</doby>

</htmL>

6.2 测试结果

在这里插入图片描述

7、meta标签

7.1 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>meta</title>

        <!-- 使用meta可以设置网页的关键字 -->
        <meta name='keywords' content="HTML5,JavaScript,Java">

        <!-- 使用meta可以用来做请求的重定向 -->
        <meta http-equiv="refresh" content="5;url=http://www.baidu.com">
    </head>
    <body>
        <h1>5秒后跳转页面</h1>
    </body>
</html>

7.2 测试结果

经过5秒后自动跳转到百度首页

8、内联框架

8.1 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>内联框架</title>
    </head>
    <body>

        <!-- 使用内联框架可以引入一个外部的页面
          属性:
              src:指向一个外部页面的路径,可以用相对路径
              width:宽度
              height:高度
              name:
              在实际开发中不推荐使用,内联框架中的内容不被搜索引擎检索 -->

        <h1>我是内敛框架哦,将dame2页面中的内容引入</h1>
        <iframe src="dame2.html"></iframe>

    </body>
</html>

8.2 测试结果

在这里插入图片描述

9、超链接

9.1、代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>超链接</title>
</head>

<body>


    <!-- 使用超链接可以从一个页面跳转到其他页面
    a标签创建超链接
    属性:
        href:指向链接跳转的目标地址,相对路径和绝对路径都可以
        target:指定打开的链接地址
              _self:在当前页面打卡(默认值)
              _blank:在新的窗口中打开链接
              内敛框架的name属性值,链接将会在该页面中打开 -->


    <a href="http://www.baidu.com">跳转到百度</a>

    <a href="dame1.html" target="_blank">新页面打开</a>

    <a href="dame1.html" target="jack">内联框架中打开</a>

    <br><br>

    <iframe src="dame2.html" name="jack" width="400px" height="300px"></iframe>

</body>

</html>

9.2、测试结果

在这里插入图片描述

10、小节测试

10.1、代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>简单网页</title>
</head>

<body>
    <!-- 跳转到id为bottom的元素所在的位置 -->
    <center><a href="#bottom">底部</a></center>
   <center><h1>我要打牢基础</h1></center> 
   <hr>
   <center><h2>学习html</h2></center>
   <center><font color="blue">
    <p>郑某</p>
  </font></center> 
   <center><p>好好学习，天天向上<br>好好学习，天天向上<br>好好学习，天天向上<br>好好学习，天天向上</p></center>
   <center><img src="image/car.jpg" width="200px" height="180px"></center>
   <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
   <hr>
   <center>
   友情链接：<a href="#">A网站</a> | <a href="#">B网站</a> | <a href="#">C网站</a><br>
   <a href="#" id="bottom">顶部</a>

   <!-- 发送电子邮件的超链接，点击链接，自动打开计算机中默认的邮件客户端 href:mailto:zyz@qq.com -->
<a href="mailto:zyz@qq.com">联系我们</a>

</center>
</body>

</html>

10.2 测试结果

在这里插入图片描述
在这里插入图片描述

posted on 2022-08-28 22:17  热爱技术的小郑  阅读(99)  评论(0)  编辑  收藏  举报
Powered by:
博客园
Copyright © 2024 热爱技术的小郑
Powered by .NET 8.0 on Kubernetes