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 基本结构标签相关推荐

web前端复习系列[1]——标签
<h1>一般用于网站标题. 加入强调语气,使用和标签. 表示强调, 表示更强烈的强调.并且在 ...
web前端基础（05htmlimg标签和滚动标签）
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>< ...
web前端——div和span标签
div和span标签都是用来帮助页面进行排版的,它们两个没有自己的语意. div:块级元素,所谓的块级元素,就是可以通过css设置宽高等一些大小的样式,这样的元素标签称为块级元素.块级元素的特点是自己 ...
html取消图片选中效果,web前端：取消a标签在移动端点击时的背景颜色
背景(background)属性定义元素的背景效果元素的背景区包括前景之下直到边框边界的所有空间.因此,内容框与内边距都是元素背景的一部分,且边框画在背景上.css允许应用纯色作为背景,也允许使用背景 ...
WEB前端之html img标签引用本地图片
我觉得语法大家都应该明白怎么写 <img src="img/demo.PNG">很简单但是我在第一次写的时候总是出现图片加载不出来的情况然后发现只要把图片文件夹放 ...
2020大厂web前端面试都喜欢问这些
本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题.通过对本篇知识的整理以及经验的总结,希望能帮到更多的前端面试者. 1.web前端项目的结构是怎样的?文件有哪些命名规范? ...
前端面试技巧和注意事项_2020大厂web前端面试常见问题总结
本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题.通过对本篇知识的整理以及经验的总结,希望能帮到更多的前端面试者. 1.web前端项目的结构是怎样的?文件有哪些命名规范? 项 ...
针对WEB前端新人的前端知识体系
现在谈到WEB前端的技术结构.知识体系,都会搞出一个非常大.枝叶非常多且细的相当宏大的思维导图,就像这种的,这种大而全的图示对新人来讲,太大了,不好掌握,而且容易在其中迷失.我想今天和大家谈一下针对新 ...
Web前端学习（千锋）
Web前端学习一 . 选择器标签选择器群组选择器(分组选择器) 通配选择器层次选择器属性选择器伪类选择器结构性伪类选择器二 . css继承三 . css优先级四 . css盒子模型 ...
【Web前端初学笔记】②HTML基本结构标签，VSCode工具创建页面，网页开发工具
文章目录一.HTML基本结构标签二.VSCode工具创建页面三.网页开发工具 1. 基本骨架 2. 文档类型声明标签 3. lang语言种类 4. 字符集 `Character set` 一.H ...

Web前端 HTML 基本结构标签

Web前端 HTML 基本结构标签相关推荐

最新文章

热门文章