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. 结束语句之 continue

    C 语言自学之 continue Dome1:计算1到20之间不能被3整除的数字之和.               运算结果为: sum=147 1 #include<stdio.h> 2 ...

  2. (一)esp32开发环境搭建（VSCode+IDF实现单步调试）

    保姆级手把手教学视频 https://www.bilibili.com/video/BV1RL411A7CU 前言 因为碰上一个学长,跟他聊了会儿天,推荐我做一点物联网的项目,想来想去,那就用WiFi ...

  3. Spring源码 02 项目搭建

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

  4. Hadoop的由来、Block切分、进程详解

    Hadoop的由来.Block切分.进程详解 一.hadoop的由来 Google发布了三篇论文: GFS(Google File System) MapReduce(数据计算方法) BigTable ...

  5. springboot配置（yami配置文件，JSR303数据校验，多环境配置）

    yami配置文件 YAML是 "YAML Ain't a Markup Language" (YAML不是一种标记语言)的递归缩写.在开发的这种语言时,YAML 的意思其实是:&q ...

  6. 面试现场！月薪3w+的这些数据挖掘SQL面试题你都掌握了吗？ ⛵

    作者:韩信子@ShowMeAI 数据分析实战系列:https://www.showmeai.tech/tutorials/40 AI 面试题库系列:https://www.showmeai.tech/ ...

  7. Helm安装ingress-nginx-4.0.19

    Application version 1.1.3 Chart version 4.0.19 获取chart包 helm fetch ingress-nginx/ingress-nginx --ver ...

  8. 源码(chan,map,GMP,mutex,context)

    目录 1.chan原理 1.1 chan底层数据结构 1.2 创建channel原理 1.3 写入channel原理 1.4 读channel原理 1.5 关闭channel原理 1.6 总结 2.m ...

  9. kingbaseES R6 读写分离集群修改ssh端口案例

    数据库环境: test=# select version(); version ------------------------------------------------------------ ...

  10. 华南理工大学 Python第5章课后小测-1

    1.(单选)以下哪个函数的定义是错误的?(本题分数:2)A) def vfunc(a,b=2):B) def vfunc(a,b):C) def vfunc(a,*b):D) def vfunc(*a ...