HTML 快速入门_idhttp <!doctype html>.-CSDN博客

本文链接：https://blog.csdn.net/liyananBest/article/details/107473233

文章目录

HTML

HTML

HTML学习

一、什么是 HTML

HTML（Hyper Text Markup Language 超文本标记语言）。超文本包括：文本、图片、视频、动画等等。

二、HTML 基本结构

HTML基本结构.jpg

像 <body></body> 这样成对叫做标签，分别叫开放标签和闭合标签。
还有一种标签没有闭合标签，比如换行标签   这种叫自闭合标签，加一个 / 来自己闭合标签。
meta 标签是描述网站的信息，我们使用浏览器搜索东西时，输入要搜索的内容，就会匹配一些相关文章，其实就是搜索 meta 标签的内容，比如博客的摘要内容就是放入 meta 标签中的。

打开百度，搜索 Java，然后随便打开一个网页，按下鼠标 F12，打开开发者模式，我们看一下 meta 标签：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BuN86b2h-1595249721666)(https://i.loli.net/2020/07/10/z246r1xdSsGVojy.jpg)]

浏览器将我们输入的内容和 meta 内的描述进行对比，有相似内容的网页就列出来。

三、HTML 基本标签

1、标题标签

标题总共有六个级别：h1 ~ h6，越小的数的标题在页面上显示的越大。

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

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

</body>
</html>

可以看一下页面上的效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5MXi6QKi-1595249721668)(https://i.loli.net/2020/07/10/dTrG9nIDXuq3PWo.jpg)]

2、段落标签

段落标签是 ，用来分段的。我们想在网页上显示一个文章，文章都有很多段落，于是我们像下面这样写：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7Fa0SIGR-1595249721670)(https://i.loli.net/2020/07/10/ih2T9y8jSa3HkuV.jpg)]

我自己手动的空了行，但实际上这行不通的，我们看一下页面效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KjCbvnyA-1595249721673)(https://i.loli.net/2020/07/10/586tsbeWYr2uEVF.jpg)]

可以看到这些字挤在一起了，这个时候我们就要用到段落标签了，在代码中加上段落标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签学习</title>
</head>
<body>
<p>
    人生的高度，是自信撑起来的。人与人相比，只有境遇的不同，成功者，也都不是三头六臂之人。很多时候，我们不是欠缺成功的筹码，
    而是欠缺自信。所有的路，只有脚踩上去了才知其远近和曲折。敢走第一步，并坚持下去就是一种自信和勇气。认为自己不行，你就真的永远不
    行了。自信，是人最大的潜能。
</p>
<p>
    有时候你会担心自己做不到或者做不好，被别人嘲笑，于是犹豫再三之后放弃了机会，可是看到别人成功做到之后又会怨恨自己的懦弱。抛掉
    胆小的理由，很多事情只有尝试了才会知道自己能否做到。生命是短暂的，机会是有限的，抛掉胆小的理由，勇敢地抓住生命中每一个值得努力的
    机会，不需要再害怕什么，因为你已经尝试过、努力过。除了你自己，没有人有资格看不起你。
</p>
</body>
</html>

这个时候两个段落就分开了，来看一下页面效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ClSdpZYx-1595249721675)(https://i.loli.net/2020/07/10/OV6DSPsZKkrgQp1.jpg)]

3、换行标签

换行标签是  ，我们在 HTML 中写的内容如果想要另起一行，自己手动另一起一行是不行的，就会用到换行标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签学习</title>
</head>
<body>
123 
567
</body>
</html>

像这样，是无法换行的。

不加换行标签

加上换行标签后：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签学习</title>
</head>
<body>
123 <br/>   
567 <br/>
</body>
</html>

就可以看到，已经换行成功

加上换行符后.jpg

4、水平线标签

水平线标签是 <hr/>，会在网页上画一道横线：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签学习</title>
</head>
<body>
<p>
    长歌行⑴
    青青园中葵⑵，朝露待日晞⑶。
    阳春布德泽⑷，万物生光辉。
    常恐秋节至⑸，焜黄华叶衰⑹。
    百川东到海⑺，何时复西归?
    少壮不努力⑻，老大徒伤悲⑼。
</p>

<hr>
<p>
    长歌行⑴ <br/>
    青青园中葵⑵，朝露待日晞⑶。 <br/>
    阳春布德泽⑷，万物生光辉。 <br/>
    常恐秋节至⑸，焜黄华叶衰⑹。 <br/>
    百川东到海⑺，何时复西归? <br/>
    少壮不努力⑻，老大徒伤悲⑼。<br/>
</p>
</body>
</html>