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

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

相关文章
|
5天前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
30 5
|
2月前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
48 0
|
4天前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
13 2
|
4天前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
13 1
|
19天前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
71 1
|
19天前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
45 1
|
20天前
|
存储 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
|
20天前
|
XML JavaScript Java
NekoHTML 是一个基于Java的HTML扫描器和标签补全器
**NekoHTML** 是一个基于Java的HTML扫描器和标签补全器(tag balancer),由J. Andrew Clark开发。它主要用于解析HTML文档,并能够“修正”许多在编写HTML文档过程中常犯的错误,如增补缺失的父元素、自动用结束标签关闭相应的元素,以及处理不匹配的内嵌元素标签等。这使得程序能够以标准的XML接口来访问HTML文档中的信息。 ### NekoHTML的主要特点包括: 1. **错误修正**:能够自动修正HTML中的常见错误,如未闭合的标签等。 2. **DOM树生成**:将HTML源代码转化为DOM(Document Object Model)结构,便
|
20天前
|
JavaScript 前端开发
react字符串转为dom标签,类似于Vue中的v-html
本文介绍了在React中将字符串转换为DOM标签的方法,类似于Vue中的`v-html`指令,通过使用`dangerouslySetInnerHTML`属性实现。
47 0
react字符串转为dom标签,类似于Vue中的v-html
|
1月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
39 13