HTML 标签-上

最新推荐文章于 2024-11-25 10:07:16 发布
最新推荐文章于 2024-11-25 10:07:16 发布
阅读量221 收藏 1
点赞数 2
分类专栏： 前端 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fpxnb123/article/details/116243132
版权

HTML 标签-上

标题标签 h1~h6

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

运行结果在这里插入图片描述

段落标签p，换行br

    <!-- p 段落标签 ， br 换行标签 -->
    <p id="1">
        积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神
        明自得，圣心备焉。<br> 故不积跬步，无以至千里；不积小流，无
        以成江海。骐骥一跃，不能十步；驽马十驾，功在不舍。
    </p>
    <p>
        锲而舍之，朽木不折；锲而不舍，金石可镂。 <br> 蚓无爪牙之利，
        筋骨之强，上食埃土，下饮黄泉，用心一也。 <br> 蟹六跪而二螯，
        非蛇鳝之穴无可寄托者，用心躁也。
    </p>

运行结果
在这里插入图片描述

文本格式化标签，加粗倾斜

    <!-- 文本格式化标签 -->
    <h3> 文本格式化标签 </h3>
    <strong> 加粗标签    strong或b </strong> <br>
    <em>     倾斜标签    em或i </em> <br>
    <del>    删除线标签  del或s </del> <br>
    <ins>    下划线标签  ins或u</ins> <br>

运行结果
在这里插入图片描述

盒子标签div

    <!-- 盒子标签 -->
    <h3> 盒子标签 </h3>
    <div>  div标签，大盒子，一行中只有一个 </div>
    <span> span标签，小盒子，一行中可以有多个 </span> <br>

运行结果
在这里插入图片描述

图片标签 img

    <!-- 图片标签 -->
    <h3> 图片标签 </h3>
    <img src="img/1.jfif" alt="图片消失啦！" title="火影" height="400" width="300" border="3">
    <p> src    必须有，所使用的的图片路径 </p>
    <p> alt    图片不能正常显示所替换的文本</p>
    <p> title  提示文本，鼠标放在图片上显示的文字</p>
    <p> width  设置图像宽度的像素</p>
    <p> height 设置图像高度的像素 </p>
    <p> border 设置图像的边框像素</p>

运行结果
在这里插入图片描述

相对路径

    <!-- 相对路径 -->
    <h4> 相对路径 </h4>
    <p> 同级直接用 </p>
    <p> 下一级路径  / </p>
    <p> 上一级路径  ../ </p>

超链接标签 a

    <!-- 超链接标签 -->
    <h3> 超链接标签 a </h3>
    <h4> 外部链接</h4>
    <a href="https://user.qzone.qq.com/2228992548/infocenter" target="_blank"> 点击进入帅哥空间(外部链接) </a>
    <p> href   链接地址，必须包含，#表示空地址 </p>
    <p> target 设置为blank在新界面打开链接</p>
    <a href="Untitled-1.html" target="_blank"> 内部链接(自己写的网站) </a>

运行结果
在这里插入图片描述

下载链接

    <h4> 下载链接 </h4>
    <p> href是一个文件或压缩包的地址，点击就会下载此文件 </p>
    <a href="img/1.7z"> 点击下载图片 </a>
    <h4> 网页元素(图片，视频等)超链接 </h4>
    <a href="Untitled-1.html" target="_blank"> <img src="img/1.jfif" alt="图片消失啦！" height="400" width="300" border="3"> </a> <br>

锚点链接

    <!-- 锚点链接 飞雷神-->
    1.链接地址设置为 #+id(飞雷神苦无)                 <br>
    2.在目的地标签中添加 id=“第一步设置的id” ，插苦无  <br>
    3.变身金色闪光永带妹                             <br>
    <a href="#1"> 劝学 </a>

运行结果
在这里插入图片描述

横线，特殊字符

    <!-- 横线标签 -->
    <h3>hr 横线标签 </h3>
    
    <!-- 特殊字符 -->
    <h3> 特殊字符 </h3>   
    <p>
        空格符  &nbsp;&nbsp;   & nbsp; <br>
        小于号  &nbsp;&nbsp;   & lt; <br>
        大于号  &nbsp;&nbsp;   & gt; <br>
        版权号  &nbsp;&nbsp;   & copy; <br>
        等等，具体使用，具体查阅 <br>
    </p>

运行结果
在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仙男仙女的常用标签库 上 </title>
</head>
<body>
    <!-- 标题标签 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <!-- p 段落标签 ， br 换行标签 -->
    <p id="1">
        积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神
        明自得，圣心备焉。<br> 故不积跬步，无以至千里；不积小流，无
        以成江海。骐骥一跃，不能十步；驽马十驾，功在不舍。
    </p>
    <p>
        锲而舍之，朽木不折；锲而不舍，金石可镂。 <br> 蚓无爪牙之利，
        筋骨之强，上食埃土，下饮黄泉，用心一也。 <br> 蟹六跪而二螯，
        非蛇鳝之穴无可寄托者，用心躁也。
    </p>

    <!-- 文本格式化标签 -->
    <h3> 文本格式化标签 </h3>
    <strong> 加粗标签    strong或b </strong> <br>
    <em>     倾斜标签    em或i </em> <br>
    <del>    删除线标签  del或s </del> <br>
    <ins>    下划线标签  ins或u</ins> <br>

    <!-- 盒子标签 -->
    <h3> 盒子标签 </h3>
    <div>  div标签，大盒子，一行中只有一个 </div>
    <span> span标签，小盒子，一行中可以有多个 </span> <br>

    <!-- 图片标签 -->
    <h3> 图片标签 </h3>
    <img src="img/1.jfif" alt="图片消失啦！" title="火影" height="400" width="300" border="3">
    <p> src    必须有，所使用的的图片路径 </p>
    <p> alt    图片不能正常显示所替换的文本</p>
    <p> title  提示文本，鼠标放在图片上显示的文字</p>
    <p> width  设置图像宽度的像素</p>
    <p> height 设置图像高度的像素 </p>
    <p> border 设置图像的边框像素</p>

    <!-- 相对路径 -->
    <h4> 相对路径 </h4>
    <p> 同级直接用 </p>
    <p> 下一级路径  / </p>
    <p> 上一级路径  ../ </p>

    <!-- 超链接标签 -->
    <h3> 超链接标签 a </h3>
    <h4> 外部链接</h4>
    <a href="https://user.qzone.qq.com/2228992548/infocenter" target="_blank"> 点击进入帅哥空间(外部链接) </a>
    <p> href   链接地址，必须包含，#表示空地址 </p>
    <p> target 设置为blank在新界面打开链接</p>
    <a href="Untitled-1.html" target="_blank"> 内部链接(自己写的网站) </a>

    <h4> 下载链接 </h4>
    <p> href是一个文件或压缩包的地址，点击就会下载此文件 </p>
    <a href="img/1.7z"> 点击下载图片 </a>
    <h4> 网页元素(图片，视频等)超链接 </h4>
    <a href="Untitled-1.html" target="_blank"> <img src="img/1.jfif" alt="图片消失啦！" height="400" width="300" border="3"> </a> <br>

    <!-- 锚点链接 飞雷神-->
    1.链接地址设置为 #+id(飞雷神苦无)                 <br>
    2.在目的地标签中添加 id=“第一步设置的id” ，插苦无  <br>
    3.变身金色闪光永带妹                             <br>
    <a href="#1"> 劝学 </a>

    <!-- 横线标签 -->
    <h3>hr 横线标签 </h3>
    
    <!-- 特殊字符 -->
    <h3> 特殊字符 </h3>   
    <p>
        空格符  &nbsp;&nbsp;   & nbsp; <br>
        小于号  &nbsp;&nbsp;   & lt; <br>
        大于号  &nbsp;&nbsp;   & gt; <br>
        版权号  &nbsp;&nbsp;   & copy; <br>
        等等，具体使用，具体查阅 <br>
    </p>

</body>
</html>
关于HTML中的target=“_blank“问题
debugtoday的博客
02-23 2万+
关于HTML中的target="_blank"问题
HTML中＜a＞标签和target=“_blank“属性的使用方法及作用（清晰易懂，带例子）
热门推荐
m0_53558236的博客
11-23 2万+
HTML中标签和target="_blank"属性的使用方法及作用（清晰易懂，带例子）
第九章 DIV+CSS概述
最新发布
2401_87210557的博客
11-25 691
9.1.1认识DIVdiv标签在Web标准的网页中使用非常频繁，属于块状元素。div标签是双标签，即以<div></div>的形式存在，中间可以放置任何内容，包括其他的div标签。但是在没有CSS的影响下，每个div标签只占据一行，即一行只能容纳一个div标签。9.1.2DIV的宽度1宽度属性宽度：widthwidth: 250px——设置宽值为250像素。width：50%——设置宽值为父元素的百分之五十。高度：heightheight：250px——设置高值为250像素。
前端设计 最详细的div介绍+效果图+代码图
m0_61123456的博客
10-16 6506
楼主刚学不久 ， 学到css 发现十分有趣和好玩，今天跟大家分享一下 CSS中，div 标签的介绍，这也是我上课的笔记 div ，用得非常多的标签，也是最重要的标签 本身是一个html的标签， 特点： div默认宽度为100%，高度为0. 本身不支持高度 宽度属性，但可以通过css 来设置 语法： 《div》《/div》 应用场景 本身没有过多的自带属性或者样式，所以div可塑性很高。同时也是 div+css 布局的核心。 div默认单独显示在一行 ...
HTML中的target(_self,_blank)相关用法
qq_40021015的博客
03-24 4016
1、“_blank”的意思： 浏览器总在一个新打开、未命名的窗口中载入目标文档。 2、“_parent”的意思： 这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。 3、“_self”的意思： 这个目标的值对所有没有指定目标的 a标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 标签中的 target 属性一起使用。 4、“_top”的意思： 这个目标使得文档
【HTML+CSS】深入理解HTML中的＜div＞标签：布局与样式的基石
Xiaoxin的博客
07-28 2756
div>（division的缩写）是一个块级元素，用于组织和布局页面内容。与（内联元素）不同，元素会自动开始一个新行，并占据尽可能多的宽度，直到其父元素的边界。这意味着可以用来创建页面的结构区块，如页眉、页脚、侧边栏、内容区域等。
HTML常用标签---表格标签与表单标签
qq_52409560的博客
08-18 1763
简单的表格标签与表单标签介绍
HTML 基础教程：基本的 HTML 标签 - 四个实例
王建的博客
07-04 2243
基本的 HTML 标签 - 四个实例 本章通过实例向您演示最常用的 HTML 标签。 提示：不要担心本章中您还没有学过的例子，您将在下面的章节中学到它们。 提示：学习 HTML 最好的方式就是边学边做实验。我们为您准备了很好的 HTML 编辑器。使用这个编辑器，您可以任意编辑一段 HTML 源码，然后单击 TIY 按钮来查看结果。 HTML 标题 HTML 标题（Heading）是通过 < h1> - < h6> 等标签进行定义的。 实例 <h1>This is
html之file标签 --- 图片上传前预览 -- FileReader
大熊的博客
06-19 7118
　记得以前做网站时，曾经需要实现一个图片上传到服务器前，先预览的功能。当时用html的&lt;input type="file"/&gt;标签一直实现不了，最后舍弃了这个标签，使用了其他方式来实现了这个功能。　　今天无意发现了一个知识点，用html的file标签就能实现图片上传前预览，感觉很棒，记录一下！就是通过file标签和js的FileReader接口，把选择的图片文件调用readAsData...
Android使用Html.fromHtml显示富文本之标签拓展-打造没有不支持的标签
天才小汪汪
11-23 1万+
我们知道android中TextView是可以支持富文本显示的，但是需要进行一定的处理。一般来说，我们会使用： 1.使用Html.fromHtml(html) 2.可以使用HtmlSpanner Html不需要依赖任何库但是由于自身自带的HTML支持的标签很少，不能满足我们的需求，那我们就会寻找其他解决方案，例如HtmlSpanner。 HtmlSpanner是支持大多数标签的解析库，但是...
HTML基础-标签分类(闭合标签，空标签，块级元素，行内元素，行级块元素，可替换元素)
LYFlied的博客
03-28 6813
闭合标签，空标签，块级元素，行内元素，行级块元素，可替换元素 元素之间的转化 - display:block；(将元素变为块级元素) - display:inline； (将元素变为行级元素) - display：inline-block；（将元素变为行级块元素）
HTML＜div＞标签
inttaojiao的博客
06-07 1089
html <div>标签元素 HTML DIV目录 Html div介绍 DIV标签使用说明 Div作用 html div演示代码 一、Html DIV介绍 - TOP 这里htmldiv是指html源代码里的div标签。 如在html中DIV代码片段： <div class="yangshi">演示</div> 二、DIV标签使用说明： - TOP 1）、在DIV+CSS切图布局重构技术中，提到div，而在html中代码布局使用最...
Web开发：＜div＞标签作用
Weiki的博客
07-15 1860
Web开发：div标签作用
〖大前端 - 基础入门三大核心之 html 篇⑦〗- div标签 与 HTML5特性
易编橙 · 终身成长社群，相遇已是上上签！
03-03 2万+
接下来，我们来学习一下HTML5的几个特性，掌握了这几个特性，会让我们在编写HTML的过程中更加得心应手~
前端基础入门三大核心之HTML篇：深入解读div标签与HTML5的现代魅力
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-18 1097
HTML5不仅仅是HTML的一个版本更新，它引入了众多新特性，包括语义化标签、多媒体支持、离线存储、Canvas绘图等，极大地丰富了网页的功能和表现力。
DIV标签详细介绍
武汉产品经理
03-23 2353
div 是 division 的简写，division 意为分割、区域、分组。比方说，当你将一系列的链接组合在一起，就形成了文档的一个 division。 可定义文档中的分区或节（division/section）。 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 ，那么该标签的作用会变得更加有效。 id与cla
HTML5+CSS3[VSCode开发者工具、html标签、head标签、body标签、meta标签](一)-全面详解（学习总结---从入门到深化）
02-02 2096
本阶段为基础阶段，主要学习HTML基本结构、骨架、标签和CSS基本样式。通过对这些标签的使用，熟悉布局的搭建结构。合理运行对应标签实现试图效果，是本阶段必须要掌握的知识，为接下来的学习奠定基础。
Web前端学习（HTML）学习---下（表格标签，列表标签，表单标签）案例
weixin_67900732的博客
07-05 5710
Web前端学习（HTML）学习---下（表格标签，列表标签，表单标签）案例看完绝不后悔。
在html中a标签target=blank 以及 target=_blank
wangzhen12138的博客
01-20 3603
target="blank"：在新的窗口中打开新页面，但是当我们新窗口没有关闭的时候，多次点击该链接，只会刷新已打开的页面（从该连接中点击多少次，只会创建一个新窗口） target="_blank"：在新的窗口中打开新的页面，无论点击多少次都可以打开新页面（点击多少次，创建多少个窗口） ...
HTML加空白的下划线
fmwind的专栏
04-06 6892
1、HTML如何加空白的下划线 <input type="text" name="name" style="border:none;border-bottom:1px solid #000;"/> 2、首行缩进两个汉字： style="text-indent:2em"
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值