首页 > 编程札记 > 编程

HTML CSS JS基础续

阅读：评论：0

HTML CSS JS基础续

2021/03/24

处理文件

网站项目储存位置文件夹web-projects存放所有的网站项目再建一个文件夹test-site来存放第一个网站

文件名应使用连字符文件夹和文件名使用小写用短横线不用空格分隔

测试网站结构。最基本、最常见的结构是：一个主页、一个图片文件夹、一个样式表文件夹和一个脚本文件夹：

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

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

若引用的目标文件与 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 开发，代码中仍应使用正斜杠。

HTML基础

定义内容结构的标记语言

创建的 index.html 示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试页面</title></head><body><a href="">Mozilla 宣言</a><img src="images/firefox-icon.png" alt="测试图片"></body>
</html>

标记列表通常包括至少两个元素。最常用的列表类型为：

无序列表（Unordered List）<ul>
有序列表（Ordered List）<ol>

列表的每个项目用一个列表项目（List Item）元素<li> 包围。

CSS基础

层叠样式表 Cascading Style Sheet ,CSS

样式表语言保存在styles文件夹中命名为style.css

打开 index.html文件，添加一下到文档头

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

下面是一些常用的选择器类型：

选择器名称	选择的内容	示例
元素选择器	所有指定(该)类型的 HTML 元素	`p` 选择 <p>
ID 选择器	具有特定 ID 的元素（单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID）	`#my-id` 或 <p id=“my-id”>
类选择器	具有特定类的元素（单一页面中，一个类可以有多个实例）	`.my-class` 和 `<p class=“my-class”>
属性选择器	拥有特定属性的元素	`img[src]` 选择 <img src=“myimage.png”>
伪（Pseudo）类选择器	特定状态下的特定元素（比如鼠标指针悬停）	`a:hover` 仅在鼠标指针悬停在链接上时选择 <a>

找到 Google Font 输出的地址并以<link>元素的形式添加index.html文档头中

 <link href="=Open+Sans" rel="stylesheet" type="text/css">

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

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

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

JavaScript基础

动态编程语言为网站提供动态交互特性

开发者们基于 JavaScript 核心编写了大量实用工具，可以使开发工作事半功倍。其中包括：

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

变量是存储值的容器要声明一个变量，先输入关键字 let 或 var，然后输入合适的名称：

let myVariable;

变量可以有不同的数据类型：

变量	解释	示例
String	字符串（一串文本）：字符串的值必须用引号（单双均可，必须成对）扩起来。	`let myVariable = '李雷';`
Number	数字：无需引号。	`let myVariable = 10;`
Boolean	布尔值（真 / 假）： `true`/`false` 是 JS 里的特殊关键字，无需引号。	`let myVariable = true;`
Array	数组：用于在单一引用中存储多个值的结构。	`let myVariable = [1, '李雷', '韩梅梅', 10];` 元素引用方法：`myVariable[0]`, `myVariable[1]` ……
Object	对象：JavaScript 里一切皆对象，一切皆可储存在变量里。这一点要牢记于心。	`let myVariable = document.querySelector('h1');` 以及上面所有示例都是对象。

添加图像切换器

用新的 DOM API 为网页添加另一张图片，并用 JavaScript 使图片在点击时进行切换。

首先，找到另一张你想要在你的页面上展示的图片，且尺寸与第一张图片尽可能相同。
将这张图片储存在你的images目录下。
将图片重命名为’firefox2.png’（去掉引号）。

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

let myImage = document.querySelector('img');lick = function() {let mySrc = Attribute('src');if(mySrc === 'images/firefox-icon.png') {myImage.setAttribute('src', 'images/firefox2.png');} else {myImage.setAttribute('src', 'images/firefox-icon.png');}
}

保存所有文件并用浏览器打开 index.html 。点击图片可以发现它能够切换了！

这里首先把 <img> 元素的引用存放在 myImage 变量里。然后将这个变量的 onclick 事件与一个匿名函数绑定。每次点击图片时：

获取这张图片的 src 属性值。
用一个条件句来判断src的值是否等于原始图像的路径:
1. 如果是，则将 src 的值改为第二张图片的路径，并在 <img>内加载该图片。
2. 如果不是（意味着它已经修改过）, 则把 src 的值重新设置为原始图片的路径，即原始状态。

万维网是如何工作的

网络连接: 允许你在互联网上发送和接受数据。基本上和你家到商店的街道差不多。
TCP/IP: 传输控制协议和因特网互连协议是定义数据如何传输的通信协议。这就像你去商店购物所使用的交通方式，比如汽车或自行车（或是你能想到的其他可能）。
DNS: 域名系统服务器像是一本网站通讯录。当你在浏览器内输入一个网址时，浏览器获取网页之前将会查看域名系统。浏览器需要找到存放你想要的网页的服务器，才能发送 HTTP 请求到正确的地方。就像你要知道商店的地址才能到达那。
HTTP: 超文本传输协议是一个定义客户端和服务器间交流的语言的协议（protocol ）。就像你下订单时所说的话一样。
组成文件:一个网页由许多文件组成，就像商店里不同的商品一样。这些文件有两种类型：
- 代码 : 网页大体由 HTML、CSS、JavaScript组成，不过你会在后面看到不同的技术。
- 资源 : 这是其他组成网页的东西的集合，比如图像、音乐、视频、Word文档、PDF文件。

当你在浏览器里输入一个网址时（在我们的例子里就是走向商店的路上时）：

浏览器在域名系统（DNS）服务器上找出存放网页的服务器的实际地址（找出商店的位置）。
浏览器发送 HTTP 请求信息到服务器来请拷贝一份网页到客户端（你走到商店并下订单）。这条消息，包括其他所有在客户端和服务器之间传递的数据都是通过互联网使用 TCP/IP 协议传输的。
服务器同意客户端的请求后，会返回一个“200 OK”信息，意味着“你可以查看这个网页，给你～”，然后开始将网页的文件以数据包的形式传输到浏览器（商店给你商品，你将商品带回家）。
浏览器将数据包聚集成完整的网页然后将网页呈现给你（商品到了你的门口 —— 新东西，好棒！）。