网页标签

最新推荐文章于 2024-04-13 17:02:31 发布
最新推荐文章于 2024-04-13 17:02:31 发布
阅读量198 收藏 4
点赞数 1
文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45683851/article/details/103600167
版权

网页标签

一、网页基本标签

标题标签

<!--标题标签  快速生成键：h1 + tab键 -->
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>

段落标签

<p> </p>

换行标签

<br/>

水平线标签

<hr/>

字体样式标签

<strong>粗体</strong>

<em>斜体</em> <br>

特殊符号标签

<!--空格 &-->  
&nbsp;

<!--大于小于号-->
&gt;
&lt;

<!--版权符号-->
&copy; 版权所有：某某某

<!--万能的公式  &  ;  -->
&phone;

例一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静夜思</title>
</head>
<body>

<h1>静夜思</h1>

<em>朝代：唐代</em> &nbsp;&nbsp;&nbsp; 作者： <strong>李白</strong> <br/>

<hr/>

<p>
    床前明月光, <br/>
    疑是地上霜, <br/>
    举头望明月, <br/>
    低头思故乡。<br/>
</p>

</body>
</html>

在这里插入图片描述

例二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页的基本标签</title>
</head>
<body>

<!--特殊符号只需要了解万能公式即可 -->
<!--万能的公式 ： &  ;-->
&phone;

<hr>

<!--字体样式-->

<strong>马云 （阿里巴巴集团创始人）</strong>
<p>
    <em>马云，男，汉族</em> <br>
    <em>现担任日本软银董事</em>  <br>
    <em>1988年毕业于杭州师范学院外语系</em>  <br>
    <em>....</em>  <br>
</p>

<hr>

<!--标题标签 -->
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>

<hr/>

</body>
</html>

在这里插入图片描述

二、图片标签

在这里插入图片描述

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

<!--标签中带有参数的  key=value -->

<!--
src： 资源图片 ： 图片的路径，必填
../：上一级目录
alt： 图片加载失败，表示图片的问题，即图片描述，必填
title： 鼠标放在图片上的悬浮提示，选填
width： 宽，选填
height：高，选填
-->
<!--这里我们使用相对路径-->
<img src="../resource/images/tx.jpg" alt="头像图片" title="图像" width="1000" height="1000">

</body>
</html>

三、超链接和锚链接标签

a标签：

在这里插入图片描述

1.超链接标签

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

<!--
超链接：表示从一个地方跳转到另外一个地方  例如：hao123导航

href：必填，表示要跳转到的地址（位置、页面）
target： 目标打开的窗口，在自己这个当前页面打开，还是在新的页面打开
    _self : 在自己的窗口打开
    _blank： 在新窗口中打开
-->

<a href="https://www.baidu.com/" target="_self">点击我跳转到百度</a>

<!--和图片嵌套使用-->
<!--图片标签，这里把百度的图片截图保存下来了，可以自己定义图片-->
<a href="https://www.baidu.com/" target="_self">
    <img src="../resource/images/bd.png">
</a>

</body>
</html>

在这里插入图片描述

2.锚链接标签

  • 用于页面间指定位置跳转 ： 快速定位目录
  • 可以在同一页页面中跳转
  • 也可以在不同页面中跳转

锚点

<!--标记A-->
<a name="markerA">A</a>

跳转到锚点

<a href="#markerA">A</a> <br>
<a href="#markerB">B</a> <br>
<a href="#markerC">C</a> <br>
<a href="https://www.cnblogs.com/TankXiao/p/9154085.html#dutte">D</a> <br>
<!--可以跳转到指定文件的某个位置-->
<a href="2.基本结构.html#haha">E</a> <br>

代码

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

<!--实现点击标题即可到达标签的所标记的链接（位置、网页）-->
<!--标题一-->
<a href="#markerA">A</a> <br>
<a href="#markerB">B</a> <br>
<a href="#markerC">C</a> <br>
<!--这里我随便找了一个网页-->
<a href="https://www.cnblogs.com/TankXiao/p/9154085.html#dutte">D</a> <br>
<a href="2.基本结构.html#haha">E</a> <br>
<a href="">F</a> <br>
<a href="">G</a> <br>

<hr>
<!--标记A-->
<a name="markerA">A</a>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>

<!--标记B-->
<a name="markerB">B</a>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>

<!--标记C-->
<a name="markerC"><h1>大标题</h1></a>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>

</body>
</html>

在这里插入图片描述
点击图中这些标签，即可到达指定的页面。

3.功能性链接

1.邮箱链接

2.QQ链接

代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>功能性链接</title>
</head>
<body>

<a href="mailto:1332673781@qq.com">点击联系我们</a>

<!--QQ推广-->
<!--https://shang.qq.com/v3/widget.html-->
<!--进入以上网址，便可以得到功能性链接网址-->

<!--a标签-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1332683781&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:1332683781:53" alt="你好！" title="你好！"/>
</a>

</body>
</html>

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

如何得到a标签：
在这里插入图片描述那段代码就是a标签，复制、粘贴下来即可。

四、行内元素和块元素

块元素：无论内容多少，该元素独占一行（p，h1~h6）；

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行（a，strong，em….）；

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

<!--块元素-->
<p>我是P标签</p>
<h1>我是H1标签</h1>

<!--行内元素-->
<a href="">我是a链接</a>
<strong>粗体</strong>
<em>斜体</em>

</body>
</html>

在这里插入图片描述从以上的运行结果可以很好的看出块元素和行内元素的区别与特点。

@999
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页标签搜索
09-28
做一个自己的网页搜索书签，有搜索功能，自动开机启动，以及靠边隐藏，就像QQ那样
网页基本标签
Massimo__JAVA的博客
05-22 2721
一、初始标签介绍 <!-- DOCTYPE：告诉浏览器，我们要使用什么规范--> <!DOCTYPE html> <html lang="en"> <!-- head标签代表网页头部--> <head> <!-- meta描述性标签，它用来描述我们网站的一些信息 --> <!-- meta一般用来做SE0--> <meta charset="UTF-8"> <meta name="keyw
网页基本标签、图像标签、链接标签、块内元素和块元素、列表标签、表格标签
m0_59800431的博客
03-11 852
主要介绍了网页基本标签、图像标签、链接标签、块内元素和块元素、列表标签、表格标签的内容。
20.2 HTML 常用标签
清风
07-28 2809
2. meta元数据标签 3. title网站标题 5.1 标签属性介绍 5.2 常见使用方式 5.3 设置网页图标 6.1 常见用法 6.2 引入js文件 8. h标题标签 10.1 标签属性介绍 11.1 标签属性介绍 12.1 无序列表 12.3.1 网站尾部
HTML常用标签详解
淘小欣的博客
03-04 9453
HTML常用标签详解 一、head内常用标签 1.基本标签（非meta标签） <!--title: 定义网页标题--> <title>Title</title> <!--style: 定义内部样式表. 内部用来书写css代码--> <style> h1 { color: greenyellow; } </style> <!--script: 内部用来书写js代码--> <script
网页标签分享
06-25
工作两年保存的网页标签分享，只要是一些前端学习的东西
如何快速插入网页标签.docx
09-23
### 如何快速插入网页标签 在网页开发过程中，经常需要插入JavaScript代码或为某段文本添加CSS样式。本文将详细介绍如何使用Dreamweaver快速而高效地完成这些操作。 #### 手动编写与可视化操作 传统的做法是手动...
ajax获取某网页标签内容.rar_T3I_ajax获取网页内容_kdg
09-20
在本示例中，"ajax获取某网页标签内容.rar_T3I_ajax获取网页内容_kdg" 的标题和描述揭示了一个关于使用Ajax来提取并显示特定网页HTML标签中的内容的应用。下面我们将深入探讨这一技术及其实施步骤。 首先，Ajax的...
标签化网页模板
09-17
【标题】：“标签化网页模板”是指一种设计精美的网页模板，它采用了现代网页开发中的“标签”技术，便于内容组织和布局。这样的模板对于初学者来说尤其友好，因为它们通常具有清晰的结构，易于理解和修改，从而快速...
HTML常用标签
xiaoyu_alive的博客
01-24 6609
讲述了HTML各种标签用法、属性以及相应的其他知识点，超级详细！
《网页设计基础——HTML常用标签》
Dustpolaris的博客
09-15 3442
网页设计基础——HTML常用标签 一、HTML网页框架； 二、块级标签； 三、行级标签； 四、表格； 五、表单；
web前端 --- 常见页面标签和语义化标签
weixin_62443409的博客
06-14 2475
（1）简介： 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 HTML 是用来描述网页的一种语言。HTML 标记标签通常被称为 HTML 标签 (HTML tag)。"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:HTML 元素: （代码插入）
网页的基本标签
Y9232的博客
04-11 1752
标题标签、段落标签、换行标签、水平标签
Web前端小白必看【网页开发工具/HTML常用标签】
weixin_73833411的博客
03-06 2273
包含vscode在前端网页开发部分的基本使用；以及前端Html常用的标签。
2、网页基本标签
qq_44840451的博客
05-16 937
2、网页基本标签 网页的内容是由以下几大类标签对应的内容组成的： 标题标签 段落标签 换行标签 水平线标签 字体样式标签 注释和特殊符号 2.1 标题标签 格式： <hn> 内容 </hn> 2.2 段落标签 html文本不识别换行符和空格符，如果想体现换行需要使用段落标签 格式： <p> 段落文字 </p> 快捷键：先输入字符，然后按tab键。 <!
【全网最全】HTML标签详解大全-第一篇{建议收藏}，看完就会了
2401_84092727的博客
04-05 621
后记总结一下这三次面试下来我的经验是：一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！多刷面经！
【全网最全】HTML标签详解大全-第一篇{建议收藏}
最新发布
2401_84094029的博客
04-13 1009
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处获取。涵盖了95%以上前端开发知识点，真正体系化！**[外链图片转存中…(img-4M52DT6H-1712998889654)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
HTML常用标签&CSS基础
m0_73908308的博客
03-31 1024
CoffeeMilk注：自定义列表项以dt开始，自定义列表项的定义以dd开始。
java常用网页标签
07-27
Java语言本身并不直接与网页标签相关，网页标签是用于HTML或其他前端技术的标记语言。然而，Java可以用于处理和生成HTML标签。下面是一些常用的HTML标签： 1. `<html>`：定义HTML文档 2. `<head>`：定义文档头部 3....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值