HTML基本 标签

最新推荐文章于 2023-04-02 14:32:57 发布
最新推荐文章于 2023-04-02 14:32:57 发布
阅读量62 收藏
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48219937/article/details/119454088
版权

初识html

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

网页基本信息

<!-- DOCTYPE:告诉浏览器，我们要使用什么规范-->
<!--IDEA使用的是HTML规范-->
<!DOCTYPE html>

<html lang="en">

<!--head标签代表网页头部-->
<head>
<!--  meta描述性标签，它用来描述我们网站的一些信息  -->
<!--  meta一般用来做SEO  -->
    <meta charset="UTF-8">
    <meta name="keywords" content="狂神说java,西部开源">
    <meta name="description" content="来这个地方可以学习java">

    <!--title网页标题-->
    <title>枷锁</title>
</head>

<!--body代表网页主体-->
<body>

Hello, World!

</body>

</html>

网页基本标签

<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>

在这里插入图片描述

<!--段落标签-->
<p></p>
两只老虎，   两只老虎，
跑得快，    跑得快，
一只没有眼睛，
一只没有尾巴，
真奇怪！     真奇怪！
两只老虎，    两只老虎，
跑得快，     跑得快，
一只没有耳朵，
一只没有尾巴，
真奇怪！      真奇怪！

在这里插入图片描述

<!--段落标签-->
<p>两只老虎，   两只老虎，</p>
<p>跑得快，    跑得快，</p>
<p>一只没有眼睛，</p>
<p>一只没有尾巴，</p>
<p>真奇怪！     真奇怪！</p>

在这里插入图片描述

<!--换行标签  自闭合标签-->
两只老虎，   两只老虎，<br/>
跑得快，    跑得快，<br/>
一只没有眼睛，<br/>
一只没有尾巴，<br/>
真奇怪！     真奇怪！<br/>

在这里插入图片描述

<!--水平线标签-->
<hr/>

在这里插入图片描述

<!--字体样式标签  粗体 斜体-->
<h1>字体样式标签</h1>
粗体： <strong>i love you</strong>
<br/>
斜体： <em>i love you</em>

在这里插入图片描述

<!--特殊符号-->
空格：&nbsp;
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格

<br/>
大于符号：&gt;
<br/>
小于符号：&lt;
<br/>
版权符号：&copy;
其他的特殊符号直接&加一个字母就会有提示

在这里插入图片描述

图像标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>

<!--img学习
src: 图片地址(必填)
     相对地址(推荐使用):../上一级目录
          先从"3.图片标签"所在的目录返回到上一级即HTML,然后去到resource直接写在斜杠/后面就行
     绝对地址:就是从盘符开始的文件中那个地址
alt: 图片名字(必填) alt是如果路径错了，图片加载不出来之后就会显示图片的名字

-->
<img src="../resource/image/1.jpg" alt="枷锁" title="悬停文字" width="100" height="200">

</body>
</html>

超链接标签及其应用(重要)

在这里插入图片描述

超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>

<!--a标签
href: 必填，表示要跳转到那个页面
target: 表示窗口在哪里打开(当前页面  新页面)
      _blank   在新标签中打开
      _self    在自己的网页中打开
-->

<!--超链接以文字形式展现-->
<!--<a href="1.我的第一个网页.html">点击我可以跳转页面</a>-->

<!--超链接以图片形式展现-->
<a href="1.我的第一个网页.html">
  <img src="../resource/image/1.jpg" alt="枷锁" title="悬停文字" width="200" height="200">
</a>
<a href="https://www.baidu.com" target="_blank">百度</a>




</body>
</html>

锚链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>

<!--使用name做为标记，通过#来跳转-->
<a name="top">顶部</a>

<a href="1.我的第一个网页.html">
  <img src="../resource/image/1.jpg" alt="枷锁" title="悬停文字" width="200" height="200">
</a>
<a href="https://www.baidu.com" target="_blank">百度</a>

<p>
  <a href="1.我的第一个网页.html">
    <img src="../resource/image/1.jpg" alt="枷锁" title="悬停文字" width="200" height="200">
  </a>
</p>

<p>
  <a href="1.我的第一个网页.html">
    <img src="../resource/image/1.jpg" alt="枷锁" title="悬停文字" width="200" height="200">
  </a>
</p>

<p>
  <a href="1.我的第一个网页.html">
    <img src="../resource/image/1.jpg" alt="枷锁" title="悬停文字" width="200" height="200">
  </a>
</p>

<p>
  <a href="1.我的第一个网页.html">
    <img src="../resource/image/1.jpg" alt="枷锁" title="悬停文字" width="200" height="200">
  </a>
</p>

<p>
  <a href="1.我的第一个网页.html">
    <img src="../resource/image/1.jpg" alt="枷锁" title="悬停文字" width="200" height="200">
  </a>
</p>

<p>
  <a href="1.我的第一个网页.html">
    <img src="../resource/image/1.jpg" alt="枷锁" title="悬停文字" width="200" height="200">
  </a>
</p>

<p>
  <a href="1.我的第一个网页.html">
    <img src="../resource/image/1.jpg" alt="枷锁" title="悬停文字" width="200" height="200">
  </a>
</p>

<!--锚链接
1.需要一个锚标记
2.跳转到标记外
#
-->

<a href="#top">回到顶部</a>


</body>
</html>

一个页面锚到另外一个页面

<a href="4.链接标签.html#down">down</a>

<!--另一个页面的标记-->
<a name="down">down</a>

功能性链接

<!--功能性链接
邮件链接:mailto:
QQ链接:
-->
<a href="mailto:24736743@qq.com">点击联系我</a>

在这里插入图片描述

列表标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>

<!--无序列表-->
<ol>
    <li>JAVA</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ol>

<hr/>

<!--有序列表-->
<ul>
    <li>JAVA</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ul>

<hr/>


<!--自定义列表-->
<dl>
    <dt>学科</dt>
    <dd>JAVA</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>C/C++</dd>
    <dt>住址</dt>
    <dd>成都</dd>
    <dd>重庆</dd>
    <dd>南京</dd>
    <dd>杭州</dd>
</dl>


</body>
</html>

在这里插入图片描述

表格标签

在这里插入图片描述

在这里插入图片描述

wwaitings
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML的基本标签
qq_58167492的博客
04-04 1741
文章末尾有代码和效果可查看。 基本标签： 段落标签<p></p> 标题标签：<h1></h1>、<h2></h2>、<h3></h3>、<h4></h4>、<h5></h5>、<h6></h6> 换行标签<br/> 分割线标签<hr/> 布局标签<div></div> span标签
HTML基础标签
A_light_sun的博客
10-09 448
常用标签 h系标签（又称标题标签） 作用：用于给文本添加标题语义 格式：<h1>XXX</h1> h标签一共有6个，从 h1~h6,超过6个无效 在 h 系列的标签中，h1 最大，h6 最小 注意： 1. 一般一个页面中h1只使用一次， h2 ~ h6可以使用多次 2. h 标签是用来给文本添加标题语义的，而不是用来修改文本的样式的 <html lang="en...
HTML基本标签
热门推荐
m0_57898822的博客
04-02 1万+
HTML标签
html基本标签
weixin_44992737的博客
06-04 4559
html基本标签
HTML 基本标签大全
qq_46028517的博客
06-08 1万+
HTML基础------认识标签
01 HTML基本标签.ppt
07-23
Html的基础标签学习之后会使用HTML的基本结构创建网页，会使用文本相关标签，实现文字修饰和布局，会使用图像相关标签实现图文并茂的页面，会使用超链接相关标签实现页面间的跳转。
01-HTML基本标签.md
02-05
html基本标签，什么是标签，标签的分类，标签的作用，常用标签，单双标签，标签属性，src路径... 有痕
使用 React 和 Redux 进行井字游戏并附带源代码.zip
07-24
项目：使用 React 和 Redux 进行井字游戏并附带源代码 使用 react 和 redux 的井字游戏是一个简单的 react 项目。整个项目都是使用 react components 和redux制作的。游戏很简单，玩法也很多。要运行此项目，您必须先安装 NodeJS。 关于项目 井字游戏反应而 redux 是使用ReactJS开发的。说到这个游戏，它具有高级功能和游戏玩法。要运行此项目，首先，您必须安装费用到您的系统。然后运行npm安装然后开始运行npm开始。游戏启动后，您可以选择不同的游戏选项。您还可以选择所需的网格框数量。此外，您还可以选择对手的类型。 要运行此项目，您需要 在计算机上安装NodeJS 并使用现代浏览器，例如 Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
使用 JavaScript 编写的专注力游戏（附源代码）.zip
07-24
项目：JavaScript 中的专注力游戏（附源代码） 专注力游戏是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这款游戏很有趣。玩家必须点击移动的框并获得分数。要点击正确的位置，玩家需要在这个游戏中集中注意力。这款游戏可以帮助玩家练习以进一步增强他们的专注力。 游戏制作 这个游戏项目仅使用 HTML、CSS 和 JavaScript。说到这个游戏的特点，用户必须单击移动框并得分。游戏有三种模式：简单、中等和困难。游戏的 PC 控制非常简单。您只需使用光标单击移动框的碎片即可。 该游戏包含大量的 javascript 以确保游戏正常运行。 如何运行该项目？ 要运行此游戏，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要玩游戏，首先，单击 index.html 文件在浏览器中打开游戏。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
人脸识别方案资料61EDA-C1590.zip
07-24
人脸识别方案资料61EDA_C1590.zip
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明）
07-24
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明） 该设计为DK124控制的开关电源，实现12V 2A输出； 功能： 1、使用DK124核心控制； 2、反激式开关电源拓扑设计； 3、实现12V 2A输出； 4、市电输入； 5、整流、滤波、变压器等电路； 6、原理图、PCB图、BOM表、设计说明；
基于Springboot和Vue的生鲜超市管理的设计与实现源码 生鲜超市管理的设计与实现代码（优秀毕业设计）
07-24
生鲜超市管理的设计与实现源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
使用 ReactJs 编写的简单旅行计划器（附源代码）.zip
07-24
项目：使用 ReactJS 编写的简单旅行计划器（附源代码） ReactJs 中的简单旅行计划器是一个简单的 JavaScript 项目。该项目是 ReactJS 中待办应用程序的一个简单示例。 关于项目 Simple Trip Planner In Reactjs 是使用ReactJS开发的。这个项目很容易做一种应用程序。这个项目使用 React 库来完成任务。为了运行这个项目，你必须在系统中安装 NodeJs。当你运行这个项目时，你的应用程序从主页开始。从那里你可以导航到菜单。你只能将计划添加到你的书中。你还可以对旅行进行分类。你所要做的就是输入日期和地点，然后选择你想要的旅行计划类型。 要运行此项目，您需要 在计算机上安装ReactJS和 NodeJs，并使用现代浏览器，例如Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
俄罗斯方块的python代码
07-24
这段Python代码实现了一个简单的俄罗斯方块游戏，使用Pygame库处理图形和用户输入。游戏初始化Pygame库并设置屏幕大小为800x600像素，定义不同颜色和形状的方块。游戏由一个`Tetris`类管理，负责游戏状态和逻辑操作，每个方块由一个`Block`类表示，包含其形状、颜色、位置等信息。 在主循环中，游戏通过事件处理机制响应用户的键盘输入，箭头键用于移动和旋转方块，空格键用于快速下落。游戏会检测方块是否与已有的方块或边界发生碰撞，如发生碰撞，当前方块会固定在场地上并生成新方块。填满的行会被清除，玩家获得相应分数。 游戏通过一个二维数组维护场地状态，每个元素表示一个单元格是否被占据，通过检查和清除单元格实现行消除。整个游戏不断刷新屏幕更新显示，确保流畅运行，绘制背景、方块和边框，使界面美观易理解。 总体而言，这段代码展示了如何使用Pygame库实现经典俄罗斯方块游戏，包括图形绘制、用户输入处理和基本游戏逻辑，让玩家通过移动和旋转方块消除行并获得高分。
绿色金融：“双碳”经济时代，银行业务增长新引擎-埃森哲(
07-24
绿色金融：“双碳”经济时代，银行业务增长新引擎-埃森哲(
基于Springboot和Vue的结合疫情情况的婚恋系统源码 结合疫情情况的婚恋系统代码（高分毕设）
最新发布
07-24
结合疫情情况的婚恋系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
人脸识别方案资料61EDA-C1618.zip
07-24
人脸识别方案资料61EDA_C1618.zip
精美且实用的Web页面设计模板
07-24
在网页设计领域，Web页面模板是一种预先设计好的布局框架，用于快速构建网站并提供一致的视觉体验。"很实用很漂亮的web页面模板"这个标题暗示了我们正在讨论的是一套高效且美观的模板，适用于那些希望节省时间并创造专业外观网站的设计师或开发者。 描述中的“全部使用的div+css”表明这些模板基于HTML的结构元素`div`和层叠样式表(CSS)进行构建。`div`元素是HTML中最常用的一种容器，可以用来组合、分组其他HTML元素，方便通过CSS进行样式控制和布局管理。CSS则负责定义网页的样式，如颜色、字体、布局以及响应式设计，使网页在不同设备上展示效果良好。 我们要理解Div+CSS布局的优势。传统的表格布局在复杂性和可维护性上往往不如Div+CSS。使用Div+CSS，我们可以实现更清晰的代码结构，提高页面加载速度，同时提供更好的搜索引擎优化（SEO），因为搜索引擎更容易解析结构化的HTML代码。 模板中的每个页面通常会包含头部、导航、主体、侧边栏和页脚等部分，这些都可能由`div`元素定义。CSS将用于设定这些区域的样式，包括它们的大小、位置、背景、边框等。通过浮动（floa
HTML基础教程：学习HTML基本标签
HTML基本标签是构建网页内容的基础，它们告诉浏览器如何显示网页的各种元素。HTML（HyperText Markup Language）是一种标记语言，用于描述网页的结构和内容。自1993年以来，HTML经历了多个版本的迭代，从最初的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值