这是我参与「第五届青训营 」笔记创作活动的第1天。
什么是HTML?
HTML(HyperText Markup Language) 作为一种标记语言显然是需要用来为什么东西做解释的。而html也正是为了告知浏览器该如何去组织页面而生,也是称之为语义化标签的原因所在。那作为标签,大家就应该不陌生了。标签分为双标签和单标签两种,双标签即是从开始标签起始,结束标签闭合结束,单标签则是一个标签自闭合。所以一个html元素的基本定义是:开始标签、结束标签与内容相结合,便是一个完整的元素
。
HTML有什么?
这是我的VScode编辑器生成的最基础的html模板。可以比较明显发现一个完整的模板中会有head,body标签被html包裹着,接下来让我们来认识一下这个模板的基本标签都有什么含义。
<!DOCTYPE>声明必须位于 HTML5 文档中的第一行,也就是位于<html>标签之前。该标签告知浏览器文档所使用的 HTML 规范。它不属于 HTML 标签,是一条指令,告诉浏览器编写页面所用的标记的版本。
<html lang="en">是W3C 推荐标准,HTML 的 lang 属性可用于网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的,也算是一种书写规范。
<!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>
head标签有什么?
<meta charset="UTF-8">charset 属性规定 HTML 文档的字符编码。UTF-8字符编码基本涵盖世界上的所有国家的语言。
<meta http-equiv="X-UA-Compatible" content="IE=edge">这是IE8的专用标记,是用于指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式以此来解决部分兼容问题。
<meta name="viewport" content="width=device-width, initial-scale=1.0">这个元数据标签主要用来做移动端视窗的适配, content="width=device-width用来设置视窗宽和用户移动端设备实际宽度一致就不会产生水平的滚动条。initial-scale=1.0初始化第一次页面加载时的缩放比例。
title标签元素的内容则是设置文档的标题,用来告诉用户和搜索引擎这个页面的主要内容是什么。
body标签
body标签一般是用来显示页面的主要内容,所以一般需要展示的内容,我们都可以在body标签里呈现,可以在里面写js代码,或者操作dom等。