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. 二位数组——扩展：冒泡排序、Arrays类

    1.冒泡排序 速记口诀(升序)   n个数字来排队:两两相比小靠前:外层循环n-1:内层循环n-i-1. 示例:定义一个数组,用冒泡排序将数组进行升序排序 关键代码: 输出结果: 2.Arrays 类 ...

  2. benchmark性能测试

    目录 benchmark介绍 benchmark运行 benchmark运行参数 benchmark性能测试案例 benchmark介绍 基准测试主要是通过测试CPU和内存的效率问题,来评估被测试代码 ...

  3. JedisConnectionException: java.net.SocketException: Broken pipe (Write failed) 问题排查

    问题描述 笔者有2个应用会不定时请求redis,其中一个应用大约每分钟请求一次,可以正常请求,但是另一个大约每小时请求一次的应用,经常出现Broken pipe (Write failed)报错,具体 ...

  4. 微软Azure配置中心 App Configuration (一)：轻松集成到Asp.Net Core

    写在前面 在日常开发中,我这边比较熟悉的配置中心有,携程Apollo,阿里Nacos(配置中心,服务治理一体) 之前文章: Asp.Net Core与携程阿波罗(Apollo)的第一次亲密接触 总体来 ...

  5. 云服务器上搭建cobalt strike遇到的一些小问题

    一.前言: 当你兴高采烈的买了一台云服务器,迫不及待地想去搭建传说中的神器cobalt strike的时候,你可能会遇到以下的一些小问题,这里我会列出对应的解决方法. 二.遇到的一些小问题 1.上传文 ...

  6. DL基础：cs231n assignment 1

    cs231n assignment 1 20210804 - 20210808. 目录 cs231n assignment 1 总结 KNN 思想 cross-validation 编程细节 SVM ...

  7. html、css实现导航栏5种常用下拉效果

    实现的效果:鼠标移入按钮时按钮中的内容就会出现,分别展示不同的出现效果.效果难点:不使用JavaScript,那这个效果的难点就是在于:hover伪类的掌控,以及考验对html的结构掌握. 1. ht ...

  8. 自定义View3-水波纹扩散（仿支付宝咻一咻）实现代码、思想

    PS:自定义view篇-水波纹实现 效果:水波纹扩散 场景:雷达.按钮点击效果.搜索等 实现:先上效果图,之前记得支付宝有一个咻一咻,当时就是水波纹效果,实现起来一共两步,第一画内圆,第二画多个外圆, ...

  9. Vmware虚拟主机访问外网设置

    本手册使用10.4.7.0/24网段 重点在于虚拟主机的网关和宿主机上的Vmnet8的IP和虚拟网络编辑器的NET网关保持一致 1.设置宿主机网络适配器 选择允许Vmware网络共享 配置VMnet8 ...

  10. KingbaseES R6 集群物理copy方式手工添加新备库节点

    案例说明: 对于主库数据量比较大的环境,在添加新节点是可以采用在线clone方式创建新的备库节点,也可以在离线的状态下,直接拷贝其中一个备库的所有集群相关目录来创建新的备库节点.本案例介绍了通过离线物 ...