HTML基本语法-标签

小袁拒绝摆烂

已于 2023-02-25 16:38:53 修改

阅读量266

点赞数

分类专栏： # html+css+js 文章标签： html css 前端

于 2023-02-22 20:09:45 首次发布

本文链接：https://blog.csdn.net/y_k_j_c/article/details/129159019

版权

html+css+js 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

默认

无论是自己设计还是公司开发
以后名为
index就是我们整个项目（网站）的首页

注释

注释就是帮助我们理解的解释
本身不参加编译

HTML里面的注释

<!--这是被注释的内容-->

我们也可以直接使用ctrl+/（快捷键）
来实现光标行注释

标签基础认知

标签构成

在这里插入图片描述
有双标签-开始和结束
就之前的加粗标签和标题标签

标签关系

父子关系（嵌套关系）

比如上面的meta标签和title在head标签内部
这种技术父子关系

兄弟关系（并列关系）

我们的head，body标签就是兄弟关系
在这里插入图片描述
下面是一些具体的标签

排版标签

标题标签

双标签在这里插入图片描述
只有六个，标签内的内容加粗，文字变大，从h1->h6字体大小递减
还会自动换行（独占一行）

<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h6>这是六级标题，一共也只有六级标题</h6>
</body>

这就是我们的
运行的结果在这里插入图片描述

段落标签

在这里插入图片描述

<p>这里是第一自然段-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</p>
<p>这里是第二自然段</p>

在这里插入图片描述
特点：独占一行（上面的因为显示问题会自动换行）
一个段落的最后一行会和新的段隔一行

换行标签

单标签
在这里插入图片描述

<br>这就是换行标签

<p>这里演示换行操作，<br>现在的语句就到了下一行了</p>

在这里插入图片描述

水平线标签

在这里插入图片描述
水平线也就是
红线上面的那条线
代码

<h1>这是一级标题</h1>
<hr>
<h2>这是二级标题</h2>
<hr>

在这里插入图片描述

文本格式化标签

在这里插入图片描述
一些文本标记
加粗什么的
左边和右边的标签效果一下都为双标签，标签里的内容，会对应格式输出

<body>
<b>加粗</b>
<strong>也是加粗，想要强调就用单词</strong>
<u>下划线</u>
<ins>也是下划线</ins>
<i>倾斜</i>
<em>也是倾斜</em>
<s>删除线</s>
<del>也是删除线</del>
</body>

效果
在这里插入图片描述

媒体标签

图片标签

在这里插入图片描述
标签属性（图片来源）这么写

src属性
同一个文件夹下

直接写./图片名.文件后缀
.就是当前的意思，在同一个文件夹寻找

效果

注意属性之间用空格隔开

alt属性是替换文本-如果图片找不到-显示失败就替换为alt文本
在这里插入图片描述

title属性

效果

width和height

宽度和高度
注意：图片有比例，值设置高度/宽度，程序会自动设置另一个防止变形
如果都设置，如果设置不合理就会变形

路径

比如图片的src
有时候不在同一个文件夹怎么办
学习一下路径（路径本身不是标签）

绝对路径（了解）

绝对路径
用的比较少，从盘符开始，你把这个程序发给别人，可能人家电脑没有对于的盘，所以工作一般是相对路径
也可以用图片url，不过需要网络

相对路径

从当前文件找目标文件

分为三个目录
父级目录，子级目录，同级目录
在这里插入图片描述
同级别

加不加.都可以
下级目录

下级的话，先写同级的文件夹，在一直到对于文件在的文件夹后写对应文件即可
上级目录

返回上个文件夹

../就是到上一级的文件夹目录了

音频标签

在这里插入图片描述

只有写controls才有这种效果不然是什么都不显示的
在这里插入图片描述

autoplay：自动播放（有的浏览器不支持）
loop:循环播放，直接写上、

<audio src="喜欢的音乐.mp3" controls autoplay loop></audio>

视频标签

在这里插入图片描述

不写controls没有暂停播放，可以用autoplay+loop
来实现一种广告效果
在这里插入图片描述

<video src="./英语期末.mp4" controls autoplay muted loop></video>

muted
就是会在视频开始的时候静音
在这里插入图片描述

超链接

在这里插入图片描述

属性：href>文本:跳转的网址（或者路径网页文件就ok）,后面的>是替换链接的文本，当网页开发初期不知道跳哪里可以先写一个#(空链接)会回到当前文件
但是你点链接是会自动替换你原来的网址，想要开心窗口的话 target:两个值1._self(默认的)跳转窗口覆盖原网页2._blank保留原网页，新建窗口跳转
注意所有属性都在>文本的前面奥

<a href="https://www.baidu.com" target="_blank">百度 </a>
<a href="#">空链接捏</a>

在这里插入图片描述

整个源代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<h1>排版标签</h1>
<h2>段落标签</h2>
<p>p标签为段落标签，双标签，独占一行</p>
<h2>换行标签</h2>
<p><br> br为单标签，换行标签</p>
<h2>水平线标签</h2>
<p>就是这样的效果
<hr>    hr标签单标签</p>
<h1>文本格式化</h1>
<p>四组，两两对应，b和strong对应为加粗，u和ins对应为下划线，i和em对应为倾斜，s和del对应为删除线，都是双标签奥
<b>加粗</b> <u>下划线</u>    <i>倾斜</i> <s>删除线</s></p>
<h1>媒体标签</h1>
<h2>img-图片标签</h2>
<p>图片标签的：属性src（路径），alt：当图片显示不成功的替换文本，title：鼠标悬停在图片上显示的文本，width和height：宽和长，
    设置一个另一个会跟着边，都设置的话不合理的话图片会变形，注意属性之间还有标签和属性之间有一个空格</p>
<img src="./boy.png" alt="找不到捏" title="帅哥" width="100">
<p>路径的知识点什么绝对路径相对路径什么的，自己了解一下，一般都是用相对路径奥</p>
<h2>audio-音乐标签</h2>
<p>属性：src：音频路径，controls 直接打上可以显示播放的控件，autoplay：自动播放（有的浏览器不支持），直接写上 loop:循环播放，直接写上</p>
<audio src="喜欢的音乐.mp3" controls  loop></audio>
<h2>video-视频标签</h2>
<p>属性src:视频路径，controls：显示暂停静音进度什么的，autoplay：自动播放，muted：开始播放时静音，loop：玄幻播放</p>
<video src="./英语期末.mp4" controls autoplay muted loop></video>
<h2>a-超链接</h2>
<p>属性：href>文本:跳转的网址（或者路径网页文件就ok）,后面的>是替换链接的文本，当网页开发初期不知道跳哪里可以先写一个#(空链接)会回到当前文件
但是你点链接是会自动替换你原来的网址，想要开心窗口的话 target:两个值1._self(默认的)跳转窗口覆盖原网页2._blank保留原网页，新建窗口跳转
注意所有属性都在>文本的前面奥</p>

<a href="https://www.baidu.com" target="_blank">百度 </a>
<a href="#">空链接捏</a>


</body>
</html>