整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
喜欢互联网的一点是在互联网放置静态页面是如此简单。今天有人问我该怎么做，所以我想我会快速地写下来！
-- Julia Evans（作者）
我喜欢互联网的一点是在互联网放置静态页面是如此简单。今天有人问我该怎么做，所以我想我会快速地写下来！
我的所有网站都只是静态 HTML 和 CSS。我的网页设计技巧相对不高（ https://wizardzines.com 是我自己开发的最复杂的网站），因此保持我所有的网站相对简单意味着我可以做一些改变/修复，而不会花费大量时间。
因此，我们将在此文章中采用尽可能简单的方式 —— 只需一个 HTML 页面。
我们要放在互联网上的网站只是一个名为 index.html 的文件。你可以在 https://github.com/jvns/website-example 找到它，它是一个 Github 仓库，其中只包含一个文件。
HTML 文件中包含一些 CSS，使其看起来不那么无聊，部分复制自 https://example.com 。
有以下几步：
上面的 index.html 页面位于 julia-example-website.neocities.com 中，如果你查看源代码，你将看到它与 github 仓库中的 HTML 相同。
我认为这可能是将 HTML 页面放在互联网上的最简单的方法（这是一次回归 Geocities，它是我在 2003 年制作我的第一个网站的方式）:)。我也喜欢 Neocities （像 glitch ，我也喜欢）它能实验、学习，并有乐趣。
这绝不是唯一简单的方式，在你推送 Git 仓库时，Github pages 和 Gitlab pages 以及 Netlify 都将会自动发布站点，并且它们都非常易于使用（只需将它们连接到你的 GitHub 仓库即可）。我个人使用 Git 仓库的方式，因为 Git 不会让我感到紧张，我想知道我实际推送的页面发生了什么更改。但我想你如果第一次只想将 HTML/CSS 制作的站点放到互联网上，那么 Neocities 就是一个非常好的方法。
如果你不只是玩，而是要将网站用于真实用途，那么你或许会需要买一个域名，以便你将来可以更改托管服务提供商，但这有点不那么简单。
如果你熟悉在 Git 中编辑文件，同时想练习 HTML/CSS 的话，我认为将它放在网站中是一个有趣的方式！我真的很喜欢它的简单性 —— 实际上这只有一个文件，所以没有其他花哨的东西需要去理解。
还有很多方法可以复杂化/扩展它，比如这个博客实际上是用 Hugo 生成的，它生成了一堆 HTML 文件并放在网络中，但从基础开始总是不错的。
via: https://jvns.ca/blog/2019/09/06/how-to-put-an-html-page-on-the-internet/
作者： Julia Evans 选题： lujun9972 译者： geekpi 校对： wxy
本文由 LCTT 原创编译， Linux中国 荣誉推出
次我们来说一下，HTML网页中的定位，有很多小伙伴一定好奇，为什么我们写的代码都是按顺序罗列的而在网页的展示效果中，我们的各种样式，标签，图片等东西都是出现在网页的各个位置，网页看起来很美观，各种盒模型摆放合理，这是因为在HTML中有定位的能力，今天我们就来学习一下。
position在英语中是位置的意思，而在我们CSS代码中position也是跟位置有关的，position有三个属性值分别为relative（相对定位：相对于自己原来的位置进行定位，但保留自己原来的位置，别的元素无法占用），absolute（绝对定位：相对于有定位的父级进行定位，如果没有则相对于文档进行定位，定位会脱离文档，不保留原来的位置，会和原来的文档不在一个层），fixed（位置定位：他的位置不会随着滑轮的滚动而改变较常见于弹窗广告，他也会脱离文档流）。
我们说完了position，接下来我们就说说他是怎么进行定位的，我们有left，top，right，bottom，五个属性分别对应 距左边，距上边，距右边，距下边，大家注意到我在每个方向前都加了个距字，我们所做的定位是距各个方向的距离而不是移动，例：left:200px，是向右移动200像素，他的意思是距离左边增加200像素。在我们实际的编程中一般都不常用bottom，我们知道，滑轮是可以一直往下滑的，所以我们相对于底部定位的话就很困难。
我们来通过代码和结果来看一下：
没有定位的样式
加了relative
加了relative的结果
上面这个结果图看着比例不太对是因为作者截图没截好[捂脸]
我们可以看出猫图片并没有移动，而是给兔子图片留着位置。
加了absolute
加了absolute的结果
这个结果我们可以看出猫图片向前移动了，并没有保留兔子图片原来的位置
加了fixed
代码中的<br>是为了使滑轮可以滑动，以便更好的展示效果。
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
用了fixed的效果展示。
以上的代码样式只对兔子图片起作用，我没有给猫添加任何样式，猫图片只是作为参照物。
HTML文档中的任何地方可包括JavaScript代码。但也有以下的最佳方法来包含JavaScript在HTML文件。
在 <head>...</head> 部分。
在 <body>...</body> 部分。
在<body>...</body> 和<head>...</head> 部分。
脚本和外部文件，然后包括在<head>... </ head>部分。
在下面的章节中，我们将看到如何可以包含JavaScript方式的不同：
如果你想在一些事件上运行一个脚本，当用户点击某个地方，如，那么应该脚本的头部，如下所示：
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
123456789101112131415复制代码类型：[javascript]这将产生以下结果：
如果需要一个脚本的页面加载，以便脚本生成页面内容来运行，该脚本在文档的<body>部分。在这种情况下，就不必使用JavaScript定义的所有功能：
<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>
12345678910111213复制代码类型：[javascript]你可以把JavaScript代码在<head>和<body>部分完全如下：
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>12345678910111213141516171819复制代码类型：[javascript]当开始工作，更广泛地使用JavaScript，可能会发现有情况下，在站点的多个页面重用相同的JavaScript代码。
你并不局限于将保持在多个HTML文件相同的代码。 script标签提供了一种机制，允许存储JavaScript在外部文件中，然后将其包含到HTML文件。
下面是一个例子来说明如何使用脚本标记和src属性包含在HTML代码的外部JavaScript文件：
<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>
12345678910复制代码类型：[javascript]使用JavaScript从外部文件源，则需要使用扩展写下所有的JavaScript代码在一个简单的文本文件“.js”，然后包括文件，如上图所示。
例如，你可以保持在以下文件filename.js的内容，然后包括filename.js文件后，在HTML文件中使用sayHellofunction：
function sayHello() {
alert("Hello World")
}开课吧广场-人才学习交流平台
*请认真填写需求信息，我们会在24小时内与您取得联系。
