2、HTML基础——尝试写出我的第一个网页、元素的概念_我的第一个网页我的网页标题代码-CSDN博客

本文链接：https://blog.csdn.net/lvh98/article/details/120605091

第一个网页

使用软件：vscode

推荐在vscode中安装的插件：

1、Emmet插件：自动生成HTML代码片段，可以通过tab键结合其特定的语法来实现快速生成包含嵌套结构的批量，此插件是vscode中内置的，而且我也没有进行相关的配置就能直接使用了。

2、vscode-icons：用于设置文件图标样式。

3、Markdown Preview Enhanced：用于预览markdown格式的文件（.md），好处就是预览的样式会比较清爽简洁。

4、Live Server：比较方便在html文件中动态生成网页

1. 注释

注释为代码阅读者提供帮助，注释不参与运行
在HTML中，注释使用以下格式书写：

<!-- 注释内容 -->

注释的快捷输入：Ctrl+/
注释可以写多行

2. 元素element

2.1 元素构成

其他叫法：标签、标记

<a href="http://lib.ustc.edu.cn">科大图书馆</a>

元素 = 起始标记（begin tag） + 结束标记（end tag） + 元素内容 + 元素属性

例如在本上面代码中：

1.起始标记：

<a>

2.结束标记：

</a>

3.元素内容：

科大图书馆

4.元素属性

href="http://lib.ustc.edu.cn"

起始标记和结束标记确定了该元素的名称，例如上述元素的名称即为a

又例如

<title>Document</title>

为元素title

属性 = 属性名 + 属性值

在超链接的例子中，href即为属性名，后面的链接就是属性值。

属性的分类：

局部属性：某些元素特有的属性
全局属性：所有元素通用

有些元素没有结束标记，这样的元素叫做：空元素，例如

<meta charset="UTF-8">

空元素的两种写法：

<meta charset="UTF-8">
<meta charset="UTF-8" />

2.2 元素的嵌套

元素之间不能相互嵌套，例如，下面的写法是错误的

<div>
    <p>
</div>
    </p>

2.3 元素关系

父元素、子元素、祖先元素、后代元素、兄弟元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 超链接 -->
    <a href="http://lib.ustc.edu.cn" title="中国科学技术大学图书馆官方网站">科大图书馆</a>
    <h1 title="this is my first page!">我的第一个网页</h1>
</body>
</html>

meta元素的父元素是head，head元素的子元素是meta；meta元素的祖先元素是html，html元素的后代元素是meta；mata和title元素就是兄弟元素（拥有同一个父元素）

3. 标准的文档结构

HTML书写的是页面或者说是HTML文档，所以必须有一个文档结构，W3C则制定了一个结构标准

1.文档声明，告诉浏览器，当前文档使用的HTML标准是HTML5。
不写文档声明，将导致浏览器进入怪异渲染模式。一般必须写上文档声明。

<!DOCTYPE html>

2.根元素，一个页面最多只能有一个，并且该元素是所有其他元素的父元素或祖先元素。
HTML5版本中没有强制要求书写该元素。

<html lang="en">
</html>

lang属性：language，全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成的。“en"表示使用的英文，若要使用简体中文，则将"en"改为"zh-CN”(旧写法)或"cmn-hans"（现在的写法）。

3.head和body元素，必须作为html元素的子元素出现

文档头，文档头内部的内容不会显示到页面上。

<head>

</head>

文档头需要包含的元素有：

1.文档的元数据：附加信息。

<meta>

charset：指定网页内容编码。
……

2.网页标题（标题内容为Document）

<title>Document</title>

文档体，页面中所有要参与显示的元素，都应该放置到文档体中。

<body>

</body>

4. 生成一个简单的网页

首先可以在一个位置新建一个文件夹，我为了方便就将文件夹建在了桌面上，并命名为“前端学习”，我们可以在文件夹内新建文件或文件夹来构建接下来写的html、css以及md文件的存储位置结构，当然也可以在vscode中打开此文件夹来新建/删除文件或文件夹。
例如在桌面新建好文件夹后，在vscode中打开这个文件夹，

文件 > 打开文件夹 > 找到文件夹所在位置 > 打开

在这里插入图片描述
然后进入正题，在你想放HTML文件的位置上新建文件，注意后缀是.html
接下来就可以在vscode中打开.html文件编写代码了。

首先输入一个"!"（英文），然后回车或Tab，会自动生成一段代码，这里其实是之前开头介绍的Emmet插件发挥了作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

我们现在就可以在body元素中添加一些其他的元素，例如a元素，h1元素等，声明和head元素暂时不用管。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>my_first_page</title>
</head>
<body>
    <!-- 超链接 -->
    <a href="http://lib.ustc.edu.cn" title="中国科学技术大学图书馆官方网站">科大图书馆</a>
    <h1 title="this is my first page!">我的第一个网页</h1>
</body>
</html>