js+html+css前端基础知识1h快速学习-CFANZ编程社区

文章目录

简介
学习

前端网站结构
html 基础
css 基础
js 基础

简介

web前端开发入门学习文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules

你需要学习以下内容：

html
css
js

学习

前端网站结构

一般性结构

- index.html 主页内容
- imgages 网站上的图片
- styles 样式文件 css
- scripts 脚本文件 js

html 基础

html 不是一门编程语言，是一种定义结构的标记语言
简单举例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

标题：

<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4>

段落：

<p>这是一个段落</p>

列表：
无序是 ul，有序是 ol

<ul>
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

链接：

<a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla Manifesto</a>

css 基础

链接 css，需要放在 html 的和之间

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

选择器介绍：

选择器	写法	备注
id 选择器	`#my-id`	`<p id="my-id">` 单一 html 中一个 id 对应一个元素
类选择器	`.my-class`	`<p class="my-class">`
属性选择器	`img[src]`	`<img src="myimage.png">`
伪类选择器	`a:hover`	如鼠标悬停在链接上时

块级元素：
div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、table、menu、pre
HTML5：header、section、article、footer等等

行内元素：
span、img、a、label、code、input、abbr、em、b、big、cite、i、q、textarea、select、small、sub、sup，strong、u
button（display：inline-block）

块级元素和行内元素区别：
块级元素一行是一块，行内元素怎么多个排在一行，行内元素不能设置 width height margin padding，行内元素依靠内容撑开
inline-block，行内块元素与行内元素属性基本相同即不能独占一行，但是可以设置width及height

js 基础

声明变量敞亮：let 或者 var，let 声明的变量作用域更小。常量是 const

数据类型：String 字符串，Number 数字，Boolean 布尔值，Array 数组，Object 对象

let myVariable = [1, '李雷', '韩梅梅', 10]

运算符：一般都和其他编程语言类似，有一些需要注意，===表示判定是否相等，!==判定是否不相等

条件语句：与其他编程语言类似

函数：

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

事件：

document.querySelector("html").addEventListener("click", function () {
  alert("别戳我，我怕疼。");
});

综合示例：

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');
    }
}