Web前端 HTML 基本结构标签

第一个HTML

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。

标签名	定义	说明
<html> </html>	HTML标签	页面中最大的标签，我们称为根标签
<head> </head>	文档头部	注意在head标签中我们必须要设置的标签是title
<title> </title>	文档标题	让页面拥有一个属于自己的页面标题
<body> </body>	文档的主体	元素包含文档所有内容，页面内容基本都是放到body里面

接下来我们创建一个记事本文件，编写代码，规范的代码编写是要有层级关系的，父子层级和兄弟层级，例如<html>标签是<head>标签的父标签，<head>标签和<body>是兄弟标签。

这样我们可以更加直观的观察我们写的代码。

写好后将txt文件格式改成html文件格式，然后打开

由此可见，我们<title>标签的内容显示在了我们网站的最上面，也就是网页标签

<body>标签的内容显示在了我们网页内容部分里

以上的标签是html的基本标签，也是骨架标签，是每个网站必须要有的标签，需要牢记。

下面请我们的小猪佩奇来给我们演示一下，这些基础标签分别代表着网页的什么部分

代码开头我们可以用<!DOCTYPE html>标签来声明使用的html版本（这个是文档类型声明标签，所以并不属于html里面的内容，要把这个标签写在第一行）

<html>标签，网页最大的标签，也就是根标签，所有标签都要写在这个标签里面。

<head>标签，文档的头部，小猪佩奇的头（鼓风机），用于设定一些网页的属性

<title>标签，网页标题，放在<head>标签里，也是头部标签必须要有的标签

<body>标签，文档的主体，页面内容基本都是放到<body>标签里面。

用记事本文件编写有很多的不便利，代码都要自己一个个敲写，个人觉得新手刚学可以用用基础的记事本文件，可以加深印象，有基础后可以使用上面的工具，写网页的工具很多，但写代码都差不多，只要学会其中一种，其他的就都很容易上手。

可以按照自己的爱好下载自己喜欢的编写代码的工具

下面我们用VSCode演示一下编辑过程

VSCode的使用
1.双击打开软件。
2.新建文件(Ctrl+N )。
3.保存(Ctrl+S ),注意移动要保存为.html文件
4.Ctrl +加号键, Ctrl +减号键可以放大缩小视图
5.生成页面骨架结构。
输入!按下Tab键。
6.利用插件在浏览器中预览页面:单击鼠标右键,在弹出出口中点击"Open In Default Browser"。

这个软件默认是英文，可以安装一个中文插件

推荐安装的插件

这是一个注释标签，搜索引擎不会读取，就像Python的#号和""" """一样，起到注释代码的作用，可以方便起到维护和阅读的作用。

<!DOCTYPE html>     <!--告诉浏览器这个页面使用html5版本来显示页面的-->
<html lang="en">     <!--lang="en"告诉浏览器或搜索引擎这是一个英文网站-->>
<head>
    <meta charset="UTF-8">     <!--必须写的代码，采取UTF-8编码格式保存文字，如果不写容易导致网页乱码或显示错误。-->>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这里可以写网页标签</title>
</head>
<body>
    这里可以书写页面显示内容
    <h1>一级标题</h1>    <!--标题共有六个的等级，h1~h6，h1标题为最大的标题-->
    <p>段落标签</p>      <!--可以将一个网页分为若干个段落-->
</body>
</html>

<h1>段落标签</h1>

<p>这是一个段落标签</p>

网页文字内容若想分段，必须用到分段标签，不能想word文档一样可以空格回车换行，浏览器会将多个空格视为一个空格，没有分段标签就不会换行，将所有内容挤在一起。

写网页时可以用若干个 内容 标签将文档分为若干个段落。

<br />这是一个换行标签 (brack的缩写，意为打断、换行)
特殊标签，单身标签，只有一个

在HTML中网页内容通常从左到右排序，到了最右端才会自动换行，若想希望某段文本强制换行显示，则可使用强制换行标签 ，代码在执行到 标签时，会立刻换行，不管右侧空间还有多少，直接换行。

注意： 是个单标签。

若果没有标题标签和分行标签的文章打开就会挤在一团，即使你在写的时候已经分好行了也不行

写好标题标签和分段标签的代码：

Web前端 HTML 基本结构标签

猜你喜欢