从一个例子开始学习 web

作者: 水之心 | 来源:发表于2020-11-05 17:20 被阅读0次

一般地，网站的最基本、最常用的结构是：

index.html：主页内容，即包含用户第一次访问站点时看到的内容；
images/：包含站点的全部图片；
styles/：包含战点所需样式表（即文本颜色、网页背景等）；
scripts/：包含提供站点交互功能的 JavaScript 代码（比如读取数据的按钮）。

下面便以一个例子来介绍 Web 的零基础开发实战。准备工具：Web 浏览器和 vscode 与 Git，并选择 Git Bash 作为 vscode 的默认终端。

1. 创建主页 `index.html`

首先，使用 vscode 创建空文件夹 web/：

接着，将准备好的图片放在 web/images/ 中：

最后，创建主页文件 index.html：

touch index.html

在 index.html 中键入 !：

按键 Tab 将自动生成最基本的 HTML 页面：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

使用浏览器打开 index.html，可以看到处理浏览器的页面标题为 Document 之外，整个页面是空白的：

MDN 上介绍了 HTML 的基础结构：

下面我们了解一下 index.html 内的构造：

<!DOCTYPE html> 标识了 HTML 的文档类型。
<html></html> 元素：也被称为根元素，它包含了整个页面的内容。
<head></head> 元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。
<body></body> 元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。
<meta charset="utf-8"> 元素指定文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。
<title></title> 元素：设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。

聪明的你可能已经发现：

HTML 的元素是可嵌套的；
存在无结束标记和内容的元素 <meta charset="utf-8">，此类元素被称为空元素。

然而，此时页面是空白的，我们需要添加一些内容，比如：

这个页面的内容有图片、链接、序列清单、标题，该如何实现呢？

2 填充 HTML 页面

首先，我们需要修改 <title> 元素为：

<title>Web 学习笔记</title>

接着，填充网页的主体部分 <body>。

  <body>
    <h1>Web 基础</h1>
    <p>
      网站中的文件命名注意事项：
      <ol>
        <li>对大小写敏感；</li>
        <li>不要使用空格或者下划线 _ 分离文件名的单词；</li>
        <li>最好使用连字符 - 分离文件名的单词。</li>
      </ol>
      <img src="images/water.jpg" title="测试图片">
    </p>
    <p>
      Web 学习资源
      <ul>
        <li>
          <a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web" target="_blank">Web 入门</a>
        </li>
        <li>
          <a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML 基础</a>
        </li>
      </ul>
    </p>
  </body>

HTML 的主体部分的使用 <h1>~<h6> 来表示不同级别的标题。使用 <p> 表示段落。使用 <ul> 表示无序列表，<ol 表示有序列表，而 <li> 表示列表的每个项目。

HTML 使用元素 <img src="URL" title="标题"> 嵌入图片。其中 URL 表示网址，而属性 title 表示鼠标悬停在图片上显示的文本信息，或者是图片不能正确显示时展示的文本信息。

HTML 嵌入链接的方式是使用元素 <a href="URL" target="_blank">文本内容</a>，其中 "_blank"，表示点击链接后会跳转到新的页面，默认是页内跳转。

最终的效果是：

网面的内容和结构使用 HTML 完成组织，但是整体效果看起来并不美观，下面介绍如何使用CSS 装饰网页。

3 CSS 装饰网页

层叠样式表（Cascading Style Sheet，简称：CSS）是为网页添加样式的代码。我们需要创建文件 web/styles/style.css 来粉网页。

首先，我们将网页的段落统一修改字体颜色，需要在 web/styles/style.css 中写下：

p {
  color: green;
}

最后，在 ``web/index.html中的<head>` 元素中添加如下代码将 CSS 代码链接到网页：

<link href="styles/style.css" rel="stylesheet">

效果：

可以看到段落中的文字部分字体颜色被修改为绿色。

MDN 对 CSS 的介绍：

注意其他重要的语法：

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

可以为页面的段落添加多个属性设定：

p{
    color: green;
    width: 500px;
    border: 1px solid blue;
}

效果是：

此时，段落的宽度限定为 500 像素，且显示了其边界框（线宽 1px，solid 模式，颜色为蓝色）。

也可以同时对多个元素进行修改：

p, li, h1{
    color: green;
    width: 500px;
    border: 1px solid blue;
}

效果：

除了对元素进行选择之外，也可以对具有特定 ID 的元素进行修改，比如对第二段进行修改，可以在 index.html 中修改 <p> 属性为：<p id="my-id">，其中 "my-id" 可以替换为任意合法的名称用于标识唯一的 HTML 元素。最后，在 CSS 文件中添加：

#my-id{
    color: red;
}

效果如下：

更多的选择器，可以参阅：选择器。

如果，我们想要修改字体，该怎么办？第一步，进入 Google Font 输出的地址。并以 <link> 元素的形式添加进 index.html 文档头（ <head> 和 </head> 之间的任意位置）。代码如下：

<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">

以上代码为当前网页下载 Ma Shan Zheng 字体，从而使自定义 CSS 中可以对 HTML 元素应用这个字体。

接着，在 CSS 文件中添加：

html{
    font: outline; /* 字体的轮廓线 */
    font-size: 20px; /* 字体大小 */
    font-family: 'Ma Shan Zheng', cursive; /* 字体设定 */
}

其中 CSS 文档中所有位于 /* 和 */ 之间的内容都是 CSS 注释，它会被浏览器在渲染代码时忽略。

最终的效果是：

也可以细化不同元素的设定：

html{
    font: outline; /* 字体的轮廓线 */
    font-size: 20px; /* 字体大小 */
    font-family: 'Ma Shan Zheng', cursive; /* 字体设定 */
    background-color: #00539F; 
}

h1{
    font-size: 60px;
    text-align: center;
}

p, li{
    color: red;
    font-size: 16px;
    line-height: 2;
    letter-spacing: 1px;
    width: 500px;
    border: 3px solid greenyellow;
}

#my-id{
    color: red;
}

最终的效果：

CSS 的一些设置：

3.1 主体格式设置

也可以这样设定网页的主体部分：

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

现在是 <body> 元素。以上条声明，我们来逐条查看：

width: 600px;：强制页面永远保持 600 像素宽。
margin: 0 auto;：为 margin 或 padding 等属性设置两个值时，第一个值代表元素的上方和下方（在这个例子中设置为 0），而第二个值代表左边和右边（在这里，auto是一个特殊的值，意思是水平方向上左右对称）。你也可以使用一个，三个或四个值，参考这里。
background-color: #FF9500;：指定元素的背景颜色。我们给 body 用了一种略微偏红的橘色以与深蓝色的 <html> 元素形成反差，你也可以尝试其它颜色。
padding: 0 20px 20px 20px;：我们给内边距设置了四个值来让内容四周产生一点空间。这一次我们不设置上方的内边距，设置右边，下方，左边的内边距为20像素。值以上、右、下、左的顺序排列。
border: 5px solid black;：直接为 body 设置 5 像素的黑色实线边框。

3.2 页面主标题并添加样式

h1 {
  margin: 0;
  padding: 20px 0;    
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

你可能发现页面的顶部有一个难看的间隙，那是因为浏览器会在没有任何 CSS 的情况下给 <h1> 等元素设置一些默认样式。但这并不是个好主意，因为我们希望一个没有任何样式的网页也有基本的可读性。为了去掉那个间隙，我们通过设置 margin: 0; 来覆盖默认样式。

至此，我们已经把标题的上下内边距设置为 20 像素，并且将标题文本与 HTML的背景颜色设为一致。

需要注意的是，这里使用了一个 text-shadow 属性，它可以为元素中的文本提供阴影。四个值含义如下：

第一个值设置水平偏移值：即阴影右移的像素数（负值左移）。
第二个值设置垂直偏移值：即阴影下移的像素数（负值上移）。
第三个值设置阴影的模糊半径：值越大产生的阴影越模糊。
第四个值设置阴影的基色。

3.3 图像居中

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

最后，我们把图像居中来使页面更美观。可以复用 body 的 margin: 0 auto ，但是需要一点点调整。 <body> 元素是块级元素，意味着它占据了页面的空间并且能够赋予外边距和其他改变间距的值。而图片是内联元素，不具备块级元素的一些功能。所以为了使图像有外边距，我们必须使用 display: block 给予其块级行为。

3.4 一个自定义的 CSS

html{
    font: outline; /* 字体的轮廓线 */
    font-size: 10px; /* 字体大小 */
    font-family: 'Ma Shan Zheng', cursive; /* 字体设定 */
    background-color: #00539F; 
}

h1 {
    margin: 0;
    padding: 20px 0;    
    color: #00539F;
    text-shadow: 3px 3px 1px white;
    text-align: center;
}

p, li{
    color: red;
    font-size: 12px;
    line-height: 2;
    letter-spacing: 1px;
    width: 500px;
    border: 1px solid greenyellow;
}

#my-id{
    color: red;
} 

body {
    width: 600px;
    margin: 0 auto;
    background-color: #FF9500;
    padding: 0 20px 20px 20px;
    border: 5px solid black;
}

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

最终效果图：

是不是好看多了？😄

为了更美观一些，可以将段落与列表的边界框去掉。

p, li{
    color: red;
    font-size: 12px;
    line-height: 2;
    letter-spacing: 1px;
    width: 500px;
    /* border: 1px solid greenyellow; */
}

4 JavaScript 添加页面的互动

JavaScript（缩写：JS）是一门完备的动态编程语言。当应用于 HTML 文档时，可为网站提供动态交互特性。由布兰登·艾克（ Brendan Eich，Mozilla 项目、Mozilla 基金会和 Mozilla 公司的联合创始人）发明。

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

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

现在，开始 JS 的编程工作！

创建文件 web/scripts/main.js 文件；
在 web/index.html 中 /<body> 之前添加以下代码将 JS 代码嵌入到网页：

<script src="scripts/main.js" defer></script>

将以下代码添加到 main.js 文件中：

let myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';

此时 JavaScript 把页面的标题改成了 “Hello world!” 。首先用 querySelector() 函数获取标题的引用，并把它储存在 myHeading 变量中。这与 CSS 选择器的用法非常相像：若要对某个元素进行操作，首先得选择它。之后，把 myHeading 变量的属性 textContent （标题内容）修改为 “Hello world!” 。

效果：

现在仅仅让 JS 实现修改网页内容的功能，接下来，为网页添加点击事件，鼠标的点击操作会触发该事件。比如：

document.querySelector('html').onclick = function() {
    alert('别戳我，我怕疼。');
}

此时，点击网页，便会弹出一些警告：

将事件与元素绑定有许多方法。在这里选用了 <html> 元素，把一个匿名函数（就是没有命名的函数，这里的匿名函数包含单击鼠标时要运行的代码）赋值给了 html 的 onclick 属性。

上面的代码等价于：

let myHTML = document.querySelector('html');
myHTML.onclick = function() {};

4.1 添加一个图片切换器

打开 main.js 文件，输入下面的 JavaScript 代码：

let myImage = document.querySelector('img')

myImage.onclick = function() {
    let mySrc = myImage.getAttribute('src')
    if(mySrc === 'images/firefox-icon.png') {
      myImage.setAttribute('src', 'images/water.jpg')
    } else {
      myImage.setAttribute('src', 'images/OIP.jpg')
    }
}

这里首先把 <img> 元素的引用使用 myImage 变量代替。然后再将该变量的 onclick 事件与一个匿名函数绑定。该函数实现如下功能，每次点击图片时：

获取图片的 src 属性；
使用一个条件语句判断 src 的值是否为原始路径：如果是，则将路径修改，否则不修改。

4.2 添加个性化欢迎信息

在用户初次进入网站时将网页的标题改成一个性化的欢迎信息。名字信息会由 Web Storage API 保存下来，即使用户关闭页面之后再重新打开，仍可得到之前的信息。还会添加一个选项，可以根据需要改变用户名字以更新欢迎信息。

打开 index.html，在 <script> 标签前添加以下代码，将在页面底部显示一个“切换用户”字样的按钮：

<button>切换用户</button>

main.js 文件底部添加如下代码，用于获取新按钮和标题的引用，并定义欢迎信息：

// 添加欢迎信息
let myButton = document.querySelector('button')
let myHeading = document.querySelector('h1')
function setUserName() {
    let myName = prompt('请输入你的名字。')
    localStorage.setItem('name', myName)
    myHeading.textContent = '欢迎进入 Web 世界，' + myName
  }

该函数首先调用了 prompt() 函数，与 alert() 类似会弹出一个对话框。但是这里需要用户输入数据，并在确定后将数据存储在 myName 变量里。接下来将调用 localStorage API ，它可以将数据存储在浏览器中供后续获取。这里用 localStorage 的 setItem() 函数来创建一个'name' 数据项，并把 myName 变量复制给它。最后将 textContent 属性设置为一个欢迎字符串加上这个新设置的名字。

接下来，添加初始化代码，因为它在页面初次读取时进行构造工作：

if(!localStorage.getItem('name')) {setUserName()} 
else {
    let storedName = localStorage.getItem('name')
    myHeading.textContent = 'Mozilla 酷毙了，' + storedName
}

myButton.onclick = function() {setUserName()}

第一次访问网页时，页面将询问用户名并发出一段个性化的信息。可随时点击按钮来改变用户名。因为用户名是保存在 localStorage 里的，网页关闭后也不会丢失，所以重新打开浏览器时所设置的名字信息将依然存在。

从一个例子开始学习 web

1. 创建主页 `index.html`

2 填充 HTML 页面

3 CSS 装饰网页

3.1 主体格式设置

3.2 页面主标题并添加样式

3.3 图像居中

3.4 一个自定义的 CSS

4 JavaScript 添加页面的互动

4.1 添加一个图片切换器

4.2 添加个性化欢迎信息

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

从一个例子开始学习 web

1. 创建主页 index.html

2 填充 HTML 页面

3 CSS 装饰网页

3.1 主体格式设置

3.2 页面主标题并添加样式

3.3 图像居中

3.4 一个自定义的 CSS

4 JavaScript 添加页面的互动

4.1 添加一个图片切换器

4.2 添加个性化欢迎信息

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

1. 创建主页 `index.html`