网页编程：如何在HTML中插入一条水平线？

天的主题是网页编程中的水平线。

同学们好，今天我来分享一些免费的少儿编程知识。只要每天坚持学习一行代码，你也可以成为编程高手！今天我们要学习如何在HTML中插入一条水平线，使用的是HR标签。HR是一个自闭合标签，虽然它没有标准的属性，但我们可以通过CSS来控制它的外观。

先来看看我们的实例效果。在页面上，两行文字被一条直线分开。这条直线就是HR标签，效果已经展示出来了。现在我们来看看实现的代码。HR标签的写法非常简单，但在最开始的时候，它有四个属性，现在已经不被标准支持了。尽管如此，我们仍然可以使用它。

今天的实例中，我们已经将这些标签加入到了代码中。如果你感兴趣，可以查看下方的代码。按下空格键可以看到过时的属性不会被智能提示，但这并不影响代码的正确性。将注释取消后保存，然后回到浏览器刷新，可以看到属性仍然有效。线条的高度为3，宽度为400，并且居中显示。取消阴影后，线条将变为纯色。

这只是一个演示，你可以参考一下。从这个示例中，我们可以看到，HR标签的宽度是根据页面宽度自动调整的。当它的宽度达到整个浏览器时，它会自动换行。既然属性已经过时了，那么我们如何通过HTML来控制外观呢？CSS是我们今天要学习的内容。

先取消注释的代码，让HTML失效，然后保存。回到浏览器刷新，就可以看到线条变成了蓝色。

今天的分享就到这里，希望各位同学可以试着写三遍，不需要看视频也可以掌握这个技巧。如果你需要案例和相关文档，可以向我咨询。

我们下期再见，想学习编程的同学记得关注哦。

了执行Javascript，需要在HTML文件内以特定的方式书写JavaScript的代码，JavaScript的书写方法有多种，其执行的流程也各不相同：

1 <script>标签嵌入

此种嵌入方法无法操作<script>之后的DOM元素。因为<script>之后的DOM元素还未构造，因此在<script>标签内就无法取得位于其后的DOM元素。

2 读取外部JavaScript文件

此种嵌入方法可以指定defer、async属性。defer可以推迟执行，async可以异步执行。

3 onload嵌入

此种嵌入方法在页面读取完后再对其执行，所以可以对所有的DOM元素操作。

<body onload="alert('hello')">
window.onload = function(){alert('hello');};

当window.onload事件触发时，页面上所有的DOM、样式表、脚本、图片、flash都已经加载完成了。

//window.onload不能同时编写多个。
//以下代码无法正确执行，结果只输出第二个。
window.onload = function(){
  alert("test1");
};

window.onload = function(){
  alert("test2");
};

//$(document).ready()能同时编写多个
//结果两次都输出
$(document).ready(function(){ 
   alert("Hello World"); 
}); 
$(document).ready(function(){ 
   alert("Hello again"); 
});

window.onload和body中onload也有些许区别：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script language="javascript">
        window.onload = haha;
        function haha(){console.log("window.onload");}

        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }</script>
</head>
<body onload="console.log('bodyonload');">
        <div id="div1">a</div>
</body>
</html>

在IE10和FireFox下，结果为：

"DOMContentLoaded"
"bodyonload"

说明body中的onload会覆盖window.onload

在chrome下，结果为：

DOMContentLoaded
window.onload
bodyonload

然后，如果把javascript代码移到最下面，结果又会是什么样呢？

chrome和IE10、FireFox的结果竟然是一样的：

DOMContentLoaded
window.onload

IE 10、Fire Fox可以理解，window.on load和body中的 on load 谁在下面就是谁覆盖谁，只会执行后面的那个。

4 DOM ContentLoaded嵌入

onload方法可能需要等待时间，而本方法可以在完成HTML解析后发生的事件，减少等待时间。

在chrome、IE10和FireFox中，执行结果是：DOMContentLoaded然后才是onload的输出。所以说一般情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery2.js"></script>
    <script language="javascript">
        window.onload = haha;
        function haha(){console.log(document.getElementById("div1"));}
        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }
    </script>
</head>
<body>
    <div id="div1">a</div>
</body>
</html>

如果你是个jQuery使用者，你可能会经常使用$(document).ready();或者$(function(){})，这都是使用了DOMContentLoaded事件

5 动态载入JavaScript文件

5.1 使用原生js方法

动态创建script标签，并指定script的src属性

function loadJs(url, callback) {
    var script = document.createElement('script');
    script.type = "text/javascript";
    if (typeof(callback) != "undefined") {
        if (script.readyState) {
            script.onreadystatechange = function() {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            }
        } else {
            script.onload = function() {
                callback();
            }
        }
    }
    script.src = url;
    document.body.appendChild(script);
}
loadJs("test.js", function() {
    alert('done');
});

还可以使用同样的原理动态加载css文件，只不过插入的的父节点是head标签。

5.2 使用document.write/writeln(）方式

该种方式可以实现js文件的动态加载，原理就是在重写文档流，这种方式会导致整个页面重绘。

document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");

需要注意的是特殊字符的转义。

5.3 使用jQuery

使用getScript(url,callback)方法实现动态加载js文件

$.getScript('test.js',function(){
    alert('done');
});

－End－

比于早些年前后端代码紧密耦合、后端工程师还得写前端代码的时代，如今已发展到前后端分离，这种开发方式大大提升了前后端项目的可维护性与开发效率，让前后端工程师关注于自己的主业。然而在带来便利的同时，也带来了一些弊端，比如首屏渲染时间(FCP)因为首屏需要请求更多内容，比原来多了更多HTTP的往返时间(RTT)，这造成了白屏，如果白屏时间过长，用户体验会大打折扣，如果用户网速差，则FCP会更长。

由此引申出一系列的优化方法，骨架屏也因此被提出，本文就以 Vue 项目中的骨架屏为例，探讨一下骨架屏的优缺点和注入方式。

感兴趣的同学可以加一下微信群，一起讨论吧～

1. FCP 优化

在 Google 提出的以用户为中心的四个页面性能衡量指标中，FP/FCP可能是开发者们最熟悉的了：

为了优化首屏渲染时间这个指标，减少白屏时间，前端仔们想了很多办法：

加速或减少HTTP请求损耗：使用CDN加载公用库，使用强缓存和协商缓存，使用域名收敛，小图片使用Base64代替，使用Get请求代替Post请求，设置 Access-Control-Max-Age 减少预检请求，页面内跳转其他域名或请求其他域名的资源时使用浏览器prefetch预解析等；
延迟加载：非重要的库、非首屏图片延迟加载，SPA的组件懒加载等；
减少请求内容的体积：开启服务器Gzip压缩，JS、CSS文件压缩合并，减少cookies大小，SSR直接输出渲染后的HTML等；
浏览器渲染原理：优化关键渲染路径，尽可能减少阻塞渲染的JS、CSS；
优化用户等待体验：白屏使用加载进度条、菊花图、骨架屏代替等；

这里要介绍的就是优化用户等待体验的骨架屏，它可以被视为是原来加载菊花图的一种升级版，结合传统的首屏优化方法对应用进行优化可以达到不错的效果。

2. 骨架屏

骨架屏可以理解为是当数据还未加载进来前，页面的一个空白版本，一个简单的关键渲染路径。可以看一下下面Facebook的骨架屏实现，可以看到在页面完全渲染完成之前，用户会看到一个样式简单，描绘了当前页面的大致框架的骨架屏页面，然后骨架屏中各个占位部分被实际资源完全替换，这个过程中用户会觉得内容正在逐渐加载即将呈现，降低了用户的焦躁情绪，使得加载过程主观上变得流畅。

可以看一下下面的示例图，第一个为骨架屏，第二个为菊花图，第三个为无优化，可以看到相比于传统的菊花图会在感官上觉得内容出现的流畅而不突兀，体验更加优良。

如今这项技术已经在Facebook、Google、支付宝、饿了么、简书、新浪微博、知乎、美团、领英等公司的产品中被广泛的使用。在论坛和社区也都有不少文章讨论骨架屏的实现和使用场景等。

3. 生成骨架屏的方法

生成骨架屏的方式主要有：

手写HTML、CSS的方式为目标页定制骨架屏做法可以参考，主要思路就是使用 vue-server-renderer 这个本来用于服务端渲染的插件，用来把我们写的 .vue文件处理为 HTML，插入到页面模板的挂载点中，完成骨架屏的注入。这种方式不甚文明，如果页面样式改变了，还得改一遍骨架屏，增加了维护成本。
使用图片作为骨架屏；简单暴力，让UI同学花点功夫吧哈哈；小米商城的移动端页面采用的就是这个方法，它是使用了一个Base64的图片来作为骨架屏。
自动生成并自动插入静态骨架屏这种方法跟第一种方法类似，不过是自动生成骨架屏，可以关注下饿了么开源的插件 page-skeleton-webpack-plugin ，它根据项目中不同的路由页面生成相应的骨架屏页面，并将骨架屏页面通过 webpack 打包到对应的静态路由页面中，不过要注意的是这个插件目前只支持history方式的路由，不支持hash方式，且目前只支持首页的骨架屏，并没有组件级的局部骨架屏实现，作者说以后会有计划实现。

另外还有个插件 vue-skeleton-webpack-plugin，它将插入骨架屏的方式由手动改为自动，原理在构建时使用 Vue 预渲染功能，将骨架屏组件的渲染结果 HTML 片段插入 HTML 页面模版的挂载点中，将样式内联到 head标签中。这个插件可以给单页面的不同路由设置不同的骨架屏，也可以给多页面设置，同时为了开发时调试方便，会将骨架屏作为路由写入router中，可谓是相当体贴了。

vue-skeleton-webpack-plugin 的具体使用参考 vue-style-codebase，主要关注build目录的几个文件，实例跑起来之后在 Chrome 的 DevTools 中把 network 的网速调为 Gast3G/Slow3G 就能看到效果了~

在线咨询

上一篇：9款超炫HTML5最新动画
下一篇：扁平风轮播图大屏展示html页面源码

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商