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. Python爬虫：为什么你爬取不到网页数据

    前言: 之前小编写了一篇关于爬虫为什么爬取不到数据文章(文章链接为:Python爬虫经常爬不到数据,或许你可以看一下小编的这篇文章), 但是当时小编也是胡乱编写的,其实里面有很多问题的,现在小编重新发 ...

  2. 【活动专辑】Gitee X DolphinScheduler 邀你一起参与 issue 解决赢好礼！

    在你参与 DolphinScheduler 项目开发时,是否曾因为这些问题困惑: 对项目感兴趣,但不清楚自己可以为项目做什么 在众多 issue 中,找不到合适自己参与的 issue 任务 认为参与开 ...

  3. Apache DolphinScheduler 使用文档（2-3/8）：集群规划及环境准备

    本文章经授权转载,原文链接: https://blog.csdn.net/MiaoSO/article/details/104770720 目录 2. 集群规划 2.1 集群配置 2.2 软件版本 2 ...

  4. django自带的序列化组件

    1.什么是序列化组件 在django中,自带一个序列化组件,它是用来将数据进行整理.转化成特定的为一个特定的格式(比如json数据格式),然后传输给前端,以便前端对数据进行处理操作. 2.为什么要用序 ...

  5. 基于vue的脚手架开发与发布到npm仓库

    什么是脚手架 在项目比较多而且杂的环境下,有时候我们想统一一下各个项目技术栈或者一些插件/组件的封装习惯,但是每次从零开发一个新项目的时候,总是会重复做一些类似于复制粘贴的工作,这是一个很头疼的事情, ...

  6. 查看 npm 的全局安装依赖包

    在控制台中输入以下指令可以直接查看 npm 全局安装的依赖包: npm list -g --depth 0

  7. HDFS的读写流程——宏观与微观

    HDFS的读写流程--宏观与微观 HDFS:分布式文件系统,负责存放数据 分布式文件系统:就是将我们的数据放到多台电脑上存储. 写数据:就是将客户端上的数据上传到HDFS 宏观过程 客户端向HDFS发 ...

  8. python 二分法查找字典中指定项第一次出现的索引

    import time #引入time库,后续计算时间. inform_m = {} #创建母字典 inform_s = {} #母字典下嵌套的子字典 #给母字典添加键-值 for i in rang ...

  9. KingbaseES 逻辑备份还原加密

    KingbaseEs 支持在sys_dump备份时使用key进行加密.在sys_restore时,如果没提供key,或者key值不对,将无法进行恢复. [kingbase@dbhost03 ~]$ s ...

  10. Jsoup爬取网上数据完成翻译

    Jsoup使用 首先进入Jsoup下载jar包 然后打开IDEA创建一个普通的java项目 在项目结构里创建 lib 目录 但是我们这样并不能直接进行使用 需要添加路径 右键点击 然后添加路径 选择模 ...