那些天天与我们见面的标签,不知道你就out了

本文主要是介绍那些天天与我们见面的标签,不知道你就out了，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

HTML标签分类

双标签(开始标签和结束标签成双出现)
-单标签(只有开始标签)
HTML的标签关系你知道吗?

1.嵌套关系(又叫父子关系)为了方便记忆取的名字
在这里插入图片描述

<head><div></div>
</head>

如果两个标签之间的关系是嵌套关系,子元素不要忘记缩进一个tab键的身位哦

嵌套关系(又叫兄弟关系)为了方便记忆取的名字!

<div>库里</div>
<div>克莱</div>

并列关系为了美观最好要上下对齐

盘点一波那些天天与我们见面的网页布局类标签

标题标签(h1~h6)
网页中间有部分内容重要程度明显高于其他区域：比如网页标题，网页logo，新闻标题等，这些重要区域就使用h系列的标签来划分
h系列标签重要度按以下顺序：
h1>h2>h3>h4>h5>h6(注意h1只能有一个)
段落标签 < p >< /p >

p标签的作用就是在网页内容中间划分出一个专门存放大段文字的区域
水平线标签< hr >和换行标签< br >
< div >< /div >标签

div标签的作用就在网页内容中间划分出若干个矩形区域，用以存放不一样的内容
< span >< /span >标签

span标签的作用就是在网页内容的大段文字中间标注一行或是数行文字，并给这些文字设置一些不一样的展示效果，比如：下划线，颜色
引用标签< blockquote >< /blockquote >

blockquote标签的作用就是：在网页内容中间划分展示大段引用自古典，古籍或是名人名言的区域。(注意,浏览器在blockquote元素前后添加了换行,并增加了外边距)
链接标签< a >< /a >

<a href="https://wwW.baidu.com target="_blank">百度一下
</a>
href=“网页地址”: href是Hypertext Reference的缩写，
意思是超文本引用，
作用就是让我们可以点击网页的某些内容可以跳转到其他的网页上去target=“页面打开方式”： ‘_blank’新页面打开; _self 默认打开方式,当前页打开

无序列表（Unordered List ）标签

<ul> (在网页内容划分出存放大量内容相似的区域)<li></li>(单个相似内容的区域)<li></li>(单个相似内容的区域)<li></li>(单个相似内容的区域)<li></li>(单个相似内容的区域)
</ul>
*注意ul的子元素只能是li*

在这里插入图片描述
网页中间一些内容相似、结构相仿、布局接近的区域，像这一类区域我们就使用无序列表来进行区域划分

有序列表（ ordered lists ）标签

<ol>(在网页内容划分出存放大量内容相似但是有先后顺序的区域)<li></li>(单个内容相似的区域,内容顺序为的1位)<li></li>(单个内容相似的区域,内容顺序为的2位)<li></li>(单个内容相似的区域,内容顺序为的3位)<li></li>(单个内容相似的区域,内容顺序为的4位)
</ol>
*注意ol的子元素只能是li*

在这里插入图片描述
网页中间还有一些内容相似、结构相仿、布局接近但是每个区域的内容是有先后关系的的区域，像这一类区域我们就使用有序列表来进行区域划分，这一类区域大多用在详细法律条文、政府公告、产品说明等内容上

自定义列表（ definition list ）标签

<dl>(在网页中划分出存放大量结构相似,无先后顺序的区域)
<dt></dt>(列表内容1的主题名称)
<dd></dd>(对主题名称1的解释)
<dd></dd>(对主题名称1的解释)<dt></dt>(列表内容2的主题名称)
<dd></dd>(对主题名称2的解释)
<dd></dd>(对主题名称2的解释)
</dl>

在这里插入图片描述

听说这些标签从不缺乏展示的机会

图片展示标签 < img>

<img src="https://bkimg.cdn.bcebos.com/pic/77c6a7efce1b9d16ff80d1b1fddeb48f8d54649e?x-bce-process=image/watermark,g_7,image_d2F0ZXIvYmFpa2UxMTY=,xp_5,yp_5" 
alt="勒布朗詹姆斯"width="261" height="393">src=“图片地址”:src是sourse的缩写，表示我们需要显示的图片文件所在的位置alt=“图片名称”：每个图片都是为了展示某些内容，
alt里面的文字则是为了描述图片内容的width=“图片文件的实际宽度”：用以标注图文文件的实际高度，
此处高度数据不可修改，不可因为布局需要改成其他非实际尺寸height=“图片文件的实际高度”

路径问题 (图片出不来可能是路径出了错)
src: 路径写法,不能出现中文
相对路径: 从本地文件(该代码所在文件的当前位置)
出发寻找到目标文件
./ (当前目录)
…/(上级目录)
…/…/(上上级目录)类推
绝对路径:
从本地: D:/project/demo/pic.jpg 不推荐使用(按照此方法展示的图片只能在自己电脑上看到,在别人电脑上看不到)
从网络: :https://www.baidu.com/img/blabla.jpg

音频展示标签 < audio></ audio>

<audio src="https://www.tukuppt.com/muban/lyjdvrmo.html" controls=“controls”></audio>
audio标签的作用就是在网页上展示一个音频文件，
这个标签也是HTML5时代的一个代表性存在src=“视频地址”:src是sourse的缩写，
表示我们需要显示的视频文件所在的位置controls=“controls”：这是音频文件的控制按钮区域

视频展示标签 < video>< /video>

<video src="https://v.qq.com/x/page/o0026lhdazp.html" controls=“controls”></video>
video标签的作用就是在网页上展示一个视频文件，
这个标签也是HTML5时代的一个代表性存在src=“视频地址”:src是sourse的缩写，
表示我们需要显示的视频文件所在的位置controls=“controls”：这是视频文件的控制按钮区域

(以上图片来源于网络)

这篇关于那些天天与我们见面的标签,不知道你就out了的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！