Web开发笔记1——web入门

1.基础软件

纯文本编辑器编写代码——Visual Studio Code
版本控制系统——Git(图形化工具SourceTree或者小乌龟)
Web浏览器——chrome

2.设计网站外观

2.1 制定计划

网站主题、展示信息、外观等——>草图

2.2 选定内容

  • 文本(标题和文字)
  • 主题颜色 色彩选择器
    六位色彩代码例如 #660066
  • 图像Goole图片搜索
    注意版权问题,为了降低盗版风险,可以使用“Google 许可证过滤器”。点击“工具”按钮,然后在使用权限的选项下选择类似“标记为可再利用”的选项。
  • 字体 访问Google Fonts
    选择具体字体获取api,将代码片段复制到文本编辑器就可以使用了
    在这里插入图片描述

3.处理文件

网站由文本、代码、样式表、媒体内容等多种文件组成。构建站点时要确保文件夹结构组织合理,文件之间交互畅通,没有明显错误,然后再上传至服务器。

3.1 路径规范及网站结构

文件夹命名:大小写敏感,中划线分离单词,如 my-file.html
结构:最基本最常见——一个主页、一个图片文件夹、一个样式表文件夹和一个脚本文件夹:
整个web项目文件夹命名为test-site:在里面新建:
1、index.html:包含主页内容
2、images文件夹:包含站点中的所有图像
3、styles文件夹:包含站点所需样式表(比如设置文本颜色和背景颜色)
4、scripts文件夹:包含提供站点交互功能的 JavaScript 代码(比如读取数据的按钮)

3.1.1 文件路径

编写index.html:

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

<img src="" alt="我的测试页面"> 是在页面里插入图像的 HTML 代码。告诉 HTML 图像的位置。这张图片在 images 目录下,而 images 目录与 index.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 文件系统使用反斜杠而不是正斜杠,比如 C:\Windows 。但与 HTML 没什么关系,即使在 Windows 上做 Web 开发,代码中仍应使用正斜杠。

4. HTML基础

HTML——超文本标记语言

4.1 HTML元素详解

一个段落元素的结构如下:

  • 开始标签(Opening tag):包含元素的名称(本例为 p),被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
  • 结束标签(Closing tag):与开始标签相似,只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误,这可能会产生一些奇怪的结果。
  • 内容(Content):元素的内容,本例中就是所输入的文本本身。
  • 元素(Element):开始标签、结束标签与内容相结合,便是一个完整的元素。
    这是一个段落元素的结构

元素也可以有属性:属性包含了关于元素的一些额外信息,这些信息本身不应显现在内容中。本例中,class 是属性名称,editor-note 是属性的值 。class 属性可为元素提供一个标识名称,以便进一步为元素指定样式或进行其他操作时使用。
在这里插入图片描述
属性应该包含:

  • 在属性与元素名称(或上一个属性,如果有超过一个属性的话)之间的空格符。
  • 属性的名称,并接上一个等号。
  • 由引号所包围的属性值。

4.1.1 嵌套元素

将一个元素置于其他元素之中 —— 称作嵌套。要表明猫咪非常暴躁,可以将 “暴躁” 用 元素包围,爆字将突出显示:

<p>我的猫咪脾气<strong>暴躁</strong>:)</p>

注意要保证元素嵌套次序正确

4.1.2 空元素

不包含任何内容的元素称为空元素。比如<img> 元素:

<img src="images/firefox-icon.png" alt="测试图片">

本元素包含两个属性,但是并没有 结束标签,元素里也没有内容。这是因为图像元素不需要通过内容来产生效果,它的作用是向其所在的位置嵌入一个图像。

4.2 HTML文档详解

回顾index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>测试页面</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="测试图片">
  </body>
</html>
  • <!DOCTYPE html> — 文档类型。混沌初分,HTML 尚在襁褓(大约是 1991/92 年)之时,DOCTYPE 用来链接一些 HTML 编写守则,比如自动查错之类。DOCTYPE 在当今作用有限,仅用于保证文档正常读取。
  • <html></html> — <html> 元素。该元素包含整个页面的内容,也称作根元素。
  • <head></head> — <head> 元素。该元素的内容对用户不可见,其中包含例如面向搜索引擎的搜索关键字(keywords)、页面描述、CSS 样式表和字符编码声明等。
  • <meta charset=“utf-8”> — 该元素指定文档使用 UTF-8 字符编码 ,UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容,还可以避免以后出现某些问题,没有理由再选用其他编码。
  • <title></title> — <title> 元素。该元素设置页面的标题,显示在浏览器标签页上,也作为收藏网页的描述文字。
  • <body></body> — <body> 元素。该元素包含期望让用户在访问页面时看到的内容,包括文本、图像、视频、游戏、可播放的音轨或其他内容。

4.2.1 图像

<img> 元素:

<img src="images/firefox-icon.png" alt="测试图片">

该元素通过包含图像文件路径的地址属性 src,可在所在位置嵌入图像。该元素还包括一个替换文字属性 alt,是图像的描述内容。

4.2.2 标记文本

  1. 标题(Heading)
    HTML 文档也是一样。HTML 包括六个级别的标题,<h1>–<h6> ,一般最多用到 3-4 级标题。
<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4>
  1. 段落
    <p> 元素是用来指定段落的。通常用于指定常规的文本内容:
  2. 列表
    Web 上的许多内容都是列表,HTML 有一些特别的列表元素。标记列表通常包括至少两个元素。最常用的列表类型为:
    无序列表(Unordered List)中项目的顺序并不重要,就像购物列表。用一个 <ul> 元素包围。
    有序列表(Ordered List)中项目的顺序很重要,就像烹调指南。用一个 <ol> 元素包围。
    列表的每个项目用一个列表项目(List Item)元素 <li> 包围。
    比如,
<p>Mozilla 是一个全球社区,这里聚集着来自五湖四海的</p>

<ul>
  <li>技术人员</li>
  <li>思考者</li>
  <li>建造者</li>
</ul>

<p>我们致力于……</p>
  1. 链接
    用标签<a>植入链接 属性href赋予链接地址,可以添加链接文字说明
<a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla 宣言</a>

5. CSS基础

CSS——样式表语言
写一个styly.css文件(放在styles文件夹下):将所有段落元素中的文本改成红色

p {
	color:rea;
  }

将style.css链接至index.html ——<head> 和 </head> 标签之间

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

5.1 "CSS"规则集详解

在这里插入图片描述
整个结构称为 规则集(通常简称“规则”),各部分释义如下:

  • 选择器(Selector)
    HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素(在这个例子中就是 p 元素)。要给不同元素添加样式只需要更改选择器就行了。
  • 声明(Declaration)
    一个单独的规则,如 color: red; 用来指定添加样式元素的属性。
  • 属性(Properties)
    改变 HTML 元素样式的途径。(本例中 color 就是<p> 元素的属性。)
  • 属性的值(Property value)
    在属性的右边,冒号后面即属性的值.

注意其他重要的语法:
每个规则集(除了选择器的部分)都应该包含在成对的大括号里({})。
在每个声明里要用冒号(:)将属性与属性值分隔开。
在每个规则集里要用分号(;)将各个声明分隔开。
如果要同时修改多个属性,只需要将它们用分号隔开,就像这样:

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

5.2 多元素选择

选择多种类型的元素并为它们添加一组相同的样式。将不同的选择器用逗号分开。例如:

p, li, h1 {
  color: red;
}

5.3 不同类型的选择器

选择器有许多不同的类型。上面只介绍了元素选择器,用来选择 HTML 文档中给定的元素。但是选择操作可以更加具体。常用的选择器类型:
选择器类型
更多选择器类型请参考选择器

5.3 字体和文本

注意:中文字体文件较大,不适合直接用于 Web Font。

编写style.css:
1、找到之前Google Font 输出的地址以<link>元素形式添加在index.html的文档头(head元素之间)。

 <link href="https://fonts.font.im/css?family=Open+Sans" rel="stylesheet" type="text/css"> 

在这里插入图片描述
以上代码为当前网页下载 Open Sans 字体,从而使自定义 CSS 中可以对 HTML 元素应用这个字体。
2、删除 style.css 文件中已有的规则。(删除red属性)
3、在style.css中添加如下代码:

html {
  /* px 表示 “像素(pixels)”: 基础字号为 10 像素 */
  font-size: 10px;
  /* Google fonts 输出的 CSS */
  font-family: 'Open Sans', sans-serif;
}

在 Google Fonts 找到的字体替代 font-family 中的占位行。( font-family 意味着你想要你的文本使用的字体。)这条规则首先为整个页面设定了一个全局字体和字号( <html> 是整个页面的父元素,它所有的子元素都会继承相同的 font-size 和 font-family)。
注:/**/ 不可嵌套CSS 不接受 // 注释。
4、为文档体内的元素(<h1>、<li> 和 <p>)设置字号。将标题居中显示,并为正文设置行高和字间距,从而提高页面的可读性。

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

p, li {
  font-size: 16px;
  /* line-height 后而可以跟不同的参数,如果是数字,就是当前字体大小乘上数字 */
  line-height: 2;
  letter-spacing: 1px;
}

可以随时调整这些 px 值来获得满意的结果

5.4 一切皆盒子

编写CSS是围绕一个个盒子展开的——设置尺寸、颜色、位置,等等。页面里大部分 HTML 元素都可以被看作若干层叠的盒子。
CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性:

  • padding:即内边距,围绕着内容(比如段落)的空间。
  • border:即边框,紧接着内边距的线。
  • margin:即外边距,围绕元素外部的空间。

还有类似下列的一些属性
在这里插入图片描述

5.5 添加CSS布局——编写style.css

完整的style.css如下

html {
    /* px 表示 “像素(pixels)”: 基础字号为 10 像素 */
    font-size: 10px;
    /* Google fonts 输出的 CSS */
    font-family: 'Open Sans', sans-serif;
    /*更改页面颜色*/
    background-color: #00539F;
  }

  h1 {
      /*标题居中显示*/
      font-size: 60px;
      text-align: center;
      /*定位页面主标题并添加样式*/
      /*通过设置 margin: 0; 来覆盖默认样式。*/
      margin: 0;
      padding: 20px 0;
      color: #00539F;
      text-shadow: 3px 3px 1px black;
  }

  p, li {
    font-size: 16px;
    /* line-height 后而可以跟不同的参数,如果是数字,就是当前字体大小乘上数字 */
    line-height: 2;
    letter-spacing: 1px;
  }

  /*文档体格式设置*/
  body {
    width: 600px;
    margin: 0 auto;
    background-color: #FF9500;
    padding: 0 20px 20px 20px;
    border: 5px solid black;
  }

  /*图像居中*/
  img {
    display: block;
    margin: 0 auto;
  }

代码解释:
在这里插入图片描述

text-shadow 属性,它可以为元素中的文本提供阴影。四个值含义如下:
在这里插入图片描述

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

效果预览
在这里插入图片描述

6. JavaScript基础

JavaScript(缩写:JS)是一门完备的 动态编程语言。当应用于 HTML 文档时,可为网站提供动态交互特性。

JavaScript 的应用场合极其广泛,简单到幻灯片、照片库、浮动布局和响应按钮点击,复杂到游戏、2D/3D 动画、大型数据库驱动程序等等。

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

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

6.1 HelloWorld

在页面中添加一些基本的 JavaScript 脚本来建造一个 “Hello world!” 示例:
1、在scripts文件夹下新建main.js。添加如下代码
main.js把页面的标题改成了 “Hello world!” 。首先用 querySelector() 函数获取标题的引用,并把它储存在 myHeading 变量中。

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

2、在 index.html 文件</body> 标签前的新行添加以下代码。
与CSS的 link 元素类似,将 JavaScript 引入页面以作用于 HTML(以及 CSS 等页面上所有内容)

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

在这里插入图片描述
效果:
在这里插入图片描述

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

6.2 JavaScript快速入门

6.2.1 变量(大小写敏感)

声明变量 关键字 let或var:let myVariable = ‘李雷’;
变量的数据类型如下:
在这里插入图片描述

6.2 注释

/*
这里的所有内容
都是注释。
*/

// 这是一条注释。

6.3 运算符

在这里插入图片描述
在这里插入图片描述

6.4 条件语句和函数

条件语句:if…else 和java一样
函数举例:

function multiply(num1, num2) {
  let result = num1 * num2;
  return result;
}

变量作用域这些也参考java语言或者参考JavaScript教程

6.4 事件

事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。最简单的事件是 点击事件,鼠标的点击操作会触发该事件。 可尝试将下面的代码输入到控制台,然后点击页面的任意位置:

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

//上面的代码等价于
let myHTML = document.querySelector('html');
myHTML.onclick = function() {};
}

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

6.3 完善实例网页

6.3.1 添加一个图像切换器

使用新的 DOM API为网页添加一张图片,用 JavaScript 使图片在点击时进行切换。
1、找一张尺寸差不多的图片firefox2.png
2、修改main.js文件:(删除 “hello world” 脚本)完整如下:

//获取<img>元素的引用,存放在myImage变量
let myImage = document.querySelector('img');
//绑定onclick()事件
myImage.onclick = function() {
	//获取图片的src属性
    let mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/firefox-icon.png') {
    	//修改src路径
      myImage.setAttribute('src', 'images/firefox2.png');
    } else {
      myImage.setAttribute('src', 'images/firefox-icon.png');
    }
}

3、刷新浏览器,点击图片完成切换
在这里插入图片描述

6.3.2 添加个性化欢迎信息

在用户初次进入站点时将网页的标题改成一段个性化欢迎信息(即在标题中添加用户的名字)。名字信息会由 Web Storage API 保存下来,即使用户关闭页面之后再重新打开,仍可得到之前的信息。还会添加一个选项,可以根据需要改变用户名字以更新欢迎信息。
1、修改index.html,在<script>标签前添加代码,将在页面底部显示一个“切换用户”字样的按钮:

<button>切换用户</button>

在这里插入图片描述

2、修改main.js
请参考localStorage API

let myImage = document.querySelector('img');

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

//获取新按钮和标题的引用,保存至变量中
let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1');

//setUserName函数设置个性化欢迎信息
function setUserName() {
    //promp函数弹出对话框
    let myName = prompt('请输入你的名字');
    //检查用户是否输入了 null 或者空名字:
    if (!myName || myName === null) {
        setUserName();
    } else {
        /*调用 localStorage API ,它可以将数据存储在浏览器中供后续获取。用 localStorage 的 setItem() 函数来创建一个'name' 数据项,并把 myName 变量复制给它。*/
        localStorage.setItem('name', myName);
        //将h1的textContent设置成字符串+myName
        myHeading.textContent = 'Mozilla 酷毙了,' + myName;       
    }
}

/* 按钮设置 onclick 事件处理器。按钮按下时运行 setUserName() 函数。*/
myButton.onclick = function() {
    setUserName();
}

在这里插入图片描述
效果图

7. 发布网站

7.1 获取主机服务和域名

参考互联网配套设施 FTP软件等
花钱购置:
1、主机服务—— 在主机服务提供商的web服务器上租用文件空间。将网站的文件上传到这里,然后服务器会提供 Web 用户需求的内容。
2、域名——一个可以让人们访问的独一无二的地址,比如 http://www.mozilla.org,或 http://www.bbc.co.uk 。可以从域名注册商租借域名 。

需要一个文件传输协议(FTP)程序来将网站文件上传到服务器。不同的 FTP 程序涵盖了不同的范围, 但是通常需要使用主机服务提供商给你的详细信息(比如用户名、密码、主机名)登录到 Web 服务器 。然后程序在两个窗口里分别显示本地文件和服务器文件,这样你可以在它们之间进行传输:(注:使用FTP不再是一个好方法了,了解即可,参考将文件上传到网络服务器
在这里插入图片描述
寻找主机服务和域名:

  • 要找到主机公司和域名注册商,只需要搜索 “网络主机服务” 和 “域名” 来找到一家出售域名的公司。 所有这种类型的公司都允许你查看你想要的域名是否可用。
  • 有一些免费服务比如 NeocitiesBlogspot ,和 Wordpress 。 一分钱一分货. 免费服务大部分也不需要 FTP 软件来上传文件——只需要将文件拖入到它们网页的界面里。

7.2 使用在线工具如GitHub或Google App Engine

有一些工具能在线发布网站 :

  • GitHub——版本控制系统
    GitHub 有一个非常有用的特点叫GitHub pages ,允许你将网站代码放在网上。
    发布完成之后就可以在线访问,测试网站如下:https://wengcanbin1.github.io/test-site/
  • Google App Engine是一个让你可以在Google的基础架构上构建和运行应用的强劲平台——无论你是需要从头开始构建多级web应用还是托管一个静态网站。参阅How do you host your website on Google App Engine?以获取更多信息。

划重点:TM的免费,够自己学习用的了,GitHub开源就开源吧

7.3 使用像 Thimble 的基于 Web 的集成开发环境

有许多web应用能够仿真一个网站开发环境。可以在这种应用——通常只有一个标签页——里输入 HTML、CSS 和 JavaScript 代码然后像显示网页一样显示代码的结果。通常这些工具都很简单,对学习很有帮助,而且至少有免费的基本功能,它们在一个独特的网址显示你提交的网页。不过,这些应用的基础功能很有限,而且应用通常不提供空间来存储图像等内容。

使用一下以下几种工具,看看最喜欢哪一个:

在这里插入图片描述

8. Web如何工作(流程)——复习计算机网络

这部分内容描述了在计算机或手机上通过浏览器访问网页时发生了什么。(有什么交互过程)

8.1 客户端和服务端

连接到互联网的计算机被称作客户端和服务器。两者简单交互图表:
在这里插入图片描述

  • 客户端是典型的Web用户入网设备(比如,你连接了Wi-Fi的电脑,或接入移动网络的手机)和设备上可联网的软件(通常使用像 Firefox 和 Chrome的浏览器)。
  • 服务器是存储网页,站点和应用的计算机。当一个客户端设备想要获取一个网页时,一份网页的拷贝将从服务器上下载到客户端机器上来在用户浏览器上显示。

8.2 其他部分

  • 网络连接:允许你在互联网上发送和接受数据。(可以理解为信道)
  • TCP/IP:传输控制协议和因特网互连协议是定义数据如何传输的通信协议。
  • DNS:域名系统服务器像是一本网站通讯录。当你在浏览器内输入一个网址时,浏览器获取网页之前将会查看域名系统。浏览器需要找到存放你想要的网页的服务器,才能发送 HTTP 请求到正确的地方。就像你要知道商店的地址才能到达那。
  • HTTP: 超文本传输协议是一个定义客户端和服务器间交流的语言的协议。(理解为约定)
  • 组成文件:一个网页由许多文件组成:
    代码:网页大体由 HTML、CSS、JavaScript组成。
    资源:这是其他组成网页的东西的集合,比如图像、音乐、视频、Word文档、PDF文件。

8.3 往浏览器中输入网址发生了什么?

1、浏览器在域名系统(DNS)服务器上找出存放网页的服务器的实际地址。
2、浏览器发送 HTTP 请求信息到服务器来请拷贝一份网页到客户端。这条消息,包括其他所有在客户端和服务器之间传递的数据都是通过互联网使用 TCP/IP 协议传输的。
3、服务器同意客户端的请求后,会返回一个“200 OK”信息,意味着“你可以查看这个网页,给你~”,然后开始将网页的文件以数据包的形式传输到浏览器。
4、浏览器将数据包聚集成完整的网页然后将网页呈现给你。

8.4 DNS解析

DNS解析域名——>IP 地址
域名系统(DNS):是将你输入浏览器的地址(像 “mozilla.org”)与实际 IP 地址相匹配的特殊的服务器。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值