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="data: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="data: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 测试结果


HTML基础知识（1）常用标签的使用 h、p、img、meta、a、iframe...的更多相关文章

  1. Shell编程(二)——shell的基础知识及常用命令

    shell的基础知识 一.bash有以下特点: 1.记录命令历史 2.指令和文件名补全 3.别名 alias rm='rm -i' 4.通配符 * 0个或多个字符 ?​匹配一个字符 5 输入输出重定向 ...

  2. 前端基础之html常用标签

    前言: 1.在B-S模式下,server服务端和客户端之间 使用http协议(规定 客户端应该怎么请求服务端,服务端应该怎么响应)通信: 2.传输过程 浏览器 向服务端发起 post/get请求 服务 ...

  3. Django框架基础知识04-模板标签与模板继承

    1.常用的模板标签 -作用是什么? -常用标签 总结:语法 {% tag %} {% endtag %} {% tag 参数 参数 %} 2.模板的继承与引用 -引用 include标签 -继承 ex ...

  4. HTML基础之HTML常用标签

    下面小编为大家整理一些HTML的常用标签 a.布局标签 div标签定义文档中的分区或节(division/section),可以把文档分割为独立的.不同的部分,主要用于布局. aside标签的内容可用 ...

  5. 前端进阶笔记之核心基础知识---那些HTML标签你熟悉吗？

    目录 1.交互实现 1.1 meta标签:自动刷新/跳转 1.2 title标签:消息提醒 2.性能优化 2.1 script标签:调整加载顺序提升渲染速度 2.2 link标签:通过预处理提升渲染速 ...

  6. 视频基础知识：浅谈视频会议中H.264编码标准的技术发展

    浅谈视频会议中H.264编码标准的技术发展 浅谈视频会议中H.264编码标准的技术发展 数字视频技术广泛应用于通信.计算机.广播电视等领域,带来了会议电视.可视电话及数字电视.媒体存储等一系列应用,促 ...

  7. loadrunder之脚本篇——脚本基础知识和常用操作

    1)编码工具设置 自动补全输入Tools->General Options->Environment->Auto complete word 显示功能语法Tools->Genr ...

  8. Hive HiveQL基础知识及常用语句总结

    基础语句 CREATE DROP 建表.删表 建表 -------------------------------------- -- 1. 直接建表 ------------------------ ...

  9. MySQL基础知识和常用命令总结

    说明:以下内容是阅读书籍<<MySQL必知必会>>的摘要和总结 检索数据 排序检索数据 过滤数据 使用通配符过滤 使用正则表达式进行搜索 创建计算字段 使用数据处理函数 汇总数 ...

随机推荐

  1. C++封装静态链接库和使用

    零碎记事 距离上次发博客已经有一年半了,转眼间我也是从做图像研究到了做游戏开发,说起来看看前面的博文,本来就有前兆的东西呢(笑)......因为主要还是在使用虚幻引擎,所以C++的东西会碰到多一些. ...

  2. LuoguP4719 【模板】动态 DP(动态DP，LCT)

    \(n \times m\)的算法谁都会吧,注意到每次修改影响的仅是一部分的信息,因此可思考优化. 将每个节点对应一个矩阵\(\begin{bmatrix} g[v][0] & g[v][0] ...

  3. Spring源码 14 IOC refresh方法9

    参考源 https://www.bilibili.com/video/BV1tR4y1F75R?spm_id_from=333.337.search-card.all.click https://ww ...

  4. YC-Framework版本更新:V1.0.9

    分布式微服务框架:YC-Framework版本更新V1.0.9!!! 本文主要内容: 1.V1.0.9版本更新主要内容 2.YC-Framework新的征程 一.V1.0.9版本更新主要内容 (1)接 ...

  5. [NOI2021] 密码箱 （平衡树，连分数，Stern-Brocot 树，矩阵）

    题面 记忆犹新 题解 f f f 函数值给得非常明显,一看就给人一种熟悉感--这不是连分数吗? 众所周知,连分数有个递推公式,即 p i = a i p i − 1 + p i − 2 q i = a ...

  6. java数组---稀疏数组与数组之间的相互转化

    public static void main(String[] args) { int[][]array1=new int[11][11]; array1[1][2]=1; array1[2][3] ...

  7. Html飞机大战(五):主角登场（英雄类编辑）

    好家伙, 遇到了一些非常奇怪的bug index.html:179 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRender ...

  8. Linux虚拟机报错grub rescue解决步骤

    /boot 分区内核文件丢失 实验准备 1) 准备:rm -rf /boot/* 2) 系统启动报错截图 修复步骤 重启显示logo时 按 Esc,选择从光驱启动 或者关机再选择打开电源时进入固件 移 ...

  9. 集成 Redis & 异步任务 - SpringBoot 2.7 .2实战基础

    SpringBoot 2.7 .2实战基础 - 09 - 集成 Redis & 异步任务 1 集成Redis <docker 安装 MySQL 和 Redis>一文已介绍如何在 D ...

  10. Kingbase_FDW 使用介绍

    与postgresql_fdw功能类似,KINGBASE_FDW  是一种外部访问接口,它可以被用来访问存储在外部的数据.想要使用fdw访问数据需要先确保:网络通,数据库访问配置(pg_hba,con ...