编程导航

文件一分三

前端三件套包括 html、css、js。可以都写在 html 文件里，也可以分开写。分开写便于阅读和修改。 Html 可以理解为物品、对象。CSS 定义了物品的属性：

我觉得这个教程写得稀烂啊。能看出来我想表达什么吗？感觉会很难。

<!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>
    <style>CSS内容</style>
    <div class="container1">  
        <iframe class="container-iframe" frameborder="0"></iframe>  
    </div>
    <script>js内容</script>
</body>
</html>

分开写也可以的。在头中引入 CSS 文件，标签为 link，在同一个项目里，就用相对路径非常方便；也可以引入外部的文件，用链接形式表示。在 body 中引入 js 文件，标签为 script。这符合人们的思维，先确定物品的属性，然后再赋予它动作。

特别的，用链接的形式引入 js 文件后，要定义新的变量 var 和 new 时，代码要放在这个 script 标签后面。很好理解，你要集成一个父对象，那得有才行。而其他的 js 文件放 body 最后没有问题是因为，有对象再赋予它运动，不会出错。这完全是两码事情。

<!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>
    <link rel="stylesheet" type="text/css" href="grid.css">
</head>
<body>
    <div class="container1">  
        <iframe class="container-iframe" frameborder="0"></iframe>  
    </div>
    <script src="1.js"></script>
    <script type="text/javascript" src="grid.js"></script>
</body>
</html>

调试

前端三件套更改文本代码，不借助任何其他生成工具可以直接打开显示网页，方便修改、移植和存储。如何变修改，边显示调试效果呢？

【3小时前端入门教程（HTML+CSS+JS）】 https://www.bilibili.com/video/BV1BT4y1W7Aw/?p=3&share_source=copy_web&vd_source=6b55cb6788b1952e04c06b095d772810

安装：HTML CSS Support 写 css 的快捷神器。安装：Live Server 是实时预览的快捷神器。保存代码后，浏览器将刷新。安装：Auto Rename Tag 是 Html 编写时标签修改的神器，修改标签名后，对应的都会修改。

容器的一些问题

容器没撑起来

之前在 Markdown语法（二）：Html外挂标签中提到关键字 iframe 内联框架的使用，在弹性容器中，如果父容器开始时没有撑起来，即使设置 100% 依旧无法撑开。

容器撑爆了

在弹性容器中，用 flex 。竖向排了两列子容器 A 和子容器 B。但是在子容器 B 中嵌套子容器：一个轮播图容器 swiper。结果就撑爆，设置这个嵌套子容器的宽度为 100% （默认），结果容器 A 和 B，直接变成上下的一列了；设置小于 50% 时，结果是在左右两列的第二列中再缩小 50%。所以这个时候要对容器 B 进行约束：

/* 防止嵌套子容器swiper冲破flex的嵌套子容器 */
.col.right {
    overflow: hidden;
}

不能让它撑破。这里有趣的是在 Html 中，容器名为：

1	<div class="col right">

中间的空格变成点了。还有一个值得注意的是在这个容中还有一个同阶的控制其他特性的容器：

1 2	<div class="col right"> <div class="main-right">

但是控制第二个容器没有效果，因为要直接约束父容器 flex 下的子容器。

这次遇到的问题和博文中是一样的，可以参考：浅析flex布局被子元素内容撑破的问题 - Flex布局中一个不为人知的特性（flex-item项目的最小尺寸问题）。

图标

官网上都有可以用的图标，注意有的是免费的，有的有标记是要花钱的，如果没买直接用花钱的，那么就会无法正常显示。
使用方法很简单，在头文件引入对应的 CSS 文件，然就在需要的地方使用官网提供图标对应的标签即可。
如网站 FontAwesome。

index.html不能直接打开

index.html 有的能直接当文件打开，比如说你手搓的前端。但是利用 npm 工具构建的，如 vue，就不能当文件打开，需要启动本地服务器。原因有二，一个是 vue 生成的文件里代码写的路径是根路径，只有在服务器中是这样的，而在文件中有比如说 c 盘的路径。就算你依据这个Vue项目打包，如何双击index.html即可静态访问？改了，也会有错误，即原因二：域安全错误，被限制不能用 file 打开。事实上，生产环境下不需要文件打开，服务打开即可。