第一个网页
使用软件: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>
上面这段代码只在body元素中添加了两个元素,a元素和h1元素。
如果安装了Live Server插件,在空白处点击鼠标右键,点击Open With Live Server,会在浏览器中生成网页并自动打开网页。
效果如下: