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

简介: 该博客文章详细介绍了HTML的基础知识,包括注释、标签属性、常用标签、实体、图片引入、meta标签、内联框架、超链接的使用,并通过代码示例和测试结果截图展示了这些元素在网页中的应用效果。

文章目录

  • 1、html简介
  • 2、html注释
  • 3、标签的属性
    • 3.1 代码
    • 3.2 测试结果
  • 4、常用的标签
    • 4.1 代码
    • 4.2 测试结果
  • 5、实体
    • 5.1 代码
    • 5.2 测试结果
  • 6、图片引入
    • 6.1 代码
    • 6.2 测试结果
  • 7、meta标签
    • 7.1 代码
    • 7.2 测试结果
  • 8、内联框架
    • 8.1 代码
    • 8.2 测试结果
  • 9、超链接
    • 9.1、代码
    • 9.2、测试结果
  • 10、小节测试
    • 10.1、代码
    • 10.2 测试结果

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 测试结果

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

相关文章
|
2月前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
68 5
|
1月前
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
95 49
|
28天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
41 5
|
1月前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
1月前
|
存储 移动开发 前端开发
|
2月前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
53 2
|
2月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
43 1
|
3月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
204 1
|
3月前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
373 1
|
3月前
|
存储 JavaScript Java
使用NekoHTML解析HTML并提取META标签内容
关于NekoHTML的代码样例,这里提供一个简单的示例,用于展示如何使用NekoHTML来解析HTML文档并提取其中的信息。请注意,由于NekoHTML的具体实现和API可能会随着版本更新而有所变化,以下代码仅供参考。 ### 示例:使用NekoHTML解析HTML并提取META标签内容 ```java import org.cyberneko.html.parsers.DOMParser; import org.w3c.dom.Document; import org.w3c.dom.Element; import org.w3c.dom.NodeList; import org.xml