HTML

不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。 一对标签（ tags）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。

关于大小写和空格的提示
文中所有的文件夹名和文件都使用小写字母，且没有空格。
最好在一开始就养成习惯，文件夹和文件名使用小写，用短横线而不是空格来分隔。可以避免许多问题
网站结构
最基本、最常见的结构是：一个主页、一个图片文件夹、一个样式表文件夹和一个脚本文件夹：

  • index.html ：这个文件一般包含主页内容，即用户第一次访问站点时看到的文本和图像。
  • images 文件夹：这个文件夹包含站点中的所有图像。
  • styles 文件夹 ：这个文件夹包含站点所需样式表（比如，设置文本颜色和背景颜色）。
  • scripts文件夹 ：这个文件夹包含提供站点交互功能的 JavaScript 代码（比如读取数据的按钮）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Coding</title>
    </head>
    <body>
        <img src="images/timg.jpg" alt="My coding page">
    </body>
</html>


文件路径的一些通用规则：

  • 若引用的目标文件与 HTML 文件同级，只需直接使用文件名，比如 my-image.jpg 。
  • 要引用子文件夹中的文件，要在路径前写下目录名并加一个斜杠，比如 subdirectory/my-image.jpg 。
  • 若引用的目标文件位于 HTML 文件的上级，需要加上两个点。比如，如果 index.html 在 test-site 下面的一个子目录而my-image.png 在 test-site 目录，你可以在 index.html 里使用 …/my-image.png 引用my-image.png 。
  • 以上方法可以随意组合，比如
    …/subdirectory/another-subdirectory/my-image.png。
    注：Windows 文件系统使用反斜杠而不是正斜杠

CSS

和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式。

整个结构称为 规则集（通常简称“规则”），各部分释义如下：

选择器（Selector）
HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。
声明（Declaration）
一个单独的规则，如 color: red; 用来指定添加样式元素的属性。
属性（Properties）
改变 HTML 元素样式的途径。（本例中 color 就是 <p> 元素的属性。）
CSS 中，由编写人员决定修改哪个属性以改变规则。
属性的值（Property value）
在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。

注意其他重要的语法：

  • 每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）。
  • 在每个声明里要用冒号（:）将属性与属性值分隔开。
  • 在每个规则集里要用分号（;）将各个声明分隔开。

CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性：

padding：即内边距，围绕着内容（比如段落）的空间。
border：即边框，紧接着内边距的线。
margin：即外边距，围绕元素外部的空间。

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

这里还使用了：

width ：元素的宽度
background-color ：元素内容和内边距底下的颜色
color ：元素内容（通常是文本）的颜色
text-shadow ：为元素内的文本设置阴影
display ：设置元素的显示模式（暂略）

图像居中

img {
  display: block;
  margin: 0 auto;
}

最后，我们把图像居中来使页面更美观。可以复用 body 的 margin: 0 auto ，但是需要一点点调整。 元素是块级元素，意味着它占据了页面的空间并且能够赋予外边距和其他改变间距的值。而图片是内联元素，不具备块级元素的一些功能。所以为了使图像有外边距，我们必须使用 display: block 给予其块级行为。
注：以上说明假定所选图片小于页面宽度（600 pixels）。更大的图片会溢出 body 并占据页面的其他位置。要解决这个问题，可以：
1）使用 图片编辑器 来减小图片宽度；
2）用 CSS 限制图片大小，即减小 元素 width 属性的值（比如 400 px）。

JavaScript

（缩写：JS）是一门完备的 动态编程语言。当应用于 HTML 文档时，可为网站提供动态交互特性。
JavaScript 的应用场合极其广泛，简单到幻灯片、照片库、浮动布局和响应按钮点击，复杂到游戏、2D/3D 动画、大型数据库驱动程序等等。

JavaScript 相当简洁，却非常灵活。开发者们基于 JavaScript 核心编写了大量实用工具，可以使 开发工作事半功倍。其中包括：

浏览器应用程序接口（API）—— 浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成3D 图像与音频样本等等。
第三方 API —— 让开发者可以在自己的站点中整合其它内容提供者（Twitter、Facebook 等）提供的功能。
第三方框架和库 —— 用来快速构建网站和应用。

注：我们将 <script> 放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。

最后发布GitHub不成功，总是上传失败。
这个网页是跟着：https://developer.mozilla/zh-CN/
可以快速复习一下前端的基本内容

更多推荐

前端-做一个简单的网页