百度前端课程笔记-1概述

文本编辑器：文本编辑器（如 Visual Studio Code、Sublime Text、Atom 、GNU Emacs 或者 VIM ），或混合编辑器（ Dreamweaver 或 WebStorm）
网络浏览器：用以测试代码。目前，最常用的浏览器是 Firefox 、Chrome、Opera、Safari、Internet Explorer 和 Microsoft Edge。

你还应该测试你的网站在移动设备和你的目标受众可能仍在使用的任何旧浏览器（如 IE 8-10）上的表现。Lynx，一个基于文本的终端网络浏览器，对于查看视力障碍用户对你的网站的体验是非常好的。
图形编辑器：如 GIMP 、Figma 、Paint.NET 、Photoshop 、Sketch 或 XD ，为你的网页制作图像或图形。
版本控制系统：用来管理服务器上的文件，与团队合作开展项目，共享代码和资产，避免编辑冲突。现在，Git 是最流行的版本控制系统，还有 GitHub 或 GitLab 托管服务。
FTP 工具：老式 Web 托管账户，以管理服务器上的文件（Git 正越来越多地取代 FTP 用于此目的）。有大量的 (S)FTP 程序可用，包括 Cyberduck、Fetch 和 FileZilla。
自动化构建工具，如 Webpack 、Grunt 或 Gulp ，以自动执行重复性任务，如简化代码和运行测试。
库、框架等，以加快编写常用功能。一个库往往是一个现有的 JavaScript 或 CSS 文件，它提供了现成的功能，供你在代码中使用。框架则更进一步，为你提供一个完整的系统和一些自定义的语法，让你在上面写一个 Web 应用。

文件处理

建议完全用小写字母命名文件夹和文件，不用空格
最好用连字符而不是下划线来分隔单词。对比 my-file.html 与 my_file.html

浏览器、网络服务器和编程语言对空格的处理并不一致。

例如，如果在文件名中使用空格，一些系统可能将其视为两个文件名。一些服务器会用“%20”（URL 中空格的字符代码）替换文件名中的区域，导致所有链接被破坏。

文件路径

<img src="" alt="此处是图片">

目标文件与html文件同级：src="myimg.jpg" 或 src="./myimg.jpg"
目标文件在html文件一级的文件夹 file 中： src="file/myimg.jpg"
目标文件在html文件的上级： src="../../myimg.jpg" src="../file1/myimg.jpg"

网站结构

index.html：主页内容，第一次进入网站时看到的文字和图片
images 文件夹：网站上使用的所有图片
styles 文件夹：设置内容样式的 CSS 代码
scripts 文件夹：所有用于向网站添加交互功能的 JavaScript 代码

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></html> — html 元素。该元素包含整个页面的内容，也称作根元素。
<head></head> — head 元素。该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。
<meta charset="utf-8"> — 指定文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符，基本上可以处理任何文本内容。
<title></title> — title 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
<body></body> — body 元素。期望让用户在访问页面时看到的内容。

元素

嵌套元素

 <p>My cat is <strong>very</strong> grumpy.</p>

块级元素、内联元素

块级元素：以块的形式展现 —— 相对于前面的内容会出现在新的一行，其后的内容被挤到下一行展现
- 通常用于展示页面上结构化的内容例如段落<p>、列表<ul>、导航菜单<nav>、页脚<footer>等一个以 block 形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
内联元素：通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。
- 不会导致文本换行：它通常出现在一堆文字之间例如超链接元素<a>或者强调元素<em>和<strong>

空元素

不是所有元素都拥有开始标签，内容，结束标签。

一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。

如：<img src="">

图像img

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

路径地址属性src：路径写法见文件处理-文件路径
替换文字属性alt：图像的描述内容，用于当图像不能被用户看见时显示
- 视障用户可以使用屏幕阅读器来朗读 alt 属性的内容
- 有些错误使图像无法显示

图像居中

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

body 是块级元素，占据了页面的空间并且能够赋予外边距和其他改变间距的值。而图片是内联元素，不具备块级元素的一些功能。所以为了使图像有外边距，我们必须使用 display: block 给予其块级行为。

标记文本

标题heading：<h1> ~ <h6>
段落paragraph：<p></p>
列表list：
- 无序 <ul>
- 有序 <ol>
列表下的项目 <li>

属性

属性包含元素的额外信息，这些信息不会出现在实际的内容中

属性必须包含：

一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
属性名称，后面跟着一个等于号。
一个属性值，由一对引号“ ”引起来

常用属性

padding
margin
border
width、height
background-color
text-shadow：四个值
- 水平偏移值 —— 即阴影右移的像素数（负值左移）。
- 垂直偏移值 —— 即阴影下移的像素数（负值上移）。
- 阴影的模糊半径 —— 值越大产生的阴影越模糊。
- 阴影的基色。
display

<a>的属性

<a>是锚，使被标签包裹的内容成为一个超链接

href: 声明超链接的 web 地址，当该链接被点击浏览器会跳转至 href 声明的 web 地址。例如：href="https://www.mozilla.org/"。
title: 超链接声明额外的信息。例如：title="The Mozilla homepage"当鼠标悬停在超链接上面时，这部分信息将以工具提示的形式显示。
target: 用于指定链接如何呈现出来。例如，target="_blank"将在新标签页中显示链接。如果你希望在当前标签页显示链接，忽略这个属性即可。

布尔属性

CSS基础

在html文件中引用CSS：<link href="styles/style.css" rel="stylesheet">

结构

选择器（Selector）
声明（Declaration）

一个单独的规则，如 color: red; 用来指定添加样式元素的属性。
属性（Properties）

改变 HTML 元素样式的途径。（ color 就是 <p> 元素的属性。）
属性的值（Property value）

在属性的右边，冒号后面即属性的值。

选择器

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

选择器的种类远不止于此，更多信息请参阅选择器。

多元素选择

 p, li, h1 {
   color: red;
 }

字体和文本

访问 Google Fonts 选择一种喜欢的字体。
将谷歌给你的代码行复制至文本编辑器中，以保存备用。
关于使用谷歌字体的更多细节，请参见本页面

JavaScript基础

html引用js：

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

js文件：querySelector() 函数获取标题的引用，并把它储存在 myHeading 变量中

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

变量

关键字：let var

变量的不同的数据类型：

变量	解释	示例
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');` 以及上面所有示例都是对象。

注释

/* */

运算符

运算符	解释	符号	示例
加	数字相加，或拼接字符串。	`+`	`6 + 9;"Hello " + "world!";`
减、乘、除		`-`, `*`, `/`	`9 - 3;8 * 2; //乘法在JS中是一个星号9 / 3;`
赋值运算符	为变量赋值（你之前已经见过这个符号了）	`=`	`let myVariable = '李雷';`
等于	测试两个值是否相等，并返回一个 `true`/`false` （布尔）值。	`===`	`let myVariable = 3;myVariable === 4; // false`
不等于	和等于运算符相反，测试两个值是否不相等，并返回一个 `true`/`false` （布尔）值。	`!==`	`let myVariable = 3;myVariable !== 3; // false`
取非	返回逻辑相反的值，比如当前值为真，则返回 `false`。	`!`	原式为真，但经取非后值为 `false`： `let myVariable = 3;!(myVariable === 3); // false`

函数

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

事件

 // 点击页面任何位置（使用匿名函数）
 document.querySelector('html').onclick = function() {
     alert('别戳我，我怕疼。');
 }

图像切换

 let myImage = document.querySelector('img');
 // img的onClick事件
 myImage.onclick = function() {
     let mySrc = myImage.getAttribute('src');
     // getAttribute()得到属性
     if(mySrc === 'images/firefox-icon.png') {
       myImage.setAttribute('src', 'images/firefox2.png');
     } else {
       myImage.setAttribute('src', 'images/firefox-icon.png');
     }
 }