<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>空白页面</title>
<!-- 引入外部的css -->
<link rel="stylesheet",href="xx.css">
</head>
<body>
<!-- 空白页面 -->
<!-- 引入外部的javascript -->
<script src="xxx.js"></script>
</body>
</html>
<!-- 引申的问题：
DOCTYPE：
它是页面的身份证，告诉浏览器用什么版本的 html去解析页面。
如果不写的话，会造成怪异模式的出现,比如说可能引发样式的兼容性问题，
原本设计的宽高可能包含内容区内边距边界，但触发怪异模式宽高就是内容区部分，会引发兼容性问题。
这个要放在第一行，且前面不能有注释，要不然也会触发怪异模式。
lang:
用来指定html的语言
head：
这是html语义化标签的一种体现吧，指定网页的头部。
比如说标题，还有一些页面所需要的css样式在这里面引入，还有meta标签之地那个html的属性相关内容。
另外里面的title标签是必不可少的。
meta标签是元信息用来描述html的属性。
比如使用charset指定html的编码类型utf-8，
比如使用name指定keywords或者description指定网页简介，能够进行搜索引擎优化，
比如使用name指定viewport进行移动端适配
比如使用http-equiv指定浏览器的重定向和刷新。
title用来指定页面的标题
css外部的引入方式
css的引入方式一般有两种一种是使用link标签的形式使用href属性关联到外部css资源。
另外还有内联样式和style标签的内嵌样式。
一种是使用css提供的@import引入在style标签里使用@import url的形式与外部资源建立关联，
这种不建议使用，它是同步加载的，如果加载过慢的话，会阻塞页面的渲染。
一种是html提供的link标签，使用href建立与外部css资源的关联，
这种引入方式是异步加载的，在加载css文件的同时不耽误浏览器对后面内容的解析，不会出现阻塞html渲染的情况出现
css的引入可以放到最下面吗？
可以放到body的底部，但是不建议，因为使用link标签的href属性本来就是异步加载的，放到最下面，异步加载这个特性就起不到作用了。
可能会出现用户先看到html的结构然后再看到css的样式这种情况。引发页面的布局跳动。
body
他也是htmL语义化标签的一种体现，里面写的内容一般都是呈现在页面中的内容。
script标签中defer和async属性
他们决定了脚本的加载方式
首先说普通的script标签，当浏览器解析到普通的script标签的时候会暂停解析，下载执行里面的内容，执行完毕后才会继续进行html的解析。所以说一般写script标签就会放到body最后。
如果在script里面添加了async属性，就代表异步加载，遇到script时，会在解析html的同时进行js代码的引入，如果引入完成就会执行，无需管html是否解析完毕，所以说有可能导致阻塞渲染。最常见的就是广告脚本。
如果在script里面添加了defer属性，就代表延迟加载，遇到script时，也会在解析html的同时进行js代码的引入，但是他会等html解析完成后再去执行，不会阻塞渲染。一般依赖dom的脚本都会使用defer或者将script的引入放在最下面，要不然还没解析完就使用dom就会出错。
src和href的区别？
他们两个都是用来引用外部的资源，区别如下：
使用src引用的内容会替换当前元素,script标签和img里面会用到。使用src属性的标签是同步加载的有可能会阻止页面的渲染。所以说script一般放到代码的最下面。
使用herf会建立关联到外部资源，a标签和link标签会用到。而href它是异步加载的不会阻塞页面的渲染，所以说一般使用href来引入css文件，这样不会阻塞页面的渲染。
html语义化的理解
html语义化的核心是见名知意。
不仅方便程序员进行代码的书写，提升开发效率。还方便浏览器进行seo搜索引擎优化。另外就是语义化标签对读屏软件提供了支持，方便视障人士使用。
常见的有：
html新增的标签
布局标签：新增了许多语义化的标签，比如header页面头部标签，footer页面底部标签，main页面内容标签，nav导航标签，artile文章标签，section章节标签，aside侧边栏标签等。
媒体标签：里面的video视频标签和audio音频标签
状态标签：比如progress进度标签，meter剩余容量剩余库存标签。
表单标签里面新增了很多属性比如说placehold提示文字，required必填项，autofocus自动获取焦点等
input标签单独也新增了很多属性，比如说email邮件，number数字，日期，tel电话等属性。
html5的兼容性处理
添加元信息，在meta标签里面进行设置，强制ie浏览器，使用当前支持最高文档模式，渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
优先使用 webkit内核进行渲染, 针对360等壳浏览器
<meta name="renderer" content="webkit">
-->
