标签的学习

最新推荐文章于 2022-02-27 10:05:00 发布

悠然少年心

最新推荐文章于 2022-02-27 10:05:00 发布

阅读量152

点赞数

分类专栏：前端 html

本文链接：https://blog.csdn.net/qq_44116353/article/details/114848796

版权

前端同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

html

13 篇文章 0 订阅

订阅专栏

（1）标题标签

标题标签和div一样独占一行

在这里插入图片描述

在这里插入图片描述
在写代码的时候不用打括号直接打里面的标签就能出现一对标签
此外在查看里面有自动换行可以把复制的锻炼直接对齐快捷键ALT+Z

每个标签一行显示
字体会依次减小
重要性随之递减
按保存之后浏览器打开就行了

`  <h1>1一级标签</h1>
    <h2>2二级标签</h2>
    <h3>3三级标签</h3>
    <h4>4四级标签</h4>
    <h5>5五级标签</h5>
    <h6>6六级标签</h6>`

(2) P标签 Paragraph

<body>
<p>欧洲药品管理局在一份声明中写道</p>
<p> 早在今年2月份，南非就表示。</p>
</body>

在这里插入图片描述
根据浏览器大小自动缩进段落之间保有较大空隙

(3)br标签

换行标签break 单标签
换行标签中间是没有间隙的

 <p>欧洲药品管理局在一份声明中写道<br/> 目前没有迹象表明是接种该疫苗后导致这些症状，该疫苗仍是“利大于弊”，在持续调查血栓事件病例的同时，可以继续接种，言外之意便是状况不明。但为了安全起见，欧洲各国还是决定暂停使用该疫苗。 其实关于阿斯利康疫苗，目前除了副作用问题外，还有疫苗的有效性问题</p>
    <p> 。早在今年2月份，南非就表示，由于变异新冠病毒的出现，印度生产的阿斯利康新冠疫苗效力不佳，准备退货。前不久南非卫生部长也宣布，不再接种阿斯利康新冠疫苗。</p>

在这里插入图片描述

例子

在这里插入图片描述

<h1>两万亿养了“白眼狼”？12个州联手起诉拜登，美国政坛一夜变天</h1>

    <h4>12个州联名起诉拜登，美国政坛起风了</h4>
    <p>2个州联手起诉拜登，美国政坛一夜变天。据央视新闻报道称，这12个州的议员称气候变化应由国会监督，拜登颁发的行政命令是为违反宪法的行为。据悉，拜登在上任第一天就签发了一项关于气候变化的行政命令。</p>
    <p>看来特朗普一回来，共和党人就团结一致，目标和矛头直指现任总统拜登，让他在任期内“水深火热”。如果拜登在任期内多犯一点错，特朗普在四年后竞选总统时，就可以有更多的把柄可以握住，看来共和党人已经为特朗普重返做好了准备。</p>
    <h4>拜登认为环境保护迫在眉睫</h4>
    <p>拜登认为处理美国与气候有关的问题迫在眉睫，在拜登看来必须采取措施改变现状。拜登指出美国面临的威胁包括风暴、干旱以及洪水，甚至还有燃烧燃料造成的严重的空气污染，美国需要采取措施改变现状。</p>
    <p>但事实上，在听到拜登签署气候行政令的消息后，美国国内出现了严重的反对声音，大多数共和党人提出了反对意见。与这次将拜登告上法庭的各州一样，这些共和党人认为拜登的行政措施会给美国经济带来巨大影响，会超出美国的承受能力。</p>
    <p>作者：<br> xxx
    </p>

这就是一个简单的新闻文本页面

(4)文本格式化标签

1.strong 加粗另外一个效果一样但是被淘汰的标签 b
2.em 斜体另外一个效果一样但是被淘汰的标签 i
3.del 删除线另外一个效果一样但是被淘汰的标签 s
4.ins 下划线另外一个效果一样但是被淘汰的标签 u

 <!-- 文本格式化用的标签 -->
    <!-- 加粗文字 -->
    我是<strong>加粗文字</strong> 
    <!-- 倾斜线 -->
    我是<em>倾斜 线</em> 
    <!-- 删除线 -->
    我是<del>删除线</del> 
    <!-- 下划线 -->
   我是<ins>下划线</ins>
   <!-- 淘汰的标签 -->
   <b>加粗</b>
   <i>倾斜</i>
   <s>删除</s>
   <u>下划线</u>

展示效果

在这里插入图片描述

（5）div标签

可以理解为一个盒子用来装东西的
一个div标签和标题标签一样占一行

<div>我是一个标签我单独占一行</div>123
<div>我是一个标签我单独占一行</div>123

在这里插入图片描述

（6）span标签

可以理解为小盒子一行可以有多个span标签

<span>篮球</span>
    <span>足球</span>
    <span>羽毛球</span>
    <span>保龄球</span>

在这里插入图片描述
可以看到是一行有四个

（7）img图片标签image

属性	用法
src	是图片的路径

alt	是图片显示不出来的时候显示的文本

title	这个属性是吧鼠标移上去的时候显示的文字

hight	设置高度一般只需要设置一个另一个自动对齐

weight	设置宽度一般只设置一个不然会导致图像变形

把图片和HTML5文件放在一起输入路径就可以导入
在这里插入图片描述

<body>
    <img src="wuyanzu.jpg" alt="">
</body>

在这里插入图片描述

 <img src="wuyanzu1.jpg" alt="我是悠然少年心">

在这里插入图片描述
这里没有wuyanzu1.jpg文件所有图片无法正常显示

 <img src="wuyanzu.jpg" alt="我是悠然少年心" title="这是我悠然少年心的自拍">```

    <img src="wuyanzu.jpg" alt="我是悠然少年心" width="100">
    <img src="wuyanzu.jpg" alt="我是悠然少年心" height="300">
    <img src="wuyanzu.jpg" alt="我是悠然少年心" title="这是我悠然少年心的自拍">

在这里插入图片描述

目录文件夹：你新建一个文件夹那个文件夹就是目录文件夹
根目录：你打开文件夹的第一层就是根目录如果文件夹里面还有一个文件夹那个文件打开不叫根目录只能是第一层
在这里插入图片描述

相对路径和绝对路径

网页的图片和素材不可能乱存放需要放在相应的文件夹里面进行管理这时候就有相对路径和绝对路径的使用

在这里插入图片描述

相对路径
图片相对于HTML5文件的位置
1.图片和HTML5文件同一级

 <img src="wuyanzu.jpg" alt="">

2.图片在HTML5的下一级
就是HTML5文件和存放图片的文件夹同一级
而图片存放在存放图片的文件夹里面
用 img来找到文件夹/找到下面的根目录来找到图片

<img src="img/wuyanzu.jpg" alt="">

3.图片在HTML5的上一级路径
用法 …/

 <img src="../wuyanzu.jpg" alt="">

在这里插入图片描述
这里wuyanzu.jpg图片是在HTML5的上一级
因为 "上一级路径.html"这个文件是在html5图片例子这个文件夹里
这个文件夹又和wuyanzu.jpg同级所以wuyanzu.jpg图片是HTML5文件的上一级路径

绝对路径
绝对路径就是文件夹的位置
但是每个人电脑的绝对路径是不一样的一般不太建议使用
但是网络图片的的绝对路径一般用的比较多
注意绝对路径用的"" 相对路径用的"/"
在这里插入图片描述
这里绝对路径就是上面的D:\VScode\WenJian\img

<img src="D:\VScode\WenJian\img\wuyanzu.jpg" alt="">

网络地址绝对路径

 <img src="https://pic1.zhimg.com/80/v2-c225ccf8871687de75649d6975d997ac_720w.jpg?source=1940ef5c" alt="">

a标签和超链接

外部访问
必须要http://这样的格式才有效

   <h4>外部访问</h4>
    <a href="http://www.qq.com"  target="_self">访问腾讯</a>
    <a href="http://www.baidu.com" target="_blank">访问百度</a>
    <!-- 不写target就是默认的_self的打开方式不打开新的页面在原来的页面跳转 -->
    <!-- 写_blank就是打开一个新的页面的访问方式 -->

效果

外部访问

访问腾讯访问百度
***内部链接以及其他***

    <h4>内部链接网站内部之间的相互链接 这里用相对路径</h4>
    <a href="公司简介.html" target="_blank">公司简介</a>
    <h4>下载链接这里也是用相对路径</h4>
    <a href="wuyanzu.zip" target="_blank">点击下载我的自拍</a>
    <h4>网页元素的链接 这里可以套娃</h4>
    <a href="http://www.baidu.com" target="_blank"> <img src="wuyanzu.jpg" alt=""> </a>

内部链接网站内部之间的相互链接这里用相对路径

公司简介

下载链接这里也是用相对路径

点击下载我的自拍

网页元素的链接这里可以套娃

在这里插入图片描述
锚点链接
这是在页面内的跳转不跳转到页面以外

<a href="#beijing">角色背景</a><br>
    <a href="#juesexingxiang">角色形象</a><br>
    <a href="#xingge">性格</a><br>
    <a href="#xingtai">形态</a><br>

#后面跟着的是定位的id

<h4 id="beijing">角色背景</h4>

就会跟着定位到相应位置

悠然少年心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
标签的学习

（1）标题标签标题标签和div一样独占一行在写代码的时候不用打括号直接打里面的标签就能出现一对标签此外在查看里面有自动换行可以把复制的锻炼直接对齐快捷键ALT+Z每个标签一行显示字体会依次减小重要性随之递减按保存之后浏览器打开就行了` <h1>1一级标签</h1> <h2>2二级标签</h2> <h3>3三级标签</h3> <h4>4四级标签</h4> &lt
复制链接

扫一扫