Web开发学习记琐Chapter 1: HTML/CSS/JS

/ 0评 / 0

最近写完了学校要求的大作业。没用推荐的.NET框架,而是用了几个第三方框架写了整套的GUI和底层逻辑。接着开源到GitHub上。想着既然用跨平台框架写了,总得把跨平台编译脚本写了吧?于是被迫学习了git的使用、makefile、cmake和GitHub CI使用的yml语言语法。又投入了大量的时间在调试上(因此产生了四十多个commit)。为了这一系列的实现,我愣是花掉了比开发本体更长的时间。

直到写这篇文章的时候,程序终于从0.5版更新到了0.6版。C++和图形的万般难写实在是让我有点受不了了。尽管作为老牌编译型语言,C++十分地原教旨主义,也不需要什么奇奇怪怪的运行时环境(不像Java之类的还得装个JRE),但是总的来说开发起来依然是有点痛苦的事情——尤其是在对各种设计模式不够熟练的时候。程序只是更新了一个版本,我已经有点想重构一次了。

所以想着,后端这么难写,还是改学前端换个胃口吧。于是提前几天找了些资源。这两天考试考完了,闲在家里没事,就在这个凌晨决定开坑学习。本文的目的是记录学习过程中遇到的困难和解决的步骤。

本文使用的基本教程为Mozilla提供的web开发教程。中文版的教程翻译地相当接地气,实践先行,相当符合我的胃口,特此鸣谢。

开发环境

教程建议先用python自带的http服务器,代码是python -m http.server。我把它写成了一个DOS脚本(DOS可是我的起家语言hhh),放在专用的目录下作为启动器。

教程还提到了服务器端语言。教程列举了几个可以充当轻量server的包,也列举了数据库软件和环境。这里因为是从HTTP下手,就先不搞这些了。

Web入门

文件

一个标准的文件结构大致如下:

一个示例页面如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的测试页面</title>
  </head>
  <body>
    <img src="images/firefox-logo-600x619.png" alt="我的测试页面">
  </body>
</html> 

其中src值images/firefox-logo-600x619.png指的是当前文件index.html作为根目录,images文件夹中名为firefox-logo-600x619.png的文件。这张图是Firefox的logo,打开后页面显示了大大的logo,而且size远大于图片实际分辨率。

基本HTML

一个元素可能包含:

元素属性:用来给元素添加额外信息的工具,不会被显示出来。形如<p class="editor-note">建议所有的属性都用引号修饰。

嵌套元素:元素的内容中还可以包含元素

空元素:没有内容的元素,例如图像元素<img src="images/firefox-logo-600x619.png" alt="">没有结束标签,因此没有内容。原因是图像不需要内容,只需要指定一个路径即可。

例程中体现的标签

基本图像元素:包含src字符串指定资源地址,alt字符串指定图片加载不出来时显示的提示性文字,也是视障用户能听到的部分。

标题:标签为hx,其中x为1~4的数字,表示标题等级,最大的标题等级为1

段落:标签为p。内容首尾的空格会被忽略。

无序列表ul,有序列表ol,其中的条目用li包含

超链接:标签为a(意为anchor),内容为显示的文本,使用href属性指定跳转的目标链接,例如<a href="https://www.google.com"> 不存在的网站 </a>。如果不加http前缀,则这个链接会被视作相对路径。

CSS

CSS教程和参考网站:https://www.runoob.com/css/css-tutorial.html

一条基本的CSS语句形如:

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

CSS文件可以使用link的形式在head部分引用。格式为<link href="CSS_PATH" rel="stylesheet">

基本结构:

选择器类型:

Remark1:h1等标签不属于p,所以为p指派的样式不会在标题上生效。

Remark2:嵌套内层的元素CSS优先级高于外层。即外层定义的CSS样式可以被内层CSS样式重载。

例程:给整个页面指派字体

html {
	width: 600px;
	font-size: 30px;
	font-family: '幼圆';
} /* 为根元素指派字体、宽度和字号 */ 

CSS的工作模型是一个盒子。从内到外为边框内留白(padding) - 边框(border) - 边框外留白(margin)。指派两个值时,分别表示上下和左右的边距。指派4个值时,表示上右下左的边距。

内联元素、块状元素、内联块状元素

应用:将图片居中。由于图片img是内联元素,因此不具有padding、border、margin等属性。通过CSS向元素指派display: block即可将之转换成块状内联元素。此时可以单独为img指定继承body等上级元素的属性。

Remark:为块状元素指派margin时,auto将尝试着让元素居中。

Remark:h1等元素有浏览器指派的默认样式。

JavaScript

这是一门图灵完备的解释型语言。支持OO、函数式、命令式编程,但是本体不支持IO(也说明位于一个比较高的抽象层)。JavaScript和Java没有关系

(js也能在Windows上直接用解释器跑,这也说明JavaScript并不是浏览器的特权)

创建scripts/main.js,并在index.html中插入这个脚本:<script src="scripts/main.js" defer></script>。其中defer表示延迟加载。在网页上运行js脚本时,应当将js脚本放在body部分的最后运行。因为有可能发生js修改的对象尚未被加载的问题。在本例中,将加载语句放在head部分也是可以的,但是必须加上defer标签,否则就会在标题出现之前运行脚本,导致执行失败。

例程:

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

document对象是整个被加载的网页,它的上级对象是window(不是Windows)。例程将页面中的h1元素赋值给变量myHeading,之后调用textContent方法将其重写为hello, world.

变量

js使用变量前需要声明。允许声明和赋值放在同一个语句,例如let headerlet flag=0等。变量名可以是中文等非ASCII字符,且大小写敏感。变量的值类型包括数字、字符串、布尔量、数组、对象(类似结构体),声明时不需要标注变量类型,解释器会自动推导。

与C++不同,js对变量的类型较为宽松。允许一个数组对象中有多个不同的变量类型。在浏览器F12控制台中很容易测试这些东西。例如let a = [1, '2', false]是一个合法的数组变量,并且能用下标(从0开始)输出正确的值。

var是早期js使用的声明变量关键字,这个关键字允许变量被声明2次,因此应当避免使用var而是使用let来声明变量。

JavaScript中一切皆对象。

运算

基本上和C++类似,但是额外提供了两个算符:

  1. ===表示值相等类型相等
  2. !==表示值不相等类型不相等

(这在C++要靠编译期推导实现,写起来的代码相当不优雅)

函数

例如document.querySelector('h1')就是一个function call。

使用function声明函数,不需要指定返回值和形参类型,其他和C语言相同。

事件

js允许为元素绑定事件处理函数,例如

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

上述代码为html元素(也就是根元素)的click事件绑定了一个匿名函数,这个函数弹出一个对话框显示一个字符串。

有很多种绑定事件的方法,也有很多事件可以绑定。本质上似乎是将一个回调函数赋值给几个变量,形如eleImg.onmouseover = eleImg.onclick = function() { }的代码也是正确的。

发表评论

邮箱地址不会被公开。 必填项已用*标注