HTML：元素组成 / 文档结构 / 文字标签 / 注释 / 语义 / 转义·源栈课堂·一起帮

HTML：元素组成 / 文档结构 / 文字标签 / 注释 / 语义 / 转义

点击观看清晰的B站视频

当前系列： HTML和CSS

B站视频地址

说在前面

小前端：入门基础知识，力求简洁实用，供侧重于后端的同学学习

大前端：对JavaScript/ECMAScript更深入细致的理解，和前后端分离后前端流行框架vue.js，供侧重于前端的同学学习

元素（element）

复习：HTML是什么？

学习HTML，其实就是学习一系列的标记（markup），而标记的核心就是元素。

元素由标签（名）、属性和文本内容组成，比如：

<h1 style="color:red">一起帮·源栈欢迎您！</h1>

其中：

元素（element）：整个这一行就是一个元素
标签（tag）：h1，又分为开始标签（<h1>）和结束（</h1>）标签
文本（text）：一起帮·源栈欢迎您！，放置在开始标签和结束标签之间
属性（attribute）：style="color:red"，放置在开始标签中，又分为

属性名：等号（=）左边，style
属性值：等号（=）右边，color:red，用双引号（）括起来。
注意，这个双引号必须是半角的，而且以后我们学习的所有语言，所有的标点符号，都是半角的！

演示：依次取消标签和属性之后，页面呈现的变化。

元素嵌套

即：一个元素中还可以包含另外一个或若干个元素。（演示）

这是HTML非常重要的一个特性！

元素嵌套不仅仅可以为HTML提供丰富呈现，还是（以后我们将要学习的）DOM树的基础。

PS：有了嵌套，元素和元素之间就会形成类似于树（复习）的层级关系。

但是注意：元素不能任意嵌套。至于应该如何嵌套，除了查文档（MDN）：

一是按语义理解，比如body是正文，title是页面标题，所以页面正文中就不应该有页面标题。
二是看Visual Studio（VS Code默认还没有）提示，如果违反了HTML语法标准，VS会有波浪线提示：

HTML文档结构

VS中生成的html页面为我们提供了一个（HTML5）标准的html文档框架：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <!--标题-->
    <h1>一起帮·源栈欢迎您！</h1>
</body>
</html>

以这种格式组织的html文件被称之为HTML文档。严格的说，一个HTML文档才是一个（完整的）网页，否则就只是一个片段。

文档声明

文档顶部的

<!DOCTYPE html>

被称之为：文档声明。

（向浏览器）指明该文件的文档类型（Document Type）是html。

这是HTML 5的写法，浏览器会（应该）按HTML5规范进行解析。

嵌套结构

此外就是一个嵌套结构：

html：文章的顶级标签
- head：头，里面的内容一般不予显示
- body：正文，由浏览器显示的内容

这三部分内容也（应该）是必不可少的。

PS：此后不再强调“应该/必须”是指的“按规范”应该，“按规范”必须……

head元素

head中的内容通常用于指示浏览器：

<head>
    <!-- 编码格式utf-8 -->
    <meta charset="utf-8" />
    <!-- tab上标题 -->
    <title>首页·一起帮</title>
    <!-- tab上图标 -->
    <link rel="shortcut icon" type="image/ico" href="/Images/logo.ico" media="screen" />
</head>

head中还有一些常用标签可用于SEO：

<head>
    <!-- SEO用的描述和关键字 -->
    <meta name="description" content="大神自由飞的原创首发精品文章，菜鸟入门编程开发必看……" />
    <meta name="keywords" content="源栈 一起帮 自由飞" />
    <!-- tab上标题 -->
    <title>首页·一起帮</title>
</head>

（演示：略）

文字类标签

code is everything！

    <!--标题-->
    <h1>一起帮·源栈欢迎您！</h1>
    <h2>飞哥祝你学习进步，早日年薪过万！</h2>
    <!--还可以有h3,h4,h5,h6-->     <!--段落：注意HTML解析时忽略文本中的换行-->
    <p>你觉得这些选择本身，真的能够决定你的人生成败么？
         真正决定成败的，不是你选择之后的付出和努力么？你只是不敢选！
         所以随波逐流。你需要精神的力量，所谓勇气。
         而勇气，来源于鸡汤（划掉），来源于真心。
         只有当你真心想做一件事的时候，你才能迸发出你最大的热情，从而最全力以赴最持之以恒的投入，因此最有可能取得成功
         ——退一万步讲，就算不那么成功，做着自己喜欢做的事，开开心心一辈子也赚到了。</p>
    <p>同样有用的，还有榜样。榜样的力量是无穷的。</p>

    <!--换行-->
    我应该扪心自问：<br />
    我应该      扪心自问：<br /><!-- 多个空格会被省略成一个半角空格 -->
    我是在做个生意呢，还是在做一件事业？<br />

    <!--标注-->
    <i>教育是人照亮人。</i><br />
    <b>我有没有尽我最大的努力，去照亮他们？</b>

节选自飞哥的：教学质量还是招生营销？2020年，我理想主义一次

注意以上代码还包含了以下知识点：