HTML零基础入门教学

标签名 (body) 放到 < > 中。

大部分标签成对出现。为开始标签，为结束标签。

少数标签只有开始标签，称为 "单标签"。

开始标签和结束标签之间，写的是标签的内容。 (例如上面的hello)

开始标签中可能会带有 "属性"。 id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码)。

<body id="myId">hello</body>

三. HTML文件基本结构

下面我们来看看一个基本的HTML文件结构式什么样的。打开记事本，新建一个文件，写上下面的代码：

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
       hello world
    </body>
</html>

然后保存这个文件，文件后缀为.html。

双标签：有开始有结束

html 标签是整个 html 文件的根标签(最顶层标签)
head 标签中写页面的属性。
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题。

标签之间的结构关系，构成了一个 DOM 树：

DOM 是 Document Object Mode (文档对象模型) 的缩写。

所有的标签都是HTML的子标签。head与body是兄弟标签，head和title是父子标签。

每一个标签相当于是一个对象，程序员可以通过代码拿到这些对象，拿到之后可以对这些对象进行增删查改。

我们双击运行上面的html后缀文件，就可以打开浏览器如下：

按下F12就可以出现上图右边的代码显示。

四. 准备开发环境

在企业中我们习惯于使用VsCode软件来进行Web开发。还没有安装VsCode的小伙伴可以移步我这篇文章（vscode配置C/C++环境（保姆级详细教程）_vscode配置c++环境-CSDN博客）。

我们这里主要讲一下如何搭建Web开发的配置。我们点击VsCode左侧扩展图标：

在里面搜索安装三个扩展，分别是：

好勒。环境配置完毕，下面可以开始进行第一份正式代码编写了！！！

五. 快速生成代码框架

直接输入！+回车即可生成以下代码：

这里讲一下浏览器解码规则：

假如我们设置编码规则为 UTF-8：

那么打开网页效果为：

是可以正常显示的。而如果编码规则改为 ISO，那么：

这里就变成了乱码。

六. HTML常见标签

6.1 注释标签

注释不会显示在界面上. 目的是提高代码的可读性。

<!-- 我是注释 -->

ctrl + / 快捷键可以快速进行注释/取消注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 这是注释 -->
</body>
</html>

6.2 标题标签：h1-h6

有六个，从h1-h6，数字越大，字体越小：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 这是注释 -->
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>
</body>
</html>

6.3 段落标签：p

把一段比较长的文本粘贴到 html 中, 会发现并没有分成段落。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 这是注释 -->
    css中的1px并不等于设备的1px
    在css中我们一般使用px作为单位
    还有一个因素也会引起css中px的变化
    在移动端浏览器中以及某些桌面浏览器中
</body>
</html>

虽然我们在HTML编写时进行了换行，但是实际在浏览器页面打开换行变成了一个空格：

是并没有换行的。 在body中的换行，实际在页面上显示是一个空格。如果我们想要一段一段的显示，那么需要用到p标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 这是注释 -->
    <p>中的1px并不等于设备的1px</p>
    <p>在css中我们一般使用px作为单位</p>
    <p>还有一个因素也会引起css中px的变化</p>
    <p>在移动端浏览器中以及某些桌面浏览器中</p>
</body>
</html>

注意：

p 标签之间存在一个空隙

当前的 p 标签描述的段落, 前面还没有缩进。 (未来 CSS 会学)

自动根据浏览器宽度来决定排版。

html 内容首尾处的换行, 空格均无效。

在 html 中文字之间输入的多个空格只相当于一个空格。

html 中直接输入换行不会真的换行, 而是相当于一个空格。

6.4 换行标签：br

br 是 break 的缩写。表示换行。

br 是一个单标签(不需要结束标签)
br 标签不像 p 标签那样带有一个很大的空隙.
<br/>是规范写法。不建议写成<br>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 这是注释 -->
    <p>中的1px并不等于<br/>设备的1px</p>
    <p>在css中我们一般使用px作为单位</p>
    <p>还有一个因素也会引起css中px的变化</p>
    <p>在移动端浏览器中以及某些桌面浏览器中</p>
</body>
</html>

换行标签换行之后间隙比段落标签间隙小。

6.5 格式化标签

加粗: strong 标签和 b 标签
倾斜: em 标签和 i 标签
删除线: del 标签和 s 标签
下划线: ins 标签和 u 标签

<strong>strong 加粗</strong>
<b>b 加粗</b>

<em>倾斜</em>
<i>倾斜</i>

<del>删除线</del>
<s>删除线</s>

<ins>下划线</ins>
<u>下划线</u>

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 这是注释 -->
    <p>中的<strong>1px</strong>并不等于<br/>设备的1px</p>
    <p>在css中<em>我们一般使用</em>px作为单位</p>
    <p>还有一个<del>因素</del>也会引起css中px的变化</p>
    <p>在<ins>移动端浏览器</ins>移动端浏览器中以及某些桌面浏览器中</p>
</body>
</html>