一个简单html文件的大致结构
<!DOCTYPE HTML> //声明此文档的HTML版本
<html> //告知浏览器其自身是一个 HTML 文档
<head> //定义文档的头部，它是所有头部元素的容器
<meta charset="UTF-8"> //charset 属性规定 HTML 文档的字符编码。
<title>文档标题</title> //这里在浏览器标签标签除显示
<style type="text/css"></style> //嵌入css
<script type="text/javascript"></script> //嵌入js
<link href="xx.css" rel="stylesheet" type="text/css"> //引入外部css文件
<script src="xx.css" ></script> //引入外部js文件
</head> //头部分的结束标签
<body> //里面的内容都是呈现给浏览器的，可视的内容
<div>这里是你想要呈现在浏览器的（可视的）文档内容</div>
<div style="color:red;" >...</div> //内联CSS，直接给元素CSS
<div onclick="alert('点击');"></div> //内联js，直接给元素js
<script type="text/javascript">...</script> //js也可以在body内嵌入
<a href="javascript:alert('点击此处');"> //特殊，行间事件，不推荐使用
</body> //主体的结束标签
</html> //HTML文档的结束标签
html+css+js，三者的关系
1.HTML是网页内容的载体。（内容就是你想要展示给访问者看的信息）。2.css样式是表现。（改变内容外观）
3.JavaScript是用来实现网页上的特效效果。（触发事件；有动画的，有交互的一般是通过js实现的。）
ps：无论css还是js，都推荐引用外部引入，因为这样不仅美观，且易维护。
使用<link>来引用外部的css的优势
（👉引用CSS文件到html网页里方法）
1.有利于SEO，使用此方法引用外部css文件，将使得html页面的源代码少很多比起直接加入css样式，因为搜索引擎蜘蛛爬行网页的时候是不爬行css文件的，这样使得html源代码很少，使得蜘蛛爬行更快，处理更少，增大了此网页的权重，有利于排名。
2.节约html使得浏览器下载网页时候分开线程了，就像加载一个页面同时有两条线在打开一个页面道理，使得网页打开格外快。（用户浏览此网页的时候html源代码和css文件同时下载，使得更加快速）
3.修改网页的样式方便，只需修改css样式即可修改网页的美工样式，如果在网站项目中此方法，因整站应用了共用的css基本样式，这样修改整站风格样式根据快捷方便。
使用<script src="xx.js">来引用外部的js的优势
（👉javascript概念以及js四种引入方式和三种内容输出方式）
1.可维护性：遍及不同HTML页面的JavaScript会造成维护问题。但把所有JavaScript文件都放在一个文件夹中，维护起来就轻松多了。而且开发人员因此也能够在不触及HTML标记的情况下，集中精力遍及JavaScript代码。
2.可缓性：浏览器能够根据具体的设置缓存链接的所有外部JavaScript文件。也就是说，如果有两个页面同时使用一个文件，那么这个文件夹只需下载一次。因此，最终结果就是能够加快页面加载的速度。
3.适应未来：通过外部文件来包含JavaScript无须使用XHTML或注释hack。HTML和XHTML包含外部文件的语法是相同的。
关于css和js的引入方式
-
css的三种引入：（内联式 > 嵌入式 > 外部式）
-
①内联：直接给元素 style
<p style="color: red;"><p> -
②嵌入：（此段代码写在<head></head>里面）
<style type="text/css"> p { color: red;} </style> -
③外部引入：外部创建一个xx.css文件，使用
<link href="xx.css" rel="stylesheet" type="text/css" />引入【注意放在 <head></head>里面】
-
js的三种引入：
-
①内联：直接给元素js脚本
<div onclick="alert('点击');"><div> -
②嵌入：（此段代码写在<head></head>里面）
<script type="text/javascript">js脚本</script> -
③外部引入：外部创建一个xx.js文件，使用
<script src="xx.css" ></script>引入【注意放在 <head></head>里面，且放在 <linke />（css外部样式后面）】 -
④特殊：使用a标签中href属性的伪协议操作
<a href="javascript:alert('点击此处');">
DOM文档的加载顺序是由上而下的顺序加载
👉原文链接：详解关于html，css，js三者的加载顺序问题-
DOM加载到link标签
css文件的加载是与DOM的加载并行的，也就是说，css在加载时Dom还在继续加载构建，而过程中遇到的css样式或者img，则会向服务器发送一个请求，待资源返回后，将其添加到dom中的相对应位置中； -
DOM加载到script标签
由于js文件不会与DOM并行加载，因此需要等待js整个文件加载完之后才能继续DOM的加载，倘若js脚本文件过大，则可能导致浏览器页面显示滞后，出现“假死”状态，这种效应称之为“阻塞效应”；会导致出现非常不好的用户体验；而这个特性也是为什么在js文件中开头需要$(document).ready(function(){})或者（function(){}）或者window.onload,即是让DOM文档加载完成之后才执行js文件，这样才不会出现查找不到DOM节点等问题；js阻塞其他资源的加载的原因是：浏览器为了防止js修改DOM树，需要重新构建DOM树的情况出现； -
解决方法
前提，js是外部脚本；在script标签中添加 defer=“ture”，则会让js与DOM并行加载，待页面加载完成后再执行js文件，这样则不存在阻塞；在scirpt标签中添加 async=“ture”，这个属性告诉浏览器该js文件是异步加载执行的，也就是不依赖于其他js和css，也就是说无法保证js文件的加载顺序，但是同样有与DOM并行加载的效果；同时使用defer和async属性时，defer属性会失效；可以将scirpt标签放在body标签之后，这样就不会出现加载的冲突了。
590
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
