(5)从零开始学前端(学习笔记)-JavaWeb-HTML-初始代码解析
本人自学两年，想通过笔记来帮助一些刚入门的小白快速的了解前端知识，如果喜欢这个系列，可以点赞评论支持一下嘛，谢谢各位啦
纯手打非复制，如有错误可以在评论区纠正，、+感谢支持
--续借上集--
前言
在使用VScode写HTML的静态页面的时候，我们通常都用字符"!"来一键生成初始代码，那么有多少初学者不清楚初始代码有什么作用呢，那么就随我来一起了解一下我们那些年快速生成的初始代码。
(注：在VScode中创建一个新的空html文件中输出字符"!"按下回车即可生成初始代码)
[HTML] 纯文本查看 复制代码 <!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>
标签解析
1.<!DOCTYPE>
DOCTYPE标签是文档类型的声明，目的就是告诉语言解析器此页面使用何种声明；
解析模式： 怪异解析，浏览器使用自己自带的解析模式来渲染页面。
标准解析，浏览器使用W3C（负责统一web相关的各项标准的组织）的标准解析渲染页面。
举个栗子：如果没有该标签作为页面首行的话，该页面就会使用怪异解析模式，存在的问题就在于CSS兼容性不高，有很大程度上会在两个浏览器中显示两种样式，反之则使用标准解析模式，出现的CSS兼容性问题会少很多。
所以强烈建议各位在写代码的时候一定要记得加此标签！
2.<html>
html标签又被称作整个html页面的起始标签，因此所有关于html文件的代码都因当写在此标签里面。
作用：告诉浏览器解析的文件为html文件，以html渲染页面，且具有唯一性（一个html页面有且仅有一个html标签）
3.<head>
head，翻译过来就是头，顾名思义就是整个html页面的核心代码，在head中可以引入其他类型的文件（譬如：css、js、less、ico等等）是整个html页面中不可或缺的一部分
作用：可以给与页面附加信息，添加其他类型文件，更改文件标题等等，且具有唯一性（一个html页面有且仅有一个head标签）
4.<meta>
meta标签是给浏览器提供额外信息的标签，可以添加更改页面的配置文件（meta的属性和属性方法也是很多，如果后续遇到也会进行详细讲解，这里就讲解一些经常遇到的属性）。
作用：添加页面配置信息，标签本身兼容所有版本浏览器，标签属性兼容性存在很大问题
5.<title>
title标签是head标签中唯一要求包含的标签，一般显示浏览器标题栏logo的右方
作用：给浏览器添加标题，该标题也会成为该页面的主要名称，无论是添加收藏夹还是添加快捷方式此标题都是默认文字，且具有唯一性（一个html页面有且仅有一个title标签）
6.<body>
body标签是整个html的主体，因此所有页面上显示的图片、文字、视频...都应写在此标签里
作用：存储所有html用来显示的标签，是html文件中非常重要的标签，且具有唯一性（一个html页面有且仅有一个body标签）
标签属性解析
1.<html lang=“en”>
lang属性意思就是设置html文档的语言为英语，English简写en
2.<meta charset="UTF-8">
UTF-8是字符编码，这里用UTF-8主要还是里面设置了多国家语言，可以更好的兼容多国家的代码注释需求，charset属性是设置字符编码类型，给html页面字符编码设置为UTF-8
3.<meta http-equiv="X-UA-Compatible" content="IE=edge">
X-UA-Compatible是针对ie8设置的推出的特殊文件标签，目的是为了兼容低版本浏览器，content属性是设置主要兼容什么版本（ie6，7，8等等，edge是ie9）。
4.<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport标记，是用来指定用户是否可以缩放Web页面，并对相关的选项进行设定。
device-width表示，可观测宽度设置为设备的屏幕宽度。与他相同类似的属性，device-height表示，可观测高度设置为设备的屏幕高度。
initial-scale用来设置Web页面的初始缩放比例。默认的初始缩放比例和手机的浏览器有着不同的差异，所以通常情况下，设备会在浏览器中呈现出整个Web页面。设为1.0则显示未经缩放的Web页面。（年代久远的页面，没有手机端的页面也能正常使用）
总结
本文主要内容：HTML的初始代码（其中包括：<!DOCTYPE>标签，<html>标签及其属性，<head>标签及其属性，<meta>标签及其属性，<title>标签，<body>标签，<meta>标签及其属性），后续也会推出续集。希望大家能持续关注 谢谢大家能够看到这里，如果觉得对你有帮助的话，可以点赞评论支持一下嘛谢谢各位啦
| 
[复制链接]
发表于 2022-3-26 08:47
